no-limit

import type { Register } from 'claude-code'

// Drawn like no-limit by longmaba (pane, band, status, toast), as modscode read it from the mod's code:
// https://modscode.com/gallery/longmaba-no-limit/
// 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, Text, Button } = $.ui.resolve(e)
    const label = '…'
    const done = '…'
    const left = '…'
    const until = '…'
    const retry = '…'
    return (
      <Box flexDirection="column">
        <Box flexDirection="row" gap={1}>
          <Text color="yellow">
            (-.-) zZ
          </Text>
          <Text bold>
            {label}
          </Text>
          <Box flexDirection="row">
            <Text color="yellow">
              {done}
            </Text>
            <Text dimColor>
              {left}
            </Text>
          </Box>
          <Text>
            {"resuming in "}
            <Text bold>
              {until}
            </Text>
            <Text dimColor>
              {retry}
            </Text>
          </Text>
          <Button label="Resume now" variant="primary" />
          <Button label="Cancel" />
          <Button label="Details" />
        </Box>
        {await next(e)}
      </Box>
    )
  })

  // the pane: open it with $.ui.open({ id: 'my-pane', title: "no-limit" })
  on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
    const { Box, Text, Input, Button } = $.ui.resolve(e)
    const text = '…'
    const used = '…'
    const free = '…'
    const percentUsed = '…'
    const resetsIn = '…'
    const used2 = '…'
    const free2 = '…'
    const resetsIn2 = '…'
    const used3 = '…'
    const free3 = '…'
    const resetsIn3 = '…'
    const label = '…'
    const bar = '…'
    const bar2 = '…'
    const until = '…'
    const attempts = '…'
    const MAX_ATTEMPTS = '…'
    const ago = '…'
    const label2 = '…'
    const until2 = '…'
    const ago2 = '…'
    const label3 = '…'
    const until3 = '…'
    const ago3 = '…'
    const label4 = '…'
    const until4 = '…'
    return (
      <Box flexDirection="column" gap={1} paddingX={1}>
        <Box flexDirection="row" justifyContent="space-between">
          <Text bold>
            {text}
          </Text>
          <Text dimColor>
            {"auto-resume "}
            on
          </Text>
        </Box>
        <Box flexDirection="column">
          <Text bold>
            Usage
          </Text>
          <Text dimColor>
            No readings yet: they arrive with the next reply.
          </Text>
          <Box flexDirection="row" gap={1}>
            <Text>
              5-hour
            </Text>
            <Box flexDirection="row">
              <Text>
                {used}
              </Text>
              <Text dimColor>
                {free}
              </Text>
            </Box>
            <Text bold>
              {`${percentUsed}%`}
            </Text>
            <Text dimColor>
              {resetsIn}
            </Text>
          </Box>
          <Box flexDirection="row" gap={1}>
            <Text>
              5-hour
            </Text>
            <Box flexDirection="row">
              <Text>
                {used2}
              </Text>
              <Text dimColor>
                {free2}
              </Text>
            </Box>
            <Text bold>
              {`${percentUsed}%`}
            </Text>
            <Text dimColor>
              {resetsIn2}
            </Text>
          </Box>
          <Box flexDirection="row" gap={1}>
            <Text>
              5-hour
            </Text>
            <Box flexDirection="row">
              <Text>
                {used3}
              </Text>
              <Text dimColor>
                {free3}
              </Text>
            </Box>
            <Text bold>
              {`${percentUsed}%`}
            </Text>
            <Text dimColor>
              {resetsIn3}
            </Text>
          </Box>
        </Box>
        <Box flexDirection="column" borderStyle="round" borderColor="yellow" paddingX={1}>
          <Text color="yellow" bold>
            {label}
            {" hit. Napping until it resets."}
          </Text>
          <Box flexDirection="row" gap={1}>
            <Box flexDirection="row">
              <Text color="yellow">
                {bar}
              </Text>
              <Text dimColor>
                {bar2}
              </Text>
            </Box>
            <Text>
              {"resuming in "}
              <Text bold>
                {until}
              </Text>
            </Text>
          </Box>
          <Text dimColor>
            {"Retry "}
            {attempts}
            {" of "}
            {MAX_ATTEMPTS}
            : the last resume hit the limit again.
          </Text>
        </Box>
        <Box flexDirection="column">
          <Text bold>
            Resume prompt
            {" (default)"}
          </Text>
          <Text dimColor wrap="wrap">
            The usage limit has reset. Carry on with the task you were working on when the limit stopped you. If it was already fin…
          </Text>
          <Input placeholder="Type a new resume prompt, Enter to save (empty: default)" submitLabel="Save" />
        </Box>
        <Box flexDirection="column">
          <Text bold>
            History
          </Text>
          <Text dimColor>
            No resumes yet.
          </Text>
          <Text>
            <Text color="green">
              ✓
            </Text>
            {" "}
            {ago}
            {" after the "}
            {label2}
            <Text dimColor>
              {", waited "}
              {until2}
            </Text>
          </Text>
          <Text>
            <Text color="green">
              ✓
            </Text>
            {" "}
            {ago2}
            {" after the "}
            {label3}
            <Text dimColor>
              {", waited "}
              {until3}
            </Text>
          </Text>
          <Text>
            <Text color="green">
              ✓
            </Text>
            {" "}
            {ago3}
            {" after the "}
            {label4}
            <Text dimColor>
              {", waited "}
              {until4}
            </Text>
          </Text>
        </Box>
        <Box flexDirection="row" gap={1} flexWrap="wrap">
          <Button label="Resume now" hotkey="r" variant="primary" />
          <Button label="Cancel" hotkey="c" />
          <Button label="Turn off" hotkey="o" />
          <Button label="Test (1 min)" hotkey="t" />
        </Box>
      </Box>
    )
  })

  on('session.start', async ($, e, next) => {
    const MAX_ATTEMPTS = '…'
    const label = '…'
    const until = '…'
    await $.ui.toast(`no-limit: still limited after ${MAX_ATTEMPTS} resumes, giving up. /no-limit test 1 to try again.`)
    await $.ui.toast(`${label} hit. Resuming automatically in ${until}.`)
    return next(e)
  })
}