diff-review

import type { Register } from 'claude-code'

// Drawn like diff-review by ei (pane, toast), as ModsCode read it from the mod's code:
// https://modscode.com/claude-mods/mods/ei-sugimoto-diff-review/
// 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: "diff review" })
  on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
    const { Box, Button, Text, Select, Input } = $.ui.resolve(e)
    const generatedCount = '…'
    const error = '…'
    const fillWidth = '…'
    const added = '…'
    const removed = '…'
    const mark = '…'
    const gen = '…'
    const added2 = '…'
    const removed2 = '…'
    const mark2 = '…'
    const gen2 = '…'
    const added3 = '…'
    const removed3 = '…'
    const mark3 = '…'
    const gen3 = '…'
    const path = '…'
    const side = '…'
    const start = '…'
    const oldPath = '…'
    const value = '…'
    const path2 = '…'
    const side2 = '…'
    const start2 = '…'
    const path3 = '…'
    const side3 = '…'
    const lineLabel = '…'
    const body = '…'
    const path4 = '…'
    const side4 = '…'
    const lineLabel2 = '…'
    const body2 = '…'
    const path5 = '…'
    const side5 = '…'
    const lineLabel3 = '…'
    const body3 = '…'
    const length = '…'
    return (
      <Box flexDirection="column">
        <Box flexDirection="row" gap={1}>
          <Button label="branch" hotkey="b" variant="primary" />
          <Button label="uncommitted" hotkey="u" variant="primary" />
          <Button label="更新" hotkey="r" />
          <Text dimColor>
            |
          </Text>
          <Button label="split" hotkey="p" variant="primary" />
          <Button label="unified" hotkey="n" variant="primary" />
          <Button label="折り返し" hotkey="w" variant="primary" />
          <Text dimColor>
            |
          </Text>
          <Button label={`生成ファイルを隠す (${generatedCount})`} hotkey="g" variant="primary" />
        </Box>
        <Select label="比較元" value=":default" />
        <Text dimColor wrap="truncate-end">
          {"base: "}
          読み込み中...
        </Text>
        <Text color="red">
          {error}
        </Text>
        <Text dimColor>
          差分はありません
        </Text>
        <Text dimColor>
          自動生成ファイルの差分だけです (g で表示)
        </Text>
        <Box flexDirection="row" gap={1}>
          <Box flexDirection="column" borderStyle="round" borderDimColor>
            <Text bold>
              {fillWidth}
            </Text>
            <Box flexDirection="row">
              <Button label={`${fillWidth}`} plain />
              <Text color="green">
                {added}
              </Text>
              <Text color="cyan">
                {removed}
              </Text>
              <Text color="yellow">
                {mark}
              </Text>
              <Text dimColor>
                {gen}
              </Text>
            </Box>
            <Box flexDirection="row">
              <Button label={`${fillWidth}`} plain />
              <Text color="green">
                {added2}
              </Text>
              <Text color="cyan">
                {removed2}
              </Text>
              <Text color="yellow">
                {mark2}
              </Text>
              <Text dimColor>
                {gen2}
              </Text>
            </Box>
            <Box flexDirection="row">
              <Button label={`${fillWidth}`} plain />
              <Text color="green">
                {added3}
              </Text>
              <Text color="cyan">
                {removed3}
              </Text>
              <Text color="yellow">
                {mark3}
              </Text>
              <Text dimColor>
                {gen3}
              </Text>
            </Box>
          </Box>
          <Box flexDirection="column">
            <Text bold wrap="truncate-end">
              {path}
            </Text>
            <Box flexDirection="row" gap={1}>
              <Text color="cyan">
                {side}
                {start}
                {" を起点に選択中。同じ行をもう一度押すと1行、同じ側の別の行を押すと範囲でコメントできます"}
              </Text>
              <Button label="選択解除" plain dimColor />
            </Box>
            <Box flexDirection="row">
              <Box>
                <Text bold wrap="truncate-end">
                  変更前
                </Text>
              </Box>
              <Text dimColor>
                │
              </Text>
              <Box>
                <Text bold>
                  変更後
                </Text>
              </Box>
            </Box>
            <Text dimColor>
              {`${oldPath} から名前変更`}
            </Text>
            <Box flexDirection="column">
              <Text dimColor>
                {"... "}
                以降は省略しています
              </Text>
            </Box>
          </Box>
        </Box>
        <Box flexDirection="column">
          <Select label="file" value={`${value}`} />
          <Box flexDirection="column">
            <Text bold wrap="truncate-end">
              {path2}
            </Text>
            <Box flexDirection="row" gap={1}>
              <Text color="cyan">
                {side2}
                {start2}
                {" を起点に選択中。同じ行をもう一度押すと1行、同じ側の別の行を押すと範囲でコメントできます"}
              </Text>
              <Button label="選択解除" plain dimColor />
            </Box>
            <Box flexDirection="row">
              <Box>
                <Text bold wrap="truncate-end">
                  変更前
                </Text>
              </Box>
              <Text dimColor>
                │
              </Text>
              <Box>
                <Text bold>
                  変更後
                </Text>
              </Box>
            </Box>
            <Text dimColor>
              {`${oldPath} から名前変更`}
            </Text>
            <Box flexDirection="column">
              <Text dimColor>
                {"... "}
                以降は省略しています
              </Text>
            </Box>
          </Box>
        </Box>
        <Box marginTop={1} flexDirection="column">
          <Input label="行指定" placeholder="R12 本文 / L3-5 本文 (L=変更前の行, R=変更後の行, 省略時 R)" submitLabel="追加" />
          <Box flexDirection="row" gap={1}>
            <Button label="x" plain dimColor />
            <Text wrap="truncate-end">
              {path3}
              :
              {side3}
              {lineLabel}
              {" "}
              {body}
            </Text>
          </Box>
          <Box flexDirection="row" gap={1}>
            <Button label="x" plain dimColor />
            <Text wrap="truncate-end">
              {path4}
              :
              {side4}
              {lineLabel2}
              {" "}
              {body2}
            </Text>
          </Box>
          <Box flexDirection="row" gap={1}>
            <Button label="x" plain dimColor />
            <Text wrap="truncate-end">
              {path5}
              :
              {side5}
              {lineLabel3}
              {" "}
              {body3}
            </Text>
          </Box>
          <Box flexDirection="row" gap={1}>
            <Button label={`Claude に渡す (${length})`} hotkey="s" variant="primary" />
            <Button label="コメントを消す" />
          </Box>
        </Box>
      </Box>
    )
  })

  on('session.start', async ($, e, next) => {
    await $.ui.toast(`diff-review: ファイルを選んでからコメントしてください`)
    await $.ui.toast(`diff-review: "R12 本文" の形で入力してください (L=変更前, R=変更後)`)
    return next(e)
  })
}

[![ModsCode](https://modscode.com/badge/ei-sugimoto-diff-review.svg)](https://modscode.com/claude-mods/mods/ei-sugimoto-diff-review/)