mission-control

import type { Register } from 'claude-code'

// Drawn like mission-control by eshin087 (pane, toast), as modscode read it from the mod's code:
// https://modscode.com/gallery/eshin087-mission-control/
// 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: "Mission" })
  on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const title = '…'
    const pct = '…'
    const fmt = '…'
    const avgErrorPct = '…'
    const tasks = '…'
    const i = '…'
    const text = '…'
    const took = '…'
    const text2 = '…'
    const took2 = '…'
    const text3 = '…'
    const took3 = '…'
    const fmt2 = '…'
    const text4 = '…'
    const fmt3 = '…'
    const text5 = '…'
    const fmt4 = '…'
    const text6 = '…'
    return (
      <Box flexDirection="column" gap={1}>
        <Box flexDirection="column">
          <Text bold>
            {title}
          </Text>
          <Box flexDirection="row" gap={1}>
            <Text color="success">
              ████████░░░░░░░░
            </Text>
            <Text bold>
              {pct}
              %
            </Text>
          </Box>
          <Text dimColor>
            {"elapsed "}
            {fmt}
            {" · finished"}
            {" (rough until a step finishes)"}
          </Text>
          <Text dimColor>
            Past estimates here: off by ~
            {avgErrorPct}
            % on average (
            {tasks}
            {" "}
            task
            )
          </Text>
        </Box>
        <Box flexDirection="column">
          <Text color="claude" wrap="truncate-end">
            ✓
            {" "}
            {`${i}1`}
            {". "}
            {text}
            {took}
          </Text>
          <Text color="claude" wrap="truncate-end">
            ✓
            {" "}
            {`${i}1`}
            {". "}
            {text2}
            {took2}
          </Text>
          <Text color="claude" wrap="truncate-end">
            ✓
            {" "}
            {`${i}1`}
            {". "}
            {text3}
            {took3}
          </Text>
        </Box>
        <Box flexDirection="column">
          <Text bold>
            Trail
          </Text>
          <Text wrap="truncate-end">
            {fmt2}
            {" "}
            {text4}
          </Text>
          <Text wrap="truncate-end">
            {fmt3}
            {" "}
            {text5}
          </Text>
          <Text wrap="truncate-end">
            {fmt4}
            {" "}
            {text6}
          </Text>
        </Box>
        <Box flexDirection="row" gap={1}>
          <Button label="Close" role="dismiss" />
          <Button label="Clear" />
        </Box>
      </Box>
    )
  })

  on('session.start', async ($, e, next) => {
    const reason = '…'
    await $.ui.toast(`Mission pane could not open (${reason}).`)
    return next(e)
  })
}