katharsis

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e);
    if (!S.loaded) await refresh($);
    if (!S.active) return next(e);
    // Another plugin's band draws beneath this one rather than being replaced.
    const below = await next(e);
    const { Box, Text, Button } = $.ui.resolve(e);
    const present = byCode(prefixes());
    const most = Math.max(0, ...present.map((p) => ofPrefix(p).length));
    // Border 2, header 1, band row 1; what is left holds titles, at most 10.
    const listRows = Math.max(1, Math.min(REVEAL_MAX, most, e.props.maxRows - 4));
    const revealHeight = listRows + 3;
    const titleWidth = Math.max(10, e.props.bodyColumns - 4);
    // The hint goes when the row would not fit, as beside a docked pane: a row
    // too wide shrinks its Texts to nothing rather than cutting the tail.
    const labels = present.map((p) => `${p}:${ofPrefix(p).length}`).join('|');
    const hint = `▸ ${TITLE} · open | use /${PANE} · ${labels}`.length <= e.props.bodyColumns ? `| use /${PANE} ·` : '·';
    const openType = (p: string, code = '') => {
      S.query = code;
      S.selected = code;
      S.prefix = p;
      void openPane($).then(() => $.ui.invalidate('ui.render'));
    };
    const band = (
      <Box flexDirection="column">
        {(S.paneOpen ? [] : present).map((p) => {
          const items = ofPrefix(p);
          const shown = items.slice(-listRows);
          // The code cell fits the widest code shown, so every title starts in one column.
          const codeWidth = Math.max(0, ...shown.map((i) => i.code.length));
          return (
            <Box
              key={`reveal-${p}`}
              display="none"
              hover={{ scope: `kband-${p}`, display: 'flex' }}
              flexDirection="column"
              height={revealHeight}
              overflow="hidden"
              borderStyle="round"
              paddingX={1}
            >
              <Box key={`reveal-head-${p}`} flexDirection="row" gap={2}>
                <Text bold>{`${groupName(p)} · ${items.length}`}</Text>
                {items.length > shown.length ? <Text dimColor>{`latest ${shown.length}`}</Text> : null}
                <Button key={`reveal-all-${p}`} label={`list all ${items.length} ▸`} plain onPress={() => openType(p)} />
              </Box>
              {shown.map((i) => (
                // The row leads with the glyph its drawer row carries.
                <Box key={`reveal-row-${i.code}`} flexDirection="row">
                  <Box key={`reveal-glyph-${i.code}`} width={2} flexShrink={0}>{paint(Text, glyph(i))}</Box>
                  <Button
                    key={`reveal-${i.code}`}
                    label={clip(`${i.code.padEnd(codeWidth)}  ${i.title}`, titleWidth - 2)}
                    plain
                    onPress={() => openType(p, i.code)}
                  />
                </Box>
              ))}
            </Box>
          );
        })}
        <Box key="band-row" flexDirection="row" gap={1} height={1} overflow="hidden">
          <Box key="band-head" flexDirection="row" gap={1} flexShrink={0}>
            <Text color={TEAL}>{`▸ ${TITLE}`}</Text>
            <Text dimColor>·</Text>
            <Button
              key="open"
              label="open"
              plain
              hover={{ scope: 'kband-open', underline: true }}
              // An empty query, as /kdrawer with no argument sends, so a code
              // the band opened last time does not stay listed past Status.
              onPress={() => {
                void openPane($, '').then(() => refresh($)).then(() => $.ui.invalidate('ui.render'));
              }}
            />
            <Text dimColor>{hint}</Text>
          </Box>
          {present.length === 0 ? <Text dimColor>no codes yet</Text> : null}
          <Box key="band-labels" flexDirection="row">
            {present.map((p, k) => (
              <Box key={`label-${p}`} flexDirection="row" flexShrink={0} hover={{ scope: `kband-${p}` }}>
                <Button
                  key={`band-${p}`}
                  label={`${p}:${ofPrefix(p).length}`}
                  plain
                  dimColor
                  hover={{ scope: `kband-${p}`, bold: true }}
                  onPress={() => openType(p)}
                />
                {k < present.length - 1 ? <Text dimColor>|</Text> : null}
              </Box>
            ))}
          </Box>
        </Box>
      </Box>
    );
    return below ? <Box flexDirection="column">{band}{below}</Box> : band;
  }).catch(($, e, next) => next(e));

