mod-manager

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    // the band redraws on every look change: the pinned notice follows it from here
    if (pinnedVersion !== lookVersion) {
      pinnedVersion = lookVersion
      $.clock.after(0, () => void pin($).catch(err => hostDebug($, 'pin', err)))
    }
    const pieces = piecesAt(await readTexts($), 'top')
    if (e.props.hasSurvey || pieces.length === 0) return next(e)
    const { Box, Text } = $.ui.resolve(e)
    const band = bandOf({ Box: Box as Make['Box'], Text: Text as Make['Text'] }, pieces, shared, e.props.isWorking, e.surface === 'terminal' ? glyphs : 'full')
    if (band === null) return next(e)
    const below = await next(e)
    return isEmpty(below) ? band : Box({ flexDirection: 'column', children: [band, below] })
  })

export function bandOf(make: Make, pieces: readonly Piece[], look: Look, isWorking = false, glyphs: IconGlyphs = 'full'): RenderElement | null {
  if (pieces.length === 0 || (isWorking && look.whileWorking === 'hide')) return null
  const isDimmed = isWorking && look.whileWorking === 'dim'
  const justify = justifyOf(look.align)
  const sep = () => make.Text({ dimColor: true, children: [separatorOf(look)] })
  const rows =
    look.layout === 'merged'
      ? [
          make.Box({
            key: ROW_KEY,
            flexDirection: 'row',
            justifyContent: justify,
            children: [make.Text({ wrap: 'wrap', children: pieces.flatMap((p, i) => (i === 0 ? [pieceElement(make, p, look, isDimmed, glyphs)] : [sep(), pieceElement(make, p, look, isDimmed, glyphs)])) })],
          }),
        ]
      : pieces.map(p => make.Box({ key: `${ROW_KEY}:${p.name}`, flexDirection: 'row', justifyContent: justify, children: [make.Text({ wrap: 'wrap', children: [pieceElement(make, p, look, isDimmed, glyphs)] })] }))
  const padding = Number(look.padding)
  return make.Box({
    key: BAND_KEY,
    flexDirection: 'column',
    ...(padding > 0 ? { paddingX: padding } : {}),
    ...(look.box === 'none' ? {} : { borderStyle: look.box, ...borderColorProps(look.boxColor) }),
    children: rows,
  })
}

