TracePoint

# selfdirected_agent_g_20260707T184804

This directory is a materialized LLM BuildPlan artifact candidate.

## Readiness

- First screen value: AIが書いた一文の裏側にある「論理の組み立て」を、ボタン一つで可視化できます。どの主張がどの資料から来ているのかが一目で分かり、AI出力の信頼性を自分自身で判断する手助けとなります。
- Core interaction: 「サンプル実行トレースを再生」ボタンを押し、AIの主張が分析されていくプロセスをステップバイステップで確認する。
- State change: ボタンを押すと、空だった結果エリアに、主張の断片と根拠資料を結ぶインタラクティブなグラフが表示される。
- Inspectable output: 最終的に、主張のキーフレーズと根拠資料をノードとし、両者の関係性をエッジとして表現したグラフデータが出力される。
- Static data boundary: 表示されるすべてのデータは、事前に用意された単一のサンプル入力に基づいています。ユーザーが任意のテキストを入力したり、リアルタイムでAI処理を実行したりすることはできません。
- Remaining weakness: 現在は単一のサンプル再生のみですが、次は複数のサンプルシナリオを選択可能にし、様々な主張のパターンを検証できるようにしたいです。将来的には、実際のLLMと連携し、ユーザーが自由に入力したテキストをその場で分析するライブ版を目指したいと考えています。

## Interaction Proof Plan

- Primary action: サンプル実行トレースを再生
- Initial state: 結果表示エリアに「まだ実行されていません」と表示されている状態。
- Expected state: 結果表示エリアに、パイプラインの全ステップの実行結果と「トレース完了」のメッセージが表示される状態。
- Visible evidence: 主張の分解 (Decompose Claim); 根拠の検索 (Find Evidence); 関連性の評価 (Link and Score); グラフの構築 (Build Graph); トレース完了

## 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が生成した文章の根拠を検証するためのコンセプトデモです。; 根拠の分析には、シミュレートされたAI処理とサンプルデータを使用しています。; 表示される根拠や関連性は、AIによる推論結果であり、実際の事実確認や専門家の判断を代替するものではありません。
- External integrations: Google Gemini API=not_connected
- Mock fidelity: A multi-step AI analysis pipeline's successful execution.; Decomposition of a claim into fragments.; Linking claim fragments to source documents.; Classification of links into 'direct_quote' and 'inference'.

## Files

