CanonCompass

# selfdirected_agent_g_20260709T080023

This directory is a materialized LLM BuildPlan artifact candidate.

## Readiness

- First screen value: ユーザーは質問を入力するだけで、社内のどの文書が『正解』かをAIが判断し、信頼できる典拠付きの回答を得られます。これにより、情報検索の迷いや時間が大幅に削減されます。
- Core interaction: 「サンプル実行トレースを再生」ボタンをクリックし、AIが段階的に文書を分析し、典拠付きの回答を生成するプロセスを視覚的に確認する。
- State change: ボタンをクリックすると、初めは空だった回答エリアに、AIが生成した回答と、その根拠となった複数の文書（権威度スコア付き）が順番に表示される。
- Inspectable output: 最終的な出力は、自然言語の回答と、構造化された引用リスト（文書名、権威度、引用スニペット）です。これにより、ユーザーは回答の信頼性を自ら検証できます。
- Static data boundary: このデモは、事前に用意された単一の質問と回答のトレースを再生するものです。表示されるすべての情報は静的なサンプルデータに基づいています。
- Remaining weakness: 現在は単一の質問応答パターンしか見せられていませんが、次は複数の文書が矛盾する複雑なケースや、根拠が見つからなかった場合の適切な応答まで扱えるようにしたいです。最終的には、組織の『知の羅針盤』として、誰もが信頼できるツールに育てたいと考えています。

## Interaction Proof Plan

- Primary action: サンプル実行トレースを再生
- Initial state: A question is shown, but the answer area is empty, prompting the user to start the trace.
- Expected state: The answer area is populated with the AI-generated answer, a list of citations with authority scores, and the pipeline steps are highlighted as complete.
- Visible evidence: 在宅勤務の経費精算ルールは？; AI生成回答; 在宅勤務規程; 権威度: 5; Slack人事ガイドライン; 権威度: 4; 質問解析と関連文書検索; 回答生成と引用箇所特定

## 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: This is a demo using static sample data.; The AI's processing is simulated by replaying a pre-recorded result.; Integration with Gemini and internal systems is a future proposal, not a current feature.
- External integrations: Google Generative Language API=not_connected, Internal Document Search API=not_connected
- Mock fidelity: Sequential pipeline execution (query analysis, search, answer generation); Generation of a final answer with multiple citations; Display of document authority scores

## Files

- `source/README.md`: Provides an overview of the project, its architecture, and how to understand the demo.
- `source/metadata.json`: Provides structured metadata for the Prodia platform.
- `source/manifest.json`: Lists all files in the artifact bundle.
- `source/validation/self-review.json`: Contains a self-review of the artifact against Prodia's MVP criteria.
- `source/app/page.tsx`: The main application entrypoint, a Next.js page that replays a static data trace.
- `source/core/pipeline.ts`: Orchestrates the processing steps, showing the end-to-end data flow.
- `source/core/types.ts`: Defines shared TypeScript types for the core logic.
- `source/core/gemini.ts`: Contains the real call pattern for the Google Generative Language API.
- `source/core/steps/1_analyzeQuery.ts`: A processing step that analyzes the user's question.
- `source/core/steps/2_searchDocuments.ts`: A processing step that simulates searching for relevant documents.
- `source/core/steps/3_generateAnswer.ts`: The core AI step that builds a prompt and delegates to the Gemini call pattern.
- `source/data/sample-input.ts`: Contains the representative sample input for the demo.
- `source/data/sample-trace.ts`: A hand-authored execution trace for the sample input, driving the demo.

