github-reporadar 0.1.0

package/DESIGN.md

@@ -0,0 +1,126 @@
+# GitHub RepoRadarデザイン仕様
+
+この文書は「見た目をどう決めるか」の契約です。ここに書いた値は`src/index.css`の`@theme`と一致し、`src/designTokens.test.ts`が両者の乖離を赤にします。値を変えるときは文書とCSSを同じコミットで直してください。
+
+## コンセプト:計器盤
+
+RepoRadarは自分のGitHubを一晩ぶん眺める道具です。画面は暗い計器盤で、光るのは「いま判断が要るもの」だけ。ヘッダーのマークはレーダーの掃引で、動いている唯一の装飾です。
+
+この道具の読み手は開発者本人ひとりです。誰かに見せる画面ではないので、装飾で印象を作る必要がありません。代わりに、数字と名前を読み違えないこと、暗い部屋でも目が疲れないこと、100件のrepoを一目で走査できることに寄せます。
+
+決めていること
+
+| 決めごと | 中身 |
+|---|---|
+| 色を使う範囲 | 最終pushが30日以内のものだけ。緑(7日以内)・黄(14日以内)・赤(30日以内)。それより古いものはグレーの明度差で奥へ退く |
+| 主役 | 文字。面や線は文字を読むための下地で、それ自体が目立ってはいけない |
+| 面の作り | 黒に近い背景に、わずかに浮いたカード面。境界はヘアライン1本。影は使わない |
+| 動き | レーダーの掃引と、一覧の行が下から出るフェードの2つだけ。`prefers-reduced-motion`で両方止まる |
+| 書体 | 名前・数字・日付・コードは等幅(IBM Plex Mono)。文章はIBM Plex Sans |
+
+## 色
+
+### トークン
+
+すべての文字色は、カード面`panel`に対してWCAG AA(文字4.5:1、非テキスト3:1)を満たします。下の「対panel」はテストが計算して照合する値です。
+
+| トークン | 値 | 役割 | 対panel |
+|---|---|---|---|
+| `--color-ink` | `#0a0c10` | アプリ背景 | — |
+| `--color-panel` | `#13171e` | カード面。背景より1段浮く | — |
+| `--color-panel-2` | `#0d1015` | 落とし込み面。入力欄・引用 | — |
+| `--color-line` | `#262d3a` | 装飾のヘアライン。区切り線・カード縁 | 1.30 |
+| `--color-line-strong` | `#5d6779` | 操作部品の縁。入力欄・ボタン・リンク型ボタン | 3.15 |
+| `--color-fg` | `#f2f4f8` | 本文・見出し・入力値・返答 | 16.31 |
+| `--color-fg-muted` | `#a3acbd` | 補助文。説明・メタ情報・案内 | 7.86 |
+| `--color-fg-faint` | `#858e9f` | 三次。placeholder・列見出し・件数 | 5.45 |
+
+### 3段の使い分け
+
+読む文字は3段のどれかです。判断の基準は「その文字を消したら、画面の用が果たせなくなるか」。
+
+| 段 | 使う場所 | 使わない場所 |
+|---|---|---|
+| `fg` | repo名、コミット文、壁打ちの返答、入力した値、見出し | 見出しの下の説明 |
+| `fg-muted` | 説明文、日付や言語などのメタ情報、空状態と読み込み中の案内文 | 本文。返答やコミット文を補助色で描くと「暗い」と感じる(2026-09-05に実測して直した) |
+| `fg-faint` | placeholder、テーブルの列見出し、件数、押せない状態 | 文章。faintは文の単位では読まない |
+
+`fg-faint`より暗い文字は置きません。Tailwindの`text-slate-500`(3.8:1)以下は文字色に使いません。
+
+### 信号色
+
+| 色 | 意味 | 値 |
+|---|---|---|
+| 緑`emerald-400` | 動いている。最終pushが7日以内。選択・成功・主操作のhover | `#34d399` |
+| 黄`amber-400` | 止まりかけ。8〜14日。Bookmarkの★ | `#fbbf24` |
+| 赤`rose-400` | 止まった。15〜30日。破壊的操作のhover、エラー | `#fb7185` |
+| グレー3段 | 31日以降。`slate-300` → `slate-400` → `fg-faint`。すべて文字としてAAを満たす | — |
+
+信号色は文字と点に使い、面には使いません。面に色を敷くときは`/10`以下の透過で、色の名残だけを置きます(`bg-emerald-400/[0.06]`など)。
+
+### 縁
+
+装飾の縁と、操作部品の縁を分けます。カードや区切り線は`border-line`。入力欄・textarea・select・ボタン・ボタンに見えるリンクは`border-line-strong`。後者は「そこが押せる」と分かるための境界なので3:1が要ります。前者は静かなほど良い。
+
+## 文字
+
+| 用途 | クラス | 備考 |
+|---|---|---|
+| 本文・ボタン | `text-sm`(14px) | 既定 |
+| メタ情報・ラベル・件数 | `text-xs`(12px) | これが下限。12px未満は使わない |
+| 見出し | `text-base`〜`text-lg` + `font-medium` | 太字は`font-semibold`まで。`font-bold`は使わない |
+| 大きな数字 | `text-2xl`〜`text-3xl` + `font-mono` + `tracking-tight` | 詳細ペインのコミット数 |
+| 列見出し・節見出し | `text-xs font-mono font-semibold tracking-wider uppercase text-fg-faint` | 計器盤の刻印 |
+
+名前、数字、日付、コード、モデル名は等幅。文章はsans。混ぜて1行に置くときは、等幅の側に`font-mono`を明示する。
+
+行長は幅で作らない。`max-w-*`はレイアウトの容器に当て、段落に`ch`単位の上限を当てない。
+
+## 面と余白
+
+| 要素 | 形 |
+|---|---|
+| カード | `rounded-lg border border-line bg-panel` |
+| 入力欄 | `rounded-md border border-line-strong bg-panel-2` |
+| ボタン | `rounded-md border border-line-strong` + `text-fg-muted hover:text-fg`。主操作のhoverは`hover:border-emerald-500/40` |
+| 札(private・非表示・鮮度) | `rounded px-1 font-mono text-xs` |
+| セグメント切替 | 外枠`rounded-lg border border-line`、選択中だけ`bg-panel text-fg font-medium` |
+| メニュー・ポップアップ | `bg-panel/85` + `backdrop-filter: blur(12px)`。document.bodyへポータルする |
+
+余白は4pxの倍数。要素内は`px-3 py-1.5`、要素間は`gap-2`、区画間は`p-4`を既定にします。角丸は`rounded-md`(6px)を基本にし、面が大きいものだけ`rounded-lg`。`rounded-xl`以上は使いません。
+
+影は使いません。面の前後関係は明度の差と、ヘアライン1本で示します。
+
+## 動き
+
+| 動き | 場所 | 長さ |
+|---|---|---|
+| レーダーの掃引 | ヘッダーのマークだけ | 3.4秒/周 |
+| 行のフェードイン | 一覧の各行。`animationDelay`は最大280ms | 450ms |
+| 色の変化 | `transition-colors`。hoverと選択 | 150ms |
+
+これ以外の動きは足しません。`prefers-reduced-motion: reduce`で掃引とフェードは止まります。
+
+## 書かないもの
+
+過去に却下された形と、この計器盤に合わない形です。理由を添えます。
+
+| 形 | 理由 |
+|---|---|
+| 1辺だけの太い帯や色付きボーダー | 種別は札と文字色で既に示している。帯は情報を足さず、角丸と相性が悪い |
+| 段落への`max-w-[Nch]` | 日本語では意図の半分の幅になり、文節折りと合わさって右端が波打つ。行長は容器に任せる |
+| 12px未満の文字 | 読めない。`text-[10px]`のような任意値も使わない |
+| 絵文字をアイコン代わりに使う | 端末で形が変わる。SVGにする。既存の`⋯`と`☆`は文字として扱っている例外 |
+| 影・グロー・グラデーション | 計器盤は平らな面で作る。奥行きは明度差で示す |
+| 見出しのための太字の散布 | 構造は余白と字間で示す |
+| 中身を見せずに送る・コピーする操作 | 送る文字列は画面に出してから送る。壁打ちの「送信する内容」が例 |
+
+## 検査
+
+| 何を | どう | いつ |
+|---|---|---|
+| トークンの値と比率 | `src/designTokens.test.ts`。`index.css`とこの文書の表を照合し、AAの床を切ったら赤 | `pnpm test` |
+| ソースの禁止パターン | `scripts/design/lint.mjs`。12px未満、暗いslate、任意hex、操作部品の弱い縁 | 保存時のhookと`pnpm test` |
+| 実際の描画 | `pnpm design`。12px未満の要素数、横溢れ、全テキストの実効コントラスト、axeの違反 | UIを変えたPRの前 |
+
+実測は実データで動くので、出力はクラス名と数値だけにし、repo名やコミット文を外へ出しません。スクリーンショットもPRに貼りません。

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 BoxPistols
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,212 @@
+# GitHub RepoRadar
+
+多数の個人リポジトリを並行開発する人のための「どこで何を作っていたか」想起ダッシュボード。
+GitHub の活動(commit / PR / issue)を期間指定で集約し、Web UI とターミナルの両方から確認できます。
+
+## 機能
+
+Web UI はヘッダーで 3 モードを切り替えます。
+
+- **ダッシュボード**: 日次×repo ヒートマップ + repo カード/テーブル。期間(7/30/90日)・ソート(活動量/最終push/放置)・キーワード検索・タグ・Bookmark(★)。
+  絞り込みは「活動量(期間内 commit 数の下限)」×「最終push(N日以内 / N日以上放置)」の2軸と、
+  よく使う組み合わせのプリセット(🔥 活発 × 30日以内 / ⚡ 直近7日 / 💤 30日以上放置)。カードから「次にやること」メモ。
+  モバイルではカードがアコーディオンになり、既定は全て閉じた状態。単一展開/複数展開の切替と「全て開く/全て閉じる」で開き方を選べる。
+- **ボード**: 総合 Projects。Backlog/Active/Review/Done/Dormant の列に repo や自由タスクのカードを DnD で並べる。
+- **検索**: 全 repo の open issue/PR を横断全文検索(日本語対応)+ type/repo/label ファセット + ラベル別件数。
+
+**User data(タグ/Bookmark/ボード/メモ)の保存先**は既定でブラウザローカル(IndexedDB)。ヘッダーの
+「☁ 同期フォルダを接続」で OneDrive/iCloud/Dropbox 等の同期フォルダを選ぶと、端末間で共有できます
+(BE/DB レス、同期は OS のクラウドクライアント任せ)。
+
+## 必要なもの
+
+- Node.js 20+ / pnpm
+- [gh CLI](https://cli.github.com/) でログイン済みであること(`gh auth login`)
+
+トークンは実行時に `gh auth token` から読むだけで、ファイルには一切保存しません。
+
+## npxで使う(インストール不要)
+
+```bash
+npx github-reporadar            # 同期してからローカルで開く
+npx github-reporadar brief      # 端末に要約を出す
+npx github-reporadar --help     # フラグの一覧
+```
+
+- 前提は`gh auth login`済みのgh CLIだけ。トークンは実行時に`gh auth token`から読み、保存しない
+- データは`$XDG_CACHE_HOME`か`~/.cache`の`github-reporadar/data/`に置く。カレントディレクトリには落とさない(private repo名とコミット文が入るため)。`--data-dir`で変えられる
+- 待ち受けは`127.0.0.1`だけ。ポートは既定5177で、使用中なら次を探す
+- `--no-sync`で手元のデータだけで開く。`--days 30`で取得期間を変える
+
+npmには実データを含めない。`files`で`dist/data`を除外し、`prepublishOnly`でも消し、`npm pack --dry-run`に`/data/`が無いことをテストで固定している。
+
+## 使い方
+
+```bash
+pnpm install
+pnpm sync          # GitHub から直近90日の活動を取得して public/data/ にキャッシュ
+pnpm dev           # Web UI (http://localhost:5173)
+pnpm brief         # ターミナルで簡易確認
+```
+
+### CLI オプション
+
+```bash
+pnpm brief --days 7 --sort stale --limit 20
+# --days    7|30|90 (default 30)
+# --sort    active(活動量順) | recent(最終push順) | stale(放置順)
+# --limit   表示件数 (default 15)
+# --private private repo も表示 (既定は public のみ。Web UI はヘッダーのチェックボックスで切替)
+pnpm sync --days 30   # 取得期間の変更
+```
+
+## 構成
+
+```
+scripts/sync.ts     collector: repo ごとの REST commits API → public/data/*.json
+scripts/brief.ts    CLI: キャッシュを読んでターミナルに要約表示
+src/                viewer: Vite + React + Tailwind v4 (キャッシュを読むだけの純フロント)
+src/lib/aggregate.ts  期間集計の純関数 (vitest でテスト)
+```
+
+### データソースについて
+
+GraphQL `contributionsCollection` は使いません。private リポジトリの内訳を
+`restrictedContributionsCount` に集約して返す (repo 別内訳から欠落する) ため、
+repo ごとの REST commits API を一次ソースにしています。
+
+- 対象: 期間内に push があった **自分が owner の repo のみ**(組織・共同 repo は収集しない)
+- bot (`author.type === 'Bot'`) を除く全コミットを集計。期間内にコミットの無い repo は除外
+- private repo はローカルキャッシュにのみ保存し、表示は既定オフ (Web はトグル、CLI は `--private`)。
+  公開ホスト版は既定では private を**取得しない**(下の「private を含める」参照)
+- 日付は実行環境のローカルタイムゾーンで日別化 (UTC 境界ずれを回避)
+- 制約: デフォルトブランチのみ (未マージのブランチ作業は反映されない)
+
+- キャッシュ (`public/data/`) には private リポジトリ名・コミットメッセージ・issue/PR タイトルが含まれるため gitignore 済み
+- viewer はネットワークアクセスなし。GitHub API を叩くのは collector のみ
+
+### ローカル版のデプロイ注意
+
+**ローカル版(`VITE_HOSTED` 無し)は公開ホストにデプロイしない**こと。`public/data/` のキャッシュに
+private リポジトリ名・コミット文・issue タイトルが入るため。`public/data/` と `dist/` は
+gitignore + `.vercelignore` 済み(git 連携デプロイにはデータが入らない=空画面になる)。
+公開したい場合は下の「公開ホスト版(GitHub OAuth)」を使う(各ユーザーが自分のデータを見る方式で安全)。
+
+## 公開ホスト版(GitHub OAuth + Vercel)
+
+各ユーザーが自分の GitHub でログインし、**自分の public リポジトリ**の活動を見られる公開版
+(`api/` の Vercel Functions)。`VITE_HOSTED=1` のときこのモードになる。他人がアクセスしても
+その人自身の public データしか見えず、あなたのデータは見えない。
+
+### 仕組み / セキュリティ
+
+- OAuth トークンは **httpOnly + Secure Cookie**(ブラウザ JS から読めない=XSS 耐性)。`client_secret` は Vercel Function のみ
+- OAuth `state` で CSRF 対策、**最小権限(空スコープ)**
+- 各ユーザーのデータはそのユーザーのトークンで **実行時に GitHub API から取得**(`/api/data`)。静的キャッシュは持たない
+- User data(タグ/ボード/メモ)は各ブラウザの IndexedDB(端末ローカル)
+- 既定は **public のみ**(空スコープ)。private は明示同意した人だけ(下記)
+
+### private を含める(明示同意)
+
+既定のサインインは空スコープなので、public しか見えない。private も見たい場合は
+サインイン画面の「private も含めてサインイン」か、ヘッダーの「🔒 private を有効化」から
+`/api/auth/login?private=1` に進み、GitHub の認可画面で `repo` スコープを許可する。
+
+- 許可の意思は OAuth の `state` に載せて往復し、セッション(暗号化 cookie)に `privateOptIn` として残す
+- `/api/data` が private を取るのは **`privateOptIn` かつ 実際に付与されたスコープに `repo` がある**ときだけ。
+  OAuth App のスコープはユーザーごとに累積する(一度 `repo` を許可すると、以後は空スコープを要求しても
+  `repo` 付きのトークンが返る)ため、「読めること」を同意の証拠にしない
+- 許可すると private の repo 名・コミット文・issue タイトルがこのホストを経由する(表示されるのは本人のデータのみ)
+- 取り消したいときはサインアウトする。サインアウトは認可自体を revoke するので、
+  次回は public だけのサインインを選び直せる
+
+---
+
+## デプロイ Runbook(この repo の本番: `github-reporadar.vercel.app`)
+
+> この repo は **private** のため、実際の URL・手順をここに記載する(secret は記載しない)。
+
+**現在の状態**(2026-08-31)
+- 本番 URL: **https://github-reporadar.vercel.app**
+- **Git連携は接続済み**。mainへのpushで本番へ自動デプロイされる(手動デプロイは不要)
+- 環境変数(Production)設定済み: `VITE_HOSTED=1` / `APP_URL=https://github-reporadar.vercel.app`
+- 未設定(あなたの操作待ち): `GITHUB_CLIENT_ID` / `GITHUB_CLIENT_SECRET` / `SESSION_SECRET`
+- 未設定の間、`/api/auth/login`は503の「サーバー未設定」ページを返す。これは正しい状態
+- **3つのうち1つでも欠けると503のまま**。`getConfig()`は4つ揃って初めて設定済みと見なす
+  (`APP_URL`を含む)。`SESSION_SECRET`はセッションcookieの暗号鍵で、手順2で自分で作る
+
+> **注意**: 2026-08-31まで、本番の`/api/*`は全て500(`FUNCTION_INVOCATION_FAILED`)だった。
+> 原因はenv未設定ではなく、ESMの相対importに拡張子が無かったこと。
+> ローカル検証(tsx/vite)は拡張子なしを解決するため再現せず、Vercel上のNode ESMだけで落ちていた。
+> 修正済み。`api/esmImports.test.ts`が同じ壊れ方を止める。
+
+> **`GITHUB_CLIENT_ID` / `GITHUB_CLIENT_SECRET` はどこかに存在する値ではなく、下の手順1で
+> OAuth App を作った瞬間に GitHub が発行する。** Client Secret は発行直後の1回しか表示されない
+> (控え損ねたら、同じ画面で新しい secret を再発行して古い方を失効させる)。
+
+**残りの手順**
+
+1. **GitHub OAuth App を作成** → https://github.com/settings/applications/new
+   (一覧は https://github.com/settings/developers の "OAuth Apps")
+   - Application name: 任意(例`RepoRadar`)。GitHubは`GitHub`で始まる名前を拒否する
+   - Homepage URL: `https://github-reporadar.vercel.app`
+   - Authorization callback URL: `https://github-reporadar.vercel.app/api/auth/callback`
+   - Allow wildcard matching / Enable Device Flowはオフのまま
+   - **「Expire user access tokens」という項目は探さなくてよい**。これはGitHub Appのラベルで、
+     OAuth Appの設定画面には無い。OAuthアプリのアクセストークンは既定で無期限に発行される
+   - 作成後の画面に **Client ID** が表示される。**Client Secret** は
+     「Generate a new client secret」を押して発行し、その場でコピーする
+
+2. **Vercelに3つの環境変数を追加**(Production)
+   → https://vercel.com/asagiri/github-reporadar/settings/environment-variables
+   - `GITHUB_CLIENT_ID` = 上のClient ID
+   - `GITHUB_CLIENT_SECRET` = 上のClient Secret(**secretはここ(Vercel)にのみ入れる。gitやチャットに貼らない**)
+   - `SESSION_SECRET` = 自分で生成する乱数。セッションcookieをAES-GCMで封じる鍵で、
+     GitHubから貰う値ではない。`openssl rand -base64 32`の出力をそのまま貼る
+     (**この値を変えると全員が一斉にサインアウトする**。復旧手段は再サインインのみ)
+
+3. **再デプロイ**(`VITE_HOSTED`と違い`GITHUB_CLIENT_*`は実行時変数だが、
+   env追加だけでは既存のデプロイに反映されないので再ビルドする)
+   - Git連携は接続済みなので、**mainへpushすれば自動デプロイされる**
+   - 手元から流すなら`vercel --prod --yes`(要`vercel login`)
+   - 最新デプロイがgit由来になったので、ダッシュボードのRedeployも使える
+
+これで `https://github-reporadar.vercel.app` が「GitHub でサインイン」画面になり、ログイン後に各自の
+public 活動が見える。設定前にアクセスすると「このサーバーは OAuth 未設定です」と表示される
+(サインインを押して行き止まりにならないよう、未設定を検知して案内を出す)。
+
+**マージ前ゲート(CIが止まっている間の代替)**
+
+GitHub ActionsはFreeプランだとprivateリポジトリで月2000分の枠がある。使い切ると
+ジョブが起動せず、PRのチェックは「テスト失敗」ではなく未実行のまま赤くなる。
+その間は手元の`pnpm verify`(test → typecheck → build)が唯一の関門になる。
+
+```
+pnpm verify
+```
+
+`.githooks/pre-push`が同じものをpush前に走らせる。クローン直後は1度だけ紐付けが要る。
+
+```
+git config core.hooksPath .githooks
+```
+
+飛ばしたい時は`git push --no-verify`。実Chromeのe2e(`pnpm e2e`)は`public/data/`が
+要るのでこのゲートには入れていない。
+
+**ローカル ⇔ 本番の切替**
+- ローカル(`pnpm dev`/`preview`): `VITE_HOSTED` 無し → 静的 `/data/*.json`(`pnpm sync` で生成)を読む
+- 本番(Vercel): `VITE_HOSTED=1` → OAuth + `/api/data`(実行時 GitHub 取得)
+
+## 開発
+
+```bash
+pnpm test        # vitest
+pnpm typecheck   # tsc -b --noEmit
+pnpm build       # 型チェック + ビルド(ローカル版)
+pnpm e2e         # 本番ビルドを実 Chrome で開き、メモがリロード後も残るかを検証
+```
+
+`pnpm test` / `pnpm typecheck` / `pnpm build` は PR と main への push で CI(`.github/workflows/ci.yml`)が実行する。
+`pnpm e2e` は `public/data/` のキャッシュ(生成に gh トークンが必要)を前提とするため CI では回さない。
+UI を変える PR は、CI 緑だけでなく実ブラウザでの表示確認までをマージ条件にする。

package/bin/github-reporadar.mjs

@@ -0,0 +1,11 @@
+#!/usr/bin/env node
+// npmのbin。実体はviteでまとめたdist-cli/cli.js
+import { existsSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+
+const cli = new URL('../dist-cli/cli.js', import.meta.url)
+if (!existsSync(fileURLToPath(cli))) {
+  console.error('dist-cli/cli.jsがありません。リポジトリから動かす場合は`pnpm build:cli`を先に実行してください。')
+  process.exit(1)
+}
+await import(cli.href)