概要

実装計画の一覧・状態管理を行う /plans ページを新規作成する。5カラムのカンバンボード形式で計画のステータスを可視化し、memo/YYYY-MM-DD/*.md と .claude/plans/*.md から frontmatter 付き Markdown を読み取って表示する。

実装内容

1. /plans ページの新規作成

ファイル: apps/web/app/pages/plans.vue

5カラムレイアウトで計画を表示:

2. frontmatter 形式

計画ファイルには以下の frontmatter を付与する:

---
title: "機能名や計画のタイトル"
status: "pending"  # pending | planned | in_progress | completed | archived
created: "2026-01-22"
updated: "2026-01-22"
---

3. 読み取り対象ディレクトリ

4. /api/plans APIエンドポイント

エンドポイント: GET /api/plans

レスポンス:

interface Plan {
  id: string;           // ファイルパスから生成
  title: string;
  status: 'pending' | 'planned' | 'in_progress' | 'completed' | 'archived';
  created: string;      // YYYY-MM-DD
  updated: string;      // YYYY-MM-DD
  filePath: string;     // 元ファイルのパス
  content?: string;     // Markdownの本文（オプション）
}

interface PlansResponse {
  plans: Plan[];
  meta: {
    total: number;
    byStatus: Record<string, number>;
  };
}

実装ファイル: apps/web/server/api/plans.get.ts

import { defineEventHandler } from 'h3';
import { readdir, readFile } from 'fs/promises';
import { join } from 'path';
import matter from 'gray-matter';

export default defineEventHandler(async () => {
  const plans: Plan[] = [];

  // memo/YYYY-MM-DD/*.md を読み取り
  // .claude/plans/*.md を読み取り
  // frontmatter をパースして plans 配列に追加

  return {
    plans,
    meta: {
      total: plans.length,
      byStatus: groupByStatus(plans)
    }
  };
});

5. CLAUDE.md への追記内容

計画作成時の frontmatter ルールを追記:

## 計画ファイルの作成ルール

計画ファイルを作成する際は、以下の frontmatter を必ず付与すること:

\`\`\`yaml
---
title: "計画のタイトル"
status: "pending"
created: "YYYY-MM-DD"
updated: "YYYY-MM-DD"
---
\`\`\`

### status の遷移

1. `pending` - 計画として認識、未着手
2. `planned` - 計画完了、実装待ち
3. `in_progress` - 実装中
4. `completed` - 実装完了
5. `archived` - 不要または参照用

### 保存先

- 日付に紐づく計画: `memo/YYYY-MM-DD/{slug}.md`
- プロジェクト横断の計画: `.claude/plans/{slug}.md`

UI設計

カンバンボードレイアウト

+----------+----------+----------+----------+----------+
|  未着手  |  計画完了 |  実装中  |   完了   | アーカイブ |
| pending  | planned  |in_progress|completed| archived |
+----------+----------+----------+----------+----------+
| [Card]   | [Card]   | [Card]   | [Card]   | [Card]   |
| [Card]   | [Card]   |          |          |          |
|          |          |          |          |          |
+----------+----------+----------+----------+----------+

カード表示項目

• タイトル
• 作成日
• 最終更新日
• ファイルパス（クリックで詳細表示）

技術的な考慮事項

gray-matter パッケージ

frontmatter のパースには gray-matter を使用:

pnpm add gray-matter

ファイルシステムアクセス

Nitro のサーバーサイドで fs/promises を使用してファイルを読み取る。ビルド時に静的化する場合は、prerender 設定が必要。

状態更新API（将来実装）

PATCH /api/plans/:id でステータス更新を行う API を追加予定。ドラッグ&ドロップでのステータス変更に対応。

次のステップ

• apps/web/app/pages/plans.vue の作成
• apps/web/server/api/plans.get.ts の実装
• gray-matter パッケージの追加
• CLAUDE.md に計画ファイルルールを追記
• カンバンボード UI の実装
• ステータス更新 API の実装（オプション）