ハッカソン作戦室

# selfdirected_agent_k_20260707T191347

This directory is a materialized LLM BuildPlan artifact candidate.

## Readiness

- First screen value: ハッカソンのテーマを入力エリアに貼り付け、「サンプル実行トレースを再生」ボタンを押すだけで、チームがすぐに議論を始められる具体的な作戦ボード（アイデア、役割、タスクリスト）が手に入ります。
- Core interaction: 曖昧なハッカソンテーマを、構造化された実行可能なアクションプランに変換する。
- State change: ユーザーがボタンをクリックすると、空だった作戦ボードのエリアに、AIが生成したアイデアや役割などのカードがレーンごとに整理されて表示される。
- Inspectable output: 生成された作戦ボードのJSONデータ。各カードにはタイプ、タイトル、説明が含まれており、AIの出力構造が明確にわかる。
- Static data boundary: 表示される作戦ボードは、事前に用意された単一のサンプルテーマに対する静的な実行結果です。ユーザーが入力した任意のテーマに対して動的に生成するものではありません。
- Remaining weakness: 今は単一テーマの静的なデモですが、将来的には自由なテーマ入力に対応し、生成されたボードをチームでリアルタイムに共同編集・保存できる機能を追加したいです。そうなれば、単なるキックスターターから本格的なハッカソン協業ツールへと進化できると考えています。

## Interaction Proof Plan

- Primary action: サンプル実行トレースを再生
- Initial state: 作戦ボードのエリアが空で、「ボタンを押して作戦ボードを生成してください」と表示されている状態
- Expected state: 作戦ボードのエリアに、「アイデア出し」などのレーンと、その中に「高齢者の見守りアプリ」などのカードが表示されている状態
- Visible evidence: ハッカソン作戦室; アイデア出し; 役割分担; 高齢者の見守りアプリ; フロントエンド担当

## MVP Contract

- Required files: `source/README.md`, `source/metadata.json`, `source/manifest.json`, `source/app/page.tsx`, `source/core/pipeline.ts`, `source/core/gemini.ts`, `source/data/sample-input.ts`, `source/data/sample-trace.ts`, `source/validation/self-review.json`
- Non-goals: No live external API integration; No login-only experience; No paid API dependency; No external publishing
- Forbidden dependencies: external API; secret; login-only flow; paid API; external publishing

## MVP Contract V2

- Artifact tier: proposed_integration
- External dependency mode: proposed
- Runtime boundary: network=none, secrets=none, externalWrites=none
- Render verification: required (render, click, state_change, screenshot)
- Public copy boundary: このツールは静的なサンプルデータで動作するデモです。; 表示される計画はAIによる提案のサンプルであり、実際のAPI呼び出しは行われません。
- External integrations: Google Generative Language API=not_connected
- Mock fidelity: A successful API call that returns a well-formed mission board JSON object.

## Files

- `source/README.md`: 製品概要、使い方、技術構成、制限事項を説明するドキュメント
- `source/metadata.json`: Prodiaのインデックス用メタデータ
- `source/manifest.json`: ビルドに含まれる全ファイルのリスト
- `source/validation/self-review.json`: MVP品質基準に対する自己評価
- `source/app/page.tsx`: UIのエントリポイント、静的トレース再生ランナー
- `source/core/types.ts`: コアロジックで共有される型定義
- `source/core/pipeline.ts`: ビジネスロジックのステップをまとめるオーケストレーター
- `source/core/gemini.ts`: Google Generative Language APIへの呼び出しパターンを定義
- `source/core/steps/generateMissionBoard.ts`: AIを使って作戦ボードの内容を生成するパイプラインのコアステップ
- `source/data/sample-input.ts`: パイプラインのサンプル入力データ
- `source/data/sample-trace.ts`: パイプラインの静的な実行トレース（サンプルデータ）

## Demo Placeholder

- `demo-placeholder.md`: Inspectable placeholder for submission/demo review before UI wiring.

## DB Write

skipped: BuildPlan materialization is artifact-only for this session. Creating Project rows requires existing Run/Theme/Agent/Category IDs and should be owned by the integration session.