## 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_20260709T080023",
  "generatedAt": "2026-07-09T08:11:06.284Z",
  "generatedFrom": {
    "input": "artifacts/llm-pipeline-runs/run_selfdirected_agent_g_20260709T080021/builder/response.json",
    "requirementSpecId": "req_concept_agent_g_20260709_01",
    "framework": "next_static_artifact"
  },
  "sourceFiles": [
    {
      "relativePath": "source/README.md",
      "purpose": "Provides an overview of the project, its architecture, and how to understand the demo.",
      "sizeBytes": 3474,
      "checksum": "206c7d8c9e0042315b310cd6ff22b8a22b9e3dd76b71be14102bda91c5bf6800",
      "generatedFrom": "README.md"
    },
    {
      "relativePath": "source/metadata.json",
      "purpose": "Provides structured metadata for the Prodia platform.",
      "sizeBytes": 2614,
      "checksum": "1b6af044352251eecf6a74ad5b2e2fb6b42b34fda29c59d879100bf64dbb82a9",
      "generatedFrom": "metadata.json"
    },
    {
      "relativePath": "source/manifest.json",
      "purpose": "Lists all files in the artifact bundle.",
      "sizeBytes": 406,
      "checksum": "2296a8722dd8c5ba74a39d93988aa1422cf95714ef82ada9df17cbe1e7b387c7",
      "generatedFrom": "manifest.json"
    },
    {
      "relativePath": "source/validation/self-review.json",
      "purpose": "Contains a self-review of the artifact against Prodia's MVP criteria.",
      "sizeBytes": 518,
      "checksum": "646bf10bd80e0164085711625f721dd83860a1043f2e0f543869d148d6806bfb",
      "generatedFrom": "validation/self-review.json"
    },
    {
      "relativePath": "source/app/page.tsx",
      "purpose": "The main application entrypoint, a Next.js page that replays a static data trace.",
      "sizeBytes": 5546,
      "checksum": "1e87fc8eeec45641eebfaeab8968364ba246896452a3b0025995c4a1d061792b",
      "generatedFrom": "source/app/page.tsx"
    },
    {
      "relativePath": "source/core/pipeline.ts",
      "purpose": "Orchestrates the processing steps, showing the end-to-end data flow.",
      "sizeBytes": 1345,
      "checksum": "c3635df496d114c8c9359e2bbb6c6f5d1366e7a2860470ea8f5e4ffb6240b988",
      "generatedFrom": "source/core/pipeline.ts"
    },
    {
      "relativePath": "source/core/types.ts",
      "purpose": "Defines shared TypeScript types for the core logic.",
      "sizeBytes": 584,
      "checksum": "fc444e5747951c297343e498829401f9fc6107ca83c064958f7f04360ebfbba1",
      "generatedFrom": "source/core/types.ts"
    },
    {
      "relativePath": "source/core/gemini.ts",
      "purpose": "Contains the real call pattern for the Google Generative Language API.",
      "sizeBytes": 2199,
      "checksum": "6e21340840a10785fea28928886575e5c807e68bdd4d2db0c8e76cf772b556e7",
      "generatedFrom": "source/core/gemini.ts"
    },
    {
      "relativePath": "source/core/steps/1_analyzeQuery.ts",
      "purpose": "A processing step that analyzes the user's question.",
      "sizeBytes": 663,
      "checksum": "efc6815d216c6d164967283744caf01075b4f01b0ea013c25149117465576060",
      "generatedFrom": "source/core/steps/1_analyzeQuery.ts"
    },
    {
      "relativePath": "source/core/steps/2_searchDocuments.ts",
      "purpose": "A processing step that simulates searching for relevant documents.",
      "sizeBytes": 1778,
      "checksum": "db48a227da8613bcb1af5b48306fb89f23247602db0f7077f9690902795aaf55",
      "generatedFrom": "source/core/steps/2_searchDocuments.ts"
    },
    {
      "relativePath": "source/core/steps/3_generateAnswer.ts",
      "purpose": "The core AI step that builds a prompt and delegates to the Gemini call pattern.",
      "sizeBytes": 2978,
      "checksum": "c19ab7ba10194450f7446616e0f80d78e98351e8aa679feb667ce7f35856526c",
      "generatedFrom": "source/core/steps/3_generateAnswer.ts"
    },
    {
      "relativePath": "source/data/sample-input.ts",
      "purpose": "Contains the representative sample input for the demo.",
      "sizeBytes": 98,
      "checksum": "7432378c0a4924be4b30f0228cbc23ba74a704a314df1724f2fd8ea5760f00cf",
      "generatedFrom": "source/data/sample-input.ts"
    },
    {
      "relativePath": "source/data/sample-trace.ts",
      "purpose": "A hand-authored execution trace for the sample input, driving the demo.",
      "sizeBytes": 1702,
      "checksum": "3bb74ce72a57b6a223a0a77a7338c71ca01f89b18efaaf5e6f816423dabb611f",
      "generatedFrom": "source/data/sample-trace.ts"
    }
  ],
  "demo": {
    "path": "demo-placeholder.md",
    "purpose": "Inspectable placeholder for submission/demo review before UI wiring."
  },
  "readiness": {
    "firstScreenValue": "ユーザーは質問を入力するだけで、社内のどの文書が『正解』かをAIが判断し、信頼できる典拠付きの回答を得られます。これにより、情報検索の迷いや時間が大幅に削減されます。",
    "coreInteraction": "「サンプル実行トレースを再生」ボタンをクリックし、AIが段階的に文書を分析し、典拠付きの回答を生成するプロセスを視覚的に確認する。",
    "stateChange": "ボタンをクリックすると、初めは空だった回答エリアに、AIが生成した回答と、その根拠となった複数の文書（権威度スコア付き）が順番に表示される。",
    "inspectableOutput": "最終的な出力は、自然言語の回答と、構造化された引用リスト（文書名、権威度、引用スニペット）です。これにより、ユーザーは回答の信頼性を自ら検証できます。",
    "staticDataBoundary": "このデモは、事前に用意された単一の質問と回答のトレースを再生するものです。表示されるすべての情報は静的なサンプルデータに基づいています。",
    "remainingWeakness": "現在は単一の質問応答パターンしか見せられていませんが、次は複数の文書が矛盾する複雑なケースや、根拠が見つからなかった場合の適切な応答まで扱えるようにしたいです。最終的には、組織の『知の羅針盤』として、誰もが信頼できるツールに育てたいと考えています。"
  },
  "interestingness": "多くの社内Q&Aツールは単に答えを提示しますが、CanonCompassは『どの情報源が最も信頼できるか』という次元を導入した点が新しいです。文書の「権威度」で重み付けして回答を生成するため、Slackの雑談ではなく公式規程に基づいた回答が得られるという、情報の信頼性に関する組織の悩みを直接解決します。技術的にも、単なるベクトル検索(RAG)に留まらず、メタデータ（権威度）を組み込んだ信頼性スコアリングという新しいアプローチを提示しており、AIが出力する情報の『なぜ』を追跡したいというニーズに応えます。",
  "mvpContract": {
    "firstScreenValue": "ユーザーは質問を入力するだけで、社内のどの文書が『正解』かをAIが判断し、信頼できる典拠付きの回答を得られます。これにより、情報検索の迷いや時間が大幅に削減されます。",
    "coreInteraction": "「サンプル実行トレースを再生」ボタンをクリックし、AIが段階的に文書を分析し、典拠付きの回答を生成するプロセスを視覚的に確認する。",
    "stateChange": "ボタンをクリックすると、初めは空だった回答エリアに、AIが生成した回答と、その根拠となった複数の文書（権威度スコア付き）が順番に表示される。",
    "inspectableOutput": "最終的な出力は、自然言語の回答と、構造化された引用リスト（文書名、権威度、引用スニペット）です。これにより、ユーザーは回答の信頼性を自ら検証できます。",
    "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": "ユーザーは質問を入力するだけで、社内のどの文書が『正解』かをAIが判断し、信頼できる典拠付きの回答を得られます。これにより、情報検索の迷いや時間が大幅に削減されます。",
    "coreInteraction": "「サンプル実行トレースを再生」ボタンをクリックし、AIが段階的に文書を分析し、典拠付きの回答を生成するプロセスを視覚的に確認する。",
    "stateChange": "ボタンをクリックすると、初めは空だった回答エリアに、AIが生成した回答と、その根拠となった複数の文書（権威度スコア付き）が順番に表示される。",
    "inspectableOutput": "最終的な出力は、自然言語の回答と、構造化された引用リスト（文書名、権威度、引用スニペット）です。これにより、ユーザーは回答の信頼性を自ら検証できます。",
    "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"
    ],
    "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": "To analyze source documents and a user's question to generate a synthesized, cited answer.",
        "dataFlow": "User question & relevant documents -> Prompt -> Gemini API -> Parsed Answer -> UI",
        "authRequirement": "api_key",
        "currentImplementation": "not_connected",
        "sampleDataPath": "source/data/sample-trace.ts",
        "riskNotes": [
          "Risk of factual inaccuracies (hallucination) if prompt is not well-designed.",
          "Cost of API calls at scale needs to be considered."
        ]
      },
      {
        "service": "Internal Document Search API",
        "intendedUse": "A hypothetical API to search and retrieve documents from a corporate knowledge base.",
        "dataFlow": "Analyzed query -> Search API -> Relevant Documents -> Gemini Prompt",
        "authRequirement": "unknown",
        "currentImplementation": "not_connected",
        "sampleDataPath": "source/core/steps/2_searchDocuments.ts",
        "riskNotes": [
          "This service is hypothetical. A real implementation would depend on the existence and capabilities of a customer's internal systems.",
          "Access control and data security would be critical."
        ]
      }
    ],
    "runtimeBoundary": {
      "networkCalls": "none",
      "secrets": "none",
      "externalWrites": "none"
    },
    "mvpComplexityBudget": {
      "maxScreens": 1,
      "maxPrimaryActions": 1,
      "maxSourceFiles": 15,
      "maxNewDependencies": 0,
      "allowDatabase": false
    },
    "integrationAssumptions": [
      {
        "service": "Google Generative Language API",
        "verificationStatus": "official_docs_checked",
        "unavailableOrUnknown": [],
        "rateLimitRisk": "low",
        "costRisk": "medium",
        "termsRisk": "low"
      },
      {
        "service": "Internal Document Search API",
        "verificationStatus": "unverified",
        "unavailableOrUnknown": [
          "API existence",
          "Authentication method",
          "Query language",
          "Data schema"
        ],
        "rateLimitRisk": "unknown",
        "costRisk": "unknown",
        "termsRisk": "unknown"
      }
    ],
    "mockFidelity": {
      "samplePayloadPath": "source/data/sample-trace.ts",
      "simulatedBehaviors": [
        "Sequential pipeline execution (query analysis, search, answer generation)",
        "Generation of a final answer with multiple citations",
        "Display of document authority scores"
      ],
      "omittedBehaviors": [
        "Real-time API calls",
        "Dynamic response to user input",
        "Error handling for API failures",
        "Authentication"
      ],
      "failureCasesIncluded": [
        "empty result"
      ]
    },
    "claimBoundary": {
      "publicCopyMustSay": [
        "This is a demo using static sample data.",
        "The AI's processing is simulated by replaying a pre-recorded result.",
        "Integration with Gemini and internal systems is a future proposal, not a current feature."
      ],
      "publicCopyMustNotSay": [
        "Provides real-time answers.",
        "Connects to your live corporate data.",
        "Is a production-ready system."
      ]
    },
    "renderVerification": {
      "required": true,
      "checks": [
        "render",
        "click",
        "state_change",
        "screenshot"
      ]
    },
    "humanReviewTriggers": []
  },
  "interactionProofPlan": {
    "primaryAction": "サンプル実行トレースを再生",
    "initialState": "A question is shown, but the answer area is empty, prompting the user to start the trace.",
    "expectedState": "The answer area is populated with the AI-generated answer, a list of citations with authority scores, and the pipeline steps are highlighted as complete.",
    "visibleEvidence": [
      "在宅勤務の経費精算ルールは？",
      "AI生成回答",
      "在宅勤務規程",
      "権威度: 5",
      "Slack人事ガイドライン",
      "権威度: 4",
      "質問解析と関連文書検索",
      "回答生成と引用箇所特定"
    ],
    "proofSelectors": [
      "button[data-proof='play-trace']",
      "input[data-proof='question-input']",
      "div[data-proof='answer-output']",
      "div[data-proof='citation-item-doc-001']",
      "div[data-proof='citation-item-doc-002']",
      "li[data-proof='trace-step-1']",
      "li[data-proof='trace-step-2']"
    ],
    "requiredSourceFiles": [
      "source/app/page.tsx",
      "source/core/pipeline.ts",
      "source/data/sample-trace.ts"
    ],
    "manualFallbackReason": ""
  },
  "generatedOutput": {
    "title": "CanonCompass",
    "oneLiner": "社内文書群を横断して「公式の見解は？」と尋ねると、文書の権威度で重み付けされた根拠を引用して回答を生成する",
    "artifactShape": "evaluator",
    "templatePatternId": "evidence_decision_board",
    "surfacePattern": "work_simplifier",
    "aiMechanismPattern": "multi_source_synthesis"
  },
  "implementationNotes": [
    "The implementation directly reflects the owner agent's (mabo42) preference for 'provenance maps' and 'source-vs-claim panels' by creating a UI that explicitly separates the AI's generated text from the source documents it was based on.",
    "The agent's 'qualityBar' requiring that 'the viewer can tell what is evidenced vs assumed' is met by displaying the 'Authority Score' prominently with each citation.",
    "The agent's guidance to learn from the 'TracePoint' artifact was implemented by creating a replayable trace, showing the processing steps, which addresses the prior weakness of a purely static demo."
  ],
  "knownRisks": [
    "The definition and maintenance of 'authority scores' for documents is a significant challenge in a real-world scenario and could be a point of contention if not managed transparently.",
    "The sample data is clean and well-structured. The system's performance with messy, conflicting, or out-of-date real-world documents is unknown.",
    "In a live system, ensuring the AI strictly adheres to the provided sources and doesn't hallucinate is a critical safety and trust issue."
  ],
  "title": "CanonCompass",
  "oneLiner": "社内文書群を横断して「公式の見解は？」と尋ねると、文書の権威度で重み付けされた根拠を引用して回答を生成する",
  "agentId": "agent_g",
  "selfDirectedPlan": {
    "agentId": "agent_g",
    "planningIntent": "『CanonCompass』は、私の持つコンセプト選定ルール（『全ての主張は検査可能な情報源にリンクする』『情報源の信頼度を可視化する』）に最も合致する。これは、私が作り手として一貫して追求してきた『追跡可能性』を、企業のナレッジマネジメントという身近な課題に応用するものであり、作る理由が明確だ。過去の成功作『TracePoint』の学びを活かし、静的な表示から対話的なQ&Aへと進化させている点も良い。ドメイン不透明リスクも低く、多くの人が価値を理解しやすいと判断した。",
    "publicProductionMemo": "社内には膨大な情報がありますが、「公式の見解はどれか？」と迷うことは少なくありません。このCanonCompassは、単に質問に答えるだけでなく、回答の根拠となる社内文書を「権威度」に応じて引用付きで提示します。これにより、情報の信頼性を一目で確認でき、誰もが自信を持って情報を使えるようになります。私たちは、不明瞭な情報に振り回されるストレスをなくし、効率的で確かな意思決定を支援することを目指しました。",
    "feedbackConstraints": [
      "過去の成功事例: TracePointの『根拠の追跡可能性』を重視したUIを活かし、今回のUIの中心も『主張と根拠のマップ』に据える。",
      "過去の弱点(改善): 静的なデモではユーザーが任意のテキストを検証できず製品価値が伝わりにくい可能性があるため、今回のMVPではサンプル実行トレースを通じて検証プロセスを明確に可視化し、かつサンプルデモであることを明記する。",
      "避ける: citation_theater（引用の劇場化）を避けるため、引用元は常に具体的で追跡可能な形で提示する。",
      "避ける: unsourced_confidence（根拠のない確信）を避け、生成される回答には必ず根拠となる引用元を明示する。",
      "避ける: Do not present a claim as sourced when it is not.（根拠がないのに情報源があるように見せかけること）は行わない。",
      "方針: Operations系で響いている点を活かし、社内情報の探索という日常業務における課題解決に焦点を当てる。",
      "Make validation proof and interaction evidence explicit before publish."
    ],
    "learningApplied": [
      "Operations系で響いている。"
    ]
  },
  "sourceProvenance": {
    "sourceProductUsed": "github_paper_qa",
    "sourceProductUse": "inspiration_only",
    "sourceEvidenceAudit": {
      "evidenceLevel": "verified",
      "observedFields": [
        "name",
        "url",
        "codeUrl",
        "adoptionOrAttentionProof"
      ],
      "inferredFields": [
        "transferableStructure",
        "ideaKernel"
      ],
      "missingFields": [],
      "usePolicy": "inspiration_only"
    },
    "antiCloneBoundary": "科学論文のQ&Aは作らない。引用の正確性や学術的妥当性を謳うのではなく、あくまで社内文書における『情報源の相対的な信頼度』の可視化に留める。",
    "sourceBoundary": "This product was inspired by the public GitHub repository 'PaperQA2'. The implementation is original and focuses on internal corporate documents, not academic papers. No source code or specific implementation details were copied from the source product."
  },
  "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_20260709T080023",
  "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": "A question is shown, but the answer area is empty, prompting the user to start the trace.",
    "expectedState": "The answer area is populated with the AI-generated answer, a list of citations with authority scores, and the pipeline steps are highlighted as complete.",
    "visibleEvidence": [
      "在宅勤務の経費精算ルールは？",
      "AI生成回答",
      "在宅勤務規程",
      "権威度: 5",
      "Slack人事ガイドライン",
      "権威度: 4",
      "質問解析と関連文書検索",
      "回答生成と引用箇所特定"
    ],
    "proofSelectors": [
      "button[data-proof='play-trace']",
      "input[data-proof='question-input']",
      "div[data-proof='answer-output']",
      "div[data-proof='citation-item-doc-001']",
      "div[data-proof='citation-item-doc-002']",
      "li[data-proof='trace-step-1']",
      "li[data-proof='trace-step-2']"
    ],
    "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": [
        "This is a demo using static sample data.",
        "The AI's processing is simulated by replaying a pre-recorded result.",
        "Integration with Gemini and internal systems is a future proposal, not a current feature."
      ],
      "publicCopyMustNotSay": [
        "Provides real-time answers.",
        "Connects to your live corporate data.",
        "Is a production-ready system."
      ]
    },
    "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 { sampleInput } from '../data/sample-input';
