おたよりルート

# selfdirected_agent_j_20260707T151842

This directory is a materialized LLM BuildPlan artifact candidate.

## Readiness

- First screen value: 学校のプリントからAIが「やること」を自動でリストアップ。ボタン一つで、ごちゃごちゃした情報が日付順のタスクに変わる様子を体験できます。
- Core interaction: 「サンプル実行トレースを再生」ボタンをクリックする。
- State change: 結果表示エリアが、初期状態からパイプラインのステップを経て生成された「やることリスト」へと変化する。
- Inspectable output: 日付、タイトル、持ち物などが書かれたタスクカードのリスト。各カードが具体的なアクションを示している。
- Static data boundary: 表示されるデータはあらかじめ用意されたサンプルです。実際のファイルアップロードやAI呼び出しは行われません。
- Remaining weakness: 現在は単一の固定サンプルしか扱えませんが、将来的には様々な形式のプリントに対応し、抽出精度を向上させたいです。また、カレンダー連携や家族共有機能を追加して、プリント管理のハブになることを目指します。

## Interaction Proof Plan

- Primary action: サンプル実行トレースを再生
- Initial state: The results area shows an introductory message, and the task list is not visible.
- Expected state: The results area shows a heading 'やることリスト' followed by several task cards sorted by date.
- Visible evidence: やることリスト; 2026-07-15; 水泳授業の持ち物; 夏休み作品提出

## 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 processing is simulated; no live API calls are made.; All results are pre-recorded and for illustration purposes only.
- External integrations: Google Gemini API=not_connected
- Mock fidelity: Successful extraction and structuring of tasks from a text notice.; Sorting of tasks by date.

## Files

