MCPcopy
hub / github.com/yoshiko-pg/difit

github.com/yoshiko-pg/difit @v5.0.5 sqlite

repository ↗ · DeepWiki ↗ · release v5.0.5 ↗
839 symbols 2,057 edges 185 files 26 documented · 3%
README

difit

English | 日本語 | 简体中文 | 한국어

difit screenshot

difitは、ローカルのgit上にある差分をGitHub風のビューアで閲覧・レビューできるCLIツールです。見やすい表示に加え、コメントはAIへのプロンプトとしてコピーできます。AI時代のローカルコードレビューツール!

⚡ クイックスタート

まず試す

npx difit  # 最新コミットのdiffをWebUIで表示

インストールして使う

npm install -g difit
difit  # 最新コミットのdiffをWebUIで表示

AIエージェントから使えるようにする

npx skills add yoshiko-pg/difit # エージェントにスキル群を追加

インストールされる主な skill:

  • difit: コード変更後に difit を使ってユーザーへレビューを依頼する
  • difit-review: 特定の diff や PR をレビューし、指摘や解説をコメントとして事前投入した difit を起動する

🚀 使い方

基本的な使い方

difit <target>                    # 単一コミットのdiffを表示
difit <target> [compare-with]     # 2つのコミット/ブランチを比較

単一コミットのレビュー

difit          # HEAD(最新)のコミット
difit 6f4a9b7  # 特定のコミット
difit feature  # featureブランチの最新コミット

2つのコミットを比較

difit @ main         # mainブランチと比較(@はHEADのエイリアス)
difit feature main   # ブランチ間を比較
difit . origin/main  # 作業ディレクトリとリモートmainを比較

特別な引数

difitは一般的なdiffシナリオ用の特別なキーワードをサポートしています:

difit .        # すべての未コミット差分(ステージングエリア + 未ステージ)
difit staged   # ステージングエリアの差分
difit working  # 未ステージ差分のみ

GitHub PR

difit --pr https://github.com/owner/repo/pull/123

--pr モードでは、内部で gh pr diff --patch を実行してパッチを取得します。 加えて、PR 上の未解決 inline review thread も起動時コメントとして取り込み、difit 上でそのまま表示します。

認証は GitHub CLI が処理します:

  1. 一度ログイン(推奨):gh auth login
  2. トークン認証(CI/非対話環境):GH_TOKEN または GITHUB_TOKEN を設定

GitHub Enterprise Server

Enterprise Server の PR を表示する場合は、GitHub CLI を Enterprise ホスト向けに認証してください:

  1. gh auth login --hostname YOUR-ENTERPRISE-SERVER
  2. または GH_HOST=YOUR-ENTERPRISE-SERVERGH_TOKEN / GITHUB_TOKEN を設定

起動時コメント注入

difit の起動時に初期コメントを注入できます。

difit --comment '{"type":"thread","filePath":"src/example.ts","position":{"side":"new","line":10},"body":"この変更の背景は…"}'

--comment は複数回指定でき、単一の JSON object と JSON array の両方を受け付けます。対応する type は次の 2 種類です。

  • thread: 指定位置に新しい thread を追加
  • reply: 同じ位置にある最新 thread に reply を追加

同じコメントが既に存在する場合は import をスキップします。

標準入力

パイプを使用して標準入力経由で統一diff形式を渡すことで、任意のツールからのdiffをdifitで表示できます。

# 他のツールからのdiffを表示
diff -u file1.txt file2.txt | difit

# 保存されたパッチをレビュー
cat changes.patch | difit

# マージベースとの比較
git diff --merge-base main feature | difit

# 既存ファイル全体を新規追加として確認
git diff -- /dev/null path/to/file | difit

# 明示的に標準入力モードを使う
git diff --cached | difit -

標準入力モードは、意図を優先して次のルールで選択されます。

  • - を指定した場合は常に標準入力モード
  • positional 引数(<target> / [compare-with])または --pr がある場合は Git/PR モードとして扱い、標準入力を自動読み取りしない
  • 明示モード指定がない場合のみ、stdin が pipe/file/socket のときに自動で標準入力モードになる

⚙️ CLIオプション

