ktmage · ktmage · Mar 1, 2026 · Feb 24, 2026 · Feb 24, 2026 · Feb 24, 2026
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -20,4 +20,7 @@ jobs:
 
       - run: npm ci
 
+      - name: Lint & Format check
+        run: npx biome check .
+
       - run: npm test
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -33,11 +33,27 @@
     "https://*.wikipedia.org": true,
     "https://*.netlify.app": true,
     "https://*.hotwired.dev": true,
-    "https://*.opencode.ai": true
+    "https://*.opencode.ai": true,
+    "https://*.visualstudio.com": true,
+    "https://*.zipcloud.ibsnet.co.jp": true,
+    "https://*.google.com": true
   },
   "chat.instructionsFilesLocations": {
     ".ktmage/instructions": true,
     ".ktmage/project/instructions": true
   },
-  "chat.agent.maxRequests": 100
+  "chat.agent.maxRequests": 100,
+  "accessibility.signalOptions.volume": 70,
+  "accessibility.signals.chatEditModifiedFile": {
+    "sound": "on"
+  },
+  "accessibility.signals.chatRequestSent": {
+    "sound": "on"
+  },
+  "accessibility.signals.chatResponseReceived": {
+    "sound": "on"
+  },
+  "accessibility.signals.chatUserActionRequired": {
+    "sound": "on"
+  }
 }
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,40 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/),
 and this project adheres to [Semantic Versioning](https://semver.org/).
 
+## [Unreleased]
+
+## [0.2.0] - 2026-03-01
+
+### Added
+
+- Message editing & checkpoint restore
+- Reasoning / thinking display
+- Shell command execution
+- File changes diff view
+- Session fork
+- Child session navigation (subtask)
+- Subtask display for task tool calls
+- Agent mention (`@` mention)
+- Session sharing
+- Undo / Redo
+- Settings panel
+- Keyboard navigation for inline popups (Tab / Arrow keys)
+- Biome as linter/formatter
+- DOMPurify for XSS protection
+- CSS Modules for component styling
+
+### Changed
+
+- Replace hardcoded SVG icons with react-icons/vsc
+- UI component architecture refactored to Atoms/Molecules/Organisms
+- Todo display migrated from message parsing to session.todo() API
+- OpenCode repository URL updated (opencode-ai → anomalyco)
+- Repository URL updated to opencode-gui
+
+### Fixed
+
+- Markdown CSS scoped to `.markdown` class to prevent style bleeding
+
 ## [0.1.0] - 2026-02-24
 
 ### Added
@@ -19,3 +53,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/).
 - Context compression indicator
 - Todo display
 - i18n support (English, Japanese)
+
+[Unreleased]: https://github.com/ktmage/opencode-gui/compare/v0.2.0...HEAD
+[0.2.0]: https://github.com/ktmage/opencode-gui/compare/v0.1.0...v0.2.0
+[0.1.0]: https://github.com/ktmage/opencode-gui/releases/tag/v0.1.0
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -24,13 +24,13 @@ This project itself is developed primarily through AI-assisted coding, and we we
 
 - Node.js v22+
 - npm
