loadout

import type { Register } from 'claude-code'

// Drawn like loadout by Br4inergy (pane, band, toast), as ModsCode read it from the mod's code:
// https://modscode.com/claude-mods/mods/br4inergy-loadout/
// Written by ModsCode from that reading, not copied from the mod: use it as you like.
// Each value below stands for one the mod works out at run time; put in your own.
export const register: Register = on => {
  // the band above the prompt; what else goes there is drawn under it
  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const { Box, Button } = $.ui.resolve(e)
    const blocked = '…'
    const updatesFound = '…'
    const loadout = '…'
    return (
      <Box flexDirection="column">
        <Box gap={1} justifyContent="flex-end" alignItems="center" marginBottom={1}>
          <Button variant="primary" label={`⚠ ${blocked}`} />
          <Button label={`↑ ${updatesFound}`} />
          <Button hotkey="l" variant="primary" label={`⚙ ${loadout}`} />
        </Box>
        <Box flexDirection="column" />
        <Box flexDirection="column" />
        <Box flexDirection="column" />
        {await next(e)}
      </Box>
    )
  })

  // the pane: open it with $.ui.open({ id: 'my-pane', title: "Loadout" })
  on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const inventory = '…'
    const active = '…'
    const mods = '…'
    const length = '…'
    const plugins = '…'
    const loading = '…'
    const emptyPlugins = '…'
    const checking = '…'
    const refresh = '…'
    const safeNote = '…'
    const bandsTitle = '…'
    const noBands = '…'
    const bandLabel = '…'
    const bandQuiet = '…'
    const bandHidden = '…'
    const bandLabel2 = '…'
    const bandLabel3 = '…'
    return (
      <Box flexDirection="column">
        <Box marginBottom={1} gap={1}>
          <Text bold color="claude">
            {`⚔ ${inventory}`}
          </Text>
          <Text dimColor>
            {`· ${active}`}
          </Text>
        </Box>
        <Box flexDirection="column">
          <Box gap={1} marginBottom={1}>
            <Button variant="primary" label={`${mods} ${length}`} />
            <Button variant="primary" label={`${plugins} ${length}`} />
          </Box>
          <Text dimColor>
            {loading}
          </Text>
          <Text dimColor>
            {emptyPlugins}
          </Text>
          <Box gap={1} flexWrap="wrap">
            <Button label={`${checking}`} />
            <Button hotkey="r" dimColor label={`${refresh}`} />
          </Box>
          <Text dimColor wrap="wrap">
            {`🛡 ${safeNote}`}
          </Text>
          <Box flexDirection="column" marginTop={1}>
            <Text bold>
              {bandsTitle}
            </Text>
            <Text dimColor wrap="wrap">
              {noBands}
            </Text>
            <Box justifyContent="space-between" alignItems="center" gap={1} minWidth={0}>
              <Box gap={1} flexShrink={1} minWidth={0} overflow="hidden">
                <Text wrap="truncate-end">
                  {bandLabel}
                </Text>
                <Text dimColor wrap="truncate-end">
                  {`· ${bandQuiet}`}
                </Text>
              </Box>
              <Button plain>
                <Text dimColor>
                  {`○ ${bandHidden}`}
                </Text>
              </Button>
            </Box>
            <Box justifyContent="space-between" alignItems="center" gap={1} minWidth={0}>
              <Box gap={1} flexShrink={1} minWidth={0} overflow="hidden">
                <Text wrap="truncate-end">
                  {bandLabel2}
                </Text>
                <Text dimColor wrap="truncate-end">
                  {`· ${bandQuiet}`}
                </Text>
              </Box>
              <Button plain>
                <Text dimColor>
                  {`○ ${bandHidden}`}
                </Text>
              </Button>
            </Box>
            <Box justifyContent="space-between" alignItems="center" gap={1} minWidth={0}>
              <Box gap={1} flexShrink={1} minWidth={0} overflow="hidden">
                <Text wrap="truncate-end">
                  {bandLabel3}
                </Text>
                <Text dimColor wrap="truncate-end">
                  {`· ${bandQuiet}`}
                </Text>
              </Box>
              <Button plain>
                <Text dimColor>
                  {`○ ${bandHidden}`}
                </Text>
              </Button>
            </Box>
          </Box>
        </Box>
      </Box>
    )
  })
}

[![ModsCode](https://modscode.com/badge/br4inergy-loadout.svg)](https://modscode.com/claude-mods/mods/br4inergy-loadout/)