function paint(Text: ReturnType<EngineInterface['ui']['resolve']>['Text'], g: string) {
  return g === '✓' ? <Text color="success">{g}</Text> : g === '✗' ? <Text color="error">{g}</Text> : g === '!' ? <Text color="warning">{g}</Text> : <Text dimColor>{g}</Text>;
}

  on('ui.render', { component: 'Pane', requestId: PANE }, ($, e, next) => {
    if (!S.active) return next(e);
    const T = $.ui.resolve(e);
    const { Box, Text, Button } = T;
    const redraw = () => $.ui.invalidate('ui.render');
    const rows = visible();
    const width = Math.max(20, e.props.bodyColumns);
    const present = byName(prefixes());
    const groups = byName([...new Set(rows.map((i) => i.prefix))]);
    // The pane losing focus, a click in the transcript or the prompt, closes the menu.
    if (!e.props.isFocused) S.filterOpen = S.statusOpen = false;
    // Row 2 names the filter by its code when the full name would push the
    // view toggle onto a line of its own, as in a docked pane. A Button draws
    // as `[ label ]`, the controls sit 2 apart, and the row keeps 2 of padding.
    // Past that the row wraps, and the menu drops below its last line.
    const viewLabel = S.full ? 'Show short view' : 'Show full view';
    // Status opens a menu of all, open, and resolved, with the key to the row
    // glyphs below them. Clear leaves it alone: Status is a standing
    // preference that outlives the pane, and Clear undoes one visit's search.
    const showLabel = `Status: ${S.show} ${S.statusOpen ? '▴' : '▾'}`;
    const named = S.only.length > 0 ? 'still open' : S.prefix === 'all' ? 'all types' : groupName(S.prefix);
    const controls = (filter: string) => [filter.length + 4, showLabel.length + 4, 'Clear'.length + 4, viewLabel.length + 4];
    const fits = lines(controls(`Filter: ${named} ▾`), width - 2, 2) === 1;
    const filterLabel = `Filter: ${fits ? named : S.only.length > 0 ? 'open' : S.prefix} ${S.filterOpen ? '▴' : '▾'}`;
    const menuTop = 1 + lines(controls(filterLabel), width - 2, 2);
    const menu = [
      { value: 'all', name: 'All types', n: S.items.length },
      ...present.map((p) => ({ value: p, name: groupName(p), n: ofPrefix(p).length })),
    ];
    // An inline pane's frame fits the tree, which a placed menu adds nothing
    // to, and stops at the rows the surface gave it. The tree grows to reach
    // an open menu's foot, and a menu taller than the room splits into columns.
    const inline = e.props.placement === 'inline';
    // Columns stop at what the drawer's width holds whole, and a menu still
    // taller than the room scrolls with the drawer.
    const longest = Math.max(...menu.map((f) => `● ${f.name} ${f.n}`.length));
    const room = inline ? Math.max(1, e.props.scroll.bodyRows - menuTop - 2) : menu.length;
    const across = Math.min(Math.ceil(menu.length / room), Math.max(1, Math.floor((width - 2) / (longest + 2))));
    const perColumn = Math.ceil(menu.length / across);
    // Recounted, so a split the width capped never leaves its last column empty.
    const columns = Math.ceil(menu.length / perColumn);
    // The menu reaches the Clear button's right edge, wider only for a long name.
    const reach = filterLabel.length + 4 + 2 + showLabel.length + 4 + 2 + 'Clear'.length + 4;
    const menuWidth = Math.min(width, Math.max(reach, columns * longest + (columns - 1) * 2 + 4));
    const cellWidth = Math.floor((menuWidth - 4 - (columns - 1) * 2) / columns);
    // The Status menu drops below the Status button, or from the left edge
    // when the button wrapped onto a line of its own.
    const statusMenu = SHOWS.map((s) => ({
      value: s,
      n: S.items.filter((i) => (S.prefix === 'all' || i.prefix === S.prefix) && shows(i, s)).length,
    }));
    const legend = [
      { g: '○', text: 'open, or never closes' },
      { g: '✓', text: 'answered, settled, or done' },
      { g: '✗', text: 'dismissed, dropped, or withdrawn' },
      { g: '!', text: 'corrected, title not restated' },
    ];
    const statusWidth = Math.min(width, Math.max(...legend.map((l) => l.text.length + 2), ...statusMenu.map((f) => `● ${f.value} ${f.n}`.length)) + 4);
    // A menu wider than the room right of the button shifts left to stay inside the drawer.
    // A legend line too long for the menu wraps by word, and each wrap adds a row.
    const legendRows = legend.reduce((n, l) => n + lines(l.text.split(' ').map((w) => w.length), statusWidth - 6, 1), 0);
    const menuFoot = menuTop + (S.filterOpen ? perColumn + 2 : S.statusOpen ? statusMenu.length + legendRows + 3 : 0);
    const statusLeft = Math.max(0, Math.min(width - statusWidth, lines([filterLabel.length + 4, showLabel.length + 4], width - 2, 2) === 1 ? filterLabel.length + 4 + 2 : 0));

    const body = (i: Item) => [
      closingLine(Text, i, `closed-${i.code}`),
      correctionLine(Text, i, `corrected-${i.code}`),
      backlinks(i) ? <Text key={`cited-${i.code}`} wrap="wrap" dimColor>{backlinks(i)}</Text> : null,
      i.summary ? <Text key={`sum-${i.code}`} wrap="wrap" dimColor={i.prefix === 'Q'}>{i.summary}</Text> : null,
      ...i.options.map((o) => <Text key={`opt-${i.code}-${o.key}`} wrap="wrap">{`  ${o.key}. ${o.text}`}</Text>),
      i.rec ? <Text key={`rec-${i.code}`} wrap="wrap"><Text bold>Recommended:</Text>{` ${i.rec}`}</Text> : null,
    ];

    // A row is a table line: the code, the status glyph, and the title, which
    // wraps in the cells left. Every row keeps the glyph cell, blank or not, so
    // every title starts in one column. The code cell fits the widest code
    // shown and its marker.
    const codeWidth = Math.max(0, ...rows.map((i) => i.code.length)) + 4;
    // A heading counts its type under the search and filters but not Status,
    // and for a type that closes, how many are open, so Status open never
    // reads "1 open of 1".
    const every = visible('all');
    const heading = (p: string) => {
      const of = every.filter((i) => i.prefix === p);
      const open = of.filter((i) => !isClosed(i)).length;
      return CLOSING.has(p) ? `${groupName(p)} · ${open} open of ${of.length}` : `${groupName(p)} · ${of.length}`;
    };
    // The code is a button: pressing it opens the item as a card beneath the
    // row, in a frame, and pressing it again closes the card.
    const entry = (i: Item) => {
      const open = S.selected === i.code;
      return (
        <Box key={`row-${i.code}`} flexDirection="column" marginTop={S.full ? 1 : 0}>
          <Box key={`line-${i.code}`} flexDirection="row" alignItems="flex-start">
            <Box key={`cell-code-${i.code}`} width={codeWidth} flexShrink={0}>
              <Button
                key={`pick-${i.code}`}
                label={`${open ? '▾' : '▸'} ${i.code}`}
                plain
                hover={{ scope: `kref-${i.code}`, inverse: true }}
                onPress={() => {
                  S.selected = open ? '' : i.code;
                  S.filterOpen = S.statusOpen = false;
                  redraw();
                }}
              />
            </Box>
            <Box key={`cell-status-${i.code}`} width={2} flexShrink={0}>
              {paint(Text, glyph(i))}
            </Box>
            <Box key={`cell-title-${i.code}`} flexGrow={1} flexShrink={1} minWidth={0}>
              <Text wrap="wrap">{i.title}</Text>
            </Box>
          </Box>
          {open ? (
            <Box
              key={`card-${i.code}`}
              flexDirection="column"
              borderStyle="round"
              backgroundColor="userMessageBackground"
              paddingX={1}
            >
              <Text>{paint(Text, glyph(i))}<Text color="cyan">{` ${i.code} · ${nameOf(i)}`}</Text></Text>
              {body(i)}
            </Box>
          ) : S.full ? (
            // The body starts under the title, past the code and glyph cells.
            <Box key={`body-${i.code}`} flexDirection="column" paddingLeft={codeWidth + 2}>
              {body(i)}
            </Box>
          ) : null}
        </Box>
      );
    };

    return (
      <Box flexDirection="column" width={width} minHeight={inline ? menuFoot : undefined}>
        <Box key="top" flexDirection="row">
          {'Input' in T ? (
            <Box key="q-box" flexGrow={1} flexShrink={1}>
              <T.Input
                key="q"
                label="Search"
                placeholder="code, title, body, option"
                value={S.query}
                submitLabel=""
                autoFocus
                onInput={(v) => {
                  S.query = v;
                  redraw();
                }}
                onSubmit={(v) => {
                  S.query = v;
                  redraw();
                }}
              />
            </Box>
          ) : null}
        </Box>
        <Box key="filters" flexDirection="row" flexWrap="wrap" columnGap={2} paddingRight={2}>