实战：搭建开发环境

/init 创建一个 Next.js 14 项目，要求：
- 名称：task-board
- 使用 TypeScript 严格模式
- 使用 Tailwind CSS
- 使用 src/ 目录结构
- 使用 App Router
- 包管理器：pnpm
- ESLint + Prettier 已配置

帮我列出 task-board 的项目结构

在项目根目录创建 codex.yaml，配置如下：

项目信息：
- 名称：task-board
- 类型：web
- 框架：Next.js 14
- 技术栈：TypeScript + Tailwind CSS + Prisma + PostgreSQL

编码规范：
- 缩进 2 空格，单引号，保留分号
- 组件用 PascalCase，文件名用 kebab-case
- 函数用 camelCase，常量用 UPPER_SNAKE_CASE
- 禁止 any 类型
- 每个函数最多 80 行
- 必须包含错误处理

自定义指令：
- 你是全栈工程师，精通 Next.js 和 TypeScript
- 组件放在 src/components/，按功能分子目录
- API 路由放在 src/app/api/，遵循 RESTful 规范
- 所有状态管理使用 React Context + useReducer
- Prisma schema 变更后必须运行 prisma generate

默认模型：o4-mini
交互语言：zh-CN

# 在项目目录中
git init
git add .
git commit -m "chore: initial commit - Next.js 14 project setup"

git diff --staged | codex "根据这些变更生成一条符合 conventional commits 规范的 commit message"

hooks:
  pre_commit:
    - command: "pnpm lint"
      description: "提交前检查代码规范"
    - command: "pnpm typecheck"
      description: "提交前检查 TypeScript 类型"

你是一个全栈 Next.js 工程师。请在 task-board 项目中创建任务列表功能。

功能需求：
1. 页面路由：/tasks
2. 展示一个任务列表，每项包含：标题、状态（待办/进行中/已完成）、创建时间
3. 顶部有一个"新建任务"按钮
4. 点击任务可以切换完成状态
5. 使用 Tailwind CSS 做响应式布局

技术要求：
- 使用 Server Component 做页面外壳，Client Component 做交互
- 任务数据先使用 mock 数据（之后会接入数据库）
- 类型定义放在 src/types/task.ts
- 组件放在 src/components/task/
- 参考 codex.yaml 中的编码规范

输出：
1. 先列出需要创建的文件清单
2. 逐个创建文件
3. 完成后运行 pnpm dev 验证

/test 为刚才创建的任务列表组件生成测试：
- TaskCard 组件：测试渲染、状态切换点击
- TaskList 组件：测试空列表显示、多任务渲染
- 使用 Vitest + @testing-library/react
- 测试文件放在对应组件同目录，命名为 *.test.tsx

pnpm test

git add .
git diff --staged | codex "生成一条 conventional commits 规范的 commit message"

feat(tasks): add task list page with status toggle

- Add Task type definition
- Create TaskCard, TaskList, NewTaskButton components
- Add /tasks route with responsive Tailwind layout
- Add unit tests for all components

git commit -m "feat(tasks): add task list page with status toggle"