cockpit

import type { Register } from 'claude-code'

// Drawn like cockpit by Claude Code France (pane), as modscode read it from the mod's code:
// https://modscode.com/gallery/para-fr-cockpit/
// 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: "Cockpit" })
  on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
    const { Box, Text } = $.ui.resolve(e)
    const formatModel = '…'
    const bar = '…'
    const formatTokens = '…'
    const turns = '…'
    const toolCalls = '…'
    const tokensIn = '…'
    const tokensOut = '…'
    const formatTokens2 = '…'
    const name = '…'
    const bar2 = '…'
    const count = '…'
    const name2 = '…'
    const bar3 = '…'
    const count2 = '…'
    const name3 = '…'
    const bar4 = '…'
    const count3 = '…'
    const turnOffset = '…'
    const i = '…'
    const bar5 = '…'
    const formatDuration = '…'
    const bar6 = '…'
    const formatDuration2 = '…'
    const bar7 = '…'
    const formatDuration3 = '…'
    const shortPath = '…'
    const shortPath2 = '…'
    const shortPath3 = '…'
    return (
      <Box flexDirection="column" gap={1}>
        <Box flexDirection="column">
          <Text>
            <Text bold>
              {"Modèle "}
            </Text>
            <Text color="cyan">
              {formatModel}
            </Text>
            <Text dimColor>
              {" · "}
            </Text>
            <Text bold>
              {"Coût "}
            </Text>
            <Text color="yellow">
              —
            </Text>
          </Text>
          <Text wrap="truncate">
            <Text bold>
              {"Contexte "}
            </Text>
            <Text>
              {bar}
            </Text>
            {" "}
            —
          </Text>
          <Text dimColor>
            {`fenêtre ${formatTokens}`}
          </Text>
        </Box>
        <Box flexDirection="column">
          <Text>
            <Text bold>
              {"Tours "}
            </Text>
            {turns}
            <Text dimColor>
              {" · "}
            </Text>
            <Text bold>
              {"Outils "}
            </Text>
            {toolCalls}
            <Text dimColor>
              {" · "}
            </Text>
            <Text bold>
              {"Tokens "}
            </Text>
            {`${tokensIn}${tokensOut}`}
          </Text>
          <Text dimColor>
            {"entrée "}
            {formatTokens}
            {" · sortie "}
            {formatTokens2}
          </Text>
        </Box>
        <Box flexDirection="column">
          <Text bold>
            Outils les plus utilisés
          </Text>
          <Text dimColor>
            Aucun appel pour l'instant.
          </Text>
          <Text wrap="truncate">
            {name}
            {" "}
            <Text color="cyan">
              {bar2}
            </Text>
            {" "}
            {count}
          </Text>
          <Text wrap="truncate">
            {name2}
            {" "}
            <Text color="cyan">
              {bar3}
            </Text>
            {" "}
            {count2}
          </Text>
          <Text wrap="truncate">
            {name3}
            {" "}
            <Text color="cyan">
              {bar4}
            </Text>
            {" "}
            {count3}
          </Text>
        </Box>
        <Box flexDirection="column">
          <Text bold>
            Durée des tours
          </Text>
          <Text dimColor>
            Aucun tour terminé.
          </Text>
          <Text wrap="truncate">
            {`#${turnOffset}${i}1`}
            {" "}
            <Text color="magenta">
              {bar5}
            </Text>
            {" "}
            {formatDuration}
          </Text>
          <Text wrap="truncate">
            {`#${turnOffset}${i}1`}
            {" "}
            <Text color="magenta">
              {bar6}
            </Text>
            {" "}
            {formatDuration2}
          </Text>
          <Text wrap="truncate">
            {`#${turnOffset}${i}1`}
            {" "}
            <Text color="magenta">
              {bar7}
            </Text>
            {" "}
            {formatDuration3}
          </Text>
        </Box>
        <Box flexDirection="column">
          <Text bold>
            Derniers fichiers modifiés
          </Text>
          <Text dimColor>
            Aucun fichier modifié.
          </Text>
          <Text color="green" wrap="truncate-start">
            {shortPath}
          </Text>
          <Text color="green" wrap="truncate-start">
            {shortPath2}
          </Text>
          <Text color="green" wrap="truncate-start">
            {shortPath3}
          </Text>
        </Box>
      </Box>
    )
  })
}