新規発注(/orders/new)のリッチ化（プレビューカード・バリデーション・セクション整理）

[Mameta29]

Closes #8

概要

新規発注画面 /orders/new をリッチ化しました。送信前の発注プレビューカード、
金額・必須項目のバリデーション、フォームのセクション整理を実装しています。

検収基準への対応

• 送信前に受注者・リポジトリ・金額・期日・業務内容をまとめたプレビューカードが表示される
• 業務内容が空のとき送信ボタンを無効化する
• 金額の検証（正の整数）
• フォームがセクションで整理されている
• 既存テストが通る
• テストが追加されている（compose.test.ts）
• CI が通過している

変更点

• compose.ts: validateOrderForm（金額・業務内容の検証）を追加（テスト付き）。
• page.tsx: 発注プレビューカード、インライン警告、送信ボタンのガードを追加。

[Mameta29]

❌ Review needs changes — Agentic Gig-Flow（formal review を投稿できないため comment として記録）

❌ Review needs changes — Agentic Gig-Flow

Quality score: 85/100
Reviewer: Azure OpenAI gpt-5.1 on Microsoft Foundry
PR: #9

検収基準の判定

#	基準	結果	証拠 / 不足
1	送信前に受注者・リポジトリ・金額・期日・業務内容をまとめたプレビューカードが表示される	✅	packages/dashboard/app/orders/new/page.tsx: {/* Preview card: structured confirmation of what will be ordered. */} 以下の <section className="mb-3 rounded-md border..."> 内に、<dt>/<dd> で受注者・リポジトリ・金額・期日・業務内容を表示するプレビューカードが実装されています。
2	金額が正の整数かつ上限20万JPYC以下であることを検証し違反時は警告を出す	❌	packages/dashboard/app/orders/new/compose.ts: export const MAX_AMOUNT_JPYC = 200_000; と validateOrderForm で `if (!raw
3	業務内容が空のとき送信ボタンを無効化する	✅	packages/dashboard/app/orders/new/compose.ts: if (!input.description.trim()) { result.descriptionError = '業務内容を入力してください。'; result.valid = false; } により description 未入力時に valid=false となり、packages/dashboard/app/orders/new/page.tsx: `<button disabled={!text
4	フォームがセクションで整理されている	✅	packages/dashboard/app/orders/new/page.tsx: 既存のフォーム構造に加え、<section className="mb-3 rounded-md border ..."> のプレビューカードが追加され、発注プレビューが独立したセクションとして整理されています。既存の section 構造も維持されています。
5	既存テストが通る	✅	diff からは直接判定できませんが、CI ステータスが "success" であり、既存テスト失敗は発生していません。
6	テストが追加されている	✅	packages/dashboard/app/orders/new/compose.test.ts: import { composeOrderText, validateOrderForm } from './compose'; とし、describe('validateOrderForm', ... 配下に3つの it テストケース（正常系・description 空・amount 0/負/小数/空文字）を追加しており、新しいロジックに対するテストが追加されています。
7	CIが通過している	✅	入力 JSON の "ciStatus": "success" より、CI が通過していることが確認できます。

修正してほしい項目

1. 金額が上限 20 万 JPYC を超える場合の検証ロジックと警告メッセージを追加してください — packages/dashboard/app/orders/new/compose.ts 周辺 — 検収基準では「正の整数かつ上限20万JPYC以下」と明記されているため、MAX_AMOUNT_JPYC を用いて amount > MAX_AMOUNT_JPYC を検出し、amountError に上限超過用のメッセージを設定する必要があります。
2. 上限超過時に UI 上でも警告が視認できるようにしてください — packages/dashboard/app/orders/new/page.tsx の金額入力欄周辺 — validation.amountError に上限超過メッセージが入るようにした上で、既に追加済みの <span className="mt-1 block text-xs text-red-600">{validation.amountError}</span> にその文言が表示されることを確認してください（必要であればテキスト文言を調整）。
3. 上限超過のケースをカバーするテストケースを追加してください — packages/dashboard/app/orders/new/compose.test.ts — validateOrderForm に対して amountJpyc が "200001" など上限超えの入力の場合に valid=false となり amountError がセットされることを検証するテストを追加してください。

修正後に再 push してください。CI と本 Review Agent が再走します。

[Mameta29]

✅ Review passed — Agentic Gig-Flow（formal review を投稿できないため comment として記録）

✅ Review passed by Agentic Gig-Flow

Quality score: 90/100
Reviewer: Azure OpenAI gpt-5.1 on Microsoft Foundry
PR: #9

検収基準の判定

#	基準	結果	証拠 (diff より)
1	送信前に受注者・リポジトリ・金額・期日・業務内容をまとめたプレビューカードが表示される	✅	packages/dashboard/app/orders/new/page.tsx: <section className="mb-3 rounded-md border border-[var(--gigflow-blue)]/30 bg-blue-50/40 p-4"> 内で <dt className="text-neutral-500">受注者</dt>, <dt className="text-neutral-500">リポジトリ</dt>, <dt className="text-neutral-500">金額</dt>, <dt className="text-neutral-500">期日</dt>, <dt className="text-neutral-500">業務内容</dt> とそれぞれの <dd> を表示している。
2	金額が正の整数かつ上限20万JPYC以下であることを検証し違反時は警告を出す	✅	packages/dashboard/app/orders/new/compose.ts: export const MAX_AMOUNT_JPYC = 200_000; と validateOrderForm 内で `if (!raw

• result.amountError = \
• result.amountError = \
• result.amountError =
  金額上限メッセージを設定。packages/dashboard/app/orders/new/page.tsx: 金額入力の直後で validation.amountError && ({validation.amountError})を表示。 | | 3 | 業務内容が空のとき送信ボタンを無効化する | ✅ |packages/dashboard/app/orders/new/compose.ts: if (!input.description.trim()) { result.descriptionError = '業務内容を入力してください。'; result.valid = false; } により空を無効扱い。packages/dashboard/app/orders/new/page.tsx: const validation = useMemo(() => validateOrderForm({ amountJpyc, description }), [amountJpyc, description]);とし、送信ボタンでdisabled={!text || submitting || !validation.valid}としている。 | | 4 | フォームがセクションで整理されている | ✅ |packages/dashboard/app/orders/new/page.tsx: 既存のセクションに加え、プレビュー部分を
  で分離しており、フォーム構造をセクションで整理している。 | | 5 | 既存テストが通る | ✅ | このPRではcompose.test.tsのテストが拡張されており、CI ステータスが"success"となっているため既存テストは通過していると判断。 | | 6 | テストが追加されている | ✅ |packages/dashboard/app/orders/new/compose.test.ts: 既存の composeOrderText テストに加え、describe('validateOrderForm', () => { ... })ブロックと複数のit(...)が追加されている。 | | 7 | CIが通過している | ✅ | 入力 JSON の"ciStatus":"success"` より確認。 |

コメント

バリデーションロジックを validateOrderForm として切り出しテスト可能にしている点が良いです。UI 側も aria-invalid とエラーメッセージ表示でアクセシビリティに配慮されており、プレビューカードの情報構造も明瞭です。細部のメッセージ文言や limit の同期コメントも含めて、既存コードベースとよく馴染んでいます。

---

このPRをマージすると、1000 JPYC が @Mameta29 に Polygon 経由で自動送金されます (Settlement Agent → JPYC transfer())。

[Mameta29]

💴 JPYC 送金完了 — Settled by Agentic Gig-Flow

項目	値
金額	1,000 JPYC
受取アドレス	0x7F37…9389
Tx Hash	0xd4e024c5c618de909209e64004e3f42b6e0798e34a8d87340bfc1e75e70eb701
ブロック	40128036
所要時間 (merge → 着金)	約 4.8 秒
Order ID: 4d5f1382-673d-4547-84ef-38e569c7d32b