session-board

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    if (e.surface !== 'desktop' && e.surface !== 'terminal') {
      const { Markdown } = $.ui.resolve(e)
      return <Markdown text={renderMarkdown(await read($, ledger), 'ru').slice(0, 9000)} />
    }
    const els = $.ui.resolve(e)
    const L = await read($, ledger)
    const v = resolveView(await read($, view), L.task?.phase)
    const d: Data = {
      ledger: L,
      view: v,
      expanded: await read($, expanded),
      status: await read($, status),
      // live events redraw the pane on every tool call: read them only where they show
      live: v === 'log-turns' ? await read($, live) : [],
      qa: v === 'ask' ? await read($, qa) : [],
      answering: await read($, answering),
      diff: v === 'log-files' ? await read($, diff) : null,
      verdict: v === 'review' ? await read($, verdict) : emptyVerdict(),
      notes: await read($, notes),
      editing: await read($, editing),
      openTasks: v === 'task' && (!L.task || L.task.mode === 'free') ? await read($, openTasks) : [],
      policy: await read($, policy),
      lean: await read($, lean),
      debt: v === 'task' ? await read($, debt) : null,
      sent: (await read($, sent)).map(x => x.key),
      width: Math.max(24, e.props.bodyColumns - 1),
      ...(e.surface === 'desktop' ? { svg: $.ui.resolve(e).Svg } : {}),
    }
    const a = boardActions($)
    try {
      return Board(els, d, a)
    } catch (err) {
      const msg = `${(err as Error).name}: ${(err as Error).message}\n${((err as Error).stack ?? '').split('\n').slice(0, 6).join('\n')}`
      $.clock.after(0, () => void reportRenderError($, d.view, msg))
      const { Text } = els
      return <Text color="#ff6b6b" wrap="wrap">Доска не смогла нарисовать вид «{d.view}»: {msg}</Text>
    }
  })

export function Board(els: Els, d: Data, a: Actions) {
  const { Box } = els
  const body = d.view === 'task' ? TaskView(els, d, a)
    : d.view === 'work' ? WorkView(els, d, a)
      : d.view === 'review' ? ReviewView(els, d, a)
        : d.view === 'ask' ? AskView(els, d, a)
          : LogView(els, d, a)
  return (
    <Box flexDirection="column" paddingRight={1}>
      {Header(els, d, a)}
      {body}
    </Box>
  )
}

export function Header(els: Els, d: Data, a: Actions) {
  const { Box, Text, Button } = els
  const s = d.status
  const tab = d.view.startsWith('log') ? 'log' : d.view
  const note =
    s.phase === 'mapping' ? `⟳ ставлю на карту: ${s.note.includes(',') ? 'ходы' : s.note === 'вся сессия' ? '' : 'ход'} ${s.note}`
      : s.phase === 'error' ? '⚠ карта не обновилась'
        : `${phaseLabel(d.ledger.task?.phase ?? 'none', d.ledger.task?.mode === 'free')}${d.ledger.turns.length ? ` · ход ${d.ledger.turns.at(-1)?.n ?? 0}` : ''}`
  return (
    <Box flexDirection="column">
      <Box flexDirection="row" flexWrap="wrap" columnGap={2} rowGap={SPACE.item}>
        {VIEWS.map(v => (
          <Button key={`view-${v.id}`} plain label={v.id === 'review' && d.ledger.task?.mode === 'free' ? 'Итог' : v.label} hotkey={v.key} dimColor={tab !== v.id} onPress={() => a.setView(v.id)} />
        ))}
      </Box>
      <Box marginTop={SPACE.item}>
        {Split(els, 'status', <Text dimColor wrap="truncate-end">{note}</Text>,
          <Button key="refresh" plain label="↻ обновить" dimColor onPress={() => a.refresh()} />)}
      </Box>
      {d.notes.length ? (
        <Box flexDirection="column" marginTop={SPACE.item} borderStyle="round" borderColor={BLUE} paddingX={1}>
          <Text wrap="wrap">{Tag(els, 'для Claude  ', BLUE)}заметок: {d.notes.length}. Уйдут с твоим следующим сообщением.</Text>
          {d.notes.slice(-3).map((n, i) => <Text key={`note-${i}`} dimColor wrap="wrap">• {n}</Text>)}
          {ActionBar(els, 'notes-a', [Once(els, d, 'notes', <Button key="notes-send" label="Отправить сейчас" onPress={() => a.sendNotes()} />)])}
        </Box>
      ) : null}
    </Box>
  )
}

function Split(els: Els, key: string, left: unknown, right: unknown) {
  const { Box } = els
  return (
    <Box key={key} flexDirection="row" justifyContent="space-between" alignItems="flex-start" columnGap={2}>
      <Box flexShrink={1} minWidth={0}>{left as never}</Box>
      <Box flexShrink={0}>{right as never}</Box>
    </Box>
  )
}

function Tag(els: Els, label: string, color: string) {
  const { Text } = els
  return <Text color={color} bold>{label}</Text>
}

function ActionBar(els: Els, key: string, buttons: unknown[], indent = 0, top: number = SPACE.item) {
  const { Box } = els
  return (
    <Box key={key} flexDirection="row" flexWrap="wrap" columnGap={2} rowGap={SPACE.item} paddingLeft={indent} marginTop={top}>
      {buttons.filter(Boolean) as never}
    </Box>
  )
}