live-panel

live-panel

システムの説明を、常時稼働するアーキテクチャ図に変換します。稼働中のシステムを監視パネルのように見せる、固定ページの図です。どのフレームも完全で読みやすい図になり、動くのは装飾ではなくシステムの状態です。組み込みテーマは 2 種類です。terminal-dark（オリジナルの外観）と light-pastel（白い背景、角丸のパステルカラーのボックス。小紅書などのインフォグラフィック向け）です。キャンバスのプリセット：4:5（X、1200x1500）、3:4（小紅書、1080x1440）、1:1（1080x1080）。X や小紅書への投稿のベースとして使うことを想定しています。

クレジット。 この外観と動きのアイデアは、@thedelost によるアーキテクチャ図の動画（GPT で生成し、ウェブページとして画面収録した Codex エージェントツリーのパネル）が元になっています：https://x.com/thedelost/status/2105398038026195279 。@slashui による引用ポストを通じて、多くの人に広まりました：https://x.com/slashui/status/2105850132365443528 。このスキルは、方法を独自に再実装したものです（動きの文法は、その動画を分析して習得しました）。examples/codex-agents/ はオリジナルの画像を再現したもので、元の作者のデザインのままです。このスキルの Codex の例を使って作成した出力を公開する場合は、このクレジットを残してください。

使用する場面

• ユーザーが、生き生きとした印象のアーキテクチャ図／エージェントツリー／組織図／データフロー図（動画、GIF のようなループ、ライブページ）を求めている場合。
• ユーザーが、いくつかのボックス、その間のフロー、いくつかの「オンコール」サイドトリガー、ログ、数値を含むシステムの説明を用意している場合。
• 対象外：インタラクション、実際のテレメトリー、または段階的な解説が必要な図（スライドか通常の図ツールを使用してください）。

入力

1 つの JSON 設定（スキーマ：references/config-schema.md）です。キャンバスサイズ、色、テキスト行を含むボックス、ワイヤー、パケットの経路、サイドレールのトリガー、ログの文言、数値など、必要な情報がすべて含まれています。テンプレートを編集する必要はありません。最も近い例をベースにしてください：examples/codex-agents/config.json（terminal-dark、4:5、@thedelost の画像の再現）、examples/airbnb/config.json（terminal-dark、中国語の内容、インタビューの数値）、または examples/agent-architecture/config.json（light-pastel、3:4、動きを付けた小紅書向けの静止インフォグラフィック。小紅書の @林纾 によるオリジナル）。テーマ：theme.preset、キャンバス：canvas.preset。位置はキャンバス上の絶対ピクセル単位なので、別のアスペクト比には専用の設定が必要です。

ビューの選択（视图）

内容の形が明確な場合は、ボックスを手作業で配置する代わりに {"type":"view"} 要素を使ってください（仕様：references/views.md。ゲート：scripts/verify_view.py は 7 つの組み合わせすべてで PASS する必要があります）。

• 繰り返すループ → ring、段階ごとに離脱する流れ → funnel（どちらも利用可能です。examples/ring/、examples/funnel/ を参照）。
• 意思決定とループバックを含むネストされたワークフロー（「いいえ」の場合の再試行、外側／内側のループ、ヒューマンゲート） → loop（利用可能です。examples/loop-poteto/ を参照）。
• 関係性／クラスター → nebula、時間経過に沿った作業／並行トラック → timeline、階層 → tree、監視対象の数値がいくつかある場合 → kpi（予定されていますが、まだこのバージョンにはありません）。
• Excalidraw 風の手描き図（パステルカラーのボックス、手書きのテキスト、ループ）に動きを付けたい場合 → excalidraw（利用可能です。examples/excalidraw-aqua/、examples/excalidraw-gardener/ を参照。CJK 手書きフォントを使うには、scripts/fetch_fonts.sh を一度実行してください）。ユーザーが .excalidraw ファイルをすでに持っている場合は、まず python3 scripts/excalidraw_import.py file.excalidraw -o config.json を実行してください（矢印のバインディングを保持し、ノード／エッジ／ステップを書き出します）。その後、注記を追加してレンダリングします。
• 任意のボックスとワイヤーを使うアーキテクチャ → ビューは使わず、オリジナルの例のように自由形式の要素を使います。