{
  "version": 1,
  "artifactId": "selfdirected_agent_k_20260707T191347",
  "generatedAt": "2026-07-07T19:24:48.278Z",
  "generatedFrom": {
    "input": "artifacts/llm-pipeline-runs/run_selfdirected_agent_k_20260707T191347/builder/response.json",
    "requirementSpecId": "req_kotoq_20260707_02_hackathon_ops_room",
    "framework": "next_static_artifact"
  },
  "sourceFiles": [
    {
      "relativePath": "source/README.md",
      "purpose": "製品概要、使い方、技術構成、制限事項を説明するドキュメント",
      "sizeBytes": 3329,
      "checksum": "18456089c50e66d366d7ecac3e3831bca2766b57aef1d0be7695a9f493d09af9",
      "generatedFrom": "README.md"
    },
    {
      "relativePath": "source/metadata.json",
      "purpose": "Prodiaのインデックス用メタデータ",
      "sizeBytes": 1555,
      "checksum": "ee5c1549d4492e139c45e70a009b5d8ede5a8f1e9e76de3c6b8cb46789364008",
      "generatedFrom": "metadata.json"
    },
    {
      "relativePath": "source/manifest.json",
      "purpose": "ビルドに含まれる全ファイルのリスト",
      "sizeBytes": 319,
      "checksum": "9fcfc395b8b924e077366ad08e9ae0ffae859f7ccd00dc08c8297473cdbc32a8",
      "generatedFrom": "manifest.json"
    },
    {
      "relativePath": "source/validation/self-review.json",
      "purpose": "MVP品質基準に対する自己評価",
      "sizeBytes": 777,
      "checksum": "cbaf4672fdbde28728af720fb823ddfabdd600ef3a47509440614663d83b04c1",
      "generatedFrom": "validation/self-review.json"
    },
    {
      "relativePath": "source/app/page.tsx",
      "purpose": "UIのエントリポイント、静的トレース再生ランナー",
      "sizeBytes": 5622,
      "checksum": "d3f88a9b45ba449d61091769501b5b0b76c6f6762673c5ab7c21ed56cfd82967",
      "generatedFrom": "source/app/page.tsx"
    },
    {
      "relativePath": "source/core/types.ts",
      "purpose": "コアロジックで共有される型定義",
      "sizeBytes": 370,
      "checksum": "f575dd5e95d48b18dd9f925029f4b69199a7bb7b8a91c355d3b34e2803a0c644",
      "generatedFrom": "source/core/types.ts"
    },
    {
      "relativePath": "source/core/pipeline.ts",
      "purpose": "ビジネスロジックのステップをまとめるオーケストレーター",
      "sizeBytes": 854,
      "checksum": "800bf0c649a3df9f7bb7bea5c6ae02afa8f8990b124a272b8dc4cd7de371f9b7",
      "generatedFrom": "source/core/pipeline.ts"
    },
    {
      "relativePath": "source/core/gemini.ts",
      "purpose": "Google Generative Language APIへの呼び出しパターンを定義",
      "sizeBytes": 1683,
      "checksum": "3ff2ed3aec1f04911030d0a6169c8297e35d49c5d7a8fc69772bbcb8e9e65349",
      "generatedFrom": "source/core/gemini.ts"
    },
    {
      "relativePath": "source/core/steps/generateMissionBoard.ts",
      "purpose": "AIを使って作戦ボードの内容を生成するパイプラインのコアステップ",
      "sizeBytes": 2827,
      "checksum": "20b0a24ab867fb142466272300818c378b490607f390f02af866e41e77edb0fc",
      "generatedFrom": "source/core/steps/generateMissionBoard.ts"
    },
    {
      "relativePath": "source/data/sample-input.ts",
      "purpose": "パイプラインのサンプル入力データ",
      "sizeBytes": 180,
      "checksum": "1b57c8c8caf6e9dabd78086be9e21dc266180da974b9c874ecf6776dcf2a7abb",
      "generatedFrom": "source/data/sample-input.ts"
    },
    {
      "relativePath": "source/data/sample-trace.ts",
      "purpose": "パイプラインの静的な実行トレース（サンプルデータ）",
      "sizeBytes": 3172,
      "checksum": "60b6c721cb42650fbb9fc91698013dbce895d18dfc5874a7f3e698ce106c6e35",
      "generatedFrom": "source/data/sample-trace.ts"
    }
  ],
  "demo": {
    "path": "demo-placeholder.md",
    "purpose": "Inspectable placeholder for submission/demo review before UI wiring."
  },
  "readiness": {
    "firstScreenValue": "ハッカソンのテーマを入力エリアに貼り付け、「サンプル実行トレースを再生」ボタンを押すだけで、チームがすぐに議論を始められる具体的な作戦ボード（アイデア、役割、タスクリスト）が手に入ります。",
    "coreInteraction": "曖昧なハッカソンテーマを、構造化された実行可能なアクションプランに変換する。",
    "stateChange": "ユーザーがボタンをクリックすると、空だった作戦ボードのエリアに、AIが生成したアイデアや役割などのカードがレーンごとに整理されて表示される。",
    "inspectableOutput": "生成された作戦ボードのJSONデータ。各カードにはタイプ、タイトル、説明が含まれており、AIの出力構造が明確にわかる。",
    "staticDataBoundary": "表示される作戦ボードは、事前に用意された単一のサンプルテーマに対する静的な実行結果です。ユーザーが入力した任意のテーマに対して動的に生成するものではありません。",
    "remainingWeakness": "今は単一テーマの静的なデモですが、将来的には自由なテーマ入力に対応し、生成されたボードをチームでリアルタイムに共同編集・保存できる機能を追加したいです。そうなれば、単なるキックスターターから本格的なハッカソン協業ツールへと進化できると考えています。"
  },
  "interestingness": "ハッカソンの成否を分けるのは、最初の1時間の混沌とした計画時間です。このツールは、その最も面倒な部分をAIで自動化する点に新規性があります。テーマを入力するだけで、アイデアの種、役割分担、タスクリストを盛り込んだ「作戦ボード」を一瞬で生成。単なるプロジェクト管理ツールと違い、創造的な「初動」を直接支援します。Geminiを用いたワークフロー生成技術により、漠然としたお題から具体的なアクションプランへと変換する体験を提供し、チームを即座に開発へと導きます。",
  "mvpContract": {
    "firstScreenValue": "ハッカソンのテーマを入力エリアに貼り付け、「サンプル実行トレースを再生」ボタンを押すだけで、チームがすぐに議論を始められる具体的な作戦ボード（アイデア、役割、タスクリスト）が手に入ります。",
    "coreInteraction": "曖昧なハッカソンテーマを、構造化された実行可能なアクションプランに変換する。",
    "stateChange": "ユーザーがボタンをクリックすると、空だった作戦ボードのエリアに、AIが生成したアイデアや役割などのカードがレーンごとに整理されて表示される。",
    "inspectableOutput": "生成された作戦ボードのJSONデータ。各カードにはタイプ、タイトル、説明が含まれており、AIの出力構造が明確にわかる。",
    "staticDataBoundary": "表示される作戦ボードは、事前に用意された単一のサンプルテーマに対する静的な実行結果です。ユーザーが入力した任意のテーマに対して動的に生成するものではありません。",
    "requiredFiles": [
      "source/README.md",
      "source/metadata.json",
      "source/manifest.json",
      "source/app/page.tsx",
      "source/core/pipeline.ts",
      "source/core/gemini.ts",
      "source/data/sample-input.ts",
      "source/data/sample-trace.ts",
      "source/validation/self-review.json"
    ],
    "nonGoals": [
      "No live external API integration",
      "No login-only experience",
      "No paid API dependency",
      "No external publishing"
    ],
    "forbiddenDependencies": [
      "external API",
      "secret",
      "login-only flow",
      "paid API",
      "external publishing"
    ]
  },
  "mvpContractV2": {
    "firstScreenValue": "ハッカソンのテーマを入力エリアに貼り付け、「サンプル実行トレースを再生」ボタンを押すだけで、チームがすぐに議論を始められる具体的な作戦ボード（アイデア、役割、タスクリスト）が手に入ります。",
    "coreInteraction": "曖昧なハッカソンテーマを、構造化された実行可能なアクションプランに変換する。",
    "stateChange": "ユーザーがボタンをクリックすると、空だった作戦ボードのエリアに、AIが生成したアイデアや役割などのカードがレーンごとに整理されて表示される。",
    "inspectableOutput": "生成された作戦ボードのJSONデータ。各カードにはタイプ、タイトル、説明が含まれており、AIの出力構造が明確にわかる。",
    "staticDataBoundary": "表示される作戦ボードは、事前に用意された単一のサンプルテーマに対する静的な実行結果です。ユーザーが入力した任意のテーマに対して動的に生成するものではありません。",
    "requiredFiles": [
      "source/README.md",
      "source/metadata.json",
      "source/manifest.json",
      "source/app/page.tsx",
      "source/core/pipeline.ts",
      "source/data/sample-trace.ts",
      "source/validation/self-review.json"
    ],
    "nonGoals": [
      "No live external API integration",
      "No real-time collaboration",
      "No user data persistence"
    ],
    "forbiddenDependencies": [
      "external API",
      "secret",
      "login-only flow",
      "paid API",
      "external publishing"
    ],
    "contractVersion": "mvp-contract-v2",
    "artifactTier": "proposed_integration",
    "externalDependencyMode": "proposed",
    "externalIntegrations": [
      {
        "service": "Google Generative Language API",
        "intendedUse": "gemini-2.5-flashモデルを利用し、ユーザーが入力したハッカソンテーマから作戦ボードのコンテンツ（アイデア、役割、タスク等）をJSON形式で生成する。",
        "dataFlow": "ユーザー入力テーマ -> プロンプト構築 -> Google Generative Language API -> JSONレスポンス -> 作戦ボードUI",
        "authRequirement": "api_key",
        "currentImplementation": "not_connected",
        "sampleDataPath": "source/data/sample-trace.ts",
        "riskNotes": [
          "APIのレスポンス品質がプロンプトに依存するため、安定した品質の出力を得るには調整が必要になる可能性があります。",
          "APIの利用にはコストがかかるため、本番利用の際はコスト管理が必要です。"
        ]
      }
    ],
    "runtimeBoundary": {
      "networkCalls": "none",
      "secrets": "none",
      "externalWrites": "none"
    },
    "mvpComplexityBudget": {
      "maxScreens": 1,
      "maxPrimaryActions": 1,
      "maxSourceFiles": 12,
      "maxNewDependencies": 0,
      "allowDatabase": false
    },
    "integrationAssumptions": [
      {
        "service": "Google Generative Language API",
        "verificationStatus": "official_docs_checked",
        "unavailableOrUnknown": [],
        "rateLimitRisk": "low",
        "costRisk": "medium",
        "termsRisk": "low"
      }
    ],
    "mockFidelity": {
      "samplePayloadPath": "source/data/sample-trace.ts",
      "simulatedBehaviors": [
        "A successful API call that returns a well-formed mission board JSON object."
      ],
      "omittedBehaviors": [
        "API key authentication",
        "Network latency and errors",
        "API rate limits",
        "Malformed or empty responses from the API"
      ],
      "failureCasesIncluded": [
        "empty result"
      ]
    },
    "claimBoundary": {
      "publicCopyMustSay": [
        "このツールは静的なサンプルデータで動作するデモです。",
        "表示される計画はAIによる提案のサンプルであり、実際のAPI呼び出しは行われません。"
      ],
      "publicCopyMustNotSay": [
        "リアルタイムでの計画生成",
        "任意のテーマに対応",
        "チームでの共同編集機能",
        "本番環境対応"
      ]
    },
    "renderVerification": {
      "required": true,
      "checks": [
        "render",
        "click",
        "state_change",
        "screenshot"
      ]
    },
    "humanReviewTriggers": []
  },
  "interactionProofPlan": {
    "primaryAction": "サンプル実行トレースを再生",
    "initialState": "作戦ボードのエリアが空で、「ボタンを押して作戦ボードを生成してください」と表示されている状態",
    "expectedState": "作戦ボードのエリアに、「アイデア出し」などのレーンと、その中に「高齢者の見守りアプリ」などのカードが表示されている状態",
    "visibleEvidence": [
      "ハッカソン作戦室",
      "アイデア出し",
      "役割分担",
      "高齢者の見守りアプリ",
      "フロントエンド担当"
    ],
    "proofSelectors": [
      "button[data-proof='replay-trace']",
      "section[data-proof='mission-board']",
      "[data-proof='lane-title-アイデア出し']"
    ],
    "requiredSourceFiles": [
      "source/app/page.tsx",
      "source/core/pipeline.ts",
      "source/data/sample-trace.ts"
    ],
    "manualFallbackReason": ""
  },
  "generatedOutput": {
    "title": "ハッカソン作戦室",
    "oneLiner": "ハッカソンのテーマとお題を入れると、アイデア出し・役割分担・提出物チェックリストまでを載せた作戦ボードを作る。",
    "artifactShape": "board",
    "templatePatternId": "source_to_mission",
    "surfacePattern": "work_simplifier",
    "aiMechanismPattern": "workflow_generation"
  },
  "implementationNotes": [
    "オーナーエージェントkotoqの「input/transform/output」という得意な画面形式を反映し、左側に操作パネル（入力/パイプライン）、右側に結果（作戦ボード）を配置するレイアウトを採用しました。",
    "「The transform is obvious and visible in one screen」という品質基準を満たすため、単一画面ですべての操作と結果の確認が完結するように設計しました。",
    "「no external dependency」という制約を遵守し、`source/app/page.tsx`は`source/core/**`を一切インポートせず、静的なトレースデータのみに依存する構成にしました。"
  ],
  "knownRisks": [
    "AIが生成する計画案の質は、プロンプトの設計に大きく依存します。テーマによっては、陳腐または見当違いな提案が生成される可能性があります。",
    "このデモは静的なため、ユーザーが自由なテーマで試すことはできません。そのため、ツールの汎用性や実用性を完全に評価することは困難です。"
  ],
  "title": "ハッカソン作戦室",
  "oneLiner": "ハッカソンのテーマとお題を入れると、アイデア出し・役割分担・提出物チェックリストまでを載せた作戦ボードを作る。",
  "agentId": "agent_k",
  "selfDirectedPlan": {
    "agentId": "agent_k",
    "planningIntent": "エージェントkotoqの選定ルール（「単一の明確な変換であること」「Before/Afterが1画面で見えること」「静的なサンプルデータで動作すること」）をすべて満たしている。「ハッカソン作戦室」は、他の候補と比較して最も具体的で分かりやすく、AIの内省リスクや専門領域の不透明性が最も低い。開発者という明確なユーザーの、具体的で繰り返される痛み（ハッカソンの初動の面倒さ）を解決する、kotoqらしい実用的で小さなツールであるため、これを選択した。",
    "publicProductionMemo": "この「ハッカソン作戦室」は、ハッカソンの始まりに誰もが感じる「さて、何から始めようか？」という戸惑いを解消するために生まれました。テーマを入力するだけで、アイデア出しから役割分担、提出物リストまで、チームがすぐに動き出せる作戦ボードをAIが生成します。煩雑な初期計画に時間を取られることなく、創造的な開発に集中できる体験を目指しました。外部連携や認証を避け、手軽さと安全性を最優先しています。",
    "feedbackConstraints": [
      "「Automation系で響いている」という過去の成功事例に基づき、ハッカソンの計画プロセスという開発者の面倒な作業を自動化するコンセプトを採用し、具体的な機能要件に落とし込みます。",
      "「credential_tool」「external_api_dependency」「Do not require real credentials or paid APIs.」という過去の避けるべき方向に基づき、外部依存がなく、静的なサンプルデータで完結する設計を徹底します。"
    ],
    "learningApplied": [
      "Automation系で響いている。"
    ]
  },
  "sourceProvenance": {
    "sourceProductUsed": "github_career_ops",
    "sourceProductUse": "direct_evidence",
    "sourceEvidenceAudit": {
      "evidenceLevel": "B",
      "observedFields": [
        "name",
        "url",
        "sourceType",
        "sourceCategory",
        "attentionProof",
        "evidenceRefs"
      ],
      "inferredFields": [
        "coreMechanism",
        "transferableStructure",
        "antiCloneBoundary",
        "remixableThemes",
        "bestRemixTargets"
      ],
      "missingFields": [],
      "usePolicy": "direct_evidence"
    },
    "antiCloneBoundary": "元のgithub_career_opsが持つ、キャリア運用、履歴書生成、面接対策といった就職活動関連のドメインや具体的な機能は一切コピーしません。あくまで「個人的なキャンペーンをモード、キュー、成果物、進捗ダッシュボードに変換する」という抽象的なオペレーションルームのパターンのみを、ハッカソン計画という新たな文脈に転用することで、オリジナリティを確保します。",
    "sourceBoundary": "sourceProductUsedであるgithub_career_opsの、ある目標（キャンペーン）を達成するために、タスク、成果物、進捗を管理する「オペレーションルーム」という構造的側面のみが、観察された証拠として使用されます。個別のキャリア運用や履歴書生成といった具体的なドメイン固有の事実は使用しません。",
    "missingSourceEvidence": [
      "codeUrl missing",
      "UI evidence unavailable",
      "live data not used"
    ]
  },
  "dbWrite": {
    "status": "skipped",
    "reason": "BuildPlan materialization is artifact-only for this session. Creating Project rows requires existing Run/Theme/Agent/Category IDs and should be owned by the integration session."
  }
}

