jev

import type { Register } from 'claude-code'

// Drawn like jev by Matheus Tonelotto (pane, band, toast), as modscode read it from the mod's code:
// https://modscode.com/gallery/ntkode-jev/
// 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: "Jev" })
  on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const text = '…'
    const routingText = '…'
    const DONE_MODE_TEXT = '…'
    const gateway = '…'
    const tool = '…'
    const duration = '…'
    const steps = '…'
    const tokens = '…'
    const cleanPrompt = '…'
    const ARM_TEXT = '…'
    const doneText = '…'
    const cell = '…'
    const cell2 = '…'
    const cell3 = '…'
    const text2 = '…'
    const hinted = '…'
    const asked = '…'
    const pct = '…'
    const text3 = '…'
    const followed = '…'
    const hinted2 = '…'
    const text4 = '…'
    const toolCounts = '…'
    const text5 = '…'
    const map = '…'
    const text6 = '…'
    const latency = '…'
    const text7 = '…'
    const dollars = '…'
    const jevCost = '…'
    const asked2 = '…'
    const text8 = '…'
    const week = '…'
    const resets = '…'
    const split = '…'
    const line = '…'
    const split2 = '…'
    const line2 = '…'
    const split3 = '…'
    const line3 = '…'
    const turns = '…'
    const requests = '…'
    const controlTurns = '…'
    const latency2 = '…'
    const DONE_NEXT = '…'
    return (
      <Box flexDirection="column">
        <Box flexDirection="row" justifyContent="space-between">
          <Text>
            <Text bold>
              Jev
            </Text>
            <Text>
              {" ● "}
              {text}
            </Text>
            <Text color="yellow">
              {" "}
              {routingText}
            </Text>
          </Text>
          <Text dimColor />
        </Box>
        <Text dimColor wrap="truncate-end">
          {"asked before each of Claude's requests · hints at ≥ 0.7 · "}
          20
          % control turns
        </Text>
        <Text wrap="truncate-end">
          <Text dimColor>
            {"done check "}
          </Text>
          <Text color="cyan">
            {DONE_MODE_TEXT}
          </Text>
        </Text>
        <Text color="yellow" wrap="wrap">
          This session's requests go through a local proxy (
          {gateway}
          ). If it is jev-gateway, it hints too: run one or the other to measure either.
        </Text>
        <Box marginTop={1}>
          <Text wrap="truncate-end">
            <Text color="yellow">
              {"▶ now "}
            </Text>
            <Text>
              Claude working
              {` · ${tool}`}
            </Text>
          </Text>
        </Box>
        <Box marginTop={1} flexDirection="column">
          <Text>
            <Text bold>
              Last turn
            </Text>
            <Text dimColor>
              {"  "}
              {duration}
              {" · "}
              {steps}
              {" requests"}
              {` · ${tokens} out`}
            </Text>
          </Text>
          <Box flexDirection="column">
            <Text dimColor italic wrap="truncate-end">
              “
              {cleanPrompt}
              ”
            </Text>
            <Text dimColor>
              {ARM_TEXT}
            </Text>
            <Text>
              {"done check · "}
              {doneText}
            </Text>
            <Box flexDirection="column" marginTop={1}>
              <Text wrap="wrap">
                <Text>
                  {cell}
                </Text>
                <Text>
                  {cell2}
                </Text>
                <Text>
                  {cell3}
                </Text>
              </Text>
              <Text>
                <Text dimColor>
                  {text2}
                </Text>
                <Text color="cyan" bold>
                  {hinted}
                </Text>
                <Text dimColor>
                  {" of "}
                  {asked}
                  {" asks"}
                  {pct}
                </Text>
              </Text>
              <Text>
                <Text dimColor>
                  {text3}
                </Text>
                <Text bold>
                  {followed}
                </Text>
                <Text dimColor>
                  {" of "}
                  {hinted2}
                </Text>
              </Text>
              <Text wrap="wrap">
                <Text dimColor>
                  {text4}
                </Text>
                <Text color="cyan">
                  {toolCounts}
                </Text>
              </Text>
              <Text wrap="wrap">
                <Text dimColor>
                  {text5}
                </Text>
                <Text>
                  {map}
                </Text>
              </Text>
              <Text>
                <Text dimColor>
                  {text6}
                </Text>
                <Text color="yellow">
                  {latency}
                </Text>
                <Text dimColor>
                  {" per ask, before Claude's request"}
                </Text>
              </Text>
            </Box>
          </Box>
        </Box>
        <Box marginTop={1} flexDirection="column">
          <Text>
            <Text bold>
              Spend
            </Text>
            <Text dimColor>
              {" this session"}
            </Text>
          </Text>
          <Text wrap="truncate-end">
            <Text dimColor>
              {text7}
            </Text>
            <Text>
              {"Claude "}
              {dollars}
            </Text>
            <Text dimColor>
              {" at API prices"}
            </Text>
            <Text>
              {" · Jev "}
              {jevCost}
            </Text>
            <Text dimColor>
              {" over "}
              {asked2}
              {" asks"}
            </Text>
          </Text>
          <Text wrap="truncate-end">
            <Text dimColor>
              {text8}
            </Text>
            <Text color="red" bold>
              {week}
              %
            </Text>
            <Text dimColor>
              {" used"}
              {` · resets ${resets}`}
            </Text>
          </Text>
        </Box>
        <Box marginTop={1} flexDirection="column">
          <Text wrap="wrap">
            <Text bold>
              {split}
            </Text>
            <Text dimColor>
              {line}
            </Text>
          </Text>
          <Text wrap="wrap">
            <Text bold>
              {split2}
            </Text>
            <Text dimColor>
              {line2}
            </Text>
          </Text>
          <Text wrap="wrap">
            <Text bold>
              {split3}
            </Text>
            <Text dimColor>
              {line3}
            </Text>
          </Text>
        </Box>
        <Box marginTop={1} flexDirection="column">
          <Text bold>
            This session
          </Text>
          <Box flexDirection="row" flexWrap="wrap">
            <Box flexDirection="column" marginRight={3}>
              <Text bold>
                {turns}
              </Text>
              <Text dimColor>
                turns
              </Text>
            </Box>
            <Box flexDirection="column" marginRight={3}>
              <Text bold>
                {requests}
              </Text>
              <Text dimColor>
                requests
              </Text>
            </Box>
            <Box flexDirection="column" marginRight={3}>
              <Text bold color="cyan">
                {`${hinted}${pct}`}
              </Text>
              <Text dimColor>
                hinted
              </Text>
            </Box>
            <Box flexDirection="column" marginRight={3}>
              <Text bold>
                {`${followed}${pct}`}
              </Text>
              <Text dimColor>
                followed
              </Text>
            </Box>
            <Box flexDirection="column" marginRight={3}>
              <Text bold>
                {controlTurns}
              </Text>
              <Text dimColor>
                control turns
              </Text>
            </Box>
            <Box flexDirection="column" marginRight={3}>
              <Text bold>
                {tokens}
              </Text>
              <Text dimColor>
                output
              </Text>
            </Box>
            <Box flexDirection="column" marginRight={3}>
              <Text bold color="yellow">
                {latency2}
              </Text>
              <Text dimColor>
                Jev p50
              </Text>
            </Box>
          </Box>
        </Box>
        <Box marginTop={1}>
          <Text dimColor wrap="wrap">
            Shadow: Jev is asked and its picks are recorded, but Claude never sees them. The last 7 days show how often Claude chos…
          </Text>
        </Box>
        <Box marginTop={1} flexDirection="row" flexWrap="wrap" columnGap={2}>
          <Button hotkey="s" plain variant="primary" label="set up" />
          <Button hotkey="p" plain label="resume" />
          <Button hotkey="d" plain label={`done check: ${DONE_NEXT}`} />
          <Button role="dismiss" plain label="close" />
        </Box>
      </Box>
    )
  })

  // the band above the prompt; what else goes there is drawn under it
  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const { Box, Text } = $.ui.resolve(e)
    const tool = '…'
    const status2 = '…'
    return (
      <Box flexDirection="column">
        <Box>
          <Text color="yellow">
            {"◆ "}
          </Text>
          <Text>
            Claude working
            {` · ${tool}`}
          </Text>
          <Text dimColor>
            {" · "}
            {status2}
          </Text>
        </Box>
        {await next(e)}
      </Box>
    )
  })

  on('session.start', async ($, e, next) => {
    const deny = '…'
    const message = '…'
    await $.ui.toast(`Jev: the done check stays shadow (${deny}).`)
    await $.ui.toast(`Jev: the done check stays shadow (${message}).`)
    return next(e)
  })
}