function pieceElement(make: Make, p: Piece, look: Look, isDimmed: boolean, glyphs: IconGlyphs = 'full'): RenderElement {
  const text = pieceText(p.name, p.text, look, glyphs)
  return make.Text({ ...pieceProps(p.color, look, isDimmed), children: [look.style === 'pills' ? ` ${text} ` : text] })
}

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const t = $.ui.resolve(e)
    const { Box, Text, Button } = t
    const v = await read($, view)
    const now = await $.clock.now()
    const width = Math.max(30, e.props.bodyColumns - 1)
    const bodyRows = e.props.scroll.bodyRows > 0 ? e.props.scroll.bodyRows : 40
    const isTerminal = e.surface === 'terminal'
    lastSurface = e.surface
    drawn = []

    const isOn = (n: string) => v.enabled.includes(n)
    const statusFor = (n: string) => statusOf(isOn(n), v.loaded.includes(n))
    const onCount = v.enabled.length
    const nextCount = v.enabled.filter(n => !v.loaded.includes(n)).length
    const goneCount = v.loaded.filter(n => !v.enabled.includes(n)).length
    const frames = SPINNERS[v.busy && isTerminal ? await glyphModeNow($).catch(() => 'full' as const) : 'full']
    const spinner = frames[Math.floor(now / 100) % frames.length] ?? '·'
    const quip = v.says && now < v.saysUntil ? v.says : null
    // Gob's line never carries the spinner: a new line every tick would restart his typing
    const says = gobSays({ on: onCount, total: ALL.length, changed: v.changes.length, busy: v.busy, tab: v.tab, isFocused: e.props.isFocused, quip, tour: v.tour ? tourLine(v.tour, TOUR) : null, cursor: cursorLineFor(v) })
    const mood: GobMood = v.busy ? 'think' : now < v.cheerUntil ? 'cheer' : 'idle'
    const cursorMod = modUnderCursor(v)

    // -------------------------------------------------------- rows budget
    const confirm = v.confirm && now - v.confirm.at < CONFIRM_MS ? v.confirm : null
    const hasNotice = confirm !== null || v.message !== null || v.changes.length > 0
    // header, tabs, (find, rule + strip), notice, help, one spare row
    const fixed = (header: number, detail: number) => header + 1 + (v.tab === 'mods' ? (v.isFinding || v.query ? 1 : 0) + detail + 1 : 0) + (hasNotice ? 1 : 0) + 1 + 1
    const fullHeader = isReducedMotion ? GOB_ROWS + 1 : STAGE_ROWS + 1
    let headerKind: 'full' | 'compact' = !isTerminal || bodyRows - fixed(fullHeader, 4) >= 8 ? 'full' : 'compact'
    let detailRows = 4
    if (isTerminal && headerKind === 'compact' && bodyRows - fixed(1, detailRows) < 4) detailRows = 2
    const listRows = isTerminal ? Math.max(3, bodyRows - fixed(headerKind === 'full' ? fullHeader : 1, detailRows)) : 10_000
    if (!isTerminal) headerKind = 'full'

    const parts: JSX.Element[] = []

    // ------------------------------------------------------------- header
    const stats = (
      <Text wrap="truncate-end">
        <Text color={C.green}>● {onCount} on</Text>
        {nextCount > 0 && <Text color={C.amber}>{`  ● ${nextCount} next session`}</Text>}
        {goneCount > 0 && <Text color={C.violet}>{`  ○ ${goneCount} still loaded`}</Text>}
        <Text dimColor>{`  ○ ${ALL.length - onCount} off  ·  ${v.mode === 'link' ? 'linked folders' : 'marketplace'}`}</Text>
      </Text>
    )
    const title = (
      <Box flexDirection="row" columnGap={1}>
        {/* the name and the dance key keep their width; the stats beside them give way (truncate) */}
        <Box flexShrink={0} flexDirection="row" columnGap={1}>
          {headerKind === 'compact' && <Text color={C.gob}>▐█▌</Text>}
          {Gradient(t, 'Gobworks')}
          <Button key="dance" plain hotkey="d" label="♪" dimColor onPress={() => void dance($)} />
        </Box>
        {v.busy && <Text color={C.amber} wrap="truncate-end">{`${spinner} ${v.busy}`}</Text>}
        <Box flexShrink={1}>{stats}</Box>
      </Box>
    )
    if (e.surface === 'terminal') {
      const { Client, Raster } = $.ui.resolve(e)
      if (headerKind === 'compact') {
        parts.push(title)
      } else if (isReducedMotion) {
        parts.push(
          <Box flexDirection="row" columnGap={2}>
            <Raster key="gob" columns={GOB_COLUMNS} rows={GOB_ROWS} cells={gobCells(mood === 'idle' ? 'idle' : mood)} />
            <Box flexDirection="column" justifyContent="center" flexGrow={1}>
              <Box flexDirection="row" columnGap={1}>
                <Text color={C.gob}>◄</Text>
                <Box borderStyle="round" borderColor={C.gob} paddingX={1}>
                  <Text wrap="truncate-end">{says}</Text>
                </Box>
              </Box>
            </Box>
          </Box>,
          title,
        )
      } else {
        const stage: StageProps = { says, mood, event: v.event, seq: v.seq, columns: width, rows: STAGE_ROWS, isReducedMotion, hat: hatFor(v), cursorSeq: v.cursorSeq, chip: v.chip }
        parts.push(<Client key="stage" module="./stage.tsx" props={stage} width={width} height={STAGE_ROWS} />, title)
      }
    } else {
      const { Svg } = $.ui.resolve(e)
      // the spinner stays out of the scene: a new frame each tick would restart its animations
      // the sky by the quarter hour, so the markup (and what it plays) changes only every 15 minutes
      const local = new Date(now)
      const hour = Math.floor((local.getHours() + local.getMinutes() / 60) * 4) / 4
      const scene = sceneSvg({ says, mood, event: v.event, isFresh: now - v.eventAt < 3200, seq: v.seq, isAnimated: !isReducedMotion, hat: hatFor(v), chip: v.chip, ...(isReducedMotion ? {} : { hour }) })
      const sceneWidth = Math.min(640, Math.max(280, e.props.bodyColumns * 7))
      parts.push(<Svg source={scene} alt={`Gob, the Gobworks goblin, says: ${says}`} width={sceneWidth} height={Math.round((sceneWidth * SCENE_H) / SCENE_W)} isInteractive />, title)
    }

    // ---------------------------------------------------------- the intro
    if (v.tour) {
      standaloneHint = await standaloneCommand($, v.repo)
      parts.push(...tourView(t, $, v, isTerminal, width))
      return <Box flexDirection="column">{parts}</Box>
    }

    // --------------------------------------------------------------- tabs
    parts.push(
      <Box flexDirection="row" columnGap={2}>
        {TABS.map(x =>
          v.tab === x.tab ? (
            <Text backgroundColor={C.brass} color="#1B1B1F" bold>{` ${x.label} `}</Text>
          ) : (
            <Button key={`tab:${x.tab}`} plain hotkey={x.hotkey} label={x.label} dimColor={!(v.tab === 'detail' && v.back === x.tab)} onPress={() => void setTab($, x.tab)} />
          ),
        )}
        {v.tab === 'detail' && <Text color={C.gob} bold>{`› ${v.selected ?? ''}`}</Text>}
      </Box>,
    )

    // -------------------------------------------------------------- mods
    if (v.tab === 'mods') {
      const lines = listOf(v)
      const isOpenAll = isFiltering(v)
      const win = isTerminal ? windowOf(lines, v.focus, tops.mods ?? 0, listRows) : { top: 0, end: lines.length, up: null, down: null }
      if (win.top !== (tops.mods ?? 0)) holdRing($, v.focus)
      tops.mods = win.top
      const planned = [
        ...(v.isFinding || v.query ? ['find'] : []),
        ...(win.up ? [win.up.key] : []),
        ...itemsOf(lines.slice(win.top + (win.up ? 1 : 0), win.end - (win.down ? 1 : 0))),
        ...(win.down ? [win.down.key] : []),
      ]
      const autoKey = v.focus && planned.includes(v.focus) ? v.focus : (planned.find(k => k !== 'find') ?? null)

      if (v.isFinding || v.query) {
        drawn.push('find')
        parts.push(
          'Input' in t ? (
            <t.Input
              key="find"
              label="find "
              placeholder="type to filter, enter to jump in"
              value={v.query}
              submitLabel="jump in"
              onInput={q => void update($, view, (x): ManagerView => ({ ...x, query: q }))}
              onSubmit={q => void submitFind($, q)}
            />
          ) : (
            <Text>{`find: ${v.query}`}</Text>
          ),
        )
      }

      const nameWidth = Math.min(22, Math.max(8, ...lines.map(l => (l.kind === 'item' ? l.key.length - 4 : 0))))
      const rows: JSX.Element[] = []
      if (lines.length === 0) rows.push(<Text dimColor>{`  Nothing matches${v.query ? ` "${v.query}"` : ''}${v.only !== 'all' ? ` among the mods that are ${v.only}` : ''}. f edits the search, n shows ${v.only === 'on' ? 'the off ones' : 'all'}.`}</Text>)
      for (let i = win.top; i < win.end; i++) {
        const line: Line | undefined = lines[i]
        if (!line) continue
        if (i === win.top && win.up) {
          rows.push(<Box flexDirection="row">{Gutter(t, false)}{item(t, win.up.key, `  ↑ ${win.up.hidden} more`, autoKey, () => undefined, { plain: true, dimColor: true })}</Box>)
          continue
        }
        if (i === win.end - 1 && win.down) {
          rows.push(<Box flexDirection="row">{Gutter(t, false)}{item(t, win.down.key, `  ↓ ${win.down.hidden} more`, autoKey, () => undefined, { plain: true, dimColor: true })}</Box>)