tg-messenger

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const prev = renderGate
    let release: () => void = () => {}
    renderGate = new Promise<void>(done => {
      release = done
    })
    await prev
    try {
    const { Box, Text, Button, Input } = $.ui.resolve(e)
    const list = await read($, messages)
    const openPalette = await read($, paletteFor)
    const draftLen = await read($, draft)
    const viewName = await read($, view)
    const dialogs = await read($, dialogList)
    const loadingNow = await read($, loading)
    // pane geometry: diff reads e.props.scroll.bodyRows/bodyColumns
    const props = (e as { props?: { scroll?: { bodyRows?: number }; bodyColumns?: number } }).props
    const cols = (props?.bodyColumns ?? e.viewport?.columns ?? 80) - 2
    const chat = viewName === 'chat'
    const composerRows = chat
      ? Math.min(5, Math.max(1, Math.ceil((draftLen + 1) / Math.max(4, cols - 4))))
      : 0
    // the engine (2.1.287) stopped stretching docked panes, so flexGrow alone
    // left the composer floating mid-pane: size the list area EXPLICITLY
    // from the pane's body height (fixed spend: top padding + header + gaps
    // (+ separator + composer in chat); bottom padding is 0 — verified flush
    // at 200x60 and 110x40). Falls back to flex when the engine reports no
    // body height.
    const fixed = chat ? 5 : 3
    const listRows = props?.scroll?.bodyRows
      ? Math.max(1, props.scroll.bodyRows - fixed - composerRows)
      : undefined
    // The engine's pointer map follows the FULL list layout, not the clipped
    // flex-end view: an overflowing list puts every click rows off (proven on
    // a live pane — header buttons press, body buttons never do). Show only
    // what fits, so the drawn layout IS the pointer layout.
    const perRows = (m: TgMessage): number => {
      const prefix = m.out ? '→ ' : m.system ? '· ' : '← '
      const lines = wrapText(prefix + m.text, Math.max(2, cols - 4)).split('\n').length
      return lines + (m.reactions?.length ? 1 : 0)
    }
    const budget = Math.max(1, (listRows ?? 35) - 2) // headroom: the open palette row
    const shown: TgMessage[] = []
    let used = 0
    for (let i = list.length - 1; i >= 0 && used < budget; i--) {
      const m = list[i] as TgMessage
      const rows = perRows(m)
      if (used + rows > budget) {
        if (i !== list.length - 1) break
        // a single message taller than the whole pane: draw its TAIL — the
        // newest row must always render, an empty list would sit here showing
        // "loading history…" forever (already-loaded history!)
        const tail = wrapText(m.text, Math.max(2, cols - 4)).split('\n').slice(-(budget - 1)).join('\n')
        shown.unshift({ ...m, text: tail })
        used = budget
        break
      }
      shown.unshift(m)
      used += rows
    }

    return (
      <Box flexDirection="column" flexGrow={1} gap={1} padding={1} paddingBottom={0}>
        {/* No <> fragments among the row children: the engine does NOT flatten
            them — a Fragment renders as one node stacking its children
            vertically, which kept the диалоги/назад buttons on their own line
            under the middle text no matter the widths. Every element is a
            direct child of the row; JSX false/undefined children are skipped. */}
        <Box gap={2}>
          <Text bold>tg</Text>
          {chat ? (
            <Text>{ready ? `— ${[cfg.profile, cfg.target].filter(Boolean).join(' · ')}` : <Text dimColor>— {reason}</Text>}</Text>
          ) : (
            <Text>— диалоги</Text>
          )}
          {chat && ready && (
            <Button
              onPress={() => {
                void update($, view, () => 'dialogs' as const)
                if (dialogs === null)
                  void spinWhile($, 'dialogs', () => loadDialogList($, cfg).catch(error =>
                    $.ui.toast(`tg-messenger: ${error instanceof Error ? error.message : String(error)}`),
                  ))
              }}
            >
              диалоги
            </Button>
          )}
          {!chat && (
            <Button onPress={() => void update($, view, () => 'chat' as const)}>← назад</Button>
          )}
          <Button role="dismiss" onPress={() => $.ui.close({ id: PANE })}>
            close
          </Button>
        </Box>
        {chat ? (
        <>
        <Box
          flexDirection="column"
          flexGrow={1}
          justifyContent="flex-end"
          overflow="hidden"
          height={listRows}
        >
          {shown.length === 0 && !loading && (
            <Text dimColor>{ready ? 'loading history…' : 'not configured — see the header'}</Text>
          )}
          {loadingNow === 'history' && (
            <Text dimColor>⏳ загружаю историю…</Text>
          )}
          {shown.map((m, i) => {
            const canReact = ready && !m.out && !m.system && m.id != null
            // the trigger is a plain Button whose LABEL is the literal "[+]"
            // (plain draws the label alone) — dim at rest, inverted under the
            // pointer; 3 cells + the 1-col gap
            const w = cols - (canReact ? 4 : 0)
            const react = (emoticon: string) => {
              const id = m.id as number
              void update($, paletteFor, () => -1)
              // a repeat pick is a no-op: the CLI toggle would turn the
              // reaction off and nothing would come back to redraw it
              if (m.reactions?.includes(emoticon)) return
              void (async () => {
                try {
                  await sendReaction($, cfg, id, emoticon)
                  await update($, messages, all => withReaction(all, id, emoticon))
                } catch (error) {
                  const message = error instanceof Error ? error.message : String(error)
                  $.ui.toast(`tg-messenger: ${message}`)
                }
              })()
            }
            const body = padLines(
              wrapText(
                m.out ? `→ ${m.text}` : m.system ? `· ${m.text}` : `← ${m.text}`,
                w,
              ),
              w,
            )
            return (
              <Box flexDirection="column" key={String(m.id ?? `i${i}`)}>
                {/* scope key MUST be a plain string: a numeric key names no
                    scope and the pointer goes inert over everything inside,
                    the [+] trigger included (engine d.ts, Box key docs) */}
                <Box gap={1}>
                  {/* the engine's Text does not re-wrap to the pane width —
                      long lines are painted clipped at the edge (tree holds the
                      text, screen loses the tail), so wrap BEFORE drawing.
                      canReact rows share the line with the [ 🙂 ] button —
                      reserve its columns; the rest use the full width. */}
                  <Box flexGrow={1} flexShrink={1}>
                    <Text dimColor={!m.out} wrap="wrap">
                      {body}
                    </Text>
                  </Box>
                  {canReact && (
                    // NOT plain: a plain button draws its label alone and the
                    // terminal's pointer hit-test never fires it (proven on a
                    // live pane — SGR click); the drawn form is `[ + ]`
                    <Button