-- [OpenCode](https://github.com/opencode-ai/opencode) installed with LLM provider authentication configured
+- [OpenCode](https://github.com/anomalyco/opencode) installed with LLM provider authentication configured
 
 #### Setup
 
 ```sh
-git clone https://github.com/<your-fork>/OpenCodeGUI.git
-cd OpenCodeGUI
+git clone https://github.com/<your-fork>/opencode-gui.git
+cd opencode-gui
 npm install
 npm run build
 ```
@@ -45,7 +45,7 @@ npm test
 
 #### Reporting Bugs / Requesting Features
 
-Opening an issue before starting work is recommended. Use the provided [issue templates](https://github.com/ktmage/OpenCodeGUI/issues/new/choose).
+Opening an issue before starting work is recommended. Use the provided [issue templates](https://github.com/ktmage/opencode-gui/issues/new/choose).
 
 For small fixes (typos, documentation improvements), you may open a PR directly.
 
@@ -54,18 +54,33 @@ For small fixes (typos, documentation improvements), you may open a PR directly.
 1. Fork the repository
 2. Create a branch from `development`
 3. Make your changes
-4. Ensure `npm run build` and `npm test` pass
+4. Ensure `npm run check`, `npm run build` and `npm test` pass
 5. Open a pull request against `development`
 
 PRs are squash-merged to keep the commit history clean.
 
 ### Code Style
 
-There is no formal linter or formatter configured yet. Please follow the style of the existing codebase.
+This project uses [Biome](https://biomejs.dev/) for linting and formatting. Run the following before submitting a PR:
+
+```sh
+npm run check
+```
+
+To auto-fix issues:
+
+```sh
+npm run check:fix
+```
 
 ### Testing
 
-When your change affects behavior, add or update scenario tests. Follow the existing test patterns in `webview/__tests__/scenarios/`.
+When your change affects behavior, add or update tests. Follow existing test patterns:
+
+- **Scenario tests:** `webview/__tests__/scenarios/`
+- **Component unit tests:** `webview/__tests__/components/`
+- **Hook unit tests:** `webview/__tests__/hooks/`
+- **Utility tests:** `webview/__tests__/utils/`
 
 ### Review Process
 
@@ -92,13 +107,13 @@ By submitting a pull request, you agree that your contributions are licensed und
 
 - Node.js v22+
 - npm
-- [OpenCode](https://github.com/opencode-ai/opencode) がインストール済みで、LLM プロバイダの認証が完了していること
+- [OpenCode](https://github.com/anomalyco/opencode) がインストール済みで、LLM プロバイダの認証が完了していること
 
 #### セットアップ
 
 ```sh
-git clone https://github.com/<your-fork>/OpenCodeGUI.git
-cd OpenCodeGUI
+git clone https://github.com/<your-fork>/opencode-gui.git
+cd opencode-gui
 npm install
 npm run build
 ```
@@ -113,7 +128,7 @@ npm test
 
 #### バグ報告・機能リクエスト
 
-作業を開始する前に Issue を立てることを推奨します。[Issue テンプレート](https://github.com/ktmage/OpenCodeGUI/issues/new/choose)を利用してください。
+作業を開始する前に Issue を立てることを推奨します。[Issue テンプレート](https://github.com/ktmage/opencode-gui/issues/new/choose)を利用してください。
 
 小さな修正（typo、ドキュメント改善など）は直接 PR を出しても構いません。
 
@@ -122,18 +137,33 @@ npm test
 1. リポジトリをフォークする
 2. `development` ブランチからブランチを作成する
 3. 変更を加える
-4. `npm run build` と `npm test` が通ることを確認する
+4. `npm run check`、`npm run build`、`npm test` が通ることを確認する
 5. `development` ブランチに対して Pull Request を出す
 
 PR は Squash merge でマージされます。
 
 ### コードスタイル
 
-現在、Linter や Formatter は導入していません。既存のコードベースのスタイルに合わせてください。
+本プロジェクトでは [Biome](https://biomejs.dev/) を Linter/Formatter として使用しています。PR を出す前に以下を実行してください:
+
+```sh
+npm run check
+```
+
+問題を自動修正するには:
+
+```sh
+npm run check:fix
+```
 
 ### テスト
 
-動作に影響する変更の場合は、シナリオテストを追加・更新してください。`webview/__tests__/scenarios/` にある既存のテストパターンに習って書いてください。
+動作に影響する変更の場合は、テストを追加・更新してください。既存のテストパターンに習って書いてください:
+
+- **シナリオテスト:** `webview/__tests__/scenarios/`
+- **コンポーネント単体テスト:** `webview/__tests__/components/`
+- **フック単体テスト:** `webview/__tests__/hooks/`
+- **ユーティリティテスト:** `webview/__tests__/utils/`
 
 ### レビュー体制
 

diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # OpenCodeGUI
 
-An unofficial VS Code sidebar chat interface for [OpenCode](https://github.com/opencode-ai/opencode).
+An unofficial VS Code sidebar chat interface for [OpenCode](https://github.com/anomalyco/opencode).
 
 OpenCode の非公式 VS Code サイドバーチャットインターフェース。
 
@@ -22,6 +22,10 @@ Use all OpenCode features from a familiar sidebar chat UI.
 > **Disclaimer:**
 > This project is experimental and developed primarily through AI-assisted coding. It is provided "as-is" without warranty of any kind. It may contain unexpected behavior, unconventional implementations, or undiscovered defects. Use at your own risk. The authors assume no liability for any damages arising from the use of this software.
 
+### Demo
+
+![Demo](media/demo.gif)
+
 ### Documents
 
 | File | Description |
@@ -37,16 +41,27 @@ Use all OpenCode features from a familiar sidebar chat UI.
 - Markdown rendering
 - Tool call collapsible display
 - Permission approval UI (Allow / Once / Deny)
-- Session management (create, switch, delete)
+- Session management (create, switch, fork, delete)
+- Message editing & checkpoint restore
 - Model selection
 - File context attachment
+- File changes diff view
+- Shell command execution
 - Context compression indicator
+- Reasoning / thinking display
 - Todo display
+- Undo / Redo
+- Session sharing
+- Agent mention (`@` mention)
+- Child session navigation (subtask)
+- Settings panel
+- Keyboard navigation for inline popups (Tab / Arrow keys)
+- Subtask display
 - i18n support (English, Japanese)
 
 ### Requirements
 
-- [OpenCode](https://github.com/opencode-ai/opencode) installed
+- [OpenCode](https://github.com/anomalyco/opencode) installed
 - LLM provider authentication configured in OpenCode
 
 ### Installation
@@ -92,6 +107,12 @@ npm run watch:ext
 npm run watch:webview
 ```
 
+#### Lint & Format
+
+```sh
+npm run check
+```
+
 #### Debug
 
 1. Run `npm run build`
@@ -116,12 +137,12 @@ webview/                  # Webview (Browser, React)
   main.tsx                # React entry point
   App.tsx                 # State management & SSE event handling
   vscode-api.ts           # VS Code Webview API wrapper
-  styles.css              # Styles using VS Code theme variables
-  components/             # React components
-
-dist/                     # Build output (not tracked by git)
-  extension.js            # Extension bundle
-  webview/                # Webview bundle
+  components/             # React components (CSS Modules)
+  hooks/                  # Custom React hooks
+  contexts/               # React Context providers
+  locales/                # i18n locale files
+  utils/                  # Utility functions
+  __tests__/              # Tests (unit, scenario)
 
 esbuild.mjs               # Extension build config
 vite.config.ts             # Webview build config
@@ -148,6 +169,10 @@ OpenCode の全機能をサイドバーのチャット UI から操作できま
 > **免責事項：**
 > 本プロジェクトは実験的な取り組みであり、主に AI を活用したコーディングにより開発されています。いかなる保証もなく「現状のまま」提供されます。予期しない動作、一般的でない実装、未発見の不具合が含まれる可能性があります。ご利用は自己責任でお願いいたします。本ソフトウェアの使用により生じたいかなる損害についても、作者は一切の責任を負いません。
 
+### デモ
+
+![デモ](media/demo.gif)
+
 ### ドキュメント
 
 | ファイル | 説明 |
@@ -163,16 +188,27 @@ OpenCode の全機能をサイドバーのチャット UI から操作できま
 - Markdown レンダリング
 - ツールコールの折りたたみ表示
 - パーミッション承認 UI（Allow / Once / Deny）
-- セッション管理（作成、切替、削除）
+- セッション管理（作成、切替、フォーク、削除）
+- メッセージ編集とチェックポイント復元
 - モデル選択
 - ファイルコンテキスト添付
+- ファイル変更差分表示
+- シェルコマンド実行
 - コンテキスト圧縮インジケーター
+- 推論（思考過程）表示
 - Todo 表示
+- Undo / Redo
+- セッション共有
+- エージェントメンション（`@` メンション）
+- 子セッションナビゲーション（サブタスク）
+- 設定パネル
+- インラインポップアップのキーボードナビゲーション（Tab / 矢印キー）
+- サブタスク表示
 - 多言語対応（英語、日本語）
 
 ### 必要条件
 
-- [OpenCode](https://github.com/opencode-ai/opencode) がインストール済みであること
+- [OpenCode](https://github.com/anomalyco/opencode) がインストール済みであること
 - OpenCode 側で LLM プロバイダの認証が完了していること
 
 ### インストール
@@ -218,6 +254,12 @@ npm run watch:ext
 npm run watch:webview
 ```
 
+#### リント & フォーマット
+
+```sh
+npm run check
+```
+
 #### デバッグ実行
 
 1. `npm run build` でビルドする
@@ -238,16 +280,16 @@ src/                      # Extension Host (Node.js)
   opencode-client.ts      # OpenCode サーバー接続
   chat-view-provider.ts   # Webview パネル & メッセージングプロトコル
 
-webview/                  # Webview (ブラウザ, React)
+webview/                  # Webview (Browser, React)
   main.tsx                # React エントリーポイント
   App.tsx                 # 状態管理 & SSE イベントハンドリング
   vscode-api.ts           # VS Code Webview API ラッパー
-  styles.css              # VS Code テーマ変数を使ったスタイル
-  components/             # React コンポーネント
-
-dist/                     # ビルド出力（git 管理外）
-  extension.js            # Extension バンドル
-  webview/                # Webview バンドル
+  components/             # React コンポーネント（CSS Modules）
+  hooks/                  # カスタム React フック
+  contexts/               # React Context プロバイダー
+  locales/                # i18n ロケールファイル
+  utils/                  # ユーティリティ関数
+  __tests__/              # テスト（単体、シナリオ）
 
 esbuild.mjs               # Extension ビルド設定
 vite.config.ts             # Webview ビルド設定