status-strip

import type { Register } from 'claude-code'

// Drawn like status-strip by Liberty-Technical-Solutions (band, toast), as modscode read it from the mod's code:
// https://modscode.com/gallery/liberty-technical-solutions-status-strip/
// 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, Select } = $.ui.resolve(e)
    const text = '…'
    const text2 = '…'
    const text3 = '…'
    const text4 = '…'
    const text5 = '…'
    const text6 = '…'
    const idleHours = '…'
    const ttlMin = '…'
    const warnMin = '…'
    const showMode = '…'
    const note = '…'
    const missing = '…'
    const msg = '…'
    return (
      <Box flexDirection="column">
        <Box columnGap={2} flexWrap="wrap">
          <Box gap={1}>
            <Text dimColor>
              repo
            </Text>
            <Text>
              {text}
            </Text>
          </Box>
          <Box gap={1}>
            <Text dimColor>
              docs
            </Text>
            <Text>
              {text2}
            </Text>
            <Button label="Fix" variant="primary" />
          </Box>
          <Box gap={1}>
            <Text dimColor>
              deploy
            </Text>
            <Text>
              {text3}
            </Text>
            <Button label="Dismiss" variant="primary" />
          </Box>
          <Box gap={1}>
            <Text dimColor>
              context
            </Text>
            <Text>
              {text4}
            </Text>
            <Button label="Compress…" variant="primary" />
          </Box>
          <Box flexGrow={1} />
          <Box gap={1}>
            <Text dimColor>
              cache
            </Text>
            <Text>
              {text5}
            </Text>
            <Box gap={1}>
              <Button label="Refresh (full price)" variant="primary" />
              <Button label="⚙ ▾" variant="primary" />
            </Box>
          </Box>
        </Box>
        <Box flexDirection="column" borderStyle="round" borderColor="warning" paddingX={1}>
          <Text bold>
            Compress this conversation?
          </Text>
          <Text>
            Claude will replace it with a short summary to free up context (
            {text6}
            {" full now). The full text can no longer be read back, and the cache starts cold."}
          </Text>
          <Box gap={1}>
            <Button label="Yes, compress" variant="primary" />
            <Button label="Cancel" />
          </Box>
        </Box>
        <Box gap={1}>
          <Text bold>
            {"Auto paused: idle for "}
            {idleHours}
            h.
          </Text>
          <Button label="Close out" variant="primary" />
          <Button label={`Resume (${idleHours}h more)`} />
        </Box>
        <Box gap={1}>
          <Text bold>
            Auto paused: a newer session is open in this folder.
          </Text>
          <Button label="Keep Auto here anyway" />
        </Box>
        <Box flexDirection="column" borderStyle="round" paddingX={1}>
          <Text bold>
            Strip settings
          </Text>
          <Box gap={2}>
            <Box width={34}>
              <Text>
                Cache lifetime
              </Text>
            </Box>
            <Select options={[{"value":"5","label":"5 min"},{"value":"60","label":"60 min"}]} value={`${ttlMin}`} />
          </Box>
          <Box gap={2}>
            <Box width={34}>
              <Text>
                Keep alive automatically
              </Text>
            </Box>
            <Select options={[{"value":"off","label":"Off"},{"value":"on","label":"On"}]} value="on" />
          </Box>
          <Box gap={2}>
            <Box width={34}>
              <Text>
                Stop keeping alive after idle
              </Text>
            </Box>
            <Select options={[{"value":"4","label":"4 hours"},{"value":"8","label":"8 hours"},{"value":"12","label":"12 hours"},{"value":"0","label":"Never"}]} value={`${idleHours}`} />
          </Box>
          <Box gap={2}>
            <Box width={34}>
              <Text>
                Warn when this much is left
              </Text>
            </Box>
            <Select options={[{"value":"5","label":"5 min"},{"value":"10","label":"10 min"},{"value":"15","label":"15 min"}]} value={`${warnMin}`} />
          </Box>
          <Box gap={2}>
            <Box width={34}>
              <Text>
                Show the strip
              </Text>
            </Box>
            <Select options={[{"value":"always","label":"Always"},{"value":"needed","label":"Only when something needs you"}]} value={`${showMode}`} />
          </Box>
          <Text dimColor>
            Saved once. Applies to every session on this PC.
          </Text>
        </Box>
        <Text dimColor>
          {"deploy: "}
          {note}
        </Text>
        <Text dimColor>
          {"docs: "}
          {missing}
        </Text>
        <Text dimColor>
          {msg}
        </Text>
        {await next(e)}
      </Box>
    )
  })

  on('session.start', async ($, e, next) => {
    const idleHours = '…'
    await $.ui.toast(`status-strip: Auto paused after ${idleHours}h idle`)
    await $.ui.toast(`status-strip: Auto paused, newer session in this folder`)
    return next(e)
  })
}