[IMPLEMENT] Upstream Demo: プロジェクト詳細画面

[LevelCapTech]

[IMPLEMENT] Upstream Demo: プロジェクト詳細画面

0. AI Agent 契約（最初に読む）

• あなたは AIコーディングAgent。このIssue本文と「入力（SSOT参照セット）」のみで作業する。

• SSOTは plan（確定planが最優先）。矛盾があれば planを正 とする。

• 入力不足/矛盾/実装に必要な情報欠落 がある場合、実装を開始しない。

  • 代わりに BLOCKER: として不足点を列挙し、DESIGNへ差し戻し（plan修正依頼）を返す。

• plan外の仕様追加/推測補完は禁止。

1. 目的

• ゴール: plan通りにUpstream(public)実装を完了し、CI品質ゲートをすべて通す。

• 前提: Next.js（App Router） / Plugin型アーキテクチャ / DIP

  • Composition Root（AppProvider）で依存解決する。

• 画面目標: /projects/[id] で対象プロジェクトの詳細を表示し、モックで示された次の5部品を public UI として実装する。

  • フェーズ毎の進捗
  • プロジェクトメンバー
  • 会議体一覧
  • 全体進捗状況
  • プロジェクト計画

2. 入力（SSOT参照セット）※ここが揃っていないと開始禁止

2.1 確定plan（固定パス / 最優先）

• .github/copilot/plans/81-page-project-details.md

2.2 DESIGN Issue（仕様の背景・補助）

• https://github.com/LevelCapTech/Agile-PMBOK-Assist/issues/81

2.3 DESIGN PR（設計差分・合意点）

• https://github.com/LevelCapTech/Agile-PMBOK-Assist/pull/82

2.4 必読ルール

• .github/copilot/00-index.md
• .github/copilot-instructions.md
• .github/instructions/docs.instructions.md
• .github/instructions/nextjs.upstream.instructions.md
• .github/instructions/react.upstream.instructions.md
• .github/instructions/tests.frontend.instructions.md
• .github/copilot/40-testing-strategy.md
• .github/copilot/60-ci-quality-gates.md

2.5 画面モック/画像（UIの形状合わせ用・仕様追加は禁止）

• mock/v1/web/src/app/projects/[id]/page.jsx

• モック確認メモ:

  • 詳細ヘッダーにプロジェクト名 / コード / 開始日がある
  • フェーズ進捗、メンバー、会議体、全体進捗、プロジェクト計画の5部品がある
  • not found 時は安全な文言と戻る導線を表示している
  • 折りたたみ状態はプロジェクト計画に限定されている

• 上記は 形状合わせの参照のみ であり、仕様追加の根拠にしてはならない

3. スコープ / 非ゴール

• 対象: Upstream(public)のみ（private参照・実装・言及は禁止）

• 対象: Next.js App Router（app/）

• 対象: docs -> contracts -> plugins -> src -> app -> ui -> tests の導線で1画面分を完成させること

• 非ゴール:

  • plan外の機能追加
  • 大規模リファクタ
  • アーキ変更（DIP/Composition Rootの変更）
  • private API連携、DB接続、認証導入
  • 複数ページ展開

4. 変更許容範囲（plan厳守）

• planからの逸脱: 禁止
• planが不足している場合: 実装しない → BLOCKER で差し戻し
• planに「任意/裁量」と明記された箇所のみ、最小差分で判断してよい（判断理由をPR本文へ1〜3行で記録）
• 既存画面の挙動を変更しない
• 新規ルート /projects/[id] の追加に必要な最小差分のみ許可する

5. 成果物マニフェスト（必須 / planから転記）

この表が埋まっていない場合は実装開始禁止。
ここに書かれたものだけを作る（= planを転記）。テンプレ側で成果物を決めない。

