octocovはコードメトリクス（カバレッジ、Code to Test Ratio、テスト実行時間）を収集するツールキットです。以前もこのブログで紹介しました。
今回、octocovのサイトとして octocov.dev を作りました。
ランディングページとしてoctocovの紹介（ほぼリンクだけ）を掲載しつつ、実験的機能としてカバレッジレポートをWebブラウザで閲覧できる機能も載せています。というか、これが作りたくて octocov.dev を作りました。
カバレッジレポート閲覧機能
octocovには artifact:// というdatastore設定があり、GitHub Actionsのアーティファクトにレポートを保存できます。外部サービスのアカウント不要で使えるので、個人的にはこれがお気に入りです。
CI上ではPRコメントやJob Summaryでレポート自体は確認できるので普段は困らないのですが、「任意のタイミングでサッと確認したい」「任意のソースコードのカバレッジを行単位で確認したい」となるとCLIとしての octocov コマンドを使用するしかありませんでした。
octocov.devでGitHubにサインインすると、artifact:// datastoreに保存されたカバレッジレポートをブラウザで閲覧できます。
前提として、リポジトリに以下のような .octocov.yml が設定されている必要があります。
# .octocov.yml report: datastores: - artifact://owner/repo
そして octocov-action を使ってGitHub Actionsのアーティファクトにレポートが保存されている必要があります。
使い方
サインイン後、ヘッダーの検索バーに owner/repo を入力するとレポートページに遷移します。
レポートサマリでは、コードカバレッジ、Code to Test ratio、テスト実行時間、そしてファイル一覧が表示されます。
ファイル一覧からファイルをクリックすると、ソースコードビューに遷移します。行ごとのカバレッジが色分けで表示されます（緑=カバー済み）。シンタックスハイライトも有効なので、コードも読みやすいと思います。
スコープとプライバシー
サインイン時に public_repo（パブリックリポジトリのみ）と repo（プライベートリポジトリも含む）のスコープを選択できます。
データの取り扱いについて明確にしておくと、サーバーが保持するのはセッション（GitHubアクセストークンとユーザー情報）のみです。カバレッジデータはブラウザのIndexedDBに、ソースコードはキャッシュせず毎回GitHub APIから取得します。ログアウト時にはブラウザキャッシュを全削除します。
技術スタック
バックエンドはCloudflare Workers + Hono、フロントエンドはReact + Tailwind CSS v4で、@cloudflare/vite-plugin を使って単一のViteビルドに統合しています。シンタックスハイライトにはShikiを使用しています。
認証はGitHub OAuth + PKCEで、セッション管理にCloudflare KV（8時間TTL）を使っています。
パフォーマンス確保のため、クライアント側ではIndexedDBにカバレッジデータをキャッシュしています。
一方、サーバー側にはカバレッジデータのキャッシュは持たせていません。また、ソースコードはどこにも持たせていません（都度フェッチ）。これはプライベートリポジトリのデータが意図せず漏洩するリスクを避けるためです。
まとめ
octocov CLIはターミナルで、octocov-actionはCIで、そしてoctocov.dev はブラウザで。octocovのカバレッジレポートを確認する手段がまた一つ増えました。
CoverallsやCodecovのような専用カバレッジサービスの代替ではなく、octocovの artifact:// datastoreを使っているユーザー向けの軽量なビューアという位置づけです。
よかったら使ってみてください。
