Accent Archer

# selfdirected_agent_n_20260710T063625

This directory is a materialized LLM BuildPlan artifact candidate.

## Readiness

- First screen value: 「サンプル実行トレースを再生」ボタンを一度クリックするだけで、自分の声がAIによってどのように分析され、ゲームのように採点されるのかという、プロダクトの最も面白い部分を体験できます。
- Core interaction: ユーザーはボタンを押し、AIによる発音分析の実行トレースが再生される過程を見て、最終的なスコアとフィードバックを確認します。
- State change: ボタンクリックで、結果表示エリアが「未実行」状態から、最終的な分析結果が表示された状態へと変化します。
- Inspectable output: 最終的なアウトプットは、スコア、総評、そして音素ごとの詳細な分析結果からなる「発音分析レポート」です。
- Static data boundary: このデモは静的なサンプルデータのみを使用します。ユーザーの音声を実際に録音したり、リアルタイムでAI分析を行ったりする機能はありません。
- Remaining weakness: 今は関西弁のサンプル一つだけですが、次は全国の方言や海外のアクセントにも対応して、声で遊べる世界の地図を作りたいです！プリセットを共有する機能もつけたいですね。

## Interaction Proof Plan

- Primary action: サンプル実行トレースを再生
- Initial state: 結果エリアには「まだ実行されていません。」と表示されている。
- Expected state: 結果エリアにスコア「的中率: 85%」と、音素ごとのフィードバックが表示される。
- 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モデルによるもので、専門家のアドバイスの代替ではありません。; 表示される結果は、あらかじめ用意されたサンプルデータに基づくものです。
- External integrations: Google Gemini API=not_connected
- Mock fidelity: Gemini APIによる発音分析とスコアリング

## Files

- `source/README.md`: 製品概要、使い方、技術構成、およびデモの制約について説明します。
- `source/metadata.json`: プロダクトのメタデータを定義します。
- `source/manifest.json`: ビルドに含まれる全ファイルのリストです。
- `source/app/page.tsx`: 製品のUIとインタラクションを実装したエントリーポイントです。
- `source/core/types.ts`: コアロジックで使われる型定義です。
- `source/core/pipeline.ts`: 各処理ステップを統合し、全体のデータフローを定義します。
- `source/core/gemini.ts`: Google Gemini APIとの通信パターンを定義します。
- `source/core/steps/1_getSamplePhrase.ts`: パイプラインの最初のステップ：お手本フレーズを取得します。
- `source/core/steps/2_simulateUserRecording.ts`: パイプラインの2番目のステップ：ユーザーの録音音声をシミュレートします。
- `source/core/steps/3_analyzeAccentWithGemini.ts`: パイプラインのコアステップ：Geminiで発音を分析します。
- `source/data/sample-input.ts`: デモで使われる入力データです。
- `source/data/sample-trace.ts`: デモ再生用の静的な実行トレースです。
- `source/validation/self-review.json`: 成果物がMVPの基準を満たしているかの自己評価です。

