detaly

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    const stored = await read($, tabAtom)
    const closed = await read($, closedAtom)
    const scene = demo?.scene
    const isMini = scene ? scene === 'mini' : await read($, miniAtom)
    const tabs = groups.filter(g => g.isSelf || !closed.includes(g.id))
    const self = tabs.find(g => g.isSelf)
    const active = scene
      ? ['all', 'info', 'tools'].includes(scene) ? 'all' : selfId
      : !isMini && (stored === 'all' || tabs.some(g => g.id === stored && !g.isSelf)) ? stored : selfId
    // this chat's tab with nothing in it: the band stays away (/detaly, or a job, brings it); minimized, its top row
    // stays, a strip of the session's figures and ▴ Tabs
    if (!isMini && active === selfId && !self?.rows.length) return next(e)
    const shown = active === 'all' ? tabs.filter(g => g.rows.length > 0) : tabs.filter(g => g.id === active)
    const all = shown.flatMap(g => g.rows)
    const shownSpent = all.find(r => r.spent)?.id
    // A card shown for good, or revealed while hovered (the engine refuses a hover that reveals a card already shown):
    // by its keyed Box, or by a hover group (`scope`) when it sits elsewhere. A card sits after what it covers: a Box
    // drawn later paints over an earlier one, so a card among the rows had the rows under it show through.
    const shownOr = (isShown: boolean, scope?: string) =>
      isShown ? { display: 'flex' as const } : { display: 'none' as const, hover: { display: 'flex' as const, ...(scope ? { scope } : {}) } }
    let shownCut: string | undefined // set once the name column's width is known

    const { Box, Text, Button } = $.ui.resolve(e)
    const ui = $.ui.resolve(e)
    const Client = 'Client' in ui ? ui.Client : undefined // the pages' column, a surface module (desktop, terminal)
    // by the surface: the element table answers any name ('Svg' in it is true on the terminal too)
    const Svg = e.surface === 'desktop' || e.surface === 'mobile' ? $.ui.resolve(e).Svg : undefined
    // Columns: icon, name (under a fifth of the band; one line, the whole on hover), bar (the rest; a counted row's
    // numbers inside it), time (right-aligned, as wide as its longest text, 12 to 24). Every row is two lines tall, or one
    // when they overflow (below).
    const tailW = Math.max(12, Math.min(24, Math.max(0, ...all.map(r => r.tail.length))))
    const nameW = Math.max(12, Math.min(22, Math.floor(e.props.bodyColumns * 0.18)))
    const isCut = (t: string) => (Svg ? namePx(t) > nameW * CELL_PX : t.length > nameW)
    shownCut = all.find(r => isCut(r.title))?.id
    // The header (the tab row and its gap; minimized, ▴ Tabs) and the items under it: as tall as they are, up to the
    // band's rows (and half the screen) less one: a desktop's rows run a few pixels taller than the engine counts
    // (the tabs' native buttons), and a band past its room in pixels scrolls under the wheel. Past the room, pages,
    // their numbers at the right (three cells off the bar). Every row has an explicit height: a desktop counts a margin
    // in cells across (~8 px), not rows (~19 px).
    const head = isMini ? 1 : 2
    const half = e.viewport?.rows ? Math.floor(e.viewport.rows / 2) : 99
    const room = Math.max(2, Math.min(e.props.maxRows || 99, half) - head - 1)
    // A job row is two lines tall, one (a thin bar) when the two-line rows overflow the room. Pages hold at most
    // PAGE_JOBS rows and the room's lines; a page that opens inside a chat's rows repeats its heading (in All), and a
    // heading never ends a page.
    const isAll = active === 'all'
    const thin = shown.reduce((n, g) => n + 2 * g.rows.length + (isAll ? 1 : 0), 0) > room
    const rowH = thin ? 1 : 2
    type Slot = { g: Group; r?: Row } // a chat's heading (no r) or one of its rows
    const pages: Slot[][] = []
    let cur: Slot[] = []
    let used = 0
    let jobs = 0
    for (const g of shown) {
      g.rows.forEach((r, i) => {
        const lead = isAll && (i === 0 || !cur.length) ? 1 : 0 // a heading before a chat's first row, atop a page
        if (cur.length && (used + lead + rowH > room || jobs === PAGE_JOBS)) {
          pages.push(cur)
          cur = []
          used = 0
          jobs = 0
        }
        if (isAll && (i === 0 || !cur.length)) {
          cur.push({ g })
          used += 1
        }
        cur.push({ g, r })
        used += rowH
        jobs++
      })
    }
    if (cur.length) pages.push(cur)
    const hasMore = pages.length > 1
    const barW = Math.max(16, e.props.bodyColumns - ICON_W - nameW - tailW - 2 * 3 - (hasMore ? 3 : 0))
    const px = Math.floor(barW * CELL_PX) - 2
    const icon = (r: Row) => {
      if (!r.isTimer || r.state !== 'run') return <Text color={COLOR[r.state]}>{ICON[r.state]}</Text>
      if (Svg) {
        const alt = r.f === undefined ? 'running' : `${Math.floor(r.f * 100)} %`
        return <Svg source={svgRing(r.f, HEX[r.state])} alt={alt} width={14} height={14} />
      }
      const glyph = r.f === undefined ? '◌' : '○◔◑◕●'[Math.min(4, Math.round(r.f * 4))]
      return <Text color={COLOR[r.state]}>{glyph}</Text>
    }
    // The bar: a running timer's animated wait, or a counted bar with its percent and counts inside it.
    const middle = (r: Row) => {
      const barH = thin ? THIN_H : BAR_H // not 'h': that is the JSX factory
      if (r.isTimer && r.state === 'run') {
        const alt = r.f === undefined ? 'waiting' : `${Math.floor(r.f * 100)} % of the wait`
        if (Svg) return <Svg source={svgWait(px, barH, r.f)} alt={alt} width={px} height={barH + 2 * padOf(barH)} />
        if (r.f !== undefined) return <Text color={COLOR.run} dimColor>{'━'.repeat(Math.floor(r.f * barW)).padEnd(barW, '─')}</Text>
        return <Text color="subtle">{'┄'.repeat(barW)}</Text>
      }
      const f = r.f
      if (f === undefined) return <Text>{''}</Text>
      const pct = `${Math.floor(f * 100)} %`
      const counts = r.isTimer ? '' : r.counts
      if (Svg) {
        const label = r.isTimer ? '' : pct // a finished timer: a plain full bar
        return <Svg source={svgCounted(px, barH, f, r.state, label, counts)} alt={[pct, counts].filter(Boolean).join('  ')} width={px} height={barH + 2 * padOf(barH)} />
      }
      const textW = r.isTimer ? 0 : pct.length + (counts ? counts.length + 2 : 0) + 2 // a space each side
      const label = (
        <Box width={textW} justifyContent="center">
          <Text>
            <Text bold dimColor={r.state === 'done'}>{pct}</Text>
            <Text dimColor>{counts ? `  ${counts}` : ''}</Text>
          </Text>
        </Box>
      )
      const n = Math.floor(f * barW)
      const leftW = Math.max(0, Math.floor((barW - textW) / 2))
      const line = (from: number, len: number) => {
        const k = Math.min(len, Math.max(0, n - from))
        return (
          <Text>
            <Text color={COLOR[r.state]}>{'━'.repeat(k)}</Text>
            <Text color="subtle">{'─'.repeat(len - k)}</Text>
          </Text>
        )
      }
      return (
        <Box flexDirection="row">
          {line(0, leftW)}
          {textW ? label : null}
          {line(leftW + textW, Math.max(0, barW - leftW - textW))}
        </Box>
      )
    }
    // this chat's rows keep their own ids as keys; another chat's are prefixed with it
    const keyOf = (g: Group, r: Row) => (g.isSelf ? r.id : `${g.id}:${r.id}`)
    const rowView = (g: Group, r: Row) => (
      <Box key={keyOf(g, r)} flexDirection="row" alignItems="center" gap={2} height={rowH} {...(r.spent ? { hover: { scope: `ds-${keyOf(g, r)}` } } : {})}>
        {/* hovered (the row's Box is the scope), a ✖ takes the icon's place: the cell clips, and the hidden ✖
            before the icon, as wide as the cell, is revealed and pushes the icon out past the edge. This chat's
            finished row leaves at once, its running one after "stop tracking?"; another chat's is hidden here. */}
        <Box width={ICON_W} flexShrink={0} flexDirection="row" alignItems="center" overflow="hidden">
          <Box width={ICON_W} flexShrink={0} justifyContent="center" display="none" hover={{ display: 'flex' }}>
            {/* a desktop draws its own button, child colours ignored: the label's colour goes through hover */}
            <Button
              key={`x-${keyOf(g, r)}`}
              plain
              label="✖"
              hover={{ color: 'error', bold: true }}
              onPress={() => (g.isSelf && !isOver(r) ? ask($, r.id) : dismiss($, g.id, r.id))}
            />
          </Box>
          <Box width={ICON_W} flexShrink={0} alignItems="center" justifyContent="center">
            {icon(r)}
          </Box>
        </Box>
        {/* hovered, the name lights its group: the whole name in a card at the row's end, over the row */}
        <Box width={nameW} alignItems="center" hover={{ scope: `dn-${keyOf(g, r)}` }}>
          <Text bold dimColor={r.state === 'done'} wrap="truncate-end">
            {r.title}
          </Text>
        </Box>
        <Box width={barW}>