固定手順

1. コンテンツと各数値の出典を集めます。 ボックス、誰が誰に話しかけるか、「呼び出し時」のトリガーとなるもの、ログに表示される内容を列挙します。各数値の横に出典（リンクまたは「シミュレーション」）を記載します。実際の出典がない数値はシミュレーションです。画面上（フッター行、またはカウンターの横に「（例示）」）にその旨を表示してください。数値を捏造して実際の値として示してはいけません。
2. 設定を書きます。まずひな形を作り、その後に反復します。 行に並ぶボックス（エージェントツリー、パイプライン、ファンアウト／マージ、監視パネル、オンコールトリガー用のサイドレールの有無を問わず）について、各ボックスの表示内容、上から下への行の順序、任意の lane（実行中／完了）、gauge（しきい値を超えると切り替わるバー）、rail、counters、log、note、credit を記した短い仕様を書きます。python3 scripts/scaffold.py --example を実行すると例が表示されます。その後、python3 scripts/scaffold.py --spec spec.json --out out/config.json を実行します。ピクセル単位のレイアウト、配線、パケット、レールの矢印、ログの列、テキストの折り返しはこのスクリプトが処理し、出力は通常、最初の実行で check_frames.py に合格します。その後、出力（または仕様）を少しずつ編集します。表現できないレイアウト（中央のボックスとサテライト、曲線の矢印、独自の形状で再現する画像など）の場合は、最も近い例をシェルコマンドで出力先にコピーする（cp examples/<closest>/config.json out/config.json）か、辞書を作成して JSON を出力する短い Python スクリプトを書きます。その後、小さな変更を加えていきます。1 回のメッセージやツール呼び出しで設定全体を入力してはいけません。20～40 KB の JSON を一度に書き込むと、何も保存されないままエージェントの実行が終了することが最もよくあります。遅くとも 5 回目のツール呼び出しまでに、実行可能なドラフトをディスク上に用意してください。その後は、1～3 個のボックスを変更し、check_frames.py を実行し、その PROBLEM 行を確認して修正する、というループを繰り返します。推論中に座標を計画したり、テキスト幅を数えたりしないでください。数行を超えてピクセル計算をしていることに気づいたら、そこでやめて編集を書き始めてください。頭の中で長々とレイアウトを計画することも、保存前に実行が終了する原因になります。ボックスはピクセルグリッド（キャンバスの px 単位で x、y、w、h）に配置します。テキスト行は、ボックス内で一定の行の高さに沿って流れます。クレジット／出典の行は最上位の credit キー（"credit": {"text": "...", "y": ...}）に記載してください。下部のプレーンテキスト要素はクレジットとして読み取られません。マシンと周期を選ぶ前に references/motion-grammar.md に目を通してください。references/config-schema.md にすべてのキーが記載されているため、assets/template.html を読む必要はほとんどありません。
3. レンダリングします。 python3 scripts/render.py --config my.json --out my.mp4 を実行します（PATH 上に Chrome／Chromium と ffmpeg が必要です。ない場合は --chrome／--ffmpeg を指定してください。macOS では /Applications/*.app の下からもブラウザーが見つかります）。対応 OS は Linux と macOS のみです。Windows では WSL 内でスクリプトを実行してください。--html-out page.html を指定すると、自己完結型のページも保存され、どのブラウザーでもライブ実行できます。
4. 信頼するのではなく、フレームを確認します。 python3 scripts/check_frames.py --config my.json --out-dir frames --repeat を実行すると、約 120 個の時点をサンプリングし、DOM からテキストのはみ出しと重なりを測定して PNG を出力し、再生の決定性を検証します。PNG を開いて確認してください。チェッカーが検出するのはレイアウトであり、見栄えではありません。設定を修正し、終了コードが 0 になるまで繰り返します。text overflows its box が表示されたら、レイアウトを再設計するのではなく、テキストを短くする、サイズを 1 段階下げる、該当するボックスの幅を広げるなど、最も手軽な修正を選んでください。時間切れの時点でまだ計画中の優れた設定より、検査に合格する設定のほうが優れています。

画面ひとつでわかるモーションのルール

（全文と根拠については、references/motion-grammar.mdを参照してください。）

• レイアウトは動きません。 カメラワークも、段階的な表示もありません。フレーム0の時点で、すでに図が完成しています。
• 3つのテンポが同時に進みます：高速（すべての配線上を軌跡付きのパケットが流れ、スピナーやカウンターが速く動きます）、中速（ログがスクロールし、最新行は明るく、古い行はグレーになります。バーは再描画され、しきい値を超えると色とラベルが切り替わります）、低速（サイドレールのトリガーが順番に1つずつ点灯し、対応する矢印の色が変わってパケットが流れます。アドバイスは文字が打ち出され、合計値が積み上がります）。
• すべての表示が同じ事実を示します。 ログの数値はバーの数値と一致し、レールで点灯しているトリガーはログが示すものと一致し、ステータスバーのカウンターはボックス内のカウンターと一致します。このエンジンでは、ボックスと同じステートマシンからログ行を生成するため、これが構造上保証されています。
• 実データがない場合は「例示用」と明記します。 固定の事実は固定のままにし、アニメーション内のカウンターだけを動かして、ラベルを付けます。

決定性（毎回同じようにレンダリングされる理由）

ページではwindow.seek(t)を利用できます。すべてのビジュアルは、tと、いくつかの「ランダム」な選択に使う固定整数シードだけから決まる純粋関数です。実時間、Math.random、CSSアニメーションは使いません。レンダラーはseek(i/fps)を呼び出してスクリーンショットを撮影します。check_frames.py --repeatは、別の時刻に移動してから戻り、バイト単位で比較します。通常のブラウザーで開いた場合（?manualなし）は、同じ関数がrequestAnimationFrameによって駆動され、ループします。

ファイル

• assets/template.html - 汎用ページ。scripts/scaffold.py - 短い仕様から完全な設定を生成します（レイアウトは自動で作成されます）。scripts/render.py - mp4を生成します。scripts/check_frames.py - チェックとPNG生成を行います。scripts/livepanel.py - 共通ヘルパー（DevToolsパイプ経由のChrome、標準ライブラリのみ）。
• references/motion-grammar.md、references/config-schema.md。
• examples/codex-agents/、examples/airbnb/、examples/agent-architecture/ - 設定、mp4、アニメーション付きのpreview.webp。examples/ring/、examples/funnel/、examples/funnel-karpathy/（対数スケール、単色パレット）、examples/loop-poteto/（判断を含むグループ化ループ） - 表示例。
• assets/views/<kind>.js - ビューごとに1ファイル。references/views.md、references/view-rules.md、references/verify-view.md、scripts/verify_view.py。

ライトテーマの注意点

インフォグラフィックでは元の色と構成を維持し、モーションは控えめにします。すべての矢印に沿って小さなパケットを流し、状態に結び付いた矢印はアクセントカラーに変わって2つのパケットを運び、アクティブなボックスには光彩を付けます。リスト（ステップ、ツール）は、1つの共有cycleマシンによって1行ずつ点灯させ、画面上のすべての要素が同じステップを示すようにします。ボックスの中に別のボックスがある場合はcontainer:trueを指定して、チェッカーが入れ子のボックスを重なりと判定しないようにします。ボックス上に置くアイコンテキストにはinside:trueを指定します。

クレジットのルール

動画のフッター（credit）と投稿には、動画でアニメーションとして再現または描き直した画像の原作者とリンクを必ず記載してください。作者のハンドル名と、ユーザーが指定した完全なURLをそのまま記載します（例：原図：小紅書 @作者《タイトル》 https://... · アニメーションによる再現であり、原作者の作品ではありません）。ハンドル名またはリンクの片方だけでは不十分です。実在する図の出典（レポートやインタビューなど）がユーザーから提示された場合は、その出典もcreditに記載します。図がシミュレーションである場合は、その旨を明記します。