tap

import type { Register } from 'claude-code'

// Drawn like tap by gfsaaser24 (pane, band), as modscode read it from the mod's code:
// https://modscode.com/gallery/gfsaaser24-tap/
// 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: "Tap" })
  on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
    const { Box, Markdown, Text, Svg, Button } = $.ui.resolve(e)
    const turns = '…'
    const toolCalls = '…'
    const errors = '…'
    const rows = '…'
    const contextBar = '…'
    const ctxPct = '…'
    const ms = '…'
    const costUsd = '…'
    const outTok = '…'
    const cacheRead = '…'
    const durationChart = '…'
    const at = '…'
    const tool = '…'
    const ms2 = '…'
    const at2 = '…'
    const tool2 = '…'
    const ms3 = '…'
    const at3 = '…'
    const tool3 = '…'
    const ms4 = '…'
    const map = '…'
    const secretsSeen = '…'
    const redacted = '…'
    return (
      <Box flexDirection="column" gap={1}>
        <Markdown text="**Tap** shows the *translation layer*. It sits on the hook chain and sees each thing that crosses the wall: every tool …" />
        <Box flexDirection="row" columnGap={2} flexWrap="wrap">
          <Text>
            <Text bold>
              {turns}
            </Text>
            {" "}
            <Text dimColor>
              turns
            </Text>
          </Text>
          <Text>
            <Text bold>
              {toolCalls}
            </Text>
            {" "}
            <Text dimColor>
              tool calls
            </Text>
          </Text>
          <Text>
            <Text bold color="error">
              {errors}
            </Text>
            {" "}
            <Text dimColor>
              errors
            </Text>
          </Text>
          <Text>
            <Text bold>
              {rows}
            </Text>
            {" "}
            <Text dimColor>
              transcript rows
            </Text>
          </Text>
        </Box>
        <Svg source={`${contextBar}`} alt={`Context window ${ctxPct} percent full`} width={340} height={30} />
        <Box borderStyle="round" borderColor="suggestion" paddingX={1} flexDirection="column">
          <Text>
            <Text bold>
              Last turn
            </Text>
            {" "}
            {ms}
            {" s"}
            <Text dimColor>
              {" / session cost $"}
              {costUsd}
            </Text>
          </Text>
          <Text dimColor>
            {outTok}
            {" tokens out / "}
            {cacheRead}
            {" read from cache"}
          </Text>
        </Box>
        <Svg source={`${durationChart}`} alt="Bar chart of tool call time" width={340} height={78} />
        <Box flexDirection="column">
          <Text bold>
            Tool calls
          </Text>
          <Text dimColor>
            None yet.
          </Text>
          <Text wrap="truncate-end">
            <Text dimColor>
              {at}
            </Text>
            {" "}
            <Text>
              ●
            </Text>
            {" "}
            {tool}
            {" "}
            <Text dimColor>
              {ms2}
              {" ms"}
            </Text>
          </Text>
          <Text wrap="truncate-end">
            <Text dimColor>
              {at2}
            </Text>
            {" "}
            <Text>
              ●
            </Text>
            {" "}
            {tool2}
            {" "}
            <Text dimColor>
              {ms3}
              {" ms"}
            </Text>
          </Text>
          <Text wrap="truncate-end">
            <Text dimColor>
              {at3}
            </Text>
            {" "}
            <Text>
              ●
            </Text>
            {" "}
            {tool3}
            {" "}
            <Text dimColor>
              {ms4}
              {" ms"}
            </Text>
          </Text>
        </Box>
        <Box flexDirection="column">
          <Text bold>
            Transcript rows, by door
          </Text>
          <Text dimColor wrap="wrap">
            {map}
          </Text>
        </Box>
        <Box borderStyle="round" borderColor="success" paddingX={1} flexDirection="column">
          <Text>
            <Text bold>
              Secret guard
            </Text>
            {" is "}
            <Text color="success">
              on
            </Text>
          </Text>
          <Text dimColor>
            {secretsSeen}
            {" keys seen in tool results / "}
            {redacted}
            {" hidden from the model"}
          </Text>
          <Button variant="secondary" label="Turn guard off" />
        </Box>
        <Text dimColor>
          How: hooks on tool.call, turn.complete and session.append. Each one calls next(e).
        </Text>
      </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, Button } = $.ui.resolve(e)
    const parts = '…'
    return (
      <Box flexDirection="column">
        <Box columnGap={1}>
          <Text dimColor>
            {parts}
          </Text>
          <Button label="Tap" />
        </Box>
        {await next(e)}
      </Box>
    )
  })
}