layer	action(add/modify/delete)	path(相対)	export/API(型名/関数名)	wiring(どこ→どこ)	tests(追加/更新)
docs	add	docs/pages/project-details.md	画面仕様 / 受入条件	plan → docs	なし
contracts	add	packages/contracts/src/pages/project-details.ts	ProjectDetailsDataSource, ProjectDetailsPageData, ProjectDetailsError	page / ui / plugins が参照	static test 追加
contracts	modify	packages/contracts/src/index.ts	project-details 公開export	contracts → app/ui/src	typecheck更新
plugins	add	packages/plugins/src/projectDetails/projectDetailsDataSourceMock.ts	ProjectDetailsDataSourceMock, getProjectDetails	createClientDeps → AppContext → page	unit/integration更新
deps	modify	src/lib/createClientDeps.ts	createClientDeps()	plugins → deps	typecheck更新
deps	modify	src/providers/AppProvider.tsx	AppProvider	createClientDeps → AppContext.Provider	AppProvider test更新
app	add	app/projects/[id]/page.tsx	page bridge, toProjectDetailsProps(result)	AppContext → ProjectDetailsPage	static/import test更新
ui	add	packages/ui/src/pages/project-details/ProjectDetailsPage.tsx	ProjectDetailsPage, ProjectDetailsPageProps	page props → public UI	UI test追加
ui	add	packages/ui/src/pages/project-details/ProjectDetailsPage.stories.tsx	Storybook stories	Storybook → UI states	Storybook確認
other	add	tests/e2e/project-details.spec.ts	Playwright smoke	browser → /projects/1 / /projects/9999	E2E追加

6. 受入条件（planから転記 / 不足はBLOCKER）

planのAcceptance Criteriaをそのまま列挙する。以下は .github/copilot/plans/81-page-project-details.md の FR/NFR と完了条件を転記したもの。

• /projects/[id] で対象プロジェクト名・コード・開始日を表示する
• フェーズ毎の進捗一覧を表示する
• プロジェクトメンバー一覧を表示する
• 会議体一覧を表示する。会議体が存在する場合は曜日/時間/名称、空の場合は空状態文言を表示する
• 全体進捗状況（完了/進行中/未着手）を表示する。集計値はフェーズ状態数と一致する
• プロジェクト計画（折りたたみセクション）を表示する。開閉操作で詳細表示が切り替わる
• 指定 id が存在しない場合は not found 表示を行う
• app/projects/[id]/page.tsx は AppContext から受けた契約のみでデータ取得する
• packages/contracts/src/pages/project-details.ts は type/interface のみを持ち、実装コードを含めない
• DI は AppProvider -> createClientDeps -> AppContext -> app/projects/[id]/page.tsx -> ProjectDetailsPage に固定する
• 依存方向（contracts ← plugins）を維持し、境界違反は lint/static test で検出可能にする
• npm run build で型エラー 0 を維持する
• エラー表示は契約エラーの安全文言のみとし、Secrets/PII や生例外文字列を露出しない
• StyledEngineProvider injectFirst を前提とした CSS 競合抑制方針を壊さない
• Storybook で主要状態を視覚確認できるようにする
• Playwright で /projects/1 と not found ケースの smoke が成功する
• docs → contracts → ui → page → AppProvider の導線で型エラーなく画面表示できる

7. ガードレール（禁止事項 / 変更してはいけないもの）

• DO NOT CHANGE:

  • 既存ページの挙動
  • AppProvider を Composition Root とするDI単一路
  • packages/contracts を interface/type のみとする境界
  • app/*/page.tsx を薄い橋渡し責務とする方針

• 仕様追加禁止（plan外の新要件、推測補完）

• private参照禁止（@company/*, **/private/* など）

• app/projects/[id]/page.tsx で plugins 具象を直接 import しない

• packages/ui で fetch/axios/storage/window 依存の I/O を実装しない

• packages/contracts に例外変換ロジックや具象実装を入れない

• 生例外や stacktrace を UI 表示しない

• UI コンポーネントを export default で公開しない

• barrel 経由で境界跨ぎ import をしない

8. アーキ制約（DIP / Plugin / Composition Root）

• 依存解決（DI）は src/providers/AppProvider.tsx のみ

• src/lib/createClientDeps.ts は public 完成実装として projectDetailsDataSource を返す

• app/** は薄く（newしない・I/Oしない・depsはContextから取得してUIへ渡す）

• app/projects/[id]/page.tsx は AppContext から DataSource を取得し、結果を UI props へ橋渡しするだけに限定する

• packages/contracts/** は interface/type のみ（実装・fetch・URL等の具体禁止）

• packages/ui/** は public UI（外部I/O禁止）

• plugins は packages/plugins/src/projectDetails/projectDetailsDataSourceMock.ts を起点に追加し、例外を ProjectDetailsError へ変換する

• Server/Client 境界:

  • 初期表示データ取得は Server 側の app/projects/[id]/page.tsx
  • 折りたたみ等の表示状態は Client 側の ProjectDetailsPage.tsx
  • cookie/session 読取は Server 境界限定
  • browser API は Client 側のみに限定

• import 制約:

  • contracts 参照は @contracts/* を使用する
  • app/projects/[id]/page.tsx は @contracts/*, @ui/*, AppContext のみを直接参照可能とする

9. 必読（規約/ゲート）

• .github/copilot-instructions.md
• .github/instructions/**/*.instructions.md
• .github/copilot/30-coding-standards.md
• .github/copilot/50-security.md
• .github/copilot/60-ci-quality-gates.md
• .github/copilot/plans/81-page-project-details.md