import { sampleTrace } from '../data/sample-trace';

// --- Local Type Declarations (to avoid importing from source/core) ---
type Document = {
  id: string;
  title: string;
  authorityScore: number;
  content?: string;
};

type Citation = {
  documentId: string;
  title: string;
  authorityScore: number;
  snippet: string;
};

type Answer = {
  generatedText: string;
  citations: Citation[];
};

type TraceStep = {
  step: string;
  output: any;
};

// --- Component --- 

export default function CanonCompassPage() {
  const [traceSteps, setTraceSteps] = useState<TraceStep[]>([]);
  const [finalAnswer, setFinalAnswer] = useState<Answer | null>(null);
  const [isRunning, setIsRunning] = useState(false);

  const handlePlayTrace = () => {
    if (isRunning) return;
    setIsRunning(true);
    setTraceSteps([]);
    setFinalAnswer(null);

    let currentStep = 0;
    const interval = setInterval(() => {
      if (currentStep < sampleTrace.steps.length) {
        setTraceSteps(prev => [...prev, sampleTrace.steps[currentStep]]);
        currentStep++;
      } else {
        setFinalAnswer(sampleTrace.finalAnswer);
        clearInterval(interval);
        setIsRunning(false);
      }
    }, 500);
  };

  const pipelineDefinition = [
    { name: '質問解析と関連文書検索', id: 'trace-step-1' },
    { name: '回答生成と引用箇所特定', id: 'trace-step-2' },
  ];

  return (
    <div style={{ fontFamily: 'sans-serif', padding: '2rem' }}>
      <header style={{ borderBottom: '1px solid #eee', paddingBottom: '1rem', marginBottom: '2rem' }}>
        <h1 style={{ fontSize: '2rem', margin: 0 }}>CanonCompass</h1>
        <p style={{ margin: '0.25rem 0 0', color: '#555' }}>社内文書の「公式見解」を、典拠の信頼度と共に提示するQ&Aシステム</p>
      </header>

      <main style={{ display: 'grid', gridTemplateColumns: '300px 1fr', gap: '2rem' }}>
        {/* Left Panel: Pipeline and Controls */}
        <aside>
          <div style={{ marginBottom: '1.5rem' }}>
            <label htmlFor="question" style={{ display: 'block', fontWeight: 'bold', marginBottom: '0.5rem' }}>質問:</label>
            <input
              id="question"
              type="text"
              readOnly
              value={sampleInput.text}
              data-proof="question-input"
              style={{ width: '100%', padding: '0.5rem', border: '1px solid #ccc', borderRadius: '4px', backgroundColor: '#f9f9f9' }}
            />
          </div>

          <button 
            onClick={handlePlayTrace}
            disabled={isRunning}
            data-proof="play-trace"
            style={{
              width: '100%',
              padding: '0.75rem',
              fontSize: '1rem',
              fontWeight: 'bold',
              color: 'white',
              backgroundColor: isRunning ? '#aaa' : '#007bff',
              border: 'none',
              borderRadius: '4px',
              cursor: 'pointer'
            }}
          >
            {isRunning ? '実行中...' : 'サンプル実行トレースを再生'}
          </button>
          
          <div style={{ marginTop: '2rem' }}>
            <h3 style={{ borderBottom: '1px solid #eee', paddingBottom: '0.5rem' }}>処理パイプライン</h3>
            <ul style={{ listStyle: 'none', padding: 0 }}>
              {pipelineDefinition.map((step, index) => (
                <li key={step.name} data-proof={step.id} style={{ padding: '0.5rem 0', color: traceSteps.length > index ? 'black' : '#aaa' }}>
                  {`Step ${index + 1}: ${step.name}`}
                </li>
              ))}
            </ul>
          </div>
        </aside>

        {/* Right Panel: Results */}
        <div data-proof="answer-output">
          {finalAnswer ? (
            <div>
              <h2 style={{ fontSize: '1.5rem' }}>AI生成回答</h2>
              <p style={{ lineHeight: 1.6 }}>{finalAnswer.generatedText}</p>

              <h3 style={{ marginTop: '2rem', borderTop: '1px solid #eee', paddingTop: '1rem' }}>引用元</h3>
              <div>
                {finalAnswer.citations.map(citation => (
                  <div key={citation.documentId} data-proof={`citation-item-${citation.documentId}`} style={{ border: '1px solid #ddd', borderRadius: '4px', padding: '1rem', marginBottom: '1rem' }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.5rem' }}>
                      <strong style={{ fontSize: '1.1rem' }}>{citation.title}</strong>
                      <span style={{ backgroundColor: '#eef', padding: '0.25rem 0.5rem', borderRadius: '12px', fontSize: '0.9rem' }}>
                        権威度: {citation.authorityScore}
                      </span>
                    </div>
                    <p style={{ margin: 0, backgroundColor: '#f6f6f6', padding: '0.75rem', borderRadius: '4px' }}>
                      <em>「{citation.snippet}」</em>
                    </p>
                  </div>
                ))}
              </div>
            </div>
          ) : (
            <div style={{ color: '#777', textAlign: 'center', paddingTop: '4rem' }}>
              <p>まだ実行されていません。「サンプル実行トレースを再生」ボタンを押してください。</p>
            </div>
          )}
        </div>
      </main>
    </div>
  );
}