kids

import type { Register } from 'claude-code'

// Drawn like kids by Seva (pane), as modscode read it from the mod's code:
// https://modscode.com/gallery/sevq1993-cyber-kids/
// 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: "Дочерние чаты" })
  on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const projectOf = '…'
    const summaryOf = '…'
    const ago = '…'
    const error = '…'
    const title = '…'
    const shortModel = '…'
    const label = '…'
    const plural = '…'
    const ago2 = '…'
    const branchOf = '…'
    const lastCommit = '…'
    const needsAction = '…'
    const title2 = '…'
    const shortModel2 = '…'
    const label2 = '…'
    const plural2 = '…'
    const ago3 = '…'
    const branchOf2 = '…'
    const lastCommit2 = '…'
    const needsAction2 = '…'
    const title3 = '…'
    const shortModel3 = '…'
    const label3 = '…'
    const plural3 = '…'
    const ago4 = '…'
    const branchOf3 = '…'
    const lastCommit3 = '…'
    const needsAction3 = '…'
    const orphanOf = '…'
    const orphanOf2 = '…'
    const orphanOf3 = '…'
    const looseOf = '…'
    const looseOf2 = '…'
    const looseOf3 = '…'
    return (
      <Box flexDirection="column" paddingX={1}>
        <Text dimColor>
          {projectOf}
          {" · "}
          {summaryOf}
          {" · "}
          {ago}
        </Text>
        <Text color="yellow">
          {"⚠ "}
          {error}
        </Text>
        <Text>
          Этот чат не в git-проекте, а дочерние чаты ищутся по проекту.
        </Text>
        <Text>
          Этот чат не найден в истории приложения, дерево построить не из чего.
        </Text>
        <Box flexDirection="column" marginTop={1}>
          <Box flexDirection="column" marginTop={0} paddingLeft={0}>
            <Box flexDirection="row">
              <Text dimColor>
                {"└─ "}
              </Text>
              <Text bold>
                {title}
              </Text>
              <Text dimColor>
                {" · "}
                {shortModel}
              </Text>
              <Text color="cyan">
                {" · этот чат"}
              </Text>
            </Box>
            <Box flexDirection="column" paddingLeft={3}>
              <Box flexDirection="row">
                <Text>
                  {label}
                </Text>
                <Text dimColor>
                  {" "}
                  {"· "}
                  {plural}
                  {" · "}
                  {ago2}
                </Text>
              </Box>
              <Text>
                {branchOf}
              </Text>
              <Text dimColor>
                «
                {lastCommit}
                »
              </Text>
              <Text color="magenta">
                {"вопрос: "}
                {needsAction}
              </Text>
              <Box flexDirection="row">
                <Button label="в промпт: проверить и слить" />
              </Box>
            </Box>
          </Box>
          <Box flexDirection="column" marginTop={0} paddingLeft={0}>
            <Box flexDirection="row">
              <Text dimColor>
                {"└─ "}
              </Text>
              <Text bold>
                {title2}
              </Text>
              <Text dimColor>
                {" · "}
                {shortModel2}
              </Text>
              <Text color="cyan">
                {" · этот чат"}
              </Text>
            </Box>
            <Box flexDirection="column" paddingLeft={3}>
              <Box flexDirection="row">
                <Text>
                  {label2}
                </Text>
                <Text dimColor>
                  {" "}
                  {"· "}
                  {plural2}
                  {" · "}
                  {ago3}
                </Text>
              </Box>
              <Text>
                {branchOf2}
              </Text>
              <Text dimColor>
                «
                {lastCommit2}
                »
              </Text>
              <Text color="magenta">
                {"вопрос: "}
                {needsAction2}
              </Text>
              <Box flexDirection="row">
                <Button label="в промпт: проверить и слить" />
              </Box>
            </Box>
          </Box>
          <Box flexDirection="column" marginTop={0} paddingLeft={0}>
            <Box flexDirection="row">
              <Text dimColor>
                {"└─ "}
              </Text>
              <Text bold>
                {title3}
              </Text>
              <Text dimColor>
                {" · "}
                {shortModel3}
              </Text>
              <Text color="cyan">
                {" · этот чат"}
              </Text>
            </Box>
            <Box flexDirection="column" paddingLeft={3}>
              <Box flexDirection="row">
                <Text>
                  {label3}
                </Text>
                <Text dimColor>
                  {" "}
                  {"· "}
                  {plural3}
                  {" · "}
                  {ago4}
                </Text>
              </Box>
              <Text>
                {branchOf3}
              </Text>
              <Text dimColor>
                «
                {lastCommit3}
                »
              </Text>
              <Text color="magenta">
                {"вопрос: "}
                {needsAction3}
              </Text>
              <Box flexDirection="row">
                <Button label="в промпт: проверить и слить" />
              </Box>
            </Box>
          </Box>
        </Box>
        <Text dimColor>
          Дочерних чатов нет. Карточка «Открой новый чат» создаёт их.
        </Text>
        <Box flexDirection="column" marginTop={1}>
          <Text bold color="red">
            Папки worktree без чата Claude
          </Text>
          <Box flexDirection="row">
            <Text dimColor>
              {orphanOf}
            </Text>
          </Box>
          <Box flexDirection="row">
            <Text dimColor>
              {orphanOf2}
            </Text>
          </Box>
          <Box flexDirection="row">
            <Text dimColor>
              {orphanOf3}
            </Text>
          </Box>
        </Box>
        <Box flexDirection="column" marginTop={1}>
          <Text bold>
            Ветки без папки и без чата
          </Text>
          <Box flexDirection="row">
            <Text dimColor>
              {looseOf}
            </Text>
          </Box>
          <Box flexDirection="row">
            <Text dimColor>
              {looseOf2}
            </Text>
          </Box>
          <Box flexDirection="row">
            <Text dimColor>
              {looseOf3}
            </Text>
          </Box>
        </Box>
      </Box>
    )
  })
}