会社運営 OS の設計と段階移行

Hyphen Technologies 株式会社のデザインシステムを生成してください。

ブランド方向性:
- モダンな B2B AI/ML テック企業
- Cursor / Linear / Vercel / Anthropic 風のクリーンでミニマルな美学
- ダークテーマ first（ライトテーマも対応）
- 信頼感と知性を両立する余白設計

成果物:
1. Color tokens
   - surface (bg, bg-elev, surface, surface-2)
   - border (subtle, strong)
   - text (primary, secondary, tertiary)
   - semantic (green/blue/amber/red 各 600-50 スケール)
   - accent (white-based、ロックイン色なし)
2. Typography scale
   - sans-serif body (Inter / system-ui)
   - mono (SF Mono / JetBrains Mono)
   - スケール: 11/12/13/15/17/22/30/40 px、行高は 1.1〜1.6
3. Spacing system: 4px base、scale 4/8/12/16/20/24/32/48/64
4. Border radius: 4 / 6 / 10 / 14 / 999
5. Shadow system: subtle / elevated / overlay の3段階
6. Components: Button / Input / Card / Table / Badge / Tabs / Dialog / Toast / Sidebar
7. Patterns: Header / Sidebar / EmptyState / ErrorState / DataTable / KPICard

出力形式:
- design-tokens.json（W3C Design Tokens 仕様）
- tailwind.preset.ts（HT theme として export）
- shadcn/ui 互換のコンポーネント定義（components.json + 各 .tsx）

参照リンク:
- https://cursor.com (UI 美学の reference)
- https://linear.app (情報密度の reference)
- https://vercel.com (タイポグラフィの reference)

成果物の保存先: ~/src/ht/brand/design-system/

cursor.com の UI を分析し、HT デザインシステムのダークテーマ既定値に反映するための CSS variables を抽出してください。

抽出対象:
1. カラーパレット（背景・テキスト・ボーダー・アクセント・セマンティック）
2. タイポグラフィ（フォントファミリー、サイズスケール、ウェイト、letter-spacing）
3. スペーシング（padding / margin の基本値）
4. ボーダー半径（card / pill / button それぞれ）
5. シャドウとエレベーション
6. アニメーション（easing / duration）
7. テーブル / changelog / status pill のパターン

出力:
- ~/src/ht/brand/design-system/cursor-reference.md にマッピング表
- ~/src/ht/brand/design-system/tokens.cursor.json に extracted tokens

注意:
- ライセンス侵害になる範囲（ロゴ、独自イラスト、フォント）はコピーしない
- 「美学のパターン」を抽出する（色値・余白・情報密度の哲学）
- HT 独自カラー（accent）はあえて wireframe 寄りで「白ベース + opacity」を継承

Hyphen Technologies の社内 Portal を Next.js 15 (App Router) で構築してください。

作業ディレクトリ: ~/src/ht/hyphen-portal
スタック: TypeScript + Tailwind CSS + shadcn/ui + ~/src/ht/brand/design-system/ の HT preset
テーマ: ダーク first（Cursor 風）

ページ構成:
- / : ダッシュボード
  - KPI カード placeholder（売上 / 残高 / アクティブ Issue / デプロイ頻度）
  - 近日中のマイルストーン（Markdown frontmatter から動的生成）
