🐶
Recline プロジェクトの概要と改造に向けた準備
はじめに
このドキュメントでは、recline プロジェクトの構造を詳しく解説し、改造を行う際の参考になる情報を提供します。
ディレクトリ構造
recline プロジェクトは、以下のディレクトリ構造を持っています。
C:\Prj\recline
├─ src/
│ ├─ extension/ // VS Code 拡張機能の本体
│ │ ├─ api/ // 各種 API プロバイダーとのインターフェース
│ │ │ ├─ providers/ // 具体的な API プロバイダーの実装
│ │ │ │ ├─ anthropic.ts // Anthropic API
│ │ │ │ ├─ bedrock.ts // AWS Bedrock API
│ │ │ │ ├─ deepseek.ts // DeepSeek API
│ │ │ │ ├─ gemini.ts // Google Gemini API
│ │ │ │ ├─ lmstudio.ts // LM Studio API
│ │ │ │ ├─ ollama.ts // Ollama API
│ │ │ │ ├─ openai-native.ts // OpenAI Native API
│ │ │ │ ├─ openai.ts // OpenAI API
│ │ │ │ ├─ openrouter.ts // OpenRouter API
│ │ │ │ ├─ vertex.ts // GCP Vertex AI API
│ │ │ │ ├─ vscode-lm.ts // VS Code Language Model API
│ │ │ ├─ transform/ // API レスポンスの変換
│ │ │ │ ├─ gemini-format.ts // Gemini API レスポンスの形式変換
│ │ │ │ ├─ o1-format.ts // o1 API レスポンスの形式変換
│ │ │ │ ├─ openai-format.ts // OpenAI API レスポンスの形式変換
│ │ │ │ ├─ stream.ts // ストリーミングレスポンス処理
│ │ │ │ ├─ vscode-lm-format.ts // VS Code Language Model API レスポンスの形式変換
│ │ │ ├─ index.ts // api ディレクトリのエントリポイント
│ │ ├─ core/ // 主要な機能の実装
│ │ │ ├─ assistant-message/ // アシスタントメッセージの処理
│ │ │ │ ├─ diff.ts // メッセージの差分処理
│ │ │ │ ├─ index.ts // assistant-message ディレクトリのエントリポイント
│ │ │ │ ├─ parse-assistant-message.ts // アシスタントメッセージの解析
│ │ │ ├─ mentions/ // @メンション機能
│ │ │ │ ├─ index.ts // mentions ディレクトリのエントリポイント
│ │ │ │ ├─ MentionContentFetcher.ts // メンションコンテンツの取得
│ │ │ │ ├─ MentionParser.ts // メンションの解析
│ │ │ │ ├─ types.ts // メンション関連の型定義
│ │ │ ├─ prompts/ // プロンプト関連
│ │ │ │ ├─ responses.ts // プロンプトに対する応答の形式
│ │ │ │ ├─ system.ts // システムプロンプトの生成
│ │ │ │ ├─ user-system.ts // ユーザー定義のシステムプロンプト
│ │ │ ├─ sliding-window/ // スライディングウィンドウの実装
│ │ │ │ ├─ index.ts // sliding-window ディレクトリのエントリポイント
│ │ │ ├─ webview/ // Webview コンポーネント
│ │ │ │ ├─ getNonce.ts // nonce の生成
│ │ │ │ ├─ getUri.ts // URI の生成
│ │ │ │ ├─ ReclineProvider.ts // Webview のプロバイダー
│ │ │ ├─ Recline.ts // Recline のメインクラス
│ │ ├─ exports/ // API の公開
│ │ │ ├─ index.ts // exports ディレクトリのエントリポイント
│ │ │ ├─ README.md // API の使い方
│ │ │ ├─ recline.d.ts // API の型定義
│ │ ├─ integrations/ // VS Code との統合
│ │ │ ├─ browser/ // ブラウザ操作機能
│ │ │ │ ├─ BrowserSession.ts // ブラウザセッション管理
│ │ │ ├─ diagnostics/ // 問題表示機能
│ │ │ │ ├─ index.ts // diagnostics ディレクトリのエントリポイント
│ │ │ ├─ editor/ // エディタ機能
│ │ │ │ ├─ DecorationController.ts // 装飾制御
│ │ │ │ ├─ detect-omission.ts // コード省略の検出
│ │ │ │ ├─ DiffViewProvider.ts // 差分表示プロバイダー
│ │ │ ├─ misc/ // その他のユーティリティ
│ │ │ │ ├─ export-markdown.ts // Markdown エクスポート機能
│ │ │ │ ├─ extract-text.ts // テキスト抽出機能
│ │ │ │ ├─ open-file.ts // ファイルオープン機能
│ │ │ │ ├─ process-images.ts // 画像処理機能
│ │ │ ├─ notifications/ // 通知機能
│ │ │ │ ├─ index.ts // notifications ディレクトリのエントリポイント
│ │ │ │ ├─ README.md // 通知のドキュメント
│ │ │ ├─ terminal/ // ターミナル機能
│ │ │ │ ├─ TerminalManager.ts // ターミナル管理
│ │ │ │ ├─ TerminalProcess.ts // ターミナルプロセスの制御
│ │ │ │ ├─ TerminalRegistry.ts // ターミナルの登録
│ │ │ │ ├─ types.ts // ターミナル関連の型定義
│ │ │ ├─ theme/ // テーマ機能
│ │ │ │ ├─ default-themes/ // デフォルトテーマ
│ │ │ │ │ ├─ dark_modern.json // ダークモダンテーマ
│ │ │ │ │ ├─ dark_plus.json // ダークプラステーマ
│ │ │ │ │ ├─ dark_vs.json // ダーク VS テーマ
│ │ │ │ │ ├─ hc_black.json // ハイコントラストブラックテーマ
│ │ │ │ │ ├─ hc_light.json // ハイコントラストライトテーマ
│ │ │ │ │ ├─ light_modern.json // ライトモダンテーマ
│ │ │ │ │ ├─ light_plus.json // ライトプラステーマ
│ │ │ │ │ ├─ light_vs.json // ライト VS テーマ
│ │ │ │ ├─ getTheme.ts // テーマ取得機能
│ │ │ ├─ workspace/ // ワークスペース機能
│ │ │ │ ├─ environment-cache.ts // 環境キャッシュ
│ │ │ │ ├─ get-env-info.ts // 環境情報の取得
│ │ │ │ ├─ get-js-env.ts // JavaScript 環境情報の取得
│ │ │ │ ├─ get-python-env.ts // Python 環境情報の取得
│ │ │ │ ├─ WorkspaceTracker.ts // ワークスペース監視
│ │ ├─ services/ // 各種サービス
│ │ │ ├─ browser/ // ブラウザサービス
│ │ │ │ ├─ urlToMarkdown.ts // URL から Markdown への変換
│ │ │ ├─ fd/ // fd サービス
│ │ │ │ ├─ index.ts // fd ディレクトリのエントリポイント
│ │ │ ├─ mcp/ // MCP サービス
│ │ │ │ ├─ McpHub.ts // MCP ハブ
│ │ │ ├─ ripgrep/ // ripgrep サービス
│ │ │ │ ├─ index.ts // ripgrep ディレクトリのエントリポイント
│ │ │ ├─ tree-sitter/ // tree-sitter サービス
│ │ │ │ ├─ queries/ // 各言語のクエリ
│ │ │ │ │ ├─ bash.ts // bash クエリ
│ │ │ │ │ ├─ c-sharp.ts // C# クエリ
│ │ │ │ │ ├─ c.ts // C クエリ
│ │ │ │ │ ├─ cpp.ts // C++ クエリ
│ │ │ │ │ ├─ css.ts // CSS クエリ
│ │ │ │ │ ├─ elisp.ts // Elisp クエリ
│ │ │ │ │ ├─ elixir.ts // Elixir クエリ
│ │ │ │ │ ├─ elm.ts // Elm クエリ
│ │ │ │ │ ├─ embedded_template.ts // 埋め込みテンプレートクエリ
│ │ │ │ │ ├─ go.ts // Go クエリ
│ │ │ │ │ ├─ html.ts // HTML クエリ
│ │ │ │ │ ├─ index.ts // queries ディレクトリのエントリポイント
│ │ │ │ │ ├─ java.ts // Java クエリ
│ │ │ │ │ ├─ javascript.ts // JavaScript クエリ
│ │ │ │ │ ├─ json.ts // JSON クエリ
│ │ │ │ │ ├─ kotlin.ts // Kotlin クエリ
│ │ │ │ │ ├─ lua.ts // Lua クエリ
│ │ │ │ │ ├─ objc.ts // Objective-C クエリ
│ │ │ │ │ ├─ ocaml.ts // OCaml クエリ
│ │ │ │ │ ├─ php.ts // PHP クエリ
│ │ │ │ │ ├─ python.ts // Python クエリ
│ │ │ │ │ ├─ ql.ts // QL クエリ
│ │ │ │ │ ├─ rescript.ts // Rescript クエリ
│ │ │ │ │ ├─ ruby.ts // Ruby クエリ
│ │ │ │ │ ├─ rust.ts // Rust クエリ
│ │ │ │ │ ├─ scala.ts // Scala クエリ
│ │ │ │ │ ├─ solidity.ts // Solidity クエリ
│ │ │ │ │ ├─ swift.ts // Swift クエリ
│ │ │ │ │ ├─ systemrdl.ts // SystemRDL クエリ
│ │ │ │ │ ├─ tlaplus.ts // TLA+ クエリ
│ │ │ │ │ ├─ toml.ts // TOML クエリ
│ │ │ │ │ ├─ tsx.ts // TSX クエリ
│ │ │ │ │ ├─ typescript.ts // TypeScript クエリ
│ │ │ │ │ ├─ vue.ts // Vue クエリ
│ │ │ │ │ ├─ yaml.ts // YAML クエリ
│ │ │ │ │ ├─ zig.ts // Zig クエリ
│ │ │ │ ├─ index.ts // tree-sitter ディレクトリのエントリポイント
│ │ │ │ ├─ languageParser.ts // 言語パーサー
│ │ │ │ ├─ supported.ts // サポート言語
│ │ │ │ ├─ wasm.ts // wasm のインポート
│ │ ├─ test/ // テスト関連
│ │ │ ├─ extension.test.ts // 拡張機能のテスト
│ │ ├─ utils/ // ユーティリティ
│ │ │ ├─ cost.test.ts // cost ユーティリティのテスト
│ │ │ ├─ cost.ts // cost ユーティリティ
│ │ │ ├─ fs.test.ts // fs ユーティリティのテスト
│ │ │ ├─ fs.ts // fs ユーティリティ
│ │ │ ├─ path.test.ts // path ユーティリティのテスト
│ │ │ ├─ path.ts // path ユーティリティ
│ │ │ ├─ sanitize.ts // サニタイズ処理
│ │ │ ├─ string.ts // string ユーティリティ
│ │ ├─ constants.ts // 定数
│ │ ├─ index.ts // extension ディレクトリのエントリポイント
│ │ ├─ shims.d.ts // 型定義
│ ├─ shared/ // 拡張機能と Webview で共有するコード
│ │ ├─ api.ts // API 関連の型定義
│ │ ├─ array.test.ts // array ユーティリティのテスト
│ │ ├─ array.ts // array ユーティリティ
│ │ ├─ AutoApprovalSettings.ts // 自動承認設定
│ │ ├─ combineApiRequests.ts // API リクエストの結合
│ │ ├─ combineCommandSequences.ts // コマンドシーケンスの結合
│ │ ├─ context-mentions.ts // コンテキストメンション
│ │ ├─ ExtensionMessage.ts // ExtensionMessage 型定義
│ │ ├─ getApiMetrics.ts // API メトリクスの計算
│ │ ├─ HistoryItem.ts // HistoryItem 型定義
│ │ ├─ mcp.ts // MCP 関連の型定義
│ │ ├─ vsCodeSelectorUtils.ts // VS Code セレクタ関連
│ │ ├─ WebviewMessage.ts // WebviewMessage 型定義
│ ├─ webview-ui/ // Webview UI のコード
│ │ ├─ components/ // コンポーネント
│ │ │ ├─ chat/ // チャット関連
│ │ │ │ ├─ Announcement.tsx // お知らせコンポーネント
│ │ │ │ ├─ AutoApproveMenu.tsx // 自動承認メニューコンポーネント
│ │ │ │ ├─ BrowserSessionRow.tsx // ブラウザセッションのコンポーネント
│ │ │ │ ├─ ChatRow.tsx // チャットの行コンポーネント
│ │ │ │ ├─ ChatTextArea.tsx // チャットのテキストエリア
│ │ │ │ ├─ ChatView.tsx // チャットビュー
│ │ │ │ ├─ ContextMenu.tsx // コンテキストメニュー
│ │ │ │ ├─ TaskHeader.tsx // タスクヘッダーコンポーネント
│ │ │ ├─ common/ // 共通コンポーネント
│ │ │ │ ├─ CodeAccordian.tsx // コードアコーディオン
│ │ │ │ ├─ CodeBlock.tsx // コードブロック
│ │ │ │ ├─ MarkdownBlock.tsx // Markdown ブロック
│ │ │ │ ├─ Thumbnails.tsx // サムネイル
│ │ │ │ ├─ VSCodeButtonLink.tsx // VS Code ボタンリンク
│ │ │ ├─ history/ // 履歴関連
│ │ │ │ ├─ HistoryPreview.tsx // 履歴プレビュー
│ │ │ │ ├─ HistoryView.tsx // 履歴ビュー
│ │ │ ├─ mcp/ // MCP 関連
│ │ │ │ ├─ McpResourceRow.tsx // MCP リソース行
│ │ │ │ ├─ McpToolRow.tsx // MCP ツール行
│ │ │ │ ├─ McpView.tsx // MCP ビュー
│ │ │ ├─ settings/ // 設定関連
│ │ │ │ ├─ ApiOptions.tsx // API 設定コンポーネント
│ │ │ │ ├─ OpenRouterModelPicker.tsx // OpenRouter モデルピッカー
│ │ │ │ ├─ SettingsView.tsx // 設定ビュー
│ │ │ │ ├─ TabNavbar.tsx // タブナビゲーションバー
│ │ │ ├─ welcome/ // ウェルカム関連
│ │ │ │ ├─ WelcomeView.tsx // ウェルカムビュー
│ │ ├─ context/ // コンテキスト
│ │ │ ├─ ExtensionStateContext.tsx // 拡張機能状態コンテキスト
│ │ ├─ utils/ // ユーティリティ
│ │ │ ├─ context-mentions.ts // コンテキストメンション
│ │ │ ├─ format.ts // フォーマットユーティリティ
│ │ │ ├─ getLanguageFromPath.ts // パスから言語を取得
│ │ │ ├─ mcp.ts // MCP ユーティリティ
│ │ │ ├─ textMateToHljs.ts // TextMate テーマを hljs に変換
│ │ │ ├─ validate.ts // バリデーションユーティリティ
│ │ │ ├─ vscode.ts // VS Code ユーティリティ
│ │ ├─ App.tsx // Webview のルートコンポーネント
│ │ ├─ index.css // CSS
│ │ ├─ index.tsx // エントリーポイント
│ │ ├─ reportWebVitals.ts // パフォーマンス測定
│ │ ├─ setupTests.ts // テスト設定
├─ test/ // テスト関連
│ ├─ index.test.ts // インテグレーションテスト
├─ CLINE.LICENSE.md // CLINE のライセンス
├─ eslint.config.mjs // ESLint 設定
├─ LICENSE.md // プロジェクトのライセンス
├─ package.json // パッケージ情報
├─ pnpm-workspace.yaml // pnpm ワークスペース設定
├─ README.md // README ファイル
├─ repomix.config.json // repomix 設定
├─ rsbuild.config.ts // Rsbuild 設定
├─ tsconfig.json // TypeScript 設定
主要な機能
recline プロジェクトは、VS Code 拡張機能として、以下の主要な機能を提供しています。
-
多様な AI プロバイダーのサポート:
- OpenAI、Anthropic、Google Gemini、AWS Bedrock などの API に対応。
- Ollama、LM Studio などのローカルモデルもサポート。
- OpenRouter を通じた最新モデルの利用。
-
高度なターミナル統合:
- VS Code のシェル API を利用したターミナルコマンドの実行と出力の取得。
- 長時間実行プロセス中の継続的な作業が可能。
-
インテリジェントなファイル管理:
- 差分表示による変更の確認と編集。
- 一般的な問題（import の不足、構文エラーなど）の自動解決。
- 変更履歴の追跡とロールバック機能。
-
ブラウザ統合:
- Web プロジェクトのテストとデバッグを自動化。
- Claude 3.5 Sonnet の Computer Use を利用した Web ページの操作。
-
拡張可能なアーキテクチャ:
- Model Context Protocol (MCP) を利用したカスタムツールの追加。
-
コンテキスト拡張:
-
@urlによる外部ドキュメントのインポート。 -
@problemsによる問題パネルからの診断情報の取得。 -
@fileによるファイル内容の追加。 -
@folderによるディレクトリの一括インポート。
-
改造のポイント
recline プロジェクトの改造にあたっては、以下の点に注意すると良いでしょう。
-
API プロバイダーの追加:
-
src/extension/api/providersディレクトリに新しいプロバイダーの.tsファイルを作成。 -
src/extension/api/index.tsでプロバイダーを登録。 -
src/shared/api.tsに関連する型定義を追加。
-
-
新しいツールの追加:
-
src/extension/services/mcpに新しいツールを作成。 -
src/extension/core/prompts/system.tsで新しいツールに対応するプロンプトを追加。 -
src/extension/core/assistant-message/index.tsでツール定義と型定義を追加。
-
-
Webview UI の変更:
-
src/webview-ui/componentsディレクトリで React コンポーネントを編集。 -
src/webview-ui/context/ExtensionStateContext.tsxで状態管理の変更。
-
-
テストの追加:
-
testディレクトリにユニットテスト、インテグレーションテストを追加。
-
ファイルの詳細
設定ファイル
.editorconfig
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
trim_trailing_whitespace = false
.npmrc
shell-emulator=true
ignore-workspace-root-check=true
.reclinerules
**Context**
This is the codebase of the Recline VSCode extension itself.
Recline is an autonomous AI assistant that seamlessly integrates with your CLI and editor to create, edit, and run; redefining how you code.
**Rules**
1. The project uses unbuild to build (do not change)
2. The project uses pnpm for dependency management (do not change)
3. *IGNORE ALL ESLINT ERRORS*
.vscode-test.mjs
import { defineConfig } from "@vscode/test-cli";
export default defineConfig({
files: "test/**/*.test.ts",
workspaceFolder: ".",
mocha: {
ui: "tdd",
timeout: 20000,
color: true
}
});
CLINE.LICENSE.md
- Apache 2.0 ライセンス情報
eslint.config.mjs
- ESLint の設定
LICENSE.md
- Mozilla Public License 2.0 ライセンス情報
package.json
- プロジェクトの依存関係、スクリプト、拡張機能の設定などが記述
pnpm-workspace.yaml
packages:
- packages/*
README.md
- プロジェクトの説明、インストール方法、貢献方法などが記載
repomix.config.json
- コード分析ツール
repomixの設定
rsbuild.config.ts
- ビルドツール
rsbuildの設定
tsconfig.json
- TypeScript の設定
.vscode ディレクトリ
.vscode\extensions.json
- 推奨される VS Code 拡張機能
.vscode\launch.json
- デバッグ構成
.vscode\settings.json
- VS Code の設定
.vscode\tasks.json
- VS Code のタスク設定
src ディレクトリ
src\extension\constants.ts
- グローバルな定数
src\extension\index.ts
- 拡張機能のエントリーポイント（アクティベートとディアクティベート関数）
src\extension\shims.d.ts
- 拡張機能で使用する wasm ファイルの型定義
src\extension\api\index.ts
- API ハンドラーのビルド
src\extension\api\providers\
- 各種 API プロバイダーの実装
src\extension\api\transform\
- API レスポンスを変換するコード
src\extension\core\Recline.ts
- Recline の中核となるクラス（タスク管理、API 呼び出し、ツール実行など）
src\extension\core\assistant-message\
- アシスタントからのメッセージ処理
src\extension\core\mentions\
- メンション（例: @file）を処理するコード
src\extension\core\prompts\
- プロンプト関連のユーティリティ
src\extension\core\sliding-window\
- API リクエストにおけるコンテキストを管理するためのスライディングウィンドウの実装
src\extension\core\webview\
- VS Code Webview のためのユーティリティ
src\extension\exports\
- API の公開と型定義
src\extension\integrations\
- VS Code への様々な統合機能
src\extension\services\
- 様々なサービスの実装（fd, ripgrep, tree-sitter）
src\extension\test\
- 拡張機能のテスト
src\extension\utils\
- 様々なユーティリティ関数
src\shared
- 拡張機能と webview で共有されるコード
src\webview-ui
- Webview UI の実装
まとめ
recline プロジェクトは、VS Code の拡張機能として、AI によるコーディング支援を提供する複雑なプロジェクトです。上記の情報は、プロジェクトの構造を理解し、効果的な改造を行うための基礎となります。変更を行う際は、関連するファイルと機能に注意し、段階的に変更を加えることを推奨します。特に、src/extension/api/providers に新しい API プロバイダーを追加したり、src/extension/services/mcp でカスタムツールを作成する際は、既存のコード構造と一貫性があるように注意してください。
このドキュメントが、あなたの recline プロジェクトの改造に役立つことを願っています。
Discussion