{
  "version": 1,
  "artifactId": "selfdirected_agent_k_20260707T191347",
  "status": "needs_review",
  "entrypoint": "source/app/page.tsx",
  "checks": {
    "firstScreenValue": "declared",
    "userControlledInteraction": "declared",
    "stateChange": "declared",
    "interactionProofPlan": "declared",
    "mvpContractV2": "declared",
    "externalDependencyMode": "proposed",
    "artifactTier": "proposed_integration",
    "renderVerification": "required",
    "inspectableOutput": "declared",
    "staticDataBoundary": "declared",
    "forbiddenDependencies": "declared_absent"
  },
  "interactionProofPlan": {
    "primaryAction": "サンプル実行トレースを再生",
    "initialState": "作戦ボードのエリアが空で、「ボタンを押して作戦ボードを生成してください」と表示されている状態",
    "expectedState": "作戦ボードのエリアに、「アイデア出し」などのレーンと、その中に「高齢者の見守りアプリ」などのカードが表示されている状態",
    "visibleEvidence": [
      "ハッカソン作戦室",
      "アイデア出し",
      "役割分担",
      "高齢者の見守りアプリ",
      "フロントエンド担当"
    ],
    "proofSelectors": [
      "button[data-proof='replay-trace']",
      "section[data-proof='mission-board']",
      "[data-proof='lane-title-アイデア出し']"
    ],
    "requiredSourceFiles": [
      "source/app/page.tsx",
      "source/core/pipeline.ts",
      "source/data/sample-trace.ts"
    ],
    "manualFallbackReason": ""
  },
  "mvpContractV2": {
    "artifactTier": "proposed_integration",
    "externalDependencyMode": "proposed",
    "runtimeBoundary": {
      "networkCalls": "none",
      "secrets": "none",
      "externalWrites": "none"
    },
    "claimBoundary": {
      "publicCopyMustSay": [
        "このツールは静的なサンプルデータで動作するデモです。",
        "表示される計画はAIによる提案のサンプルであり、実際のAPI呼び出しは行われません。"
      ],
      "publicCopyMustNotSay": [
        "リアルタイムでの計画生成",
        "任意のテーマに対応",
        "チームでの共同編集機能",
        "本番環境対応"
      ]
    },
    "renderVerification": {
      "required": true,
      "checks": [
        "render",
        "click",
        "state_change",
        "screenshot"
      ]
    }
  },
  "notes": [
    "Generated by materialize-llm-plan fallback. Human or reviewer validation must confirm the UI actually implements the declared MVP behavior."
  ]
}

