mod-manager

  on('ui.render', { component: 'Pane' }, async ($, e, next) => {
    if (e.requestId !== PANE) return next(e)
    const { Box, Text, Button, Input, Link } = $.ui.resolve(e)
    const width = Math.max(30, Number(e.props?.bodyColumns ?? PANE_COLUMNS))
    const wide = width >= 52

    const mods = await read($, modsAtom)
    const scan = await read($, scanAtom)
    const notice = await read($, noticeAtom)
    const busy = await read($, busyAtom)
    const pending = await read($, pendingAtom)
    const now = $.clock.now()
    const redraw = () => $.ui.invalidate('ui.render')

    const visible = mods.filter((m) => matches(m, filter))
    const order = ['outdated', 'installed', 'disabled', 'dev']
    const sorted = [...visible].sort(
      (a, b) => order.indexOf(sectionOf(a)) - order.indexOf(sectionOf(b)) || a.name.localeCompare(b.name),
    )
    if (!sorted.some((m) => m.uid === selected)) selected = sorted[0]?.uid ?? ''
    const current = mods.find((m) => m.uid === selected)
    if (view === 'detail' && !current) view = 'list'
    const outdated = mods.filter((m) => m.status === 'outdated')

    const key = (k, label, onPress, isOff) =>
      Button({ key: 'act-' + k, label: k + ' ' + label, hotkey: k, plain: true, dimColor: Boolean(isOff), onPress })

    // ---- Header: counts and what the background check is doing
    const scanText =
      scan.phase === 'listing'
        ? Text({ color: 'cyan', children: ['⟳ reading…'] })
        : scan.phase === 'fetching'
          ? Text({ color: 'cyan', children: ['⟳ checking marketplaces…'] })
          : scan.error
            ? Text({ color: 'red', wrap: 'truncate-end', children: ['✕ ' + scan.error] })
            : scan.at
              ? Text({ dimColor: true, children: ['✓ checked ' + ago(scan.at, now)] })
              : Text({ dimColor: true, children: ['not checked yet'] })

    const counts = [
      Text({ bold: true, children: [mods.length + ' installed'] }),
      ...(outdated.length ? [Text({ color: 'yellow', children: [' · ' + outdated.length + ' update' + (outdated.length === 1 ? '' : 's')] })] : []),
    ]
    const header = Box({
      flexDirection: 'column',
      children: [Box({ flexDirection: 'row', children: counts }), scanText],
    })

    const banners = []
    if (busy) {
      const m = mods.find((x) => x.uid === busy.uid)
      const verbing = { update: 'Updating', uninstall: 'Uninstalling', enable: 'Enabling', disable: 'Disabling' }[busy.verb]
      banners.push(Text({ color: 'cyan', wrap: 'truncate-end', children: ['⟳ ' + (busy.label ?? verbing + ' ' + (m?.name ?? '')) + '…'] }))
    }
    if (notice) {
      const color = notice.kind === 'error' ? 'red' : notice.kind === 'ok' ? 'green' : undefined
      banners.push(Text({ color, wrap: 'wrap', children: [(notice.kind === 'error' ? '✕ ' : notice.kind === 'ok' ? '✓ ' : '• ') + notice.text] }))
    }
    if (pending && !busy) {
      banners.push(
        Box({
          flexDirection: 'row',
          columnGap: 1,
          children: [
            Text({ color: 'yellow', children: ['Changes apply after a reload.'] }),
            Button({ key: 'reload-now', label: 'Reload now', plain: true, onPress: () => reloadPlugins($) }),
          ],
        }),
      )
    }
    if (confirm) {
      const m = mods.find((x) => x.uid === confirm.uid)
      const question =
        confirm.kind === 'update-all'
          ? 'Update ' + outdated.length + ' mod' + (outdated.length === 1 ? '' : 's') + '?'
          : 'Uninstall ' + (m?.id ?? '') + (m?.name === 'mod-manager' ? ' (this pane)' : '') + '?'
      const yes = async () => {
        const c = confirm
        confirm = null
        redraw()
        if (c.kind === 'update-all') await updateAll($)
        else await runAction($, c.uid, 'uninstall')
      }
      banners.push(
        Box({
          flexDirection: 'column',
          borderStyle: 'round',
          borderColor: 'yellow',
          paddingX: 1,
          children: [
            Text({ bold: true, children: [question] }),
            Box({
              flexDirection: 'row',
              columnGap: 3,
              children: [
                Button({ key: 'confirm-yes', label: 'y Yes', hotkey: 'y', plain: true, autoFocus: true, onPress: yes }),
                Button({ key: 'confirm-no', label: 'n Cancel', hotkey: 'n', plain: true, onPress: () => { confirm = null; redraw() } }),
              ],
            }),
          ],
        }),
      )
    }

    const rule = Text({ dimColor: true, children: ['─'.repeat(width)] })

    // Action keys for the highlighted mod
    const canUpdate = current && current.status === 'outdated' && !current.isDev
    const modKeys = current
      ? [
          key('u', 'Update', () => runAction($, current.uid, 'update'), !canUpdate),
          key('x', 'Uninstall', () => { if (current.isDev) return runAction($, current.uid, 'uninstall'); confirm = { uid: current.uid, kind: 'uninstall' }; redraw() }, current.isDev),
          key('e', current.enabled ? 'Disable' : 'Enable', () => runAction($, current.uid, current.enabled ? 'disable' : 'enable'), current.isDev),
          key('o', 'Open folder', () => openMod($, current.uid, 'folder'), !current.installPath),
          key('t', current.auto ? 'Auto-update: on' : 'Auto-update: off', () => toggleAuto($, current.uid), current.isDev),
        ]
      : []
    const globalKeys = [
      key('a', 'Update all' + (outdated.length ? ' (' + outdated.length + ')' : ''), () => {
        if (!outdated.length) return setNotice($, 'Everything is up to date.', 'info')
        confirm = { uid: '', kind: 'update-all' }
        redraw()
      }, !outdated.length),
      key('c', 'Check now', () => startCheck($), scan.phase !== 'idle'),
      key('r', 'Reload', () => reloadPlugins($)),
      key('f', filterOpen ? 'Close filter' : 'Filter', () => { filterOpen = !filterOpen; if (!filterOpen) filter = ''; redraw() }),
      key('m', 'Add marketplace', () => { view = 'add'; addError = ''; confirm = null; redraw() }),
    ]
    const keyRows = (keys) => Box({ flexDirection: 'row', columnGap: 2, flexWrap: 'wrap', children: keys })
    const backButton = (label, onPress) =>
      Button({ key: 'back', label: 'b ‹ ' + label, hotkey: 'b', plain: true, onPress })

    // ---- Add view: paste a repository, it becomes a marketplace
    if (view === 'add') {
      return Box({
        flexDirection: 'column',
        children: [
          backButton('Back to list', () => { view = 'list'; addError = ''; redraw() }),
          Text({ children: [' '] }),
          Text({ bold: true, children: ['ADD A MARKETPLACE'] }),
          Text({
            dimColor: true,
            wrap: 'wrap',
            children: ['Paste a GitHub or GitLab repository. It must have .claude-plugin/marketplace.json at its root. You pick which of its plugins to install next.'],
          }),
          Text({ children: [' '] }),
          Input({
            key: 'repo',
            label: 'Repository',
            placeholder: 'github.com/owner/repo',
            value: addDraft,
            autoFocus: true,
            submitLabel: 'add',
            onInput: (v) => { addDraft = v },
            onSubmit: (v) => { addDraft = v; return addMarketplace($, v) },
          }),
          ...(addError ? [Text({ color: 'red', wrap: 'wrap', children: ['✕ ' + addError] })] : []),
          ...banners,
          Text({ children: [' '] }),
          Text({ dimColor: true, children: ['Accepted forms:'] }),