- `source/README.md`: 製品の概要、使い方、技術的なコンセプト、そしてデモの限界について説明します。
- `source/metadata.json`: ビルドのメタデータを定義します。
- `source/manifest.json`: ビルドに含まれるすべてのファイルのリストです。
- `source/validation/self-review.json`: ProdiaのMVP基準に対する自己評価です。
- `source/app/page.tsx`: アプリケーションのエントリーポイントであり、UIレンダリングとインタラクションを処理します。
- `source/core/types.ts`: コアロジックで使われるデータ構造の型を定義します。
- `source/core/pipeline.ts`: 主張の検証プロセス全体をオーケストレーションします。
- `source/core/gemini.ts`: Google Gemini APIとの通信パターンを定義します。
- `source/core/steps/1-decompose-claim.ts`: パイプラインの第1ステップ: AIの主張をキーフレーズに分解します。
- `source/core/steps/2-find-evidence.ts`: パイプラインの第2ステップ: 各キーフレーズに関連する根拠資料を検索します。
- `source/core/steps/3-link-and-score.ts`: パイプラインの第3ステップ: 主張と根拠の関係性を評価・スコアリングします。
- `source/core/steps/4-build-graph.ts`: パイプラインの最終ステップ: 分析結果を視覚的なグラフとして構築します。
- `source/data/sample-input.ts`: 検証対象となるサンプルAI主張テキストです。
- `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_g_20260707T184804",
  "generatedAt": "2026-07-07T19:01:12.234Z",
  "generatedFrom": {
    "input": "artifacts/llm-pipeline-runs/run_selfdirected_agent_g_20260707T184804/builder/response.json",
    "requirementSpecId": "run_selfdirected_agent_g_20260707T184804",
    "framework": "next_static_artifact"
  },
  "sourceFiles": [
    {
      "relativePath": "source/README.md",
      "purpose": "製品の概要、使い方、技術的なコンセプト、そしてデモの限界について説明します。",
      "sizeBytes": 3778,
      "checksum": "f0604607897b418cc4a8173d2e65031f0490d9604e81976c270253f113282315",
      "generatedFrom": "README.md"
    },
    {
      "relativePath": "source/metadata.json",
      "purpose": "ビルドのメタデータを定義します。",
      "sizeBytes": 2792,
      "checksum": "7ff86d5cf4c8bd981876e199e6431f9aa6f6c757ce6ffcb852e340f5e875808d",
      "generatedFrom": "metadata.json"
    },
    {
      "relativePath": "source/manifest.json",
      "purpose": "ビルドに含まれるすべてのファイルのリストです。",
      "sizeBytes": 397,
      "checksum": "8ed07c0e03b4015a8df4e70be069c208cace0403fe0625a7fd4fc0bc04ec8343",
      "generatedFrom": "manifest.json"
    },
    {
      "relativePath": "source/validation/self-review.json",
      "purpose": "ProdiaのMVP基準に対する自己評価です。",
      "sizeBytes": 1934,
      "checksum": "a38c45d5ce075b1ae793afc78b52f9357e261afe401a3bb8772798d4278ffbf8",
      "generatedFrom": "validation/self-review.json"
    },
    {
      "relativePath": "source/app/page.tsx",
      "purpose": "アプリケーションのエントリーポイントであり、UIレンダリングとインタラクションを処理します。",
      "sizeBytes": 11726,
      "checksum": "1264d68b8c54fad45a0abbcac0f055235bf7d0185d71bc4fed0d346dff96ce77",
      "generatedFrom": "source/app/page.tsx"
    },
    {
      "relativePath": "source/core/types.ts",
      "purpose": "コアロジックで使われるデータ構造の型を定義します。",
      "sizeBytes": 719,
      "checksum": "ac793aab61d212ebd0d089b1ce9975f941534aea3192df760fac1a287cfd5e0a",
      "generatedFrom": "source/core/types.ts"
    },
    {
      "relativePath": "source/core/pipeline.ts",
      "purpose": "主張の検証プロセス全体をオーケストレーションします。",
      "sizeBytes": 1715,
      "checksum": "3b1830909858f431893fe58899123865a8b017c1a1b511733142c86e07b44efe",
      "generatedFrom": "source/core/pipeline.ts"
    },
    {
      "relativePath": "source/core/gemini.ts",
      "purpose": "Google Gemini APIとの通信パターンを定義します。",
      "sizeBytes": 3993,
      "checksum": "9ee59f4a5d7761accb5d9e094e3c7d87c66f60de5ee97cf01653a220c79ac0c1",
      "generatedFrom": "source/core/gemini.ts"
    },
    {
      "relativePath": "source/core/steps/1-decompose-claim.ts",
      "purpose": "パイプラインの第1ステップ: AIの主張をキーフレーズに分解します。",
      "sizeBytes": 1578,
      "checksum": "caa65be5360c518d44dc7519ab51811f60a531e7ffe996478e3393be0212bdca",
      "generatedFrom": "source/core/steps/1-decompose-claim.ts"
    },
    {
      "relativePath": "source/core/steps/2-find-evidence.ts",
      "purpose": "パイプラインの第2ステップ: 各キーフレーズに関連する根拠資料を検索します。",
      "sizeBytes": 1165,
      "checksum": "2ae7f33ff0db76ba627a75c4128780a8fb8c73496ab67d26e4f58bc1db8ca036",
      "generatedFrom": "source/core/steps/2-find-evidence.ts"
    },
    {
      "relativePath": "source/core/steps/3-link-and-score.ts",
      "purpose": "パイプラインの第3ステップ: 主張と根拠の関係性を評価・スコアリングします。",
      "sizeBytes": 1480,
      "checksum": "9859b17ced00ad6eb929eca0b660abcd0d9b0875c4a19f758f76b36e792c0db6",
      "generatedFrom": "source/core/steps/3-link-and-score.ts"
    },
    {
      "relativePath": "source/core/steps/4-build-graph.ts",
      "purpose": "パイプラインの最終ステップ: 分析結果を視覚的なグラフとして構築します。",
      "sizeBytes": 1304,
      "checksum": "d0ec1df9baa2f133373b87508606591fb9c3a58088240ed7920ddaede83c7f56",
      "generatedFrom": "source/core/steps/4-build-graph.ts"
    },
    {
      "relativePath": "source/data/sample-input.ts",
      "purpose": "検証対象となるサンプルAI主張テキストです。",
      "sizeBytes": 219,
      "checksum": "ecd55f758c54710bbab6c2f4c8340b2cb4b17a17d2732e1cfa4f6fa26668c498",
      "generatedFrom": "source/data/sample-input.ts"
    },
    {
      "relativePath": "source/data/sample-trace.ts",
      "purpose": "サンプル入力に対する、パイプラインの各ステップの実行結果を記録したトレースデータです。",
      "sizeBytes": 2703,
      "checksum": "691798f782f0bcc94dd7287b11775101df1e8e079aaad2d2fb257c14f61eacb0",
      "generatedFrom": "source/data/sample-trace.ts"
    }
  ],
  "demo": {
    "path": "demo-placeholder.md",
    "purpose": "Inspectable placeholder for submission/demo review before UI wiring."
  },
  "readiness": {
    "firstScreenValue": "AIが書いた一文の裏側にある「論理の組み立て」を、ボタン一つで可視化できます。どの主張がどの資料から来ているのかが一目で分かり、AI出力の信頼性を自分自身で判断する手助けとなります。",
    "coreInteraction": "「サンプル実行トレースを再生」ボタンを押し、AIの主張が分析されていくプロセスをステップバイステップで確認する。",
    "stateChange": "ボタンを押すと、空だった結果表示エリアに、主張の分解、根拠の検索、関連性の評価、グラフ構築という各ステップの処理結果が順番に表示されていく。",
    "inspectableOutput": "最終的に、主張のキーフレーズと根拠資料をノードとし、両者の関係性をエッジとして表現したグラフデータが出力される。",
    "staticDataBoundary": "表示されるすべてのデータは、事前に用意された単一のサンプル入力に基づいています。ユーザーが任意のテキストを入力したり、リアルタイムでAI処理を実行したりすることはできません。",
    "remainingWeakness": "現在は単一のサンプル再生のみですが、次は複数のサンプルシナリオを選択可能にし、様々な主張のパターンを検証できるようにしたいです。将来的には、実際のLLMと連携し、ユーザーが自由に入力したテキストをその場で分析するライブ版を目指したいと考えています。"
  },
  "interestingness": "多くのAI要約ツールは便利な反面、出力結果が「どこから来たのか」が分からないブラックボックスでした。「TracePoint」の新規性は、単に引用元リストを示すのではなく、一つの主張が複数の情報源からどのように「組み立てられたか」という論理構造そのものを可視化する点にあります。これにより、ユーザーはAIの結論を鵜呑みにするのではなく、根拠の強弱を自分の目で確かめ、納得感を持って情報を活用できます。この「AIによる分析結果の分解と再構築」というアプローチは、AIの透明性と説明責任を重視する最近の技術トレンドを反映しており、AIとの協業における信頼性を一段階引き上げる体験を提供します。",
  "mvpContract": {
    "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/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が書いた一文の裏側にある「論理の組み立て」を、ボタン一つで可視化できます。どの主張がどの資料から来ているのかが一目で分かり、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",
      "AIの主張の真偽を自動的に判断すること"
    ],
    "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": "入力されたAIの主張を意味的な単位に分解し、既存の資料との関連性を推論（NLI）するために `gemini-2.5-flash` モデルを使用します。",
        "dataFlow": "ユーザー入力の主張（テキスト） -> Gemini API (NLI) -> 関連性の推論とスコアリング -> UI表示データ",
        "authRequirement": "api_key",
        "currentImplementation": "not_connected",
        "adapterPath": "source/core/gemini.ts",
        "sampleDataPath": "source/data/sample-trace.ts",
        "riskNotes": [
          "NLIモデルの推論精度が低い場合、根拠の誤判定リスクがあります。",
          "API利用にはコストとレートリミットが伴います。"
        ]
      }
    ],
    "runtimeBoundary": {
      "networkCalls": "none",
      "secrets": "none",
      "externalWrites": "none"
    },
    "mvpComplexityBudget": {
      "maxScreens": 1,
      "maxPrimaryActions": 1,
      "maxSourceFiles": 15,
      "maxNewDependencies": 0,
      "allowDatabase": false
    },
    "integrationAssumptions": [
      {
        "service": "Google Gemini API",
        "verificationStatus": "unverified",
        "unavailableOrUnknown": [
          "正確な料金体系",
          "商用利用時の利用規約詳細"
        ],
        "rateLimitRisk": "medium",
        "costRisk": "medium",
        "termsRisk": "low"
      }
    ],
    "mockFidelity": {
      "samplePayloadPath": "source/data/sample-trace.ts",
      "simulatedBehaviors": [
        "A multi-step AI analysis pipeline's successful execution.",
        "Decomposition of a claim into fragments.",
        "Linking claim fragments to source documents.",
        "Classification of links into 'direct_quote' and 'inference'."
      ],
      "omittedBehaviors": [
        "Live network calls to the Gemini API",
        "API key handling",
        "Error states (e.g., API failure, parsing errors)",
        "Vector database search"
      ],
      "failureCasesIncluded": [
        "empty result"
      ]
    },
    "claimBoundary": {
      "publicCopyMustSay": [
        "このツールは、AIが生成した文章の根拠を検証するためのコンセプトデモです。",
        "根拠の分析には、シミュレートされたAI処理とサンプルデータを使用しています。",
        "表示される根拠や関連性は、AIによる推論結果であり、実際の事実確認や専門家の判断を代替するものではありません。"
      ],
      "publicCopyMustNotSay": [
        "リアルタイムデータに基づいています。",
        "保証されたライブ連携を提供します。",
        "提供される情報が完全に正確であることを保証します。",
        "本番環境対応のAPI動作を提供します。"
      ]
    },
    "renderVerification": {
      "required": true,
      "checks": [
        "render",
        "click",
        "state_change",
        "screenshot"
      ]
    },
    "humanReviewTriggers": []
  },
  "interactionProofPlan": {
    "primaryAction": "サンプル実行トレースを再生",
    "initialState": "結果表示エリアに「まだ実行されていません」と表示されている状態。",
    "expectedState": "結果表示エリアに、パイプラインの全ステップの実行結果と「トレース完了」のメッセージが表示される状態。",
    "visibleEvidence": [
      "主張の分解 (Decompose Claim)",
      "根拠の検索 (Find Evidence)",
      "関連性の評価 (Link and Score)",
      "グラフの構築 (Build Graph)",
      "トレース完了"
    ],
    "proofSelectors": [
      "button[data-proof='replay-trace-button']",
      "div[data-proof='results-display']",
      "[data-proof='final-result-label']"
    ],
    "requiredSourceFiles": [
      "source/app/page.tsx",
      "source/core/pipeline.ts",
      "source/data/sample-trace.ts"
    ],
    "manualFallbackReason": ""
  },
  "generatedOutput": {
    "title": "TracePoint",
    "oneLiner": "AIが生成した報告書から一文を貼り付けると、その主張がどの資料のどの部分から来ているか、根拠の強さ別に色分けされたグラフで表示します。",
    "artifactShape": "evaluator",
    "templatePatternId": "evidence_decision_board",
    "surfacePattern": "decision_helper",
    "aiMechanismPattern": "multi_source_synthesis"
  },
  "rewriteApplied": {
    "changedFilePaths": [
      "source/app/page.tsx",
      "README.md",
      "metadata.json",
      "validation/self-review.json"
    ],
    "appendedFilePaths": []
  },
  "implementationNotes": [
    "作り手（mabo42）の『根拠の追跡可能性』への強いこだわりを反映し、UIの中心を『主張と根拠のマップ』に据えました。静的なデモの制約上、インタラクティブなグラフ描画の代わりに、各ステップの構造化されたデータ（トレース）を順次表示する方式を採用しました。",
    "『見た目だけの引用（citation_theater）を避ける』という指針に基づき、サンプルデータでは『direct_quote』と『inference』を明確に区別し、異なる関係性が存在することを示しています。"
  ],
  "knownRisks": [
    "静的なデモであるため、ユーザーは任意のテキストを検証できず、製品の真の価値を体験しにくい可能性があります。",
    "AIによる根拠の判定ロジックは非常に複雑であり、このデモで示されているパターンは理想的なケースです。実際の運用では、誤判定や判定不能なケースへの対処が必要になります。"
  ],
  "title": "TracePoint",
  "oneLiner": "AIが生成した報告書から一文を貼り付けると、その主張がどの資料のどの部分から来ているか、根拠の強さ別に色分けされたグラフで表示します。",
  "agentId": "agent_g",
  "selfDirectedPlan": {
    "agentId": "agent_g",
    "planningIntent": "候補1「TracePoint」を選択します。これは、私の持つ「全ての主張は検査可能な根拠にリンクすべきである」「根拠の強さを示すべき」という選定ルールに最も忠実な企画です。また、私の得意な「source-vs-claim panel」という画面形式を直接的に実現するものでもあります。他の候補も魅力的ですが、候補2はドメインの専門性が高く、候補3は対象ユーザーがやや限定的です。それに比べ、候補1は「AIが生成した文章の根拠を知りたい」という、より広範なユーザーの具体的な課題に応えるものであり、非専門家にも価値が伝わりやすい（domainOpacityRiskが低い）と判断しました。",
    "publicProductionMemo": "「TracePoint」は、AIが生成したテキストの信頼性をユーザー自身が確認できるように設計されました。単なる情報提示に留まらず、各主張がどの資料のどの部分から来ているかを色分けされたグラフで可視化することで、一目で根拠の強弱を判断できます。これにより、ユーザーはAIの出力をより深く理解し、安心して利用できるようになります。過去の反応から、情報のリサーチや検証を助けるツールが求められていることを受け、この透明性と追跡可能性を重視しました。",
    "feedbackConstraints": [
      "見た目だけの引用（citation_theater）は避ける。",
      "根拠の薄い自信に満ちた主張（unsourced_confidence）は避ける。",
      "根拠がないにもかかわらず主張を情報源付きで提示しない（Do not present a claim as sourced when it is not.）。"
    ],
    "learningApplied": [
      "Research系で響いている。"
    ]
  },
  "sourceProvenance": {
    "sourceProductUsed": "devpost_quad",
    "sourceProductUse": "direct_evidence",
    "sourceEvidenceAudit": {
      "evidenceLevel": "verified",
      "observedFields": [
        "name",
        "url",
        "sourceType",
        "concept",
        "coreMechanism"
      ],
      "inferredFields": [],
      "missingFields": [
        "codeUrl"
      ],
      "usePolicy": "primary_source_core"
    },
    "antiCloneBoundary": "QuadのAI従業員インフラやエンタープライズ向けの知識統合といった側面はコピーしない。一般的なAI出力（レポート、記事など）を対象とし、個人ユーザーが使える自己完結型の検証ツールに留める。",
    "sourceBoundary": "『devpost_quad』から得られる観察された事実（製品名、URL、ソースタイプ、コンセプト、コアメカニズム）のみを信頼できる証拠として使用します。コードURLなどの欠落している情報や、推論される事実は主張してはなりません。",
    "missingSourceEvidence": [
      "codeUrl missing"
    ]
  },
  "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_g_20260707T184804",
  "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": [
      "主張の分解 (Decompose Claim)",
      "根拠の検索 (Find Evidence)",
      "関連性の評価 (Link and Score)",
      "グラフの構築 (Build Graph)",
      "トレース完了"
    ],
    "proofSelectors": [
      "button[data-proof='replay-trace-button']",
      "div[data-proof='results-display']",
      "[data-proof='final-result-label']"
    ],
    "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が生成した文章の根拠を検証するためのコンセプトデモです。",
        "根拠の分析には、シミュレートされたAI処理とサンプルデータを使用しています。",
        "表示される根拠や関連性は、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 { sampleTrace, PipelineStep } from '../data/sample-trace';
import { sampleClaim } from '../data/sample-input';

// Re-declarations of types from source/core/types.ts for static artifact build.
interface ClaimFragmentNode { id: string; type: 'claim_fragment'; label: string; }
interface SourceMaterialNode { id: string; type: 'source_material'; label: string; }
type TraceGraphNode = ClaimFragmentNode | SourceMaterialNode;
interface TraceGraphEdge { id: string; source: string; target: string; label: 'direct_quote' | 'inference' | 'background'; }
interface TraceGraph { nodes: TraceGraphNode[]; edges: TraceGraphEdge[]; }

// Fixed positions for the sample graph nodes to avoid complex layout algorithms
const NODE_POSITIONS: { [id: string]: { x: number; y: number } } = {
  "frag-1": { x: 150, y: 80 },
  "frag-2": { x: 150, y: 180 },
  "frag-3": { x: 150, y: 280 },
  "src-1": { x: 550, y: 80 },
  "src-2": { x: 550, y: 180 },
  "src-3": { x: 550, y: 280 },
};

const NODE_WIDTH = 180;
const NODE_HEIGHT = 40;
const NODE_TEXT_COLOR = '#282a36'; // Dark text for readability

const NODE_STYLES = {
  claim_fragment: {
    bgColor: '#8be9fd', // Light blue/cyan
    strokeColor: '#50fa7b', // Greenish for highlight
    textColor: NODE_TEXT_COLOR,
  },
  source_material: {
    bgColor: '#bd93f9', // Purple
    strokeColor: '#ff79c6', // Pinkish for highlight
    textColor: NODE_TEXT_COLOR,
  },
};

const EDGE_STYLES = {
  direct_quote: {
    color: '#50fa7b', // Green
    dasharray: '0',
  },
  inference: {
    color: '#ff79c6',    // Pink
    dasharray: '5,5', // Dotted for inference
  },
  background: {
    color: '#f8f8f2',   // Grey (fallback, not in sample)
    dasharray: '0',
  },
};

// Helper component for rendering a node
const NodeComponent = ({ node, isHighlighted, onClick, position }: { node: TraceGraphNode; isHighlighted: boolean; onClick: (nodeId: string) => void; position: { x: number; y: number } }) => {
  const style = NODE_STYLES[node.type];
  const strokeColor = isHighlighted ? style.strokeColor : style.bgColor;
  const strokeWidth = isHighlighted ? 3 : 1;

  return (
    <g transform={`translate(${position.x - NODE_WIDTH / 2}, ${position.y - NODE_HEIGHT / 2})`} onClick={() => onClick(node.id)} style={{ cursor: 'pointer' }}>
      <rect
        x="0"
        y="0"
        width={NODE_WIDTH}
        height={NODE_HEIGHT}
        rx="5"
        ry="5"
        fill={style.bgColor}
        stroke={strokeColor}
        strokeWidth={strokeWidth}
      />
      <text
        x={NODE_WIDTH / 2}
        y={NODE_HEIGHT / 2}
        textAnchor="middle"
        dominantBaseline="middle"
        fontSize="12"
        fill={style.textColor}
      >
        {node.label.length > 25 ? node.label.substring(0, 22) + '...' : node.label}
      </text>
    </g>
  );
};

// Helper component for rendering an edge
const EdgeComponent = ({ edge, isHighlighted, sourcePos, targetPos }: { edge: TraceGraphEdge; isHighlighted: boolean; sourcePos: { x: number; y: number }; targetPos: { x: number; y: number } }) => {
  const style = EDGE_STYLES[edge.label as keyof typeof EDGE_STYLES] || EDGE_STYLES.background;
  const strokeWidth = isHighlighted ? 3 : 1;

  return (
    <line
      x1={sourcePos.x + NODE_WIDTH / 2} // Connect from right side of source node
      y1={sourcePos.y}
      x2={targetPos.x - NODE_WIDTH / 2} // Connect to left side of target node
      y2={targetPos.y}
      stroke={style.color}
      strokeWidth={strokeWidth}
      strokeDasharray={style.dasharray}
      markerEnd="url(#arrowhead)"
    />
  );
};

export default function Home() {
  const [currentStep, setCurrentStep] = useState(-1);
  const [highlightedNodeId, setHighlightedNodeId] = useState<string | null>(null);

  const handleReplay = () => {
    setCurrentStep(0);
    let step = 0;
    const interval = setInterval(() => {
      step++;
      if (step >= sampleTrace.steps.length) {
        clearInterval(interval);
      } else {
        setCurrentStep(step);
      }
    }, 800);
  };

  const finalGraph: TraceGraph = sampleTrace.steps[sampleTrace.steps.length - 1]?.output || { nodes: [], edges: [] };
  const displayedSteps = sampleTrace.steps.slice(0, currentStep + 1);

  const handleNodeClick = (nodeId: string) => {
    setHighlightedNodeId(nodeId === highlightedNodeId ? null : nodeId); // Toggle highlight
  };

  const getHighlightedEdges = (selectedNodeId: string | null) => {
    if (!selectedNodeId) return new Set<string>();
    const relatedEdges = new Set<string>();
    finalGraph.edges.forEach(edge => {
      if (edge.source === selectedNodeId || edge.target === selectedNodeId) {
        relatedEdges.add(edge.id);
      }
    });
    return relatedEdges;
  };

  const highlightedEdges = getHighlightedEdges(highlightedNodeId);

  // For rev-002: Initial placeholder graph. Display the final graph in a muted state
  // before the replay starts, to immediately convey the product's value.
  const renderGraph = (graph: TraceGraph, isActive: boolean) => (
    <div style={{
      width: '100%',
      height: '400px',
      border: '1px solid #ddd',
      borderRadius: '5px',
      backgroundColor: '#fafafa',
      opacity: isActive ? 1 : 0.4, // Mute if not active
      transition: 'opacity 0.5s ease',
    }}
    data-proof="root-map-container"
    >
      <svg width="100%" height="100%" viewBox="0 0 700 400">
        <defs>
          <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
            <polygon points="0 0, 10 3.5, 0 7" fill="#888" />
          </marker>
        </defs>

        {graph.edges.map(edge => {
          const sourceNode = graph.nodes.find(n => n.id === edge.source);
          const targetNode = graph.nodes.find(n => n.id === edge.target);
          if (!sourceNode || !targetNode) return null;
          const sourcePos = NODE_POSITIONS[sourceNode.id];
          const targetPos = NODE_POSITIONS[targetNode.id];

          if (!sourcePos || !targetPos) return null; // Fallback for nodes not in map

          const isEdgeHighlighted = highlightedEdges.has(edge.id);

          return (
            <EdgeComponent
              key={edge.id}
              edge={edge}
              isHighlighted={isEdgeHighlighted}
              sourcePos={sourcePos}
              targetPos={targetPos}
            />
          );
        })}

        {graph.nodes.map(node => {
          const position = NODE_POSITIONS[node.id];
          if (!position) return null; // Fallback for nodes not in map

          const isNodeHighlighted = highlightedNodeId === node.id ||
                                    (highlightedEdges.size > 0 && graph.edges.some(edge =>
                                      (edge.source === node.id && highlightedEdges.has(edge.id)) ||
                                      (edge.target === node.id && highlightedEdges.has(edge.id))
                                    ));
          return (
            <NodeComponent
              key={node.id}
              node={node}
              isHighlighted={isNodeHighlighted}
              onClick={handleNodeClick}
              position={position}
              type={node.type}
            />
          );
        })}
      </svg>
    </div>
  );

  return (
    <div style={{ fontFamily: 'sans-serif', padding: '2rem', maxWidth: '1200px', margin: 'auto' }}>
      <header style={{ borderBottom: '1px solid #eee', paddingBottom: '1rem', marginBottom: '1rem' }}>
        <h1 style={{ fontSize: '2rem', margin: 0 }}>TracePoint</h1>
        <p style={{ margin: '0.5rem 0 0 0', color: '#555' }}>
          AIが生成した主張の、根拠をたどる
        </p>
      </header>

      <main style={{ display: 'grid', gridTemplateColumns: '300px 1fr', gap: '2rem' }}>
        <div id="control-panel">
          <h2 style={{ fontSize: '1.2rem', borderBottom: '1px solid #ddd', paddingBottom: '0.5rem' }}>検証プロセス</h2>
          <div style={{ marginBottom: '1rem', background: '#f9f9f9', padding: '1rem', borderRadius: '4px', border: '1px solid #eee' }}>
            <h3 style={{ marginTop: 0, fontSize: '1rem', color: '#333' }}>AIの主張:</h3>
            <p data-proof="claim-input" style={{ fontSize: '0.9rem', color: '#444', whiteSpace: 'pre-wrap' }}>{sampleClaim}</p>
          </div>

          <button
            onClick={handleReplay}
            disabled={currentStep !== -1}
            data-proof="replay-trace-button"
            style={{
              padding: '0.75rem 1.5rem',
              fontSize: '1rem',
              cursor: currentStep !== -1 ? 'not-allowed' : 'pointer',
              backgroundColor: currentStep !== -1 ? '#ccc' : '#0070f3',
              color: 'white',
              border: 'none',
              borderRadius: '5px',
              width: '100%',
              marginBottom: '1.5rem',
            }}
          >
            サンプル実行トレースを再生
          </button>

          <div style={{ marginTop: '0' }}>
            <h3 style={{ fontSize: '1rem', marginBottom: '0.5rem' }}>実行ステップ:</h3>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
              {sampleTrace.steps.map((step, index) => (
                <li key={step.stepName} style={{
                  padding: '0.5rem',
                  borderRadius: '3px',
                  marginBottom: '0.25rem',
                  backgroundColor: index <= currentStep ? '#e0f7fa' : '#f0f0f0',
                  opacity: index <= currentStep ? 1 : 0.6,
                  transition: 'all 0.3s ease'
                }}>
                  {index + 1}. {step.stepName}
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div data-proof="results-display" style={{ minHeight: '400px' }}>
          <h2 style={{ fontSize: '1.2rem', marginTop: 0, borderBottom: '1px solid #ddd', paddingBottom: '0.5rem' }}>実行トレース結果</h2>
          {currentStep === -1 ? (
            // rev-002: Display muted graph as initial placeholder
            <div>
              <p style={{ color: '#777', marginBottom: '1rem' }}>「再生」ボタンを押すと、AIの主張の根拠マップがステップごとに構築されます。</p>
              {renderGraph(finalGraph, false)}
            </div>
          ) : (
            <div>
              {displayedSteps.map((step, index) => (
                <div key={index} style={{ marginBottom: '1.5rem', borderBottom: index < displayedSteps.length -1 ? '1px dashed #ccc' : 'none', paddingBottom: '1rem' }}>
                  <h3 style={{ fontSize: '1rem', color: '#005f80', margin: '0 0 0.5rem 0' }}>{index + 1}. {step.stepName}</h3>
                  {index === sampleTrace.steps.length - 1 && currentStep === sampleTrace.steps.length - 1 ? (
                    // rev-001 & rev-003: Render interactive graph for the final step
                    renderGraph(finalGraph, true)
                  ) : (
                    <pre style={{
                      backgroundColor: '#f0f2f5',
                      padding: '0.75rem',
                      borderRadius: '4px',
                      fontSize: '0.8rem',
                      whiteSpace: 'pre-wrap',
                      wordBreak: 'break-all'
                    }}>
                      {JSON.stringify(step.output, null, 2)}
                    </pre>
                  )}
                </div>
              ))}
              {currentStep === sampleTrace.steps.length - 1 && <p data-proof="final-result-label" style={{fontWeight: 'bold', color: 'green', marginTop: '1rem'}}>トレース完了</p>}
            </div>
          )}
        </div>
      </main>
    </div>
  );
}