- `source/README.md`: Explains the product concept, its pipeline, proposed AI usage, and limitations.
- `source/metadata.json`: Provides structured metadata for the product.
- `source/manifest.json`: Lists all the files in the artifact.
- `source/validation/self-review.json`: Self-review of the artifact against Prodia's MVP criteria.
- `source/app/page.tsx`: The main entrypoint of the application, a trace-replay runner.
- `source/core/types.ts`: Defines the core data structures for the pipeline.
- `source/core/pipeline.ts`: Orchestrates the processing steps.
- `source/core/gemini.ts`: Contains the real, documented call pattern for the Gemini API.
- `source/core/steps/1-extractText.ts`: A pipeline step for extracting text (simulated).
- `source/core/steps/2-parseTasksFromText.ts`: The core AI pipeline step for parsing tasks using Gemini.
- `source/core/steps/3-structureRoute.ts`: A final pipeline step for structuring and sorting the output.
- `source/data/sample-input.ts`: Provides a sample input for the pipeline.
- `source/data/sample-trace.ts`: Provides a hand-authored execution trace for 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_j_20260707T151842",
  "generatedAt": "2026-07-07T15:29:24.097Z",
  "generatedFrom": {
    "input": "artifacts/llm-pipeline-runs/run_selfdirected_agent_j_20260707T151842/builder/response.json",
    "requirementSpecId": "req_selfdirected_agent_j_20260707T151842",
    "framework": "next_static_artifact"
  },
  "sourceFiles": [
    {
      "relativePath": "source/README.md",
      "purpose": "Explains the product concept, its pipeline, proposed AI usage, and limitations.",
      "sizeBytes": 2796,
      "checksum": "3e99f27ebfc0ccc5ab10715b2dbd2aaf43021dfaa241bc1ee0049241075ed58d",
      "generatedFrom": "README.md"
    },
    {
      "relativePath": "source/metadata.json",
      "purpose": "Provides structured metadata for the product.",
      "sizeBytes": 2919,
      "checksum": "7eaef397a2363eacd561272140e145ffad965bc5d56c7fd59536b2eb76109f07",
      "generatedFrom": "metadata.json"
    },
    {
      "relativePath": "source/manifest.json",
      "purpose": "Lists all the files in the artifact.",
      "sizeBytes": 361,
      "checksum": "b5e5a7bd718ae47c18864c609b20db6c02e151eb26f656b778b50133b831f5a5",
      "generatedFrom": "manifest.json"
    },
    {
      "relativePath": "source/validation/self-review.json",
      "purpose": "Self-review of the artifact against Prodia's MVP criteria.",
      "sizeBytes": 1352,
      "checksum": "4242428dc58ac2384d441d95249ae9cbcfbf87028bdf5b22b8870ec13ee9c92e",
      "generatedFrom": "validation/self-review.json"
    },
    {
      "relativePath": "source/app/page.tsx",
      "purpose": "The main entrypoint of the application, a trace-replay runner.",
      "sizeBytes": 4302,
      "checksum": "e42030f9e04e4aa61dda8fa7f4b1ac59ac1e95c543bb80635c99cc1dfb3e3204",
      "generatedFrom": "source/app/page.tsx"
    },
    {
      "relativePath": "source/core/types.ts",
      "purpose": "Defines the core data structures for the pipeline.",
      "sizeBytes": 416,
      "checksum": "14225230d795ac5ad939a9bd324466b419ac19df10e969ee33c71a1f3f6a5466",
      "generatedFrom": "source/core/types.ts"
    },
    {
      "relativePath": "source/core/pipeline.ts",
      "purpose": "Orchestrates the processing steps.",
      "sizeBytes": 922,
      "checksum": "a491010159ad84e1dc75f1736de9b0837f77cf0fef219bb8a73824ded458ad63",
      "generatedFrom": "source/core/pipeline.ts"
    },
    {
      "relativePath": "source/core/gemini.ts",
      "purpose": "Contains the real, documented call pattern for the Gemini API.",
      "sizeBytes": 1672,
      "checksum": "635092644613e2ffe2edbc84dec7a958e8a01154ce6c973fad90669e3ada94e7",
      "generatedFrom": "source/core/gemini.ts"
    },
    {
      "relativePath": "source/core/steps/1-extractText.ts",
      "purpose": "A pipeline step for extracting text (simulated).",
      "sizeBytes": 539,
      "checksum": "e71d5885c1d58b778919e615f29560b6aaa299f227a72b6d2cd811f84b1a5e4c",
      "generatedFrom": "source/core/steps/1-extractText.ts"
    },
    {
      "relativePath": "source/core/steps/2-parseTasksFromText.ts",
      "purpose": "The core AI pipeline step for parsing tasks using Gemini.",
      "sizeBytes": 1913,
      "checksum": "1de555b4dfaec4bbb20e57a54d285b8e17207426ea62eb08a1cb54a5f4ff6f03",
      "generatedFrom": "source/core/steps/2-parseTasksFromText.ts"
    },
    {
      "relativePath": "source/core/steps/3-structureRoute.ts",
      "purpose": "A final pipeline step for structuring and sorting the output.",
      "sizeBytes": 509,
      "checksum": "4a86edc50ddda636a021b0b7480453df35e45231507b96f3a0574299a0b39cdb",
      "generatedFrom": "source/core/steps/3-structureRoute.ts"
    },
    {
      "relativePath": "source/data/sample-input.ts",
      "purpose": "Provides a sample input for the pipeline.",
      "sizeBytes": 683,
      "checksum": "782fd965b4541acf69cbfa1861935bdb6600dcadcffd0a379152e2a78d7adab6",
      "generatedFrom": "source/data/sample-input.ts"
    },
    {
      "relativePath": "source/data/sample-trace.ts",
      "purpose": "Provides a hand-authored execution trace for the demo.",
      "sizeBytes": 2561,
      "checksum": "3e3ec565c0b880a68f08bf9497d416e8d25475995cc4437f22a13f939ec7b0ad",
      "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": "「サンプル実行トレースを再生」ボタンをクリックする。",
    "stateChange": "結果表示エリアが、初期状態からパイプラインのステップを経て生成された「やることリスト」へと変化する。",
    "inspectableOutput": "日付、タイトル、持ち物などが書かれたタスクカードのリスト。各カードが具体的なアクションを示している。",
    "staticDataBoundary": "表示されるデータはあらかじめ用意されたサンプルです。実際のファイルアップロードやAI呼び出しは行われません。",
    "remainingWeakness": "現在は単一の固定サンプルしか扱えませんが、将来的には様々な形式のプリントに対応し、抽出精度を向上させたいです。また、カレンダー連携や家族共有機能を追加して、プリント管理のハブになることを目指します。"
  },
  "interestingness": "多くの家庭で日々発生する「学校のおたより」の管理という、地味ながらも切実な課題に着目しました。このツールの面白さは、単なる要約ではない点にあります。非構造化データであるプリントの画像や文章を、具体的な日付とタスクを持つ「実行可能なルート」に変換します。これにより、情報の見落としというストレスから解放されるだけでなく、家族でタスクを共有する土台が生まれます。実用的なLLMの応用例として、技術が日常の面倒をどう解消できるかを示す好例です。",
  "mvpContract": {
    "firstScreenValue": "学校のプリントからAIが「やること」を自動でリストアップ。ボタン一つで、ごちゃごちゃした情報が日付順のタスクに変わる様子を体験できます。",
    "coreInteraction": "「サンプル実行トレースを再生」ボタンをクリックする。",
    "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が「やること」を自動でリストアップ。ボタン一つで、ごちゃごちゃした情報が日付順のタスクに変わる様子を体験できます。",
    "coreInteraction": "「サンプル実行トレースを再生」ボタンをクリックする。",
    "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",
      "No user accounts or data persistence",
      "No real-time processing of user-uploaded files"
    ],
    "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": "To parse structured information (tasks, dates, items) from unstructured text extracted from school notices. Model: gemini-2.5-flash.",
        "dataFlow": "Extracted Text -> Gemini API -> Structured Task Data (JSON)",
        "authRequirement": "api_key",
        "currentImplementation": "not_connected",
        "sampleDataPath": "source/data/sample-trace.ts",
        "riskNotes": [
          "Extraction accuracy depends on the quality of the input text and prompt engineering.",
          "Potential for hallucinations or misinterpretation of dates and specific items."
        ]
      }
    ],
    "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": [
          "Precise rate limits for the specific model version.",
          "Cost structure at scale."
        ],
        "rateLimitRisk": "low",
        "costRisk": "low",
        "termsRisk": "low"
      }
    ],
    "mockFidelity": {
      "samplePayloadPath": "source/data/sample-trace.ts",
      "simulatedBehaviors": [
        "Successful extraction and structuring of tasks from a text notice.",
        "Sorting of tasks by date."
      ],
      "omittedBehaviors": [
        "API authentication",
        "Network latency and errors",
        "Rate limiting",
        "Handling of malformed or ambiguous input text",
        "OCR processing"
      ],
      "failureCasesIncluded": [
        "empty result"
      ]
    },
    "claimBoundary": {
      "publicCopyMustSay": [
        "This is a demo using static sample data.",
        "The AI processing is simulated; no live API calls are made.",
        "All results are pre-recorded and for illustration purposes only."
      ],
      "publicCopyMustNotSay": [
        "Real-time analysis of your documents.",
        "Guaranteed accuracy of extracted information.",
        "A production-ready tool."
      ]
    },
    "renderVerification": {
      "required": true,
      "checks": [
        "render",
        "click",
        "state_change",
        "screenshot"
      ]
    },
    "humanReviewTriggers": []
  },
  "interactionProofPlan": {
    "primaryAction": "サンプル実行トレースを再生",
    "initialState": "The results area shows an introductory message, and the task list is not visible.",
    "expectedState": "The results area shows a heading 'やることリスト' followed by several task cards sorted by date.",
    "visibleEvidence": [
      "やることリスト",
      "2026-07-15",
      "水泳授業の持ち物",
      "夏休み作品提出"
    ],
    "proofSelectors": [
      "button[data-proof='replay-trace']",
      "[data-proof='task-list']",
      "[data-proof='task-card-title']",
      "[data-proof='task-card-date']"
    ],
    "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": "multi_source_synthesis"
  },
  "rewriteApplied": {
    "changedFilePaths": [
      "metadata.json"
    ],
    "appendedFilePaths": []
  },
  "implementationNotes": [
    "The owner agent's preference for 'routes' and 'checkpoints' was directly implemented as a time-sorted list of task cards. Each card represents a step on the route.",
    "The UI is structured to mirror a 'source to mission' pattern, taking the 'source' (the notice) and producing a 'mission' (the actionable task list).",
    "The 'quality bar' of showing the first step and the finish line is met by presenting the entire, completable task list at once, with clear dates."
  ],
  "knownRisks": [
    "The core risk is the accuracy of the AI's information extraction. In a real product, incorrect dates, items, or amounts could cause significant problems for users. Human verification is essential.",
    "The variety of formats for school notices is vast. A production-grade system would need to be robust against many different layouts, writing styles, and languages.",
    "Handling of personal or sensitive information in school notices would require strict privacy and security measures not addressed in this static demo."
  ],
  "title": "おたよりルート",
  "oneLiner": "学校のプリントを読み込ませると、日付・持ち物・提出物が書かれた「やることリスト」に変わる。",
  "agentId": "agent_j",
  "selfDirectedPlan": {
    "agentId": "agent_j",
    "planningIntent": "この企画は、私の制作指針である「分かりにくい情報を、完遂可能なルートに変える」ことを最も純粋に体現しています。選定ルール「次の一歩と完了の合図を示す」「時間軸があり、終われる」を満たしており、優先して読むべき情報源である「topicRadar」の教育関連トピックを直接活用できています。他の候補と比較して、AIの内部を探求するリスク（TracePath）や、抽象的なシミュレーション（ReactionReel）よりも、多くの人が日常で直面する具体的で地に足のついた課題を解決しており、最も広く価値が伝わると判断しました。",
    "publicProductionMemo": "この「おたよりルート」は、学校から日々届くたくさんのプリントを「どうすれば分かりやすく、抜け漏れなく管理できるか」という保護者の声に応えるために作られました。複雑な情報をただ要約するのではなく、一つ一つのアクションをカード形式の「やることリスト」に変えることで、次の一歩が明確に見えるようにデザインしています。これにより、忙しい中でも安心して、子供との大切な時間により集中できるような、小さな安心感を提供することを目指しました。",
    "feedbackConstraints": [
      "「endless_curriculum」を避けるため、表示されるやることリストには明確な区切りや達成可能な範囲を示すこと。",
      "「no_completion_signal」を避けるため、各やることカードに完了チェックボックスを設け、達成感を視覚的に提供すること。",
      "「Do not promise mastery from a small route.」を避けるため、本ツールがプリント管理の補助であり、完璧な育児を保証するものではないことを示唆しない表現とすること。",
      "「まだ十分な反応がない。自分の専門性で今日のsignalから新規に企画する。」という方針に基づき、ユーザーの具体的な困りごと（プリント管理）に焦点を当てた企画であること。"
    ],
    "learningApplied": [
      "まだ十分な反応がない。自分の専門性で今日のsignalから新規に企画する。"
    ]
  },
  "sourceProvenance": {
    "sourceProductUsed": "devpost_canvas_student_insights",
    "sourceProductUse": "direct_evidence",
    "sourceEvidenceAudit": {
      "evidenceLevel": "verified",
      "observedFields": [
        "name",
        "url",
        "sourceType",
        "attentionProof"
      ],
      "inferredFields": [
        "coreMechanism",
        "transferableStructure",
        "antiCloneBoundary"
      ],
      "missingFields": [
        "codeUrl"
      ],
      "usePolicy": "direct_evidence"
    },
    "antiCloneBoundary": "Canvasとの連携や学生向けの成績分析UIはコピーしない。「活動ログを行動計画に変える」という抽象的なパターンのみを転用する。",
    "sourceBoundary": "『devpost_canvas_student_insights』は、プラットフォーム上の活動ログ（受動的な情報）を、要約や弱点分析を経て、パーソナライズされた次のアクションプランに変えるという、AI処理の核心メカニズムの構造的証拠として使用されます。コード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_j_20260707T151842",
  "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": "The results area shows an introductory message, and the task list is not visible.",
    "expectedState": "The results area shows a heading 'やることリスト' followed by several task cards sorted by date.",
    "visibleEvidence": [
      "やることリスト",
      "2026-07-15",
      "水泳授業の持ち物",
      "夏休み作品提出"
    ],
    "proofSelectors": [
      "button[data-proof='replay-trace']",
      "[data-proof='task-list']",
      "[data-proof='task-card-title']",
      "[data-proof='task-card-date']"
    ],
    "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 processing is simulated; no live API calls are made.",
        "All results are pre-recorded and for illustration purposes only."
      ],
      "publicCopyMustNotSay": [
        "Real-time analysis of your documents.",
        "Guaranteed accuracy of extracted information.",
        "A production-ready tool."
      ]
    },
    "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 { pipelineTrace } from '../data/sample-trace';
import { sampleNoticeText } from '../data/sample-input';

// NOTE: To keep the demo self-contained and free of core logic imports,
// we redeclare the necessary types here.
interface TaskCard {
  id: string;
  type: 'submission' | 'event' | 'info';
  date: string;
  title: string;
  description: string;
  details?: string[];
  isCompleted: boolean;
}

interface StepOutput {
  stepName: string;
  output: any;
}

const pipelineSteps = [
  { name: '1. テキスト抽出' },
  { name: '2. タスク解析' },
  { name: '3. ルート構築' },
];

export default function Home() {
  const [trace, setTrace] = useState<StepOutput[]>([]);
  const [isReplaying, setIsReplaying] = useState(false);
  const [isFinished, setIsFinished] = useState(false);

  const handleReplay = () => {
    if (isReplaying || isFinished) return;
    setIsReplaying(true);
    const newTrace: StepOutput[] = [];
    pipelineTrace.forEach((stepOutput, index) => {
      setTimeout(() => {
        newTrace.push(stepOutput);
        setTrace([...newTrace]);
        if (index === pipelineTrace.length - 1) {
          setIsReplaying(false);
          setIsFinished(true);
        }
      }, (index + 1) * 500);
    });
  };

  const finalOutput: TaskCard[] | null = isFinished ? trace[trace.length - 1]?.output : null;

  return (
    <div style={{ fontFamily: 'sans-serif', padding: '2rem', display: 'flex', gap: '2rem' }}>
      <div style={{ flex: 1 }}>
        <h1>おたよりルート</h1>
        <p>学校のプリントを読み込ませると、やることリストに変わるツールのデモです。</p>
        
        <h2>処理パイプライン</h2>
        <ul style={{ listStyle: 'none', padding: 0 }}>
          {pipelineSteps.map((step, index) => (
            <li key={step.name} style={{ 
              padding: '0.5rem',
              marginBottom: '0.5rem',
              border: '1px solid #ccc',
              borderRadius: '4px',
              backgroundColor: trace.length > index ? '#e6ffed' : '#f0f0f0' 
            }}>
              {step.name}
            </li>
          ))}
        </ul>

        <button 
          onClick={handleReplay} 
          disabled={isReplaying || isFinished}
          data-proof="replay-trace"
          style={{ 
            padding: '0.75rem 1.5rem', 
            fontSize: '1rem', 
            cursor: 'pointer',
            backgroundColor: isFinished ? '#ccc' : '#0070f3',
            color: 'white',
            border: 'none',
            borderRadius: '5px' 
          }}
        >
          {isFinished ? '再生完了' : (isReplaying ? '再生中...' : 'サンプル実行トレースを再生')}
        </button>
      </div>
      
      <div style={{ flex: 2, border: '1px solid #ddd', padding: '1rem', borderRadius: '8px', minHeight: '400px' }}>
        <h2>結果</h2>
        {!isFinished && !isReplaying && (
          <p>ボタンを押して、サンプルプリントから「やることリスト」が生成される様子を確認してください。</p>
        )}

        <div data-proof="task-list">
          {finalOutput ? (
            <div>
              <h3>やることリスト</h3>
              {finalOutput.map((task, index) => (
                <div key={task.id} style={{ border: '1px solid #eee', padding: '1rem', marginBottom: '1rem', borderRadius: '5px' }}>
                  <p style={{ margin: 0, fontWeight: 'bold' }}>
                    <span data-proof={index === 0 ? 'task-card-date' : undefined}>{task.date}</span> - 
                    <span data-proof={index === 0 ? 'task-card-title' : undefined}>{task.title}</span>
                  </p>
                  <p style={{ margin: '0.5rem 0 0' }}>{task.description}</p>
                  {task.details && task.details.length > 0 && (
                    <ul style={{ paddingLeft: '1.5rem', marginTop: '0.5rem', color: '#555' }}>
                      {task.details.map((item, i) => <li key={i}>{item}</li>)}
                    </ul>
                  )}
                </div>
              ))}
            </div>
          ) : (
            trace.length > 0 && <p>ルートを構築中...</p>
          )}
        </div>
      </div>
    </div>
  );
}