add serena onboarding files

.serena/memories/apps-app-detailed-architecture.md

@@ -0,0 +1,104 @@
+# apps/app アーキテクチャ詳細ガイド
+
+## 概要
+`apps/app` は GROWI のメインアプリケーションで、Next.js ベースのフルスタック Web アプリケーションです。
+
+## エントリーポイント
+- **サーバーサイド**: `server/app.ts` - OpenTelemetry 初期化と Crowi サーバー起動を担当
+- **クライアントサイド**: `pages/_app.page.tsx` - Next.js アプリのルートコンポーネント
+
+## ディレクトリ構成の方針
+
+### フィーチャーベース（新しい方針）
+`features/` ディレクトリは機能ごとに整理され、各フィーチャーは以下の構造を持つ：
+- `interfaces/` - TypeScript 型定義
+- `server/` - サーバーサイドロジック（models, routes, services）
+- `client/` - クライアントサイドロジック（components, stores, services）
+- `utils/` - 共通ユーティリティ
+
+#### 主要フィーチャー
+- `openai/` - AI アシスタント機能（OpenAI 統合）
+- `external-user-group/` - 外部ユーザーグループ管理
+- `page-bulk-export/` - ページ一括エクスポート
+- `growi-plugin/` - プラグインシステム
+- `search/` - 検索機能
+- `mermaid/` - Mermaid 図表レンダリング
+- `plantuml/` - PlantUML 図表レンダリング
+- `callout/` - コールアウト（注意書き）機能
+- `comment/` - コメント機能
+- `templates/` - テンプレート機能
+- `rate-limiter/` - レート制限
+- `opentelemetry/` - テレメトリ・監視
+
+### レガシー構造（段階的移行予定）
+
+#### ユニバーサル（サーバー・クライアント共通）
+- `components/` - React コンポーネント（ページレベル、レイアウト、共通）
+- `interfaces/` - TypeScript インターフェース
+- `models/` - データモデル定義
+- `services/` - ビジネスロジック（レンダラーなど）
+- `stores-universal/` - ユニバーサル状態管理（SWR コンテキスト等）
+
+#### サーバーサイド専用
+- `server/` - サーバーサイドコード
+  - `models/` - Mongoose モデル
+  - `routes/` - Express ルート（API v3含む）
+  - `service/` - サーバーサイドサービス
+  - `middlewares/` - Express ミドルウェア
+  - `util/` - サーバーサイドユーティリティ
+  - `events/` - イベントエミッター
+  - `crowi/` - アプリケーション初期化
+
+#### クライアントサイド専用
+- `client/` - クライアントサイドコード
+  - `components/` - React コンポーネント
+  - `services/` - クライアントサイドサービス
+  - `util/` - クライアントサイドユーティリティ
+  - `interfaces/` - クライアント固有の型定義
+  - `models/` - クライアントサイドモデル
+
+#### Next.js Pages Router
+- `pages/` - Next.js ページルート
+  - `admin/` - 管理画面ページ
+  - `me/` - ユーザー設定ページ
+  - `[[...path]]/` - 動的ページルート（Catch-all）
+  - `share/` - 共有ページ
+  - `login/` - ログインページ
+
+#### 状態管理・UI
+- `states/` - Jotai 状態管理（ページ、UI、サーバー設定）
+- `stores/` - レガシー状態管理（段階的に states/ に移行）
+- `styles/` - SCSS スタイル
+
+#### その他
+- `utils/` - 汎用ユーティリティ
+- `migrations/` - データベースマイグレーション
+- `@types/` - TypeScript 型拡張
+
+## 開発指針
+
+### 新機能開発
+新しい機能は `features/` ディレクトリにフィーチャーベースで実装し、以下を含める：
+1. インターフェース定義
+2. サーバーサイド実装（必要に応じて）
+3. クライアントサイド実装（必要に応じて）
+4. 共通ユーティリティ
+
+### 既存機能の改修
+既存のレガシー構造は段階的に features/ に移行することが推奨される。
+
+### 重要な技術スタック
+- **フレームワーク**: Next.js (Pages Router)
+- **状態管理**: Jotai (新), SWR (データフェッチング)
+- **スタイル**: SCSS, CSS Modules
+- **サーバー**: Express.js
+- **データベース**: MongoDB (Mongoose)
+- **型システム**: TypeScript
+- **監視**: OpenTelemetry
+
+## 特記事項
+- AI 統合機能（OpenAI）は最も複雑なフィーチャーの一つ
+- プラグインシステムにより機能拡張可能
+- 多言語対応（i18next）
+- 複数の認証方式サポート
+- レート制限・セキュリティ機能内蔵

