lint-feedback

import type { Register } from 'claude-code'

// Drawn like lint-feedback by mako-code (pane), as modscode read it from the mod's code:
// https://modscode.com/gallery/mako-code-lint-feedback/
// 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: "Lint feedback" })
  on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
    const { Box, Text, Code, Button } = $.ui.resolve(e)
    const ruleCount = '…'
    const length = '…'
    const SOURCE = '…'
    const patterns = '…'
    const command = '…'
    const command2 = '…'
    const command3 = '…'
    const p = '…'
    const hhmmss = '…'
    const glyph = '…'
    const tool = '…'
    const fileOf = '…'
    const detail = '…'
    const seconds = '…'
    const glyph2 = '…'
    const fileOf2 = '…'
    const glyph3 = '…'
    const fileOf3 = '…'
    return (
      <Box flexDirection="column" gap={1}>
        <Text>
          <Text bold>
            Lint feedback
          </Text>
          <Text dimColor>
            {` · ${ruleCount} rule · ${length} recent check`}
          </Text>
        </Text>
        <Box flexDirection="column">
          <Text>
            <Text bold>
              Rules
            </Text>
            <Text dimColor>
              {` · ${SOURCE}`}
            </Text>
          </Text>
          <Text wrap="truncate-end">
            {`  ${patterns}`}
            <Text dimColor>
              {" → "}
            </Text>
            {command}
          </Text>
          <Text wrap="truncate-end">
            {`  ${patterns}`}
            <Text dimColor>
              {" → "}
            </Text>
            {command2}
          </Text>
          <Text wrap="truncate-end">
            {`  ${patterns}`}
            <Text dimColor>
              {" → "}
            </Text>
            {command3}
          </Text>
          <Text color="yellow" wrap="wrap">
            {`  ▲ ${p}`}
          </Text>
          <Text color="yellow" wrap="wrap">
            {`  ▲ ${p}`}
          </Text>
          <Text color="yellow" wrap="wrap">
            {`  ▲ ${p}`}
          </Text>
        </Box>
        <Box flexDirection="column">
          <Text dimColor>
            No checks run. Add .claude/lint-feedback.json to the project, for example:
          </Text>
          <Code source={"{\n  \"*.ts,*.tsx,*.js,*.jsx\": \"npx --no-install eslint {file}\",\n  \"*.py\": \"ruff check {file}\"\n}"} language="json" />
          <Text dimColor>
            or set the plugin’s rules option (patterns=command). Without either, ESLint and Ruff/flake8 are used when the project s…
          </Text>
        </Box>
        <Box flexDirection="column">
          <Text bold>
            Latest checks
          </Text>
          <Text dimColor>
            None yet: a check runs after each successful Edit, Write or NotebookEdit.
          </Text>
          <Text wrap="truncate-end">
            <Text dimColor>
              {`${hhmmss} `}
            </Text>
            <Text>
              {glyph}
            </Text>
            {` ${tool} `}
            <Text bold>
              {fileOf}
            </Text>
            <Text dimColor>
              {` ${detail} · ${seconds} · subagent`}
            </Text>
          </Text>
          <Text wrap="truncate-end">
            <Text dimColor>
              {`${hhmmss} `}
            </Text>
            <Text>
              {glyph2}
            </Text>
            {` ${tool} `}
            <Text bold>
              {fileOf2}
            </Text>
            <Text dimColor>
              {` ${detail} · ${seconds} · subagent`}
            </Text>
          </Text>
          <Text wrap="truncate-end">
            <Text dimColor>
              {`${hhmmss} `}
            </Text>
            <Text>
              {glyph3}
            </Text>
            {` ${tool} `}
            <Text bold>
              {fileOf3}
            </Text>
            <Text dimColor>
              {` ${detail} · ${seconds} · subagent`}
            </Text>
          </Text>
        </Box>
        <Box gap={1}>
          <Button hotkey="r" label="Reload rules" />
          <Button hotkey="x" role="dismiss" label="Close" />
        </Box>
      </Box>
    )
  })
}