subagent-tree

import type { Register } from 'claude-code'

// Drawn like subagent-tree by Clint Day (pane), as modscode read it from the mod's code:
// https://modscode.com/gallery/wolf123450-subagent-tree/
// 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: "Agents" })
  on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
    const { Box, Button, Text } = $.ui.resolve(e)
    const status = '…'
    const tok = '…'
    const runtime = '…'
    const stamp = '…'
    const length = '…'
    const type = '…'
    const label = '…'
    const ago = '…'
    const tool = '…'
    const target = '…'
    return (
      <Box flexDirection="column">
        <Box>
          <Button label="↑ Agents" plain hotkey="t" />
          <Button label="› main" plain />
          <Button label="› main" plain />
          <Button label="› main" plain />
        </Box>
        <Box>
          <Text>
            {"● "}
          </Text>
          <Text bold>
            main
          </Text>
        </Box>
        <Text dimColor>
          {`${status} · ${tok} tok · ${runtime} · started ${stamp}`}
        </Text>
        <Text bold>
          Prompt
        </Text>
        <Text>
          (not captured)
        </Text>
        <Text bold>
          Result
        </Text>
        <Text>
          Still running…
        </Text>
        <Text bold>
          {`Subagents (${length})`}
        </Text>
        <Box>
          <Text>
            {"● "}
          </Text>
          <Button label={`${type}: ${label}`} plain />
          <Text dimColor>
            {`  ${tok} · ${runtime}`}
          </Text>
        </Box>
        <Box>
          <Text>
            {"● "}
          </Text>
          <Button label={`${type}: ${label}`} plain />
          <Text dimColor>
            {`  ${tok} · ${runtime}`}
          </Text>
        </Box>
        <Box>
          <Text>
            {"● "}
          </Text>
          <Button label={`${type}: ${label}`} plain />
          <Text dimColor>
            {`  ${tok} · ${runtime}`}
          </Text>
        </Box>
        <Text bold>
          {`Activity (${length} of ${length}, newest first)`}
        </Text>
        <Text dimColor>
          No tool calls recorded.
        </Text>
        <Text dimColor>
          {`+${ago}  ${tool} ${target}`}
        </Text>
        <Text dimColor>
          {`+${ago}  ${tool} ${target}`}
        </Text>
        <Text dimColor>
          {`+${ago}  ${tool} ${target}`}
        </Text>
        <Box>
          <Button label="↑ Agents" plain hotkey="t" />
          <Button label="› main" plain />
          <Button label="› main" plain />
          <Button label="› main" plain />
        </Box>
      </Box>
    )
  })
}