SiteBrief

# req-r-20260707t021707

This directory is a materialized LLM BuildPlan artifact candidate.

## Readiness

- First screen value: 設備IDに関する散在した資料から、AIが危険箇所と確認事項を1枚のブリーフィングにまとめる様子を、ワンクリックで体験できます。
- Core interaction: ユーザーは「ブリーフィング生成」ボタンを一度クリックするだけです。
- State change: クリック後、空だった表示エリアに設備の図面、危険を示すアイコン、そして具体的な確認項目のチェックリストが表示されます。
- Inspectable output: 生成されたブリーフィングは、図面上の危険箇所マップと、実行可能なチェックリストで構成されています。
- Static data boundary: このデモは、事前に記録された単一の実行トレースを再生するものであり、ライブのAPIコールやリアルタイムの文書解析は行いません。
- Remaining weakness: 現在は単一の設備に対する固定シナリオのみですが、次は多様な文書フォーマット（PDF、手書きメモのOCRなど）に対応し、複数の設備を横断したリスク分析まで拡張して、大規模施設全体の安全管理ツールへと進化させたいです。

## Interaction Proof Plan

- Primary action: ブリーフィング生成
- Initial state: The main content area is empty, prompting the user to start the demo.
- Expected state: The main content area displays the generated briefing, including a map with hazard points and a checklist. The pipeline status shows 'ブリーフィング完了'.
- Visible evidence: ブリーフィング完了; PLT-EAST-03A; 高圧ガス配管; 回転部近接注意; チェックリスト; 高圧ガス配管バルブA-17の締付トルクを確認

## 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 Generative Language API=not_connected
- Mock fidelity: Successful analysis of multiple documents into a structured briefing.

## Files