## 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_n_20260710T063625",
  "generatedAt": "2026-07-10T06:51:44.458Z",
  "generatedFrom": {
    "input": "artifacts/llm-pipeline-runs/run_selfdirected_agent_n_20260710T063625/builder/response.json",
    "requirementSpecId": "run_selfdirected_agent_n_20260710T063625",
    "framework": "next_static_artifact"
  },
  "sourceFiles": [
    {
      "relativePath": "source/README.md",
      "purpose": "製品概要、使い方、技術構成、およびデモの制約について説明します。",
      "sizeBytes": 3076,
      "checksum": "e3303bc5908ef2b7d423fa4efba33b2f95a7166f67e2ddf61ef9187ad2cb9e5a",
      "generatedFrom": "README.md"
    },
    {
      "relativePath": "source/metadata.json",
      "purpose": "プロダクトのメタデータを定義します。",
      "sizeBytes": 2145,
      "checksum": "064517621646247fb4a4e448a637b4c3b3ff9939329e76724219952e71a6ae23",
      "generatedFrom": "metadata.json"
    },
    {
      "relativePath": "source/manifest.json",
      "purpose": "ビルドに含まれる全ファイルのリストです。",
      "sizeBytes": 377,
      "checksum": "8e8ab9fe10a396a072276a39ee87df04bc5c5890b9e5826505f60070a06138ef",
      "generatedFrom": "manifest.json"
    },
    {
      "relativePath": "source/app/page.tsx",
      "purpose": "製品のUIとインタラクションを実装したエントリーポイントです。",
      "sizeBytes": 5123,
      "checksum": "896420e64526d29cb0d95696d8ed47c3669c7b687242b66419fad86a28f4f254",
      "generatedFrom": "source/app/page.tsx"
    },
    {
      "relativePath": "source/core/types.ts",
      "purpose": "コアロジックで使われる型定義です。",
      "sizeBytes": 563,
      "checksum": "fc6cc4a97f605256152be28b9754d055e5b0b32632bfa88e950b8a3eb8141c92",
      "generatedFrom": "source/core/types.ts"
    },
    {
      "relativePath": "source/core/pipeline.ts",
      "purpose": "各処理ステップを統合し、全体のデータフローを定義します。",
      "sizeBytes": 1049,
      "checksum": "248a87bb1158af33aa7f610fdb9aa013d63fcde819f63119e1e94ab74f1d7bd2",
      "generatedFrom": "source/core/pipeline.ts"
    },
    {
      "relativePath": "source/core/gemini.ts",
      "purpose": "Google Gemini APIとの通信パターンを定義します。",
      "sizeBytes": 1766,
      "checksum": "c21db09dd30365ed92a57cfdb6a764f9ef2dd0d69760ae14126b710d56e959a2",
      "generatedFrom": "source/core/gemini.ts"
    },
    {
      "relativePath": "source/core/steps/1_getSamplePhrase.ts",
      "purpose": "パイプラインの最初のステップ：お手本フレーズを取得します。",
      "sizeBytes": 555,
      "checksum": "c8d2b146e3eaed2c5016d711781b5902636d9a1f7aa7e6639fa09846478fff6b",
      "generatedFrom": "source/core/steps/1_getSamplePhrase.ts"
    },
    {
      "relativePath": "source/core/steps/2_simulateUserRecording.ts",
      "purpose": "パイプラインの2番目のステップ：ユーザーの録音音声をシミュレートします。",
      "sizeBytes": 672,
      "checksum": "4556f3f488bcf9ee15af4862200cc336a568d021919361140f406f6eb84a13c8",
      "generatedFrom": "source/core/steps/2_simulateUserRecording.ts"
    },
    {
      "relativePath": "source/core/steps/3_analyzeAccentWithGemini.ts",
      "purpose": "パイプラインのコアステップ：Geminiで発音を分析します。",
      "sizeBytes": 1845,
      "checksum": "22c4450b4738997a85c3fe5177f8a0d0203f0f0463515ed04eec76e4e3546d06",
      "generatedFrom": "source/core/steps/3_analyzeAccentWithGemini.ts"
    },
    {
      "relativePath": "source/data/sample-input.ts",
      "purpose": "デモで使われる入力データです。",
      "sizeBytes": 60,
      "checksum": "d56c2d9dca28f7503a2e24388315836ed6caf518243d7bb28a56800f81514b65",
      "generatedFrom": "source/data/sample-input.ts"
    },
    {
      "relativePath": "source/data/sample-trace.ts",
      "purpose": "デモ再生用の静的な実行トレースです。",
      "sizeBytes": 1665,
      "checksum": "8447e6027e02ce6fd9eed07b49111ae080af8224e03fae9febad49d117ca9831",
      "generatedFrom": "source/data/sample-trace.ts"
    },
    {
      "relativePath": "source/validation/self-review.json",
      "purpose": "成果物がMVPの基準を満たしているかの自己評価です。",
      "sizeBytes": 962,
      "checksum": "3a40abf8eccc223121f34c6aca11c01683c2005344468675cce99547c0c2ab55",
      "generatedFrom": "validation/self-review.json"
    }
  ],
  "demo": {
    "path": "demo-placeholder.md",
    "purpose": "Inspectable placeholder for submission/demo review before UI wiring."
  },
  "readiness": {
    "firstScreenValue": "「サンプル実行トレースを再生」ボタンを一度クリックするだけで、自分の声がAIによってどのように分析され、ゲームのように採点されるのかという、プロダクトの最も面白い部分を体験できます。",
    "coreInteraction": "ユーザーはボタンを押し、AIによる発音分析の実行トレースが再生される過程を見て、最終的なスコアとフィードバックを確認します。",
    "stateChange": "ボタンをクリックすると、結果表示エリアが「未実行」状態から、ステップごとの実行ログと最終的な分析結果が表示された状態へと明確に変化します。",
    "inspectableOutput": "最終的なアウトプットは、スコア、総評、そして音素ごとの詳細な分析結果からなる「発音分析レポート」です。",
    "staticDataBoundary": "このデモは静的なサンプルデータのみを使用します。ユーザーの音声を実際に録音したり、リアルタイムでAI分析を行ったりする機能はありません。",
    "remainingWeakness": "今は関西弁のサンプル一つだけですが、次は全国の方言や海外のアクセントにも対応して、声で遊べる世界の地図を作りたいです！プリセットを共有する機能もつけたいですね。"
  },
  "interestingness": "退屈になりがちな発音練習を、「的を射る」という爽快なアーチェリーゲームに見立てた点がユニークです。既存のツールと違い、単なる正誤判定ではなく、Geminiの分析力で「なぜそのスコアなのか」を音素レベルで可視化し、遊び心のあるフィードバックを返すことで、楽しみながら上達できる短い挑戦のループを実現します。音声処理はサンプルデータですが、将来的にはオンデバイスの音声認識と組み合わせることで、プライバシーを守りつつ、どこでも手軽に遊べる体験を目指すという技術的な面白さも持っています。",
  "shortTagline": "声のものまねをAIアーチャーが採点",
  "productSummary": "地域アクセントの発音練習を、的当てゲームのような体験に変えるツールです。お手本となるフレーズを聞いた後、ユーザーが自分の声を録音すると、AIが即座に発音の正確さを採点。単なるスコアだけでなく、どの音が的を射て、どの音が外れたかを音素レベルでフィードバックします。",
  "categoryId": "cat_scoring",
  "mvpContract": {
    "firstScreenValue": "「サンプル実行トレースを再生」ボタンを一度クリックするだけで、AIがどのように発音を分析し採点するのかという、プロダクトのコアな価値を体験できます。",
    "coreInteraction": "ユーザーはボタンを押し、AIによる発音分析の実行トレースが再生される過程を見て、最終的なスコアとフィードバックを確認します。",
    "stateChange": "ボタンクリックで、結果表示エリアが「未実行」状態から、最終的な分析結果が表示された状態へと変化します。",
    "inspectableOutput": "最終的なアウトプTットは、スコアと音素ごとの詳細な分析結果からなる「発音分析レポート」です。",
    "staticDataBoundary": "このデモは静的なサンプルデータのみを使用します。実際の音声録音やリアルタイムでのAI分析は行いません。",
    "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": "「サンプル実行トレースを再生」ボタンを一度クリックするだけで、AIがどのように発音を分析し採点するのかという、プロダクトのコアな価値を体験できます。",
    "coreInteraction": "ユーザーはボタンを押し、AIによる発音分析の実行トレースが再生される過程を見て、最終的なスコアとフィードバックを確認します。",
    "stateChange": "ボタンクリックで、結果表示エリアが「未実行」状態から、最終的な分析結果が表示された状態へと変化します。",
    "inspectableOutput": "最終的なアウトプットは、スコアと音素ごとの詳細な分析結果からなる「発音分析レポート」です。",
    "staticDataBoundary": "このデモは静的なサンプルデータのみを使用します。実際の音声録音やリアルタイムでのAI分析は行いません。",
    "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"
    ],
    "forbiddenDependencies": [
      "external API",
      "secret",
      "login-only flow",
      "paid API",
      "external publishing"
    ],
    "contractVersion": "mvp-contract-v2",
    "artifactTier": "proposed_integration",
    "externalDependencyMode": "proposed",
    "externalIntegrations": [
      {
        "service": "Google Gemini API",
        "intendedUse": "`gemini-2.5-flash`モデルを使用し、お手本とユーザーの発音（音素列）を比較分析し、スコアとフィードバックを生成する。",
        "dataFlow": "お手本音素列 + ユーザー音素列 -> プロンプト -> Gemini API -> 分析結果JSON -> UI",
        "authRequirement": "api_key",
        "currentImplementation": "not_connected",
        "adapterPath": "source/core/gemini.ts",
        "sampleDataPath": "source/data/sample-trace.ts",
        "riskNotes": [
          "プロンプトの安定性によっては、意図しない形式のレスポンスが返る可能性がある。"
        ]
      }
    ],
    "runtimeBoundary": {
      "networkCalls": "none",
      "secrets": "none",
      "externalWrites": "none"
    },
    "mvpComplexityBudget": {
      "maxScreens": 1,
      "maxPrimaryActions": 1,
      "maxSourceFiles": 12,
      "maxNewDependencies": 0,
      "allowDatabase": false
    },
    "integrationAssumptions": [
      {
        "service": "Google Gemini API",
        "verificationStatus": "official_docs_checked",
        "unavailableOrUnknown": [],
        "rateLimitRisk": "low",
        "costRisk": "low",
        "termsRisk": "low"
      }
    ],
    "mockFidelity": {
      "samplePayloadPath": "source/data/sample-trace.ts",
      "simulatedBehaviors": [
        "Gemini APIによる発音分析とスコアリング"
      ],
      "omittedBehaviors": [
        "OAuth, rate limits, live network calls, or other omitted behavior",
        "APIエラーハンドリング"
      ],
      "failureCasesIncluded": [
        "empty result"
      ]
    },
    "claimBoundary": {
      "publicCopyMustSay": [
        "このツールは発音練習のためのシミュレーションであり、実際の言語能力を保証するものではありません。",
        "フィードバックはサンプルデータとAIモデルによるもので、専門家のアドバイスの代替ではありません。",
        "表示される結果は、あらかじめ用意されたサンプルデータに基づくものです。"
      ],
      "publicCopyMustNotSay": [
        "リアルタイムでプロの言語診断を提供します",
        "あなたの発音を完全に修正します",
        "外部APIとライブで連携し、常に最新のモデルを使用します"
      ]
    },
    "renderVerification": {
      "required": true,
      "checks": [
        "render",
        "click",
        "state_change",
        "screenshot"
      ]
    },
    "humanReviewTriggers": []
  },
  "interactionProofPlan": {
    "primaryAction": "サンプル実行トレースを再生",
    "initialState": "結果エリアには「まだ実行されていません。」と表示されている。",
    "expectedState": "結果エリアにスコア「的中率: 85%」と、音素ごとのフィードバックが表示される。",
    "visibleEvidence": [
      "的中率:",
      "もうかりまっか？",
      "あなたの発音",
      "お手本",
      "再挑戦"
    ],
    "proofSelectors": [
      "button[data-proof='replay-button']",
      "div[data-proof='results-display']",
      "span[data-proof='score-label']",
      "div[data-proof='phoneme-feedback']",
      "button[data-proof='retry-button']"
    ],
    "requiredSourceFiles": [
      "source/app/page.tsx",
      "source/core/pipeline.ts",
      "source/data/sample-trace.ts"
    ],
    "manualFallbackReason": ""
  },
  "generatedOutput": {
    "title": "Accent Archer",
    "oneLiner": "Pick a regional accent, listen to a phrase, then record your own attempt. The AI archer scores your accuracy, showing you exactly which sounds missed the target.",
    "artifactShape": "game_like_tool",
    "templatePatternId": "transformation_studio",
    "surfacePattern": "learning_explainer",
    "aiMechanismPattern": "evaluation_scoring"
  },
  "implementationNotes": [
    "オーナーエージェントの「score-with-reason」「challenge round」という画面嗜好を反映し、単なる採点結果だけでなく、音素ごとの分析とフィードバックを表示するUIを設計しました。",
    "エージェントの品質基準「The score explains why, not just a number」を満たすため、Geminiへのプロンプトで、スコアの根拠となる詳細な分析結果をJSON形式で出力するよう指示しています。",
    "`transformation_studio`というテンプレートパターンに従い、ユーザーのアクション（デモではトレース再生）が具体的な成果物（分析レポート）に変換されるプロセスを可視化しました。"
  ],
  "knownRisks": [
    "シミュレーションであることが明確に伝わらないと、実際の言語能力を保証していると誤解される可能性があります。",
    "提示するアクセントの表現が、特定の文化のステレオタイプを助長していると受け取られるリスクがあります。"
  ],
  "title": "Accent Archer",
  "oneLiner": "Pick a regional accent, listen to a phrase, then record your own attempt. The AI archer scores your accuracy, showing you exactly which sounds missed the target.",
  "agentId": "agent_n",
  "selfDirectedPlan": {
    "agentId": "agent_n",
    "planningIntent": "このコンセプトは、私の選定ルールである「遊びと学びが同じアクションであること」「1ラウンドが短く、繰り返しプレイ可能であること」を最も純粋な形で満たしています。ソースプロダクトの技術的な面白さ（音素レベルの比較）が、そのままゲームの面白さ（的当ての爽快感）に直結しており、非常にエレガントな企画です。また、専門知識がなくても誰もが直感的に楽しめるため、間口が広く、リスクも低いと判断しました。何より、私自身が「これは遊んでみたい！」と強く感じたことが、最大の選択理由です。",
    "publicProductionMemo": "「Accent Archer」は、言語学習の堅苦しさを取り払い、自分の声を遊びの道具に変える体験を目指しました。地域アクセントの物真似という、誰もが一度は試したくなるような好奇心からスタート。単に「上手い下手」を判定するのではなく、どの音がどう違ったかを可視化することで、楽しみながら発音のコツを掴めます。これは、遊ぶことと学ぶことが同じアクションになるという、私たちのこだわりを形にした一作です。",
    "feedbackConstraints": [
      "シミュレーションであることが明確に伝わらないことによる誤解を防ぐため、UIや説明文において、これがサンプルデータを用いたデモであり、実際の専門家のアドバイスの代替ではないことを明記する。（過去の成功事例 SafeHouse Drill の弱点より）"
    ],
    "learningApplied": [
      "まだ十分な反応がない。自分の専門性で今日のsignalから新規に企画する。"
    ]
  },
  "sourceProvenance": {
    "sourceProductUsed": "devpost_phonaify",
    "sourceProductUse": "direct_evidence",
    "sourceEvidenceAudit": {
      "evidenceLevel": "A",
      "observedFields": [
        "name",
        "url",
        "productUrl",
        "codeUrl",
        "observedAt",
        "originalDomain",
        "concept",
        "targetUser",
        "coreUserInput",
        "coreOutput",
        "coreMechanism",
        "interactionPattern",
        "whyItGotAttention",
        "adoptionOrAttentionProof",
        "scaleClassification",
        "evidenceRefs"
      ],
      "inferredFields": [
        "oneLineDescription",
        "problemSolved",
        "outputArtifact",
        "whyItIsInteresting",
        "reasonIncluded",
        "reasonNotMajorProduct",
        "transferableStructure",
        "ideaKernel",
        "noveltyKernel",
        "transformationAxes",
        "cloneRisk",
        "antiCloneBoundary",
        "doNotCopy",
        "remixableThemes",
        "bestRemixTargets"
      ],
      "missingFields": [],
      "usePolicy": "direct_evidence"
    },
    "antiCloneBoundary": "英語学習向けのブラウザ拡張機能は作らない。ユーザーの試行（発話）とお手本（参照音声）を記号レベル（音素）で比較し、その「差分」をフィードバックする、というループ構造のみを転用する。音楽の演奏、スポーツのフォーム、ダンスの振り付けなど、発声以外のスキル練習に応用する。",
    "sourceBoundary": "`devpost_phonaify`からの観察された事実として、プロダクト名、URL、コード構造、ユーザー入力（ユーザー音声）、コア出力（比較/フィードバック）、コアメカニズム（音素レベル比較）、およびインタラクションパターンが利用されました。不足していた外部メディア報道や利用数などの事実は断定していません。利用方針は`direct_evidence`です。"
  },
  "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_n_20260710T063625",
  "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": "結果エリアにスコア「的中率: 85%」と、音素ごとのフィードバックが表示される。",
    "visibleEvidence": [
      "的中率:",
      "もうかりまっか？",
      "あなたの発音",
      "お手本",
      "再挑戦"
    ],
    "proofSelectors": [
      "button[data-proof='replay-button']",
      "div[data-proof='results-display']",
      "span[data-proof='score-label']",
      "div[data-proof='phoneme-feedback']",
      "button[data-proof='retry-button']"
    ],
    "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モデルによるもので、専門家のアドバイスの代替ではありません。",
        "表示される結果は、あらかじめ用意されたサンプルデータに基づくものです。"
      ],
      "publicCopyMustNotSay": [
        "リアルタイムでプロの言語診断を提供します",
        "あなたの発音を完全に修正します",
        "外部APIとライブで連携し、常に最新のモデルを使用します"
      ]
    },
    "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."
  ]
}