10. 実行・品質ゲート（Done直結）

• format
• lint
• typecheck
• test（planが要求する範囲）
• build
• security
• design-doc-sanity（テンプレート記号残存なし）
• architecture-lint（import境界 / alias / UI export 規約）

実装で最低限確認するコマンド:

• npm run lint
• npm run build
• npm run test
• npm run test:e2e

テスト最低ライン:

• Unit(UI): ProjectDetailsPage
• Unit(Domain/Usecase): progress 集計
• Integration(Mock): 成功 / 失敗 / 空 / 遅延
• E2E: /projects/1, /projects/9999
• Storybook: normal, empty-meetings, notfound, network-error

11. 作業ログ（AI Agentが残す最小記録）

人間向けではなく、監査と再現のための最小ログ。

• 参照したSSOT: plan / DESIGN Issue / DESIGN PR / mock / docs
• 実装判断（裁量がある場合のみ）: 1〜3行
• 受入条件の担保証跡: テスト名 / コマンド / 必要ならスクリーンショット
• モック参照範囲: 5部品の形状、not found UI、計画セクションの折りたたみ

12. Done（必須）

• 成果物マニフェストの項目がすべて実装済み
• 受入条件がすべて満たされる（可能な限りテストで担保。planに従う）
• CI品質ゲートがすべて緑（format/lint/typecheck/test/security/build）
• ドキュメント更新は最小差分（planに従う）
• /projects/1 で5部品が表示される
• /projects/9999 または無効 id で安全な not found UI が表示される
• DI境界と contracts 純粋性を壊していない

13. BLOCKER（入力不足時の返却フォーマット）

実装開始前に不足があった場合のみ使用。

• BLOCKER: なし

[LevelCapTech]

スタイリング優先順位ルール（重要）

このIssueは Next.js(App Router) + Tailwind v4 + MUI(Emotion) の共存整備を目的とするが、実装時のスタイリングは以下の優先順位を厳守すること。
AIAgent が Tailwind を過剰適用しがちなため、コンポーネント階層ごとに利用制約を固定する。

優先順位（最重要）

1. MUI（Theme / sx / styled / variant 等）を最優先
2. 次点：Emotion（@emotion/styled / css）
3. Tailwind は「ページレイヤー以降」限定（レイアウト用途中心）

---

階層別ルール（Atomic前提）

A) Page / Route Segment（app/**/page.tsx など）

• Tailwind 利用 OK
• ただし用途は レイアウト（余白/配置/グリッド/コンテナ）中心
• 色/タイポ/影/角丸など「見た目の規約」は MUI に寄せる

OK例：

• flex, grid, gap-*, p-*, m-*, w-*, max-w-*, container, overflow-*
• ただし見た目（color/typography/shadow/radius）は MUI で定義

---

B) Component（ページより小さい UI 部品。Atomic：atoms/molecules/organisms）

• Tailwind を優先しない（原則禁止）
• スタイルは MUI（sx/styled）→ Emotion の順で実装すること
• Tailwind class を付ける場合は「理由」をコメントで残す（例外運用）

NG例：

• Button/Card/TextField などの見た目を bg-*, text-*, rounded-*, shadow-* で Tailwind で作る
• 既存 MUI の variant / theme で表現できるものを Tailwind で上書き

推奨例：

• MUI：<Button variant="contained" sx={{ ... }}>
• Emotion：const Root = styled(Box)(() => ({ ... }))

---

例外（Tailwindを使ってよいケース）

• Page 層での一時的なコンテナ調整（検証用）
• MUI / Emotion では表現が冗長すぎる純レイアウト（ただし page 層に限定）
• 既存の Tailwind-only な page テンプレートを崩さないための最小対応
  → いずれも「なぜ必要か」をコメントに残すこと

---

事故防止（衝突・上書きの原則）

• CssBaseline と Tailwind preflight の衝突を避けるため、ベーススタイルの恒久変更は globals.css 側に寄せる
• MUI Theme をSSOTとし、色/タイポ/影/角丸は Tailwind で二重定義しない
• Tailwind は「レイアウト補助」。UIの見た目はMUIが責務。