Canvas テーマ

Canvas テーマは公開ステータスページのレイアウト・操作・チャートを完全に書き換えられます。エントリ HTML は sandbox="allow-scripts" かつ allow-same-origin なしの iframe で、独自 CSP の下で動作します。

CSS テーマとの違い

能力	CSS テーマ	Canvas テーマ
レイアウト	ホスト DOM	完全に自前描画
データ	ホストの既存 DOM	nie-sla:status スナップショット + 制限付き履歴リクエスト
リソース	ホストページが読み込み	ZIP 内に同梱（フォント・画像・スクリプト・スタイル）
高さ	ページ自体	400-12000。実行時に更新可能

マニフェスト

{
  "schema": "nie-sla-theme-v1",
  "id": "example-canvas",
  "name": "Example Canvas",
  "version": "1.0.0",
  "type": "theme",
  "mode": "canvas",
  "entry": "index.html",
  "permissions": ["status:read"],
  "height": 1000,
  "author": "Developer",
  "description": "A full-layout NIE-SLA theme.",
  "license": "MIT",
  "files": ["manifest.json", "index.html", "theme.js", "assets/logo.webp"]
}

permissions は正確に ["status:read"] でなければなりません。height は初期高さで、メッセージプロトコルで実行時に更新できます。

権限境界

Canvas テーマは外部ネットワークへの直接 fetch・ホスト DOM・Cookie・Web Storage の読み取り・フォーム送信・トップレベルナビゲーション・Worker 生成・フレームのネストができません。フォント・画像・コード・スタイルはすべて ZIP で提供されます。管理 API・Agent Token・通知設定・Cloudflare バインディングも読めません。status:read はホストプロキシ経由で公開 status・checks・metrics・pings・latency を読めるという意味で、任意 URL へのアクセス権ではありません。

受入シナリオ

• ターゲットなし・1 台・多数・超長い名前。
• Cloudflare プローブが失敗して Agent はオンライン、およびその逆。
• warnings[] が非空・履歴が空・温度フィールド欠落。
• 320/375/768/1440 ピクセル幅で iframe 内の横オーバーフローがない。
• prefers-reduced-motion・キーボードフォーカス・コントラスト・スクリーンリーダー状態。
• リクエストタイムアウト・HTTP 429・テーマ再読み込み・重複状態スナップショット。
• 動的高さが 400-12000 に制限されても全コンテンツにアクセスできる。

完全なメッセージ形式はメッセージプロトコルを参照してください。