.serena/memories/apps-app-development-patterns.md

@@ -0,0 +1,163 @@
+# apps/app 開発ワークフロー・パターン集
+
+## よくある開発パターン
+
+### 新しいページ作成
+1. `pages/` にページファイル作成（`.page.tsx`）
+2. 必要に応じてレイアウト定義
+3. サーバーサイドプロパティ設定 (`getServerSideProps`)
+4. 状態管理セットアップ
+5. スタイル追加
+
+### 新しい API エンドポイント
+1. `server/routes/apiv3/` にルートファイル作成
+2. バリデーション定義
+3. サービス層実装
+4. レスポンス形式定義
+5. OpenAPI 仕様更新
+
+### 新しいフィーチャー実装
+1. `features/新機能名/` ディレクトリ作成
+2. `interfaces/` で型定義
+3. `server/` でバックエンド実装
+4. `client/` でフロントエンド実装
+5. `utils/` で共通ロジック
+
+### コンポーネント作成
+1. 適切なディレクトリに配置
+2. TypeScript プロパティ定義
+3. CSS Modules でスタイル
+4. JSDoc コメント追加
+5. テストファイル作成
+
+## 重要な設計パターン
+
+### SWR データフェッチング
+```typescript
+const { data, error, mutate } = useSWR('/api/v3/pages', fetcher);
+```
+
+### Jotai 状態管理
+```typescript
+const pageAtom = atom(initialPageState);
+const [page, setPage] = useAtom(pageAtom);
+```
+
+### CSS Modules スタイリング
+```scss
+.componentName {
+  @extend %some-placeholder;
+  @include some-mixin;
+}
+```
+
+### API ルート実装
+```typescript
+export const getPageHandler = async(req: NextApiRequest, res: NextApiResponse) => {
+  // バリデーション
+  // ビジネスロジック
+  // レスポンス
+};
+```
+
+## ファイル構成のベストプラクティス
+
+### フィーチャーディレクトリ例
+```
+features/my-feature/
+├── interfaces/
+│   └── my-feature.ts
+├── server/
+│   ├── models/
+│   ├── routes/
+│   └── services/
+├── client/
+│   ├── components/
+│   ├── stores/
+│   └── services/
+└── utils/
+    └── common-logic.ts
+```
+
+### コンポーネントディレクトリ例
+```
+components/MyComponent/
+├── MyComponent.tsx
+├── MyComponent.module.scss
+├── MyComponent.spec.tsx
+├── index.ts
+└── sub-components/
+```
+
+## 開発時のチェックリスト
+
+### コード品質
+- [ ] TypeScript エラーなし
+- [ ] ESLint ルール準拠
+- [ ] テストケース作成
+- [ ] 型安全性確保
+- [ ] パフォーマンス影響確認
+
+### 機能要件
+- [ ] 国際化対応（i18n）
+- [ ] セキュリティチェック
+- [ ] アクセシビリティ対応
+- [ ] レスポンシブデザイン
+- [ ] エラーハンドリング
+
+### API 設計
+- [ ] RESTful 設計原則
+- [ ] 適切な HTTP ステータスコード
+- [ ] バリデーション実装
+- [ ] レート制限対応
+- [ ] ドキュメント更新
+
+## デバッグ・トラブルシューティング
+
+### よくある問題
+1. **型エラー**: tsconfig.json 設定確認
+2. **スタイル適用されない**: CSS Modules インポート確認
+3. **API エラー**: ミドルウェア順序確認
+4. **状態同期問題**: SWR キー重複確認
+5. **ビルドエラー**: 依存関係バージョン確認
+
+### デバッグツール
+- Next.js Dev Tools
+- React Developer Tools
+- Network タブ（API 監視）
+- Console ログ
+- Lighthouse（パフォーマンス）
+
+## パフォーマンス最適化
+
+### フロントエンド
+- コンポーネント lazy loading
+- 画像最適化
+- Bundle サイズ監視
+- メモ化（useMemo, useCallback）
+
+### バックエンド
+- データベースクエリ最適化
+- キャッシュ戦略
+- 非同期処理
+- リソース使用量監視
+
+## セキュリティ考慮事項
+
+### 実装時の注意
+- 入力サニタイゼーション
+- CSRF 対策
+- XSS 防止
+- 認証・認可チェック
+- 機密情報の適切な取り扱い
+
+## デプロイ・運用
+
+### 環境設定
+- 環境変数管理
+- データベース接続
+- 外部サービス連携
+- ログ設定
+- 監視設定
+
+このガイドは apps/app の開発を効率的に進めるための包括的な情報源として活用してください。

