token-usage

import type { Register } from 'claude-code'

// Drawn like token-usage by Benjamin Mueller (pane, band), as modscode read it from the mod's code:
// https://modscode.com/gallery/benjamin410-token-usage/
// 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 band above the prompt; what else goes there is drawn under it
  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const spark = '…'
    const fmt = '…'
    const fmtUsd = '…'
    const percentUsed = '…'
    const when = '…'
    return (
      <Box flexDirection="column">
        <Box>
          <Text dimColor>
            {"Tokens 7T "}
          </Text>
          <Text color="cyan">
            {`${spark} `}
          </Text>
          <Text bold>
            {fmt}
          </Text>
          <Text dimColor>
            {" │ API "}
          </Text>
          <Text bold color="magenta">
            {`≈${fmtUsd}`}
          </Text>
          <Text>
            <Text dimColor>
              {" │ Plan "}
            </Text>
            <Text>
              {`5h ${percentUsed}% `}
            </Text>
            <Text>
              {`7T ${percentUsed}%`}
            </Text>
            <Text dimColor>
              {` (${when})`}
            </Text>
            <Text dimColor>
              {` │ ≈${fmt} Tok/1%`}
            </Text>
          </Text>
          <Text>
            {" "}
          </Text>
          <Button label="Details" />
        </Box>
        {await next(e)}
      </Box>
    )
  })

  // the pane: open it with $.ui.open({ id: 'my-pane', title: "Token-Verbrauch (7 Tage)" })
  on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const weekday = '…'
    const day = '…'
    const day2 = '…'
    const full = '…'
    const rest = '…'
    const fmt = '…'
    const fmtUsd = '…'
    const weekday2 = '…'
    const day3 = '…'
    const day4 = '…'
    const full2 = '…'
    const rest2 = '…'
    const fmt2 = '…'
    const fmtUsd2 = '…'
    const weekday3 = '…'
    const day5 = '…'
    const day6 = '…'
    const full3 = '…'
    const rest3 = '…'
    const fmt3 = '…'
    const fmtUsd3 = '…'
    const fmt4 = '…'
    const fmt5 = '…'
    const requests = '…'
    const split = '…'
    const fmtUsd4 = '…'
    const unpriced = '…'
    const model = '…'
    const fmt6 = '…'
    const fmtUsd5 = '…'
    const model2 = '…'
    const fmt7 = '…'
    const fmtUsd6 = '…'
    const model3 = '…'
    const fmt8 = '…'
    const fmtUsd7 = '…'
    const WINDOW_NAMES = '…'
    const full4 = '…'
    const rest4 = '…'
    const percentUsed = '…'
    const when = '…'
    const WINDOW_NAMES2 = '…'
    const full5 = '…'
    const rest5 = '…'
    const when2 = '…'
    const WINDOW_NAMES3 = '…'
    const full6 = '…'
    const rest6 = '…'
    const when3 = '…'
    const fmt9 = '…'
    const fmtUsd8 = '…'
    const fmt10 = '…'
    const fmt11 = '…'
    const files = '…'
    const value = '…'
    return (
      <Box flexDirection="column">
        <Text bold color="cyan">
          Letzte 7 Tage (dieses Geraet)
        </Text>
        <Text>
          <Text>
            {weekday}
            {" "}
            {day}
            .
            {day2}
            .
          </Text>
          {" "}
          <Text color="yellow">
            {full}
          </Text>
          <Text dimColor>
            {rest}
          </Text>
          {" "}
          <Text>
            {fmt}
          </Text>
          {" "}
          <Text color="magenta">
            {fmtUsd}
          </Text>
        </Text>
        <Text>
          <Text>
            {weekday2}
            {" "}
            {day3}
            .
            {day4}
            .
          </Text>
          {" "}
          <Text color="yellow">
            {full2}
          </Text>
          <Text dimColor>
            {rest2}
          </Text>
          {" "}
          <Text>
            {fmt2}
          </Text>
          {" "}
          <Text color="magenta">
            {fmtUsd2}
          </Text>
        </Text>
        <Text>
          <Text>
            {weekday3}
            {" "}
            {day5}
            .
            {day6}
            .
          </Text>
          {" "}
          <Text color="yellow">
            {full3}
          </Text>
          <Text dimColor>
            {rest3}
          </Text>
          {" "}
          <Text>
            {fmt3}
          </Text>
          {" "}
          <Text color="magenta">
            {fmtUsd3}
          </Text>
        </Text>
        <Text>
          {" "}
        </Text>
        <Text>
          {"Summe: "}
          <Text bold color="cyan">
            {fmt4}
          </Text>
          {" Tokens ohne Cache-Reads,"}
          {" "}
          {fmt5}
          {" gesamt, "}
          {requests}
          {" Anfragen"}
        </Text>
        <Text dimColor>
          {split}
        </Text>
        <Text>
          {"API-Preis: "}
          <Text bold color="magenta">
            {"≈ "}
            {fmtUsd4}
          </Text>
          {" nach Listenpreis (inkl. Cache)"}
          <Text color="yellow">
            {` · ${unpriced} Anfragen ohne bekannten Preis`}
          </Text>
        </Text>
        <Text>
          {" "}
        </Text>
        <Text bold color="cyan">
          Nach Modell
        </Text>
        <Text dimColor>
          keine Anfragen
        </Text>
        <Text>
          <Text bold>
            {model}
          </Text>
          {" "}
          {fmt6}
          {" ·"}
          {" "}
          <Text color="magenta">
            {"≈ "}
            {fmtUsd5}
          </Text>
          <Text dimColor>
            {` · ${requests} Anfragen`}
          </Text>
        </Text>
        <Text>
          <Text bold>
            {model2}
          </Text>
          {" "}
          {fmt7}
          {" ·"}
          {" "}
          <Text color="magenta">
            {"≈ "}
            {fmtUsd6}
          </Text>
          <Text dimColor>
            {` · ${requests} Anfragen`}
          </Text>
        </Text>
        <Text>
          <Text bold>
            {model3}
          </Text>
          {" "}
          {fmt8}
          {" ·"}
          {" "}
          <Text color="magenta">
            {"≈ "}
            {fmtUsd7}
          </Text>
          <Text dimColor>
            {` · ${requests} Anfragen`}
          </Text>
        </Text>
        <Text>
          {" "}
        </Text>
        <Text bold color="cyan">
          Plan-Auslastung
        </Text>
        <Text dimColor>
          Noch kein Plan-Stand: er kommt mit der naechsten Antwort (nur mit Abo-Login, nicht mit API-Key).
        </Text>
        <Text>
          {WINDOW_NAMES}
          {" "}
          <Text>
            {full4}
          </Text>
          <Text dimColor>
            {rest4}
          </Text>
          {" "}
          <Text bold>
            {`${percentUsed}%`}
          </Text>
          {" "}
          <Text dimColor>
            {when}
          </Text>
        </Text>
        <Text>
          {WINDOW_NAMES2}
          {" "}
          <Text>
            {full5}
          </Text>
          <Text dimColor>
            {rest5}
          </Text>
          {" "}
          <Text bold>
            {`${percentUsed}%`}
          </Text>
          {" "}
          <Text dimColor>
            {when2}
          </Text>
        </Text>
        <Text>
          {WINDOW_NAMES3}
          {" "}
          <Text>
            {full6}
          </Text>
          <Text dimColor>
            {rest6}
          </Text>
          {" "}
          <Text bold>
            {`${percentUsed}%`}
          </Text>
          {" "}
          <Text dimColor>
            {when3}
          </Text>
        </Text>
        <Box flexDirection="column">
          <Text>
            {" "}
          </Text>
          <Text>
            {"Seit Fensterbeginn hier verbraucht: "}
            <Text bold color="cyan">
              {fmt9}
            </Text>
            {" Tokens ="}
            {" "}
            <Text>
              {percentUsed}
              %
            </Text>
            {" des Plans · API-Preis"}
            {" "}
            <Text color="magenta">
              {"≈ "}
              {fmtUsd8}
            </Text>
          </Text>
          <Text>
            {"≈ "}
            {fmt10}
            {" Tokens je 1 % · hochgerechnet ≈"}
            {" "}
            <Text bold color="green">
              {fmt11}
            </Text>
            {" Tokens bis 100 %"}
          </Text>
          <Text dimColor>
            Grobe Schaetzung: der Plan gewichtet Modelle und Cache anders und zaehlt alle Geraete.
          </Text>
        </Box>
        <Text>
          {" "}
        </Text>
        <Text dimColor>
          {files}
          {" Transkripte gelesen · Plan-Stand"}
          {" "}
          {value}
        </Text>
        <Button label="Lese …" />
      </Box>
    )
  })
}