フラグ デフォルト 説明
<target> HEAD コミットハッシュ、タグ、HEAD~n、ブランチ、または特別な引数
[compare-with] - 比較対象の2番目のコミット(2つの間のdiffを表示)
--merge-base false diff 計算前に git merge-base で基準側を解決する(Git revision モード専用)
--pr <url> - レビューするGitHub PRのURL(例:https://github.com/owner/repo/pull/123)
--comment <json> - 起動時に初期コメントを注入(複数指定可。JSON object または array を受け付ける)
--port 4966 優先ポート。使用中の場合は+1にフォールバック
--host 127.0.0.1 サーバーをバインドするホストアドレス(外部からアクセスしたい場合は0.0.0.0を指定)
--no-open false ブラウザを自動的に開かない
--clean false 起動時に既存コメントと閲覧済みファイルをすべてクリア
--include-untracked false diffにuntrackedファイルを自動的に含める(.またはworkingのみ有効)
--keep-alive false ブラウザ切断後もサーバーを終了せず起動したままにする(Ctrl+Cで手動停止)
--background false サーバーをバックグラウンドで起動したままにし、接続情報をJSONで出力
--context <lines> Gitの既定値 (3) 変更ごとの前後コンテキスト行数を制限(0 は変更行のみ表示。--pr と stdin では使用不可)

💬 コメントシステム

difitにはAIコーディングエージェントへフィードバックしやすいレビューコメントシステムが含まれています:

  1. コメント追加:diffの任意の行のコメントボタンをクリック or 範囲ドラッグしてコメントを追加
  2. コメント編集:編集ボタンで既存のコメントを編集
  3. プロンプト生成:コメントには、AIコーディングエージェント用にコンテキストをフォーマットする「Copy Prompt」ボタンが含まれます
  4. すべてコピー:「Copy All Prompt」を使用して、すべてのコメントを構造化された形式でコピー
  5. 永続的な保存:コメントはコミットごとにブラウザのlocalStorageに保存されます

コメントプロンプトフォーマット

src/components/Button.tsx:L42   # この行が自動的に追加されます
ここの変数名をもっとわかりやすくして

範囲指定した場合

src/components/Button.tsx:L42-L48   # この行が自動的に追加されます
この部分は不要です

🤖 エージェントからの呼び出し

AIエージェントから difit を使うための skill 群を以下でインストールできます。

npx skills add yoshiko-pg/difit

インストールされる主な skill:

  • difit: コード変更後に difit を使ってユーザーへレビューを依頼する
  • difit-review: 特定の diff や PR をレビューし、指摘や解説をコメントとして事前投入した difit を起動する

コード編集後や自動レビュー時に、目的に応じた skill で difit サーバーを起動できます。

🎨 シンタックスハイライト対応言語

  • JavaScript/TypeScript.js, .jsx, .ts, .tsx, .svelte
  • Web技術:HTML, CSS, JSON, XML, Markdown
  • シェルスクリプト.sh, .bash, .zsh, .fish
  • バックエンド言語:PHP, SQL, Ruby, Java, Scala, Perl, Elixir, Haskell, Clojure
  • システム言語:C, C++, C#, Rust, Go
  • モバイル言語:Swift, Kotlin, Dart
  • IaC:Terraform (HCL), Nix
  • その他:Python, Protobuf, YAML, Solidity, Vim Script

🔍 自動折りたたみファイル

difitは特定のファイルを自動的に識別し、ビューをすっきりさせるために折りたたみます:

  • 削除されたファイル: 削除されたファイルは詳細なレビューが不要なため、自動的に折りたたまれます
  • 自動生成ファイル: 自動生成されたコードはデフォルトで折りたたまれます。これには以下が含まれます:
  • ロックファイル (package-lock.json, go.sum, Cargo.lock, Gemfile.lock など)
  • 圧縮されたファイル (*.min.js, *.min.css)
  • ソースマップ (*.map)
  • 生成されたコード:
    • Orval (*.msw.ts, *.zod.ts, *.api.ts)
    • Dart (*.g.dart, *.freezed.dart)
    • C# (*.g.cs, *.designer.cs)
    • Protobuf (*.pb.go, *.pb.cc, *.pb.h)
  • フレームワーク:
    • Ruby on Rails (db/schema.rb)
    • Laravel (_ide_helper.php)
    • Gradle (gradle.lockfile)
    • Python (uv.lock, pdm.lock)
  • 一般的な生成ファイル (*.generated.cs, *.generated.ts, *.generated.js)
  • コンテンツベースの検出:
    • @generated マーカーを含むファイル
    • DO NOT EDIT ヘッダーを含むファイル
    • 言語固有の自動生成ヘッダー (Go, Pythonなど)

🛠️ 開発

# 依存関係のインストール
pnpm install

# 開発サーバーの起動(ホットリロード付き)
# これはViteの開発サーバーとCLIの両方をNODE_ENV=developmentで実行します
pnpm run dev

# プロダクションビルドとサーバーの起動
pnpm run start <target>

# プロダクション用ビルド
pnpm run build

# テストの実行
pnpm test

# 型チェックとlintとフォーマット
pnpm run check
pnpm run format

開発ワークフロー

  • pnpm run dev:Vite開発サーバー(ホットリロード付き)とCLIサーバーを同時に起動
  • pnpm run start <target>:すべてをビルドしてプロダクションサーバーを起動(最終ビルドのテスト用)
  • 開発モード:ホットリロードと高速開発のためにViteの開発サーバーを使用
  • プロダクションモード:ビルド済みの静的ファイルを提供(npxとプロダクションビルドで使用)

🏗️ アーキテクチャ

  • CLI:包括的なバリデーションを備えたCommander.jsでの引数解析
  • バックエンド:diff処理用のsimple-gitを備えたExpressサーバー
  • GitHub統合:GitHub CLI(gh pr diff --patch)によるPRパッチ取得
  • フロントエンド:React 18 + TypeScript + Vite
  • スタイリング:GitHubライクなダークテーマを備えたTailwind CSS v4
  • シンタックスハイライト:動的言語ロードを備えたPrism.js
  • テスト:同じ場所に配置されたテストファイルを使用したVitestユニットテスト
  • 品質:oxlint、oxfmt、lefthookプリコミットフック

📋 要件

  • Node.js ≥ 21.0.0
  • レビューするコミットを含むGitリポジトリ
  • --pr モード利用時は GitHub CLI(gh

📄 ライセンス

MIT

Extension points exported contracts — how you extend this code

CliStdoutProxy (Interface)
(no doc)
dev/dev-stdout.d.ts
ImportMetaEnv (Interface)
(no doc)
src/client/vite-env.d.ts
ConnectedWatchEvent (Interface)
(no doc)
src/types/watch.ts
PresetCase (Interface)
(no doc)
src/utils/editorOptions.test.ts
CliOptions (Interface)
(no doc)
src/cli/index.ts
FileWatcherConfig (Interface)
(no doc)
src/server/file-watcher.ts
StaticRevision (Interface)
(no doc)
src/site/types/staticDiff.ts
CreateCliStdoutProxyOptions (Interface)
(no doc)
dev/dev-stdout.d.ts

Core symbols most depended-on inside this repo

push
called by 206
dev/dev-stdout.d.ts
validateCommitish
called by 77
src/cli/utils.ts
startServer
called by 61
src/server/server.ts
isWordToken
called by 49
src/client/utils/wordDetection.ts
log
called by 49
scripts/measure-performance.js
validateDiffArguments
called by 41
src/cli/utils.ts
parseFileBlock
called by 34
src/server/git-diff.ts
useViewedFiles
called by 33
src/client/hooks/useViewedFiles.ts

Shape

Function 600
Interface 133
Method 87
Class 18
Enum 1

Languages

TypeScript100%

Modules by API surface

src/client/viewers/NotebookDiffViewer.tsx41 symbols
src/utils/commentImports.ts36 symbols
packages/vscode/src/extension.ts32 symbols
src/types/diff.ts30 symbols
src/server/git-diff.ts28 symbols
src/client/viewers/MarkdownDiffViewer.tsx28 symbols
src/client/services/StorageService.ts28 symbols
src/site/utils/staticApiBridge.ts25 symbols
src/server/server.ts25 symbols
src/cli/github.ts22 symbols
src/server/file-watcher.ts20 symbols
src/cli/utils.ts17 symbols

Dependencies from manifests, versioned

@floating-ui/react0.27.16 · 1×
@parcel/watcher2.5.1 · 1×
@testing-library/react16.3.0 · 1×
@testing-library/user-event14.6.1 · 1×
@tsconfig/strictest2.0.5 · 1×
@types/express5.0.3 · 1×
@types/node24.0.8 · 1×
@types/react19.1.8 · 1×
@types/react-dom19.1.6 · 1×
@types/vscode1.98.0 · 1×

For agents

$ claude mcp add difit \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact