hig

import type { Register } from 'claude-code'

// Drawn like hig by Matheus Tonelotto (pane, status, toast), as ModsCode read it from the mod's code:
// https://modscode.com/claude-mods/mods/ntkode-hig/
// 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: "HIG audit" })
  on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const baseName = '…'
    const files = '…'
    const percent = '…'
    const applicable = '…'
    const area = '…'
    const pass = '…'
    const applicable2 = '…'
    const gap = '…'
    const review = '…'
    const area2 = '…'
    const pass2 = '…'
    const applicable3 = '…'
    const area3 = '…'
    const pass3 = '…'
    const applicable4 = '…'
    const length = '…'
    const label = '…'
    return (
      <Box flexDirection="column">
        <Text bold wrap="truncate-start">
          {"HIG audit · "}
          {baseName}
        </Text>
        <Text dimColor wrap="truncate">
          no UI code found
          {" · "}
          {files}
          {" files · "}
          scanning…
        </Text>
        <Text>
          {" "}
        </Text>
        <Box flexDirection="column">
          <Text>
            <Text color="success">
              ████████░░░░░░░░
            </Text>
            {" "}
            <Text bold>
              {percent}
              %
            </Text>
            {" covered · "}
            0
            {" of "}
            {applicable}
          </Text>
          <Text>
            <Text color="error">
              {"✗ "}
              0
              {" gaps"}
            </Text>
            {" "}
            <Text color="warning">
              {"? "}
              0
              {" to review"}
            </Text>
            {" "}
            <Text color="success">
              {"✓ "}
              0
              {" covered"}
            </Text>
            {" "}
            <Text dimColor>
              {"– "}
              0
              {" n/a"}
            </Text>
          </Text>
          <Text>
            {" "}
          </Text>
          <Text wrap="truncate">
            {area}
            {" "}
            <Text color="warning">
              ████████░░░░░░░░
            </Text>
            {" "}
            {pass}
            /
            {applicable2}
            <Text dimColor>
              {` · ${gap} gaps`}
              {` · ${review} to review`}
            </Text>
          </Text>
          <Text wrap="truncate">
            {area2}
            {" "}
            <Text color="warning">
              ████████░░░░░░░░
            </Text>
            {" "}
            {pass2}
            /
            {applicable3}
            <Text dimColor>
              {` · ${gap} gaps`}
              {` · ${review} to review`}
            </Text>
          </Text>
          <Text wrap="truncate">
            {area3}
            {" "}
            <Text color="warning">
              ████████░░░░░░░░
            </Text>
            {" "}
            {pass3}
            /
            {applicable4}
            <Text dimColor>
              {` · ${gap} gaps`}
              {` · ${review} to review`}
            </Text>
          </Text>
        </Box>
        <Text>
          {" "}
        </Text>
        <Box flexDirection="row" columnGap={2} flexWrap="wrap">
          <Button hotkey="g" plain label="▸gaps 0" />
          <Button hotkey="v" plain label="▸review 0" />
          <Button hotkey="p" plain label="▸covered 0" />
          <Button hotkey="a" plain label={`▸all ${length}`} />
        </Box>
        <Box flexDirection="row" columnGap={2} flexWrap="wrap">
          <Button hotkey="r" plain label="scanning…" />
          <Button hotkey="f" plain label="fix all gaps" />
          <Button hotkey="d" plain label="review with Claude" />
          <Button hotkey="x" plain label="export HIG-AUDIT.md" />
        </Box>
        <Text>
          {" "}
        </Text>
        <Text dimColor>
          {"No gaps found. "}
          Press a to see every guideline.
        </Text>
        <Box flexDirection="row">
          <Text>
            {" "}
          </Text>
          <Button plain label={`${label}…`} />
        </Box>
        <Box flexDirection="row">
          <Text>
            {" "}
          </Text>
          <Button plain label={`${label}…`} />
        </Box>
        <Box flexDirection="row">
          <Text>
            {" "}
          </Text>
          <Button plain label={`${label}…`} />
        </Box>
      </Box>
    )
  })

  on('session.start', async ($, e, next) => {
    const what = '…'
    const p = '…'
    await $.ui.toast(`${what}: sent to Claude`)
    await $.ui.toast(`Wrote ${p}`)
    return next(e)
  })
}

[![ModsCode](https://modscode.com/badge/ntkode-hig.svg)](https://modscode.com/claude-mods/mods/ntkode-hig/)