.serena/memories/apps-app-technical-specs.md

@@ -0,0 +1,121 @@
+# apps/app 技術仕様・開発ガイド
+
+## ファイル命名規則
+- Next.js ページ: `*.page.tsx`
+- React コンポーネント: `ComponentName.tsx`
+- スタイル: `ComponentName.module.scss`
+- テスト: `*.spec.ts`, `*.test.ts`, `*.integ.ts`
+- 型定義: `*.d.ts`
+
+## 重要な設定ファイル
+- `next.config.js` - Next.js 設定
+- `tsconfig.json` - TypeScript 設定（複数レイヤー）
+- `package.json` - 依存関係とスクリプト
+- `turbo.json` - Turborepo 設定
+
+## API 構造
+### API v3 (`server/routes/apiv3/`)
+- RESTful API エンドポイント
+- Express.js ルーター使用
+- バリデーション・認証ミドルウェア
+- OpenAPI 仕様準拠
+
+### フィーチャー API
+各フィーチャーが独自の API ルートを持つ場合あり
+例: `features/openai/server/routes/`
+
+## 状態管理パターン
+### Jotai (推奨・新)
+- `states/` ディレクトリ
+- アトミックな状態管理
+- ファイル別に関心事を分離
+
+### SWR (データフェッチング)
+- サーバーサイドデータの管理
+- キャッシュとリバリデーション
+- `stores-universal/context.tsx` でコンテキスト提供
+
+## スタイリング指針
+### SCSS 構造
+- `styles/` ディレクトリに全体スタイル
+- コンポーネント別に `.module.scss`
+- Atomic Design っぽい構造（atoms, molecules, organisms）
+
+### CSS Modules
+- スコープ化されたクラス名
+- TypeScript での型安全性
+
+## データベース・モデル
+### Mongoose モデル (`server/models/`)
+- MongoDB スキーマ定義
+- バリデーション・ミドルウェア
+- インデックス定義
+
+### シリアライザー
+- `serializers/` でレスポンス形式を統一
+- クライアント向けデータ変換
+
+## セキュリティ機能
+### 認証・認可
+- 複数の認証プロバイダー対応
+- ページ・API レベルでの権限制御
+- アクセストークン・API キー
+
+### XSS・CSRF 対策
+- `services/general-xss-filter/`
+- サニタイゼーション機能
+
+## 国際化 (i18n)
+- next-i18next 使用
+- 多言語リソース管理
+- サーバーサイド・クライアントサイド両対応
+
+## テスト戦略
+### テストタイプ
+- `.spec.ts` - ユニットテスト
+- `.integ.ts` - 統合テスト
+- Playwright - E2E テスト
+
+### テスト実行
+- Jest (ユニット・統合)
+- Vitest (一部)
+- GitHub Actions CI
+
+## プラグインシステム
+### GROWI プラグイン
+- `features/growi-plugin/`
+- 動的プラグイン読み込み
+- テーマ・テンプレート拡張
+
+## パフォーマンス最適化
+### レンダリング
+- サーバーサイドレンダリング (SSR)
+- 静的生成 (SSG) 一部対応
+- コード分割
+
+### 検索機能
+- Elasticsearch 統合
+- 全文検索インデックス
+- 検索結果キャッシュ
+
+## 監視・ロギング
+### OpenTelemetry
+- `features/opentelemetry/`
+- メトリクス・トレース収集
+- カスタムメトリクス
+
+### ログ
+- Bunyan ロガー使用
+- 構造化ログ出力
+
+## 開発時の注意点
+1. 新機能は features/ に実装
+2. TypeScript strict モード準拠
+3. ESLint ルール遵守
+4. コンポーネントは関数型で実装
+5. 状態管理は Jotai 優先
+6. API は v3 形式で実装
+7. セキュリティチェック必須
+8. 国際化対応
+9. テストカバレッジ維持
+10. パフォーマンス影響考慮