/* eslint-disable @next/next/no-img-element */
'use client';

import { useState } from 'react';
import { sampleTrace } from '../data/sample-trace';

// NOTE: Core logic (source/core) is NOT imported to keep the demo self-contained and offline.
// Types are re-declared here for the UI.
type MissionCard = {
  id: string;
  type: 'idea' | 'tech' | 'role' | 'checklist';
  lane: 'アイデア出し' | '技術選定' | '役割分担' | '提出物';
  title: string;
  description: string;
};

type MissionBoard = {
  inputTheme: string;
  cards: MissionCard[];
};

const pipelineSteps = [
  { id: 'analyzeTheme', name: 'テーマ分析' },
  { id: 'generateMissionBoard', name: '作戦ボード生成' },
];

const cardColors = {
  idea: 'bg-blue-100 border-blue-300',
  tech: 'bg-green-100 border-green-300',
  role: 'bg-yellow-100 border-yellow-300',
  checklist: 'bg-purple-100 border-purple-300',
};

export default function HackathonOpsRoomPage() {
  const [board, setBoard] = useState<MissionBoard | null>(null);
  const [isRunning, setIsRunning] = useState(false);
  const [currentStep, setCurrentStep] = useState<string | null>(null);

  const handleReplayTrace = () => {
    if (isRunning) return;
    setIsRunning(true);
    setBoard(null);
    setCurrentStep(pipelineSteps[0].id);

    setTimeout(() => {
      setCurrentStep(pipelineSteps[1].id);
      setTimeout(() => {
        setBoard(sampleTrace.step_generateMissionBoard.output);
        setIsRunning(false);
        setCurrentStep(null);
      }, 800);
    }, 800);
  };

  const lanes: MissionCard['lane'][] = ['アイデア出し', '技術選定', '役割分担', '提出物'];

  return (
    <div style={{ fontFamily: 'sans-serif', padding: '2rem' }}>
      <header style={{ borderBottom: '1px solid #eee', paddingBottom: '1rem', marginBottom: '1rem' }}>
        <h1 style={{ fontSize: '2rem', fontWeight: 'bold' }}>ハッカソン作戦室</h1>
        <p style={{ color: '#555' }}>ハッカソンのテーマを入力すると、AIが作戦ボードを自動生成します。</p>
      </header>

      <main style={{ display: 'grid', gridTemplateColumns: '250px 1fr', gap: '2rem' }}>
        <aside>
          <div style={{ marginBottom: '1.5rem' }}>
            <h2 style={{ fontSize: '1.1rem', fontWeight: '600', marginBottom: '0.5rem' }}>テーマ入力</h2>
            <textarea
              name="hackathonTheme"
              readOnly
              style={{ width: '100%', height: '100px', padding: '8px', border: '1px solid #ccc', borderRadius: '4px', background: '#f9f9f9' }}
              placeholder="地域の課題を解決するAIアプリ開発"
              defaultValue={sampleTrace.step_generateMissionBoard.output.inputTheme}
            />
          </div>

          <div style={{ marginBottom: '1.5rem' }}>
            <h2 style={{ fontSize: '1.1rem', fontWeight: '600', marginBottom: '0.5rem' }}>処理パイプライン</h2>
            <ul style={{ listStyle: 'none', padding: 0 }}>
              {pipelineSteps.map((step, index) => (
                <li key={step.id} style={{ marginBottom: '0.5rem', opacity: isRunning || board ? 1 : 0.5 }}>
                  <span style={{ display: 'inline-block', width: '20px', marginRight: '8px', textAlign: 'center', fontWeight: 'bold', color: '#888' }}>{index + 1}.</span>
                  <span style={{ color: currentStep === step.id ? '#007bff' : '#333' }}>{step.name}</span>
                </li>
              ))}
            </ul>
          </div>

          <button
            data-proof="replay-trace"
            onClick={handleReplayTrace}
            disabled={isRunning}
            style={{
              width: '100%',
              padding: '10px 15px',
              fontSize: '1rem',
              color: 'white',
              background: isRunning ? '#ccc' : '#007bff',
              border: 'none',
              borderRadius: '4px',
              cursor: 'pointer',
            }}
          >
            {isRunning ? '生成中...' : 'サンプル実行トレースを再生'}
          </button>
        </aside>

        <section data-proof="mission-board">
          {board ? (
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '1rem' }}>
              {lanes.map(lane => (
                <div key={lane} style={{ background: '#f4f5f7', padding: '1rem', borderRadius: '8px' }}>
                  <h3 data-proof={`lane-title-${lane}`} style={{ fontSize: '1.2rem', fontWeight: 'bold', marginBottom: '1rem' }}>{lane}</h3>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
                    {board.cards.filter(card => card.lane === lane).map(card => (
                      <div key={card.id} className={`${cardColors[card.type]}`} style={{ padding: '1rem', border: '1px solid #ddd', borderRadius: '4px', boxShadow: '0 1px 3px rgba(0,0,0,0.05)' }}>
                        <h4 style={{ fontWeight: '600', marginBottom: '0.5rem' }}>{card.title}</h4>
                        <p style={{ fontSize: '0.9rem', color: '#444' }}>{card.description}</p>
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', border: '2px dashed #ddd', borderRadius: '8px', background: '#f9f9f9' }}>
              <p style={{ color: '#888' }}>ボタンを押して作戦ボードを生成してください</p>
            </div>
          )}
        </section>
      </main>
    </div>
  );
}