- /decisions : ADR 一覧（content/decisions/*.md を SSG で render）
- /okrs : 四半期 OKR ボード（content/okrs/*.md）
- /playbooks : 業務手順集（content/playbooks/*.md）
- /meetings : 議事録ハブ（Notion ページへの外部リンク集）
- /people : メンバーリスト（最初は Niki + 大翔さんのみ）

レイアウト:
- 上部に sticky topbar（HT ロゴ + 主要ナビ + ユーザー avatar placeholder）
- 左サイドバーは作らない（Cursor のミニマル思想）
- 各ページは max-width 1080px、48px padding

並列実行:
- claude --worktree feat-dashboard, --worktree feat-decisions の2並列で初期構築
- 共通コンポーネントは先にメインで land、それから feature を merge

成果物:
- npm run dev で http://localhost:3000 起動
- npm run build が通る
- 認証は Cloudflare Access が前段で gate するためアプリ内認証は実装しない
- ただし「現在のユーザー」の Cloudflare JWT を読む util だけ用意 (lib/auth.ts)

完了条件:
- 全ページが空 placeholder 状態でも build OK
- HT デザインシステムが正しく適用されている（h1, button, card の見た目を Cursor と並べて違和感ない）

~/src/ht/hyphen-portal を Cloudflare Pages にデプロイするための手順を、画面遷移ごとに具体的に提示してください。

前提:
- GitHub repo: Hyphen-Tech-Org/hyphen-portal を作成済み
- Cloudflare アカウントは HT 名義で作成済み
- ドメイン hyphen-tech.co.jp は Cloudflare 管理下

期待する手順書:
1. Cloudflare ダッシュボード → Workers & Pages → Create
2. Connect to Git → GitHub → Hyphen-Tech-Org/hyphen-portal を選択
3. Framework preset: Next.js
4. Build command: npm run build
5. Build output directory: .next
6. Environment variables: なし（最初は）
7. Deploy ボタン
8. Custom domain: portal.hyphen-tech.co.jp を割当
9. SSL: Full (strict)
10. main push でのプレビュー / 本番自動デプロイ確認

私が確認すべきこと:
- 各ステップで「画面のどこをクリックするか」をスクリーン位置で説明
- エラーが出やすい箇所（Build failed の典型 3 原因）を事前に共有
- ロールバック手順

最後に、デプロイ完了後の動作確認チェックリストを 5 項目で出してください。

Cloudflare Access で portal.hyphen-tech.co.jp に Google Workspace SSO を設定する手順を、画面遷移ごとに提示してください。

要件:
- Identity Provider: Google Workspace（@hyphen-tech.co.jp ドメイン）
- 主ポリシー（Default）: @hyphen-tech.co.jp の全メンバーを許可
- 補助ポリシー（Guest）: 個別メールアドレスをホワイトリスト追加できる構造
- ページ単位の権限を後から追加できる Application 設計
- Session duration: 24時間
- 監査ログ: 全アクセス記録

将来拡張ポイントを最初の設計に折り込む:
- ロール: Owner / Member / External Viewer の3階層
- ページ単位の許可:
    /finance, /hiring → Owner のみ
    /decisions, /okrs → Member 以上
    /meetings, /playbooks → External Viewer も可
- 外部ゲスト用の OTP メール認証 fallback

期待する手順書:
1. Cloudflare Zero Trust ダッシュボードへの入り方
2. Identity Provider に Google Workspace を追加（OAuth 設定）
3. Access Application を新規作成（self-hosted, portal.hyphen-tech.co.jp）
4. ポリシーチェイン構成（Default + Guest）
5. ページ単位の Path policy 追加
6. ログ確認場所
7. テスト手順（Niki + 大翔さん + ダミー外部メールでアクセス試行）

注意:
- 設定 1 つ間違えると外部公開する事故が起きるので、各ステップに「これを確認したら次へ」のチェックポイントを入れる
- 完了後の rollback 手順も末尾に追加

Notion の以下コンテンツを Markdown に変換し、~/src/ht/hyphen-portal/content/ 配下に配置してください。

対象（Notion から取得）:
- CHARTER（憲章）→ content/charter.md
- ADR / 意思決定記録 → content/decisions/YYYY-MM-DD-{slug}.md
- 業務 playbook → content/playbooks/{slug}.md
- OKR → content/okrs/2026-Q2.md（quarter ごと）

実装条件:
- Notion API は MCP 経由（mcp__notion__API-*）。WebFetch / curl / Playwright は禁止
- メタデータは frontmatter 保持: title, date, author, tags, source_notion_id
- 内部リンク（Notion 内の他ページ参照）は相対パス変換
- 画像は public/images/ にダウンロード、相対参照に書き換え
- 表は Markdown table へ変換、複雑な DB は CSV にして data/ へ配置

除外（Notion に残す）:
- 契約書原本（法的バインディング）
- 議事録の確定版（リアルタイム編集の利便性）
- 投資家 data room（権限管理が複雑）

冪等性:
- 再実行しても重複ファイルを作らない
- source_notion_id で既存 Markdown を上書き判定
- 削除された Notion ページは Markdown 側に .archived プレフィクスを付ける（消さない）

完了条件:
- content/ 配下に全 Markdown が揃う
- portal の /decisions, /okrs, /playbooks ページが正しく描画される
- 移行ログを content/MIGRATION_LOG.md に記録

hyphen-portal のダッシュボードに以下のリアルタイム指標を統合してください。

データソース:
1. Stripe API: 売上 / MRR / チャーン / 新規顧客（過去 30 日）
2. freee API: 法人口座残高 / 当月 P&L / 未払い金一覧
3. GitHub API（gh CLI 利用）: アクティブ Issue / レビュー待ち PR / 過去 7 日のデプロイ頻度
4. Google Workspace Admin SDK: アクティブユーザー数 / 直近ログイン
5. Paperclip(:3100): 稼働エージェント数 / 完了ゴール数 / 月間消費トークン

実装:
- BFF: Cloudflare Workers (apps/api/) に各 API endpoint を実装
- 各 endpoint は KV にキャッシュ（TTL 5 分）
- フロント: SWR で polling、画面表示中のみ revalidate
- シークレット: Cloudflare Workers Secrets で管理（git にコミット禁止 → .dev.vars は .gitignore）
- レート制限: API ごとに 60 req/min、超過時は 429 を返してクライアント側で backoff

エラーハンドリング:
- API ダウン時は最終キャッシュ値 + 「stale」バッジ
- 認証エラー時は再認証 CTA をカードに表示
- 全 API ダウン時もページは表示（5 つカードが個別に劣化）

セキュリティ:
- Stripe: read-only API key
- freee: OAuth は read-only スコープのみ要求
- 全 API レスポンスからは個人情報を除去（顧客名、メールはハッシュ化）

完了条件:
- /api/stripe, /api/freee, /api/github, /api/gws, /api/paperclip が動く
- ダッシュボードの 5 KPI カードが実データで埋まる
- レポジトリには test-cassette を含めて、API キー無しでも npm test がパスする

~/src/ht/hyphen-portal/index.html を読み、Roadmap セクションの中で「次に着手」マークが付いているマイルストーンを特定してください。

その上で:
1. 現在のリポ状態を確認（ls / git status / 既存ファイル一覧）
2. 着手すべきマイルストーンの完了条件を再確認
3. Plan Mode で 5-7 ステップの実行計画を提示
4. 各ステップの:
   - 入力（必要な情報・前提）
   - 出力（作成・変更されるファイル）
   - 検証方法（npm run build / 目視 / テスト）
5. リスクと代替案

実行はしない。Niki の承認を待つ。