plan-progress

import type { Register } from 'claude-code'

// Drawn like plan-progress by Jeremy Winterberg (pane), as modscode read it from the mod's code:
// https://modscode.com/gallery/jeremydwayne-plan-progress/
// 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 pane: open it with $.ui.open({ id: 'my-pane', title: "Plan" })
  on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
    const { Box, Text } = $.ui.resolve(e)
    const plural = '…'
    const n = '…'
    const text = '…'
    const subject = '…'
    const subject2 = '…'
    const subject3 = '…'
    const n2 = '…'
    const text2 = '…'
    const subject4 = '…'
    const subject5 = '…'
    const subject6 = '…'
    const n3 = '…'
    const text3 = '…'
    const subject7 = '…'
    const subject8 = '…'
    const subject9 = '…'
    const plural2 = '…'
    const n4 = '…'
    const text4 = '…'
    const n5 = '…'
    const text5 = '…'
    const n6 = '…'
    const text6 = '…'
    return (
      <Box flexDirection="column">
        <Text>
          <Text bold>
            Left
          </Text>
          <Text dimColor>
            {" "}
            {plural}
          </Text>
        </Text>
        <Text dimColor>
          All steps done.
        </Text>
        <Box flexDirection="column">
          <Text color="suggestion">
            {"▸ "}
            {n}
            {" "}
            {text}
            {" now"}
          </Text>
          <Text color="suggestion">
            {"    "}
            ▸
            {" "}
            {subject}
          </Text>
          <Text color="suggestion">
            {"    "}
            ▸
            {" "}
            {subject2}
          </Text>
          <Text color="suggestion">
            {"    "}
            ▸
            {" "}
            {subject3}
          </Text>
        </Box>
        <Box flexDirection="column">
          <Text color="suggestion">
            {"▸ "}
            {n2}
            {" "}
            {text2}
            {" now"}
          </Text>
          <Text color="suggestion">
            {"    "}
            ▸
            {" "}
            {subject4}
          </Text>
          <Text color="suggestion">
            {"    "}
            ▸
            {" "}
            {subject5}
          </Text>
          <Text color="suggestion">
            {"    "}
            ▸
            {" "}
            {subject6}
          </Text>
        </Box>
        <Box flexDirection="column">
          <Text color="suggestion">
            {"▸ "}
            {n3}
            {" "}
            {text3}
            {" now"}
          </Text>
          <Text color="suggestion">
            {"    "}
            ▸
            {" "}
            {subject7}
          </Text>
          <Text color="suggestion">
            {"    "}
            ▸
            {" "}
            {subject8}
          </Text>
          <Text color="suggestion">
            {"    "}
            ▸
            {" "}
            {subject9}
          </Text>
        </Box>
        <Text>
          {" "}
        </Text>
        <Text>
          <Text bold>
            Done
          </Text>
          <Text dimColor>
            {" "}
            {plural2}
            {`, ${plural}`}
          </Text>
        </Text>
        <Text dimColor>
          {"✓ "}
          {n4}
          {" "}
          {text4}
          {`  ${plural}`}
        </Text>
        <Text dimColor>
          {"✓ "}
          {n5}
          {" "}
          {text5}
          {`  ${plural}`}
        </Text>
        <Text dimColor>
          {"✓ "}
          {n6}
          {" "}
          {text6}
          {`  ${plural}`}
        </Text>
        <Text>
          {" "}
        </Text>
        <Text dimColor>
          {"ship: "}
          no PR yet
        </Text>
      </Box>
    )
  })
}