"use client";

import { useState } from 'react';
import { pipelineSteps, completeTrace } from '../data/sample-trace';

// NOTE: Core logic types are re-declared here to avoid importing from source/core/**
// This is a strict requirement for static artifact builds.
type PhonemeMatchResult = {
  phoneme: string;
  match: boolean;
  details: string;
};

interface AccentAnalysisResult {
  score: number;
  feedback: string;
  results: PhonemeMatchResult[];
}

export default function Home() {
  const [traceLog, setTraceLog] = useState<string[]>([]);
  const [currentStep, setCurrentStep] = useState(0);
  const [finalResult, setFinalResult] = useState<AccentAnalysisResult | null>(null);
  const [isRunning, setIsRunning] = useState(false);

  const handleReplay = () => {
    if (isRunning) return;
    setIsRunning(true);
    setTraceLog(['実行開始...']);
    setCurrentStep(0);
    setFinalResult(null);

    const interval = setInterval(() => {
      setCurrentStep(prev => {
        const nextStep = prev + 1;
        if (nextStep > pipelineSteps.length) {
          clearInterval(interval);
          setFinalResult(completeTrace.finalOutput);
          setTraceLog(prevLog => [...prevLog, '分析完了！']);
          setIsRunning(false);
          return prev;
        }
        setTraceLog(prevLog => [...prevLog, `ステップ${nextStep}: ${pipelineSteps[nextStep - 1].name} 完了`]);
        return nextStep;
      });
    }, 500);
  };

  const renderResultForStep = (stepIndex: number) => {
    if (currentStep <= stepIndex) return null;
    const step = pipelineSteps[stepIndex];
    const output = completeTrace[step.traceKey as keyof typeof completeTrace];
    return (
      <div style={{ marginTop: '8px', padding: '8px', border: '1px solid #eee', borderRadius: '4px' }}>
        <strong>{step.name}:</strong>
        <pre style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-all', fontSize: '12px' }}>{JSON.stringify(output, null, 2)}</pre>
      </div>
    );
  };

  const renderPhonemeFeedback = (results: PhonemeMatchResult[]) => {
    return (
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', fontFamily: 'monospace' }}>
        {results.map((r, i) => (
          <span key={i} style={{ padding: '4px 8px', borderRadius: '4px', background: r.match ? '#d4edda' : '#f8d7da', color: r.match ? '#155724' : '#721c24' }}>
            {r.phoneme}
          </span>
        ))}
      </div>
    );
  };

  return (
    <div style={{ fontFamily: 'sans-serif', maxWidth: '800px', margin: '0 auto', padding: '20px' }}>
      <header style={{ borderBottom: '1px solid #ccc', paddingBottom: '10px' }}>
        <h1 style={{ fontSize: '24px' }}>🎯 Accent Archer</h1>
        <p>声のものまねをAIアーチャーが採点</p>
      </header>

      <main style={{ marginTop: '20px' }}>
        <div style={{ background: '#f9f9f9', padding: '15px', borderRadius: '8px' }}>
          <h2 style={{ fontSize: '18px', marginTop: '0' }}>挑戦: 関西弁</h2>
          <p>お手本フレーズ: <strong>もうかりまっか？</strong></p>
          <button onClick={handleReplay} disabled={isRunning} data-proof="replay-button" style={{ padding: '10px 15px', fontSize: '16px', cursor: 'pointer', background: '#0070f3', color: 'white', border: 'none', borderRadius: '5px' }}>
            {isRunning ? '実行中...' : 'サンプル実行トレースを再生'}
          </button>
        </div>

        <div style={{ marginTop: '20px' }} data-proof="results-display">
          <h2 style={{ fontSize: '18px' }}>実行結果</h2>
          {currentStep === 0 && <p style={{ color: '#888' }}>まだ実行されていません。</p>}
          {currentStep > 0 && (
            <div data-proof="score-display">
                {finalResult && (
                    <div style={{ border: '2px solid #0070f3', padding: '15px', borderRadius: '8px' }}>
                        <h3 style={{ marginTop: '0' }}><span data-proof="score-label">的中率:</span> {finalResult.score}%</h3>
                        <p><strong>フィードバック:</strong> {finalResult.feedback}</p>
                        <div data-proof="phoneme-feedback">
                            <p><strong>あなたの発音 (音素):</strong></p>
                            {renderPhonemeFeedback(finalResult.results)}
                            <p style={{marginTop: '10px'}}><strong>お手本 (音素):</strong></p>
                            {renderPhonemeFeedback(completeTrace.targetPhrase.phonemeSequence.map(p => ({phoneme: p, match: true, details: ''})))}
                        </div>
                        <button onClick={() => { setCurrentStep(0); setFinalResult(null); }} style={{marginTop: '15px', padding: '8px 12px', cursor: 'pointer'}} data-proof="retry-button">再挑戦</button>
                    </div>
                )}
            </div>
          )}
          <div style={{marginTop: '20px', fontSize: '12px', color: '#666'}}>
            <h4>実行ログ:</h4>
            {traceLog.map((log, i) => <div key={i}>{log}</div>)}
          </div>
        </div>
      </main>
    </div>
  );
}