- `source/README.md`: Product documentation for developers.
- `source/metadata.json`: Public metadata for the project page.
- `source/manifest.json`: List of all generated files for the artifact.
- `source/validation/self-review.json`: Self-review against Prodia's MVP criteria.
- `source/app/page.tsx`: The main entrypoint and UI for the demo.
- `source/core/types.ts`: Defines shared data structures for the core logic.
- `source/core/pipeline.ts`: Orchestrates the data processing steps.
- `source/core/gemini.ts`: Contains the real call pattern for the Google Gemini API.
- `source/core/steps/readDocuments.ts`: Represents the first step: ingesting source documents.
- `source/core/steps/analyzeDocuments.ts`: Represents the core AI step: analyzing documents with Gemini.
- `source/data/sample-input.ts`: Provides the static input for the demo trace.
- `source/data/sample-trace.ts`: A hand-authored execution trace of the pipeline 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": "req-r-20260707t021707",
  "generatedAt": "2026-07-07T07:48:36.871Z",
  "generatedFrom": {
    "input": "artifacts/llm-pipeline-runs/rebuild_agent_r_sitebrief/builder/response.json",
    "requirementSpecId": "req_r_20260707T021707",
    "framework": "next_static_artifact"
  },
  "sourceFiles": [
    {
      "relativePath": "source/README.md",
      "purpose": "Product documentation for developers.",
      "sizeBytes": 2849,
      "checksum": "90f17feeafc00cd633fa92e566253111202399be7edf0d09c44563431d5a3160",
      "generatedFrom": "README.md"
    },
    {
      "relativePath": "source/metadata.json",
      "purpose": "Public metadata for the project page.",
      "sizeBytes": 2664,
      "checksum": "f1092ad5a0d6e039eddfa27b4953dd40ca29f04f1a435f30bd416ca3cc9f88a2",
      "generatedFrom": "metadata.json"
    },
    {
      "relativePath": "source/manifest.json",
      "purpose": "List of all generated files for the artifact.",
      "sizeBytes": 317,
      "checksum": "80a27f1709641d4b0ce0d1f9e88fe98c273c3e5b931a3e2f948c56c6f65656bd",
      "generatedFrom": "manifest.json"
    },
    {
      "relativePath": "source/validation/self-review.json",
      "purpose": "Self-review against Prodia's MVP criteria.",
      "sizeBytes": 1449,
      "checksum": "f41a7e2ea36501893517718f985a2729ae1a3349aec49ba81cd3d2151246690a",
      "generatedFrom": "validation/self-review.json"
    },
    {
      "relativePath": "source/app/page.tsx",
      "purpose": "The main entrypoint and UI for the demo.",
      "sizeBytes": 5071,
      "checksum": "07d867b07ccb1b9133bb3d4c8b9627119071fba07fb7e845fc5da3fe98d964aa",
      "generatedFrom": "source/app/page.tsx"
    },
    {
      "relativePath": "source/core/types.ts",
      "purpose": "Defines shared data structures for the core logic.",
      "sizeBytes": 561,
      "checksum": "2df2daf59b0903e620545cd5bc97d978e7f148c42d01b381e0d1f26b7d7d0227",
      "generatedFrom": "source/core/types.ts"
    },
    {
      "relativePath": "source/core/pipeline.ts",
      "purpose": "Orchestrates the data processing steps.",
      "sizeBytes": 1013,
      "checksum": "f22fbfbf18d72bab5f05b205cba47f49a18f78c88a4e582f7221d104f5a9ef21",
      "generatedFrom": "source/core/pipeline.ts"
    },
    {
      "relativePath": "source/core/gemini.ts",
      "purpose": "Contains the real call pattern for the Google Gemini API.",
      "sizeBytes": 2200,
      "checksum": "2c160858a64e6fe750c8e15b8dd9e4ddabd9d01696a7ab08af7f6e8e2768183e",
      "generatedFrom": "source/core/gemini.ts"
    },
    {
      "relativePath": "source/core/steps/readDocuments.ts",
      "purpose": "Represents the first step: ingesting source documents.",
      "sizeBytes": 1295,
      "checksum": "fad540ad650d9f9a7347d965a307c86dcda52b8c691a6d56084534107916ac2f",
      "generatedFrom": "source/core/steps/readDocuments.ts"
    },
    {
      "relativePath": "source/core/steps/analyzeDocuments.ts",
      "purpose": "Represents the core AI step: analyzing documents with Gemini.",
      "sizeBytes": 2385,
      "checksum": "03237c99628331a68e09de49b9c7d2ebd9e248c797006ea7208d8e2190579c52",
      "generatedFrom": "source/core/steps/analyzeDocuments.ts"
    },
    {
      "relativePath": "source/data/sample-input.ts",
      "purpose": "Provides the static input for the demo trace.",
      "sizeBytes": 63,
      "checksum": "71486d606a3cbb9dbf6b0298ceb85824f39f539c6d0dbad67d50fd5d675725f2",
      "generatedFrom": "source/data/sample-input.ts"
    },
    {
      "relativePath": "source/data/sample-trace.ts",
      "purpose": "A hand-authored execution trace of the pipeline for the demo.",
      "sizeBytes": 1173,
      "checksum": "018d7e379c9505b114923cc9792c8e564beeed4ef9365b07647724b796b4f016",
      "generatedFrom": "source/data/sample-trace.ts"
    }
  ],
  "demo": {
    "path": "demo-placeholder.md",
    "purpose": "Inspectable placeholder for submission/demo review before UI wiring."
  },
  "readiness": {
    "firstScreenValue": "設備IDに関する散在した資料から、AIが危険箇所と確認事項を1枚のブリーフィングにまとめる様子を、ワンクリックで体験できます。",
    "coreInteraction": "ユーザーは「ブリーフィング生成」ボタンを一度クリックするだけです。",
    "stateChange": "クリック後、空だった表示エリアに設備の図面、危険を示すアイコン、そして具体的な確認項目のチェックリストが表示されます。",
    "inspectableOutput": "生成されたブリーフィングは、図面上の危険箇所マップと、実行可能なチェックリストで構成されています。",
    "staticDataBoundary": "このデモは、事前に記録された単一の実行トレースを再生するものであり、ライブのAPIコールやリアルタイムの文書解析は行いません。",
    "remainingWeakness": "現在は単一の設備に対する固定シナリオのみですが、次は多様な文書フォーマット（PDF、手書きメモのOCRなど）に対応し、複数の設備を横断したリスク分析まで拡張して、大規模施設全体の安全管理ツールへと進化させたいです。"
  },
  "interestingness": "多くの産業現場では、関連資料が複数の場所に散在し、作業員は全体像を把握しないまま危険な作業に臨むことがあります。SiteBriefは、こうしたバラバラの図面や報告書をAIが統合・解釈し、一枚の「空間的ブリーフィング」を生成する点に新規性があります。単なる要約ツールとは異なり、危険箇所を図面上にマッピングし、具体的な確認項目をチェックリストとして提示するため、現場での誤認や見落としリスクを直接的に低減します。この「文書から空間へ」の変換は、Geminiのマルチモーダルな情報統合能力を応用したもので、現場作業の安全性を高める新しいアプローチです。",
  "mvpContract": {
    "firstScreenValue": "設備IDに関する散在した資料から、AIが危険箇所と確認事項を1枚のブリーフィングにまとめる様子を、ワンクリックで体験できます。",
    "coreInteraction": "ユーザーは「ブリーフィング生成」ボタンを一度クリックするだけです。",
    "stateChange": "クリック後、空だった表示エリアに設備の図面、危険を示すアイコン、そして具体的な確認項目のチェックリストが表示されます。",
    "inspectableOutput": "生成されたブリーフィングは、図面上の危険箇所マップと、実行可能なチェックリストで構成されています。",
    "staticDataBoundary": "このデモは、事前に記録された単一の実行トレースを再生するものであり、ライブのAPIコールやリアルタイムの文書解析は行いません。",
    "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": "設備IDに関する散在した資料から、AIが危険箇所と確認事項を1枚のブリーフィングにまとめる様子を、ワンクリックで体験できます。",
    "coreInteraction": "ユーザーは「ブリーフィング生成」ボタンを一度クリックするだけです。",
    "stateChange": "クリック後、空だった表示エリアに設備の図面、危険を示すアイコン、そして具体的な確認項目のチェックリストが表示されます。",
    "inspectableOutput": "生成されたブリーフィングは、図面上の危険箇所マップと、実行可能なチェックリストで構成されています。",
    "staticDataBoundary": "このデモは、事前に記録された単一の実行トレースを再生するものであり、ライブのAPIコールやリアルタイムの文書解析は行いません。",
    "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",
      "Real-time safety guarantees"
    ],
    "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": "Analyze the content of multiple technical documents to extract potential hazards and pre-work checklist items. The model `gemini-2.5-flash` is proposed for this task.",
        "dataFlow": "Aggregated document text -> Gemini API -> Structured JSON (hazards, checklist) -> UI",
        "authRequirement": "api_key",
        "currentImplementation": "not_connected",
        "sampleDataPath": "source/data/sample-trace.ts",
        "riskNotes": [
          "The accuracy of the extracted information is highly dependent on the quality of the input documents and the prompt.",
          "Real-world usage would require robust error handling for API failures or malformed responses."
        ]
      }
    ],
    "runtimeBoundary": {
      "networkCalls": "none",
      "secrets": "none",
      "externalWrites": "none"
    },
    "mvpComplexityBudget": {
      "maxScreens": 1,
      "maxPrimaryActions": 1,
      "maxSourceFiles": 12,
      "maxNewDependencies": 0,
      "allowDatabase": false
    },
    "integrationAssumptions": [
      {
        "service": "Google Generative Language API",
        "verificationStatus": "unverified",
        "unavailableOrUnknown": [
          "Performance on highly technical or poorly scanned schematics is unknown.",
          "Cost at scale for processing large volumes of documents has not been estimated."
        ],
        "rateLimitRisk": "medium",
        "costRisk": "medium",
        "termsRisk": "low"
      }
    ],
    "mockFidelity": {
      "samplePayloadPath": "source/data/sample-trace.ts",
      "simulatedBehaviors": [
        "Successful analysis of multiple documents into a structured briefing."
      ],
      "omittedBehaviors": [
        "API authentication",
        "Network latency and errors",
        "Rate limiting",
        "Processing of different file formats (e.g., PDF, images)",
        "Partial or malformed AI responses"
      ],
      "failureCasesIncluded": [
        "empty result"
      ]
    },
    "claimBoundary": {
      "publicCopyMustSay": [
        "これはサンプルデータに基づいたデモンストレーションです。",
        "AIの解析結果は参考情報です。最終確認は人間が行ってください。"
      ],
      "publicCopyMustNotSay": [
        "リアルタイムで文書を解析します。",
        "作業の安全を保証します。",
        "あらゆる図面や指示書に対応しています。"
      ]
    },
    "renderVerification": {
      "required": true,
      "checks": [
        "render",
        "click",
        "state_change",
        "screenshot"
      ]
    },
    "humanReviewTriggers": []
  },
  "interactionProofPlan": {
    "primaryAction": "ブリーフィング生成",
    "initialState": "The main content area is empty, prompting the user to start the demo.",
    "expectedState": "The main content area displays the generated briefing, including a map with hazard points and a checklist. The pipeline status shows 'ブリーフィング完了'.",
    "visibleEvidence": [
      "ブリーフィング完了",
      "PLT-EAST-03A",
      "高圧ガス配管",
      "回転部近接注意",
      "チェックリスト",
      "高圧ガス配管バルブA-17の締付トルクを確認"
    ],
    "proofSelectors": [
      "button[data-proof='generate-briefing']",
      "div[data-proof='briefing-status'][data-status='completed']",
      "span[data-proof='equipment-id']",
      "div[data-proof='map-viewer']",
      "div[data-proof='hazard-point'][data-point-id='hzd-001']",
      "h4[data-proof='checklist-title']"
    ],
    "requiredSourceFiles": [
      "source/app/page.tsx",
      "source/core/pipeline.ts",
      "source/data/sample-trace.ts"
    ],
    "manualFallbackReason": ""
  },
  "implementationNotes": [
    "The agent's preference for 'ops steward console' and 'runbook steps' was implemented by creating a clear two-panel UI: a control/status panel on the left and a detailed output panel on the right.",
    "The core interaction is a single button click that reveals the full briefing, reflecting the agent's philosophy of providing a clear next step rather than a wall of options.",
    "The requirement for a 'mocked adapter' was fulfilled by documenting the data ingestion step in `source/core/steps/readDocuments.ts`, while the demo itself uses a static trace file for offline reliability, satisfying both the documentation and execution constraints."
  ],
  "knownRisks": [
    "The AI's analysis is based on sample data and a simplified prompt; its accuracy in a real-world scenario with complex and varied documents is unverified.",
    "The UI presents AI-generated safety information. It's critical that the product framing emphasizes this is an assistive tool, not a guarantee of safety, to mitigate user over-reliance."
  ],
  "agentId": "agent_r",
  "selfDirectedPlan": {
    "agentId": "agent_r",
    "planningIntent": "agent_r が今日のsignalと自分の学びから一人称で企画した作品。",
    "feedbackConstraints": [],
    "learningApplied": []
  },
  "sourceProvenance": {
    "sourceProductUsed": "Fireflai (Devpost)",
    "sourceProductUse": "inspiration_only",
    "sourceEvidenceAudit": {
      "evidenceLevel": "public_claims",
      "observedFields": [
        "Core mechanism of creating a spatial briefing from scattered evidence"
      ],
      "inferredFields": [],
      "missingFields": [
        "Actual implementation details",
        "Source code",
        "Live demo access"
      ],
      "usePolicy": "Use the abstract structure of synthesizing evidence into a spatial briefing, but apply it to a different, lower-risk domain (industrial maintenance)."
    },
    "antiCloneBoundary": "Do not copy claims, UI, or logic related to emergency response, firefighting tactics, or life-critical risk assessment.",
    "sourceBoundary": "The artifact is inspired by the core concept of 'Fireflai'—creating a spatial briefing from disparate evidence. However, it does not use any specific data, claims, or implementation details from the source, and is applied to the distinct domain of industrial maintenance.",
    "missingSourceEvidence": [
      "codeUrl missing",
      "UI evidence unavailable",
      "live data not used"
    ]
  },
  "dbWrite": {
    "status": "skipped",
    "reason": "BuildPlan materialization is artifact-only for this session. Creating Project rows requires existing Run/Theme/Agent/Category IDs and should be owned by the integration session."
  }
}

{
  "version": 1,
  "artifactId": "selfdirected_agent_r_20260707T021131",
  "status": "needs_review",
  "entrypoint": "source/app/page.tsx",
  "checks": {
    "firstScreenValue": "declared",
    "userControlledInteraction": "declared",
    "stateChange": "declared",
    "interactionProofPlan": "declared",
    "mvpContractV2": "declared",
    "externalDependencyMode": "mocked_adapter",
    "artifactTier": "mocked_integration_mvp",
    "renderVerification": "required",
    "inspectableOutput": "declared",
    "staticDataBoundary": "declared",
    "forbiddenDependencies": "declared_absent"
  },
  "interactionProofPlan": {
    "primaryAction": "ブリーフィング生成",
    "initialState": "The control panel is ready, and the main content area shows an empty state message.",
    "expectedState": "The main content area displays a map with two interactive hazard points and a checklist with two items. A 'Briefing Completed' status is visible in the control panel.",
    "visibleEvidence": [
      "ブリーフィング完了",
      "PLT-EAST-03A",
      "高圧ガス配管",
      "回転部近接注意",
      "チェックリスト",
      "高圧ガス配管バルブA-17の締付トルクを確認"
    ],
    "proofSelectors": [
      "button[data-proof='generate-briefing']",
      "div[data-proof='briefing-status'][data-status='completed']",
      "span[data-proof='equipment-id']",
      "div[data-proof='map-viewer']",
      "div[data-proof='hazard-point'][data-point-id='hzd-001']"
    ],
    "requiredSourceFiles": [
      "source/app/page.tsx",
      "source/components/ProductWorkspace.tsx",
      "source/integrations/documentReaderMock.ts"
    ],
    "manualFallbackReason": ""
  },
  "mvpContractV2": {
    "artifactTier": "mocked_integration_mvp",
    "externalDependencyMode": "mocked_adapter",
    "runtimeBoundary": {
      "networkCalls": "none",
      "secrets": "none",
      "externalWrites": "none"
    },
    "claimBoundary": {
      "publicCopyMustSay": [
        "これはサンプルデータに基づいたデモンストレーションです。",
        "AIの解析結果は参考情報です。最終確認は人間が行ってください。"
      ],
      "publicCopyMustNotSay": [
        "リアルタイムで文書を解析します。",
        "作業の安全を保証します。",
        "あらゆる図面や指示書に対応しています。"
      ]
    },
    "renderVerification": {
      "required": true,
      "checks": [
        "render",
        "click",
        "state_change",
        "screenshot"
      ]
    }
  },
  "notes": [
    "Generated by materialize-llm-plan fallback. Human or reviewer validation must confirm the UI actually implements the declared MVP behavior."
  ]
}

'use client';

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

const pipelineSteps = [
  { id: 'readDocuments', name: '関連文書の読み込み' },
  { id: 'analyzeDocuments', name: 'AIによるリスク・確認事項の抽出' },
  { id: 'synthesizeBriefing', name: 'ブリーフィング生成' },
];

export default function Home() {
  const [currentStep, setCurrentStep] = useState(-1);

  const finalOutput = sampleTrace.final_output;

  const handleReplay = () => {
    let step = -1;
    const interval = setInterval(() => {
      step++;
      if (step < pipelineSteps.length) {
        setCurrentStep(step);
      } else {
        clearInterval(interval);
      }
    }, 500);
  };

  const isCompleted = currentStep === pipelineSteps.length - 1;

  return (
    <div style={{ fontFamily: 'sans-serif', padding: '2rem' }}>
      <header style={{ borderBottom: '1px solid #eee', paddingBottom: '1rem', marginBottom: '1rem' }}>
        <h1>SiteBrief</h1>
        <p>AIによる現場ブリーフィング生成デモ</p>
      </header>

      <div style={{ display: 'grid', gridTemplateColumns: '300px 1fr', gap: '2rem' }}>
        {/* Control Panel */}
        <aside>
          <h2 style={{ fontSize: '1.2rem' }}>処理パイプライン</h2>
          <p>対象設備ID: <span data-proof="equipment-id">{sampleInput.equipmentId}</span></p>
          <button onClick={handleReplay} disabled={currentStep > -1} data-proof="generate-briefing">
            ブリーフィング生成
          </button>
          <ul style={{ listStyle: 'none', padding: 0, marginTop: '1rem' }}>
            {pipelineSteps.map((step, index) => (
              <li key={step.id} style={{ margin: '0.5rem 0' }}>
                <span style={{ fontWeight: currentStep >= index ? 'bold' : 'normal' }}>
                  {currentStep > index ? '✅' : currentStep === index ? '⏳' : '▶️'} {step.name}
                </span>
              </li>
            ))}
          </ul>
          {isCompleted && (
            <div data-proof="briefing-status" data-status="completed" style={{ marginTop: '1rem', color: 'green', fontWeight: 'bold' }}>
              ブリーフィング完了
            </div>
          )}
        </aside>

        {/* Main Content */}
        <main>
          <h2 style={{ fontSize: '1.2rem' }}>生成されたブリーフィング</h2>
          {isCompleted ? (
            <div style={{ border: '1px solid #ccc', borderRadius: '8px', padding: '1rem' }}>
              <h3>{finalOutput.title}</h3>
              <div data-proof="map-viewer" style={{ position: 'relative', width: '100%', height: '300px', background: '#f0f0f0', border: '1px solid #ddd', marginTop: '1rem', borderRadius: '4px' }}>
                <p style={{textAlign: 'center', color: '#888', paddingTop: '130px'}}>[設備模式図]</p>
                {finalOutput.hazards.map(hazard => (
                  <div 
                    key={hazard.id}
                    data-proof="hazard-point" 
                    data-point-id={hazard.id} 
                    title={hazard.description}
                    style={{
                      position: 'absolute', 
                      left: hazard.location.x, 
                      top: hazard.location.y, 
                      width: '24px', 
                      height: '24px', 
                      background: 'red', 
                      borderRadius: '50%', 
                      color: 'white', 
                      textAlign: 'center', 
                      lineHeight: '24px', 
                      cursor: 'pointer'
                    }}
                  >
                    ! 
                  </div>
                ))}
              </div>
              <div style={{ marginTop: '1rem' }}>
                {finalOutput.hazards.map(hazard => (
                    <p key={hazard.id}><b>危険箇所:</b> {hazard.name}</p>
                ))}
              </div>
              <div style={{ marginTop: '1.5rem' }}>
                <h4 data-proof="checklist-title">チェックリスト</h4>
                <ul style={{ listStyle: 'none', padding: 0 }}>
                  {finalOutput.checklist.map((item, index) => (
                    <li key={index} style={{ borderBottom: '1px solid #eee', padding: '0.5rem 0' }}>
                      <input type="checkbox" id={`check-${index}`} />
                      <label htmlFor={`check-${index}`} style={{ marginLeft: '0.5rem' }}>{item.task}</label>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          ) : (
            <div style={{ border: '1px solid #ccc', borderRadius: '8px', padding: '1rem', minHeight: '400px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#888' }}>
              <p>「ブリーフィング生成」ボタンを押してデモを開始してください。</p>
            </div>
          )}
        </main>
      </div>
    </div>
  );
}