plans-viewer

import type { Register } from 'claude-code'

// Drawn like plans-viewer by 5kahoisaac (pane, status), as modscode read it from the mod's code:
// https://modscode.com/gallery/5kahoisaac-plans-viewer/
// 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: "Plans" })
  on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
    const { Box, Button, Text } = $.ui.resolve(e)
    const dir = '…'
    const label = '…'
    const name = '…'
    const toTimeString = '…'
    const markerFor = '…'
    const part = '…'
    const part2 = '…'
    const part3 = '…'
    const markerFor2 = '…'
    const label2 = '…'
    const part4 = '…'
    const part5 = '…'
    const part6 = '…'
    const markerFor3 = '…'
    const label3 = '…'
    const part7 = '…'
    const part8 = '…'
    const part9 = '…'
    return (
      <Box flexDirection="column">
        <Box flexDirection="row" flexWrap="wrap">
          <Button label={`${dir}/${label}`} variant="primary" />
          <Button label={`${dir}/${label}`} variant="primary" />
          <Button label={`${dir}/${label}`} variant="primary" />
          <Button role="dismiss" label="Close" />
        </Box>
        <Text dimColor>
          {dir}
          /
          {name}
          {" · updated "}
          {toTimeString}
        </Text>
        <Box marginTop={1}>
          <Box flexDirection="column">
            <Box flexDirection="row">
              <Text color="success">
                {markerFor}
                {" "}
              </Text>
              <Box flexGrow={1} flexShrink={1}>
                <Text>
                  <Text bold>
                    {label}
                  </Text>
                  <Text color="suggestion">
                    {part}
                  </Text>
                  <Text color="suggestion">
                    {part2}
                  </Text>
                  <Text color="suggestion">
                    {part3}
                  </Text>
                </Text>
              </Box>
            </Box>
            <Box flexDirection="row">
              <Text color="success">
                {markerFor2}
                {" "}
              </Text>
              <Box flexGrow={1} flexShrink={1}>
                <Text>
                  <Text bold>
                    {label2}
                  </Text>
                  <Text color="suggestion">
                    {part4}
                  </Text>
                  <Text color="suggestion">
                    {part5}
                  </Text>
                  <Text color="suggestion">
                    {part6}
                  </Text>
                </Text>
              </Box>
            </Box>
            <Box flexDirection="row">
              <Text color="success">
                {markerFor3}
                {" "}
              </Text>
              <Box flexGrow={1} flexShrink={1}>
                <Text>
                  <Text bold>
                    {label3}
                  </Text>
                  <Text color="suggestion">
                    {part7}
                  </Text>
                  <Text color="suggestion">
                    {part8}
                  </Text>
                  <Text color="suggestion">
                    {part9}
                  </Text>
                </Text>
              </Box>
            </Box>
          </Box>
        </Box>
      </Box>
    )
  })

  on('session.start', async ($, e, next) => {
    const error = '…'
    await $.ui.status(`plans-viewer: ${error}`)
    return next(e)
  })
}