@agent-native/core 0.79.26 → 0.80.0

package/corpus/core/docs/content/locales/ja-JP/template-brain.mdx

@@ -19,13 +19,76 @@ Brain は、承認された Slack チャンネル、クリップ録画、グラ
 経験、**ソース**、**レビュー**、**ナレッジ**は管理者/サポートです
 データの接続、提案の承認、引用されたメモリの検査のための表面。
 
-```an-diagram title="出典から引用された回答まで" summary="Brain は、承認された情報源を生のキャプチャに取り込み、耐久性のある記憶を抽出し、レビューを通じてそれをゲートし、その後のみ引用で回答します。"
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-card\"><span class=\"diagram-pill\">Sources</span><small class=\"diagram-muted\">Slack · Granola · GitHub · Clips · webhooks</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>未加工キャプチャ<br><small class=\"diagram-muted\">重複排除済み、編集済み</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Distill<br><small class=\"diagram-muted\">事実 · 決定 · プロセス</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill warn\">Review</span><small class=\"diagram-muted\">sensitive / low-confidence queue</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough><span class=\"diagram-pill ok\">Knowledge</span><small class=\"diagram-muted\">承認済み、アトミック</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Ask</span><small class=\"diagram-muted\">cited answer</small></div></div>",
-  "css": ".diagram-flow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.diagram-flow .diagram-card{display:flex;flex-direction:column;gap:4px;padding:10px 12px}.diagram-flow .diagram-box{display:flex;flex-direction:column;gap:4px}.diagram-flow .diagram-arrow{font-size:20px;line-height:1}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-1iwsjf9" title={"出典から引用された回答まで"} summary={"Brain は、承認された情報源を生のキャプチャに取り込み、耐久性のある記憶を抽出し、レビューを通じてそれをゲートし、その後のみ引用で回答します。"}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-card">
+    <span class="diagram-pill">Sources</span
+    ><small class="diagram-muted"
+      >Slack · Granola · GitHub · Clips · webhooks</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    未加工キャプチャ<br /><small class="diagram-muted"
+      >重複排除済み、編集済み</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    Distill<br /><small class="diagram-muted">事実 · 決定 · プロセス</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill warn">Review</span
+    ><small class="diagram-muted">sensitive / low-confidence queue</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    <span class="diagram-pill ok">Knowledge</span
+    ><small class="diagram-muted">承認済み、アトミック</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Ask</span
+    ><small class="diagram-muted">cited answer</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-flow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.diagram-flow .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px 12px;
+}
+.diagram-flow .diagram-box {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 <WireframeBlock id="doc-block-tzkwfd">
   <Screen
     surface="desktop"

package/corpus/core/docs/content/locales/ja-JP/template-calendar.mdx

@@ -18,13 +18,71 @@ description: "Google Calendar 同期と Calendly スタイルの予約リンク
 
 アプリを開くと、アクティブなカレンダー ビューが主な画面になります。エージェントは、あなたがどの曜日、週、またはイベントを見ているのかを把握しているため、すべてを詳しく説明しなくても、「この日にアレックスとの 30 分間の通話をスケジュールしてください」と言うことができます。
 
-```an-diagram title="スケジュールリクエストの流れ" summary="カレンダー内をクリックするか、エージェントに問い合わせるかにかかわらず、同じアクションが Google Calendar からライブで読み込まれ、同じビューに書き戻されます。"
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-col\"><div class=\"diagram-node\">クリックする<br><small class=\"diagram-muted\">ドラッグ、ツールバー、ショートカット</small></div><div class=\"diagram-node\">エージェントに依頼<br><small class=\"diagram-muted\">\"find a 1-hour slot next week\"</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Actions</span><small class=\"diagram-muted\">list-events · check-availability · create-event</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">Google Calendar<br><small class=\"diagram-muted\">ライブ、複数アカウント</small></div><div class=\"diagram-box\">SQL<br><small class=\"diagram-muted\">予約 · 空き状況</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-box\">カレンダー表示がライブ更新されます</div></div>",
-  "css": ".diagram-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-flow .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-12iygmb" title={"スケジュールリクエストの流れ"} summary={"カレンダー内をクリックするか、エージェントに問い合わせるかにかかわらず、同じアクションが Google Calendar からライブで読み込まれ、同じビューに書き戻されます。"}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      クリックする<br /><small class="diagram-muted"
+        >ドラッグ、ツールバー、ショートカット</small
+      >
+    </div>
+    <div class="diagram-node">
+      エージェントに依頼<br /><small class="diagram-muted"
+        >"find a 1-hour slot next week"</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Actions</span
+    ><small class="diagram-muted"
+      >list-events · check-availability · create-event</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">
+      Google Calendar<br /><small class="diagram-muted"
+        >ライブ、複数アカウント</small
+      >
+    </div>
+    <div class="diagram-box">
+      SQL<br /><small class="diagram-muted">予約 · 空き状況</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+  <div class="diagram-box">カレンダー表示がライブ更新されます</div>
+</div>
+```
+
+```css
+.diagram-flow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-flow .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## それを使って何ができるか
 
 - **複数のアカウントを重ね合わせて、日、週、月のビューで実際の Google Calendar を確認します**。

package/corpus/core/docs/content/locales/ja-JP/template-chat.mdx

@@ -37,13 +37,70 @@ description: "最小限のチャットファーストのエージェントネイ
 
 それがポイントです。 Chat は、汎用のふりをしたドメイン製品ではなく、独自のエージェント用の薄くて便利なデフォルト シェルです。
 
-```an-diagram title="Chat シェルに同梱されるもの" summary="フレームワークの標準ランタイム (アクション、耐久性のあるスレッド、ライブ同期、認証) 上の薄いチャット サーフェス。独自の UI を追加する余地があります。"
-{
-  "html": "<div class=\"diagram-chat\"><div class=\"diagram-col left\"><div class=\"diagram-node\">スレッド一覧<br><small class=\"diagram-muted\">作成 · 再開 · 固定 · アーカイブ</small></div><div class=\"diagram-node\">全画面チャット<br><small class=\"diagram-muted\">/ 上のフレームワークチャット画面</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Actions</span><small class=\"diagram-muted\">hello.ts · view-screen · navigate</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col right\"><div class=\"diagram-box\">コア SQL テーブル<br><small class=\"diagram-muted\">threads · application_state · settings · sessions · runs</small></div><div class=\"diagram-pill ok\">ライブ同期 &#8635;</div><div class=\"diagram-box\">Better Auth<br><small class=\"diagram-muted\">ログイン · 組織 · セッション</small></div></div></div>",
-  "css": ".diagram-chat{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-chat .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-chat .diagram-arrow{font-size:22px;line-height:1}.diagram-chat .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-1u9gn9x" title={"Chat シェルに同梱されるもの"} summary={"フレームワークの標準ランタイム (アクション、耐久性のあるスレッド、ライブ同期、認証) 上の薄いチャット サーフェス。独自の UI を追加する余地があります。"}>
+
+```html
+<div class="diagram-chat">
+  <div class="diagram-col left">
+    <div class="diagram-node">
+      スレッド一覧<br /><small class="diagram-muted"
+        >作成 · 再開 · 固定 · アーカイブ</small
+      >
+    </div>
+    <div class="diagram-node">
+      全画面チャット<br /><small class="diagram-muted"
+        >/ 上のフレームワークチャット画面</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Actions</span
+    ><small class="diagram-muted">hello.ts · view-screen · navigate</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col right">
+    <div class="diagram-box">
+      コア SQL テーブル<br /><small class="diagram-muted"
+        >threads · application_state · settings · sessions · runs</small
+      >
+    </div>
+    <div class="diagram-pill ok">ライブ同期 &#8635;</div>
+    <div class="diagram-box">
+      Better Auth<br /><small class="diagram-muted"
+        >ログイン · 組織 · セッション</small
+      >
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-chat {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-chat .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-chat .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-chat .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## いつ選択するか {#when-to-pick}
 
 - **ユーザーがすぐに会話できる基本的なアプリが必要です**。その後、actions および UI で拡張できます。

package/corpus/core/docs/content/locales/ja-JP/template-clips.mdx

@@ -19,13 +19,61 @@ search: "クリップ ブラウザ ログ 開発者ログ コンソール ログ
 
 Loom + Granola + Wispr Flow を 1 つのアプリに統合したものと考えてください。ただし、エージェントはあらゆる面で一流の編集者であり、録音、会議、口述筆記は SaaS ベンダーのものではなく、あなたのものになります。また、Clips では、共有録画をエージェントが読み取り可能にします。通常の Clips 共有リンクをエージェントに貼り付けると、トランスクリプトをテキストとして「聞く」ことができ、タイムスタンプ付きの画面フレームを画像として「見る」ことができます。生のビデオは必要ありません。フレーム表示は、画像対応エージェント (ChatGPT、Claude コード、カーソル、Codex) で動作します。テキストのみの Web チャットでも完全なトランスクリプトを取得し、アップロードしたフレームを取得できます。
 
-```an-diagram title="キャプチャ、転写、再利用" summary="3 つのキャプチャ タイプが 1 つのライブラリに含まれます。エージェントが文字起こし、タイトル付け、要約を行うと、すべての文字起こしが検索可能で共有可能になります。"
-{
-  "html": "<div class=\"diagram-clips\"><div class=\"diagram-col\"><div class=\"diagram-node\">画面録画</div><div class=\"diagram-node\">カレンダー会議</div><div class=\"diagram-node\">Fn 長押しディクテーション</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>1 つのライブラリ<br><small class=\"diagram-muted\">recordings + transcripts (SQL)</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Agent</span><small class=\"diagram-muted\">タイトル · 要約 · 章</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-pill\">検索</div><div class=\"diagram-pill\">共有</div><div class=\"diagram-pill\">エージェント可読 links</div></div></div>",
-  "css": ".diagram-clips{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-clips .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-clips .center{display:flex;flex-direction:column;align-items:center;gap:4px}.diagram-clips .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-yrru34" title={"キャプチャ、転写、再利用"} summary={"3 つのキャプチャ タイプが 1 つのライブラリに含まれます。エージェントが文字起こし、タイトル付け、要約を行うと、すべての文字起こしが検索可能で共有可能になります。"}>
+
+```html
+<div class="diagram-clips">
+  <div class="diagram-col">
+    <div class="diagram-node">画面録画</div>
+    <div class="diagram-node">カレンダー会議</div>
+    <div class="diagram-node">Fn 長押しディクテーション</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    1 つのライブラリ<br /><small class="diagram-muted"
+      >recordings + transcripts (SQL)</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Agent</span
+    ><small class="diagram-muted">タイトル · 要約 · 章</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-pill">検索</div>
+    <div class="diagram-pill">共有</div>
+    <div class="diagram-pill">エージェント可読 links</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-clips {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-clips .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-clips .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.diagram-clips .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## それを使って何ができるか
 
 - **内蔵レコーダー、ウェブカメラ オーバーレイ、オーディオ キャプチャ、一時停止/トリムを使用して画面を録画**します。

package/corpus/core/docs/content/locales/ja-JP/template-content.mdx

@@ -22,13 +22,71 @@ description: "オープンソースの Obsidian for MDX: ローカルの Markdow
 
 アプリを開くと、エディターの横にページ ツリーが表示されます。エージェントは、ユーザーが表示しているページと選択したテキストを常に把握しているため、ドキュメントの編集は現在のページに基づいて行うことができます。
 
-```an-diagram title="1 つのドキュメントに多数の編集者" summary="あなたとエージェントは両方とも同じ Yjs パイプラインを通じて書き込みます。 SQL は正規ストアです。ローカル ファイルと Notion はオプションの同期サーフェスです。"
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-col\"><div class=\"diagram-node\">入力する<br><small class=\"diagram-muted\">slash メニュー、ツールバー</small></div><div class=\"diagram-node\">エージェント編集<br><small class=\"diagram-muted\">edit-document find/replace</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Yjs CRDT</span><small class=\"diagram-muted\">ライブ、競合なしマージ</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">documents (markdown)<br><small class=\"diagram-muted\">正規 SQL ストア</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">ローカル .md / .mdx<br><small class=\"diagram-muted\">/local-files</small></div><div class=\"diagram-box\">Notion ページ<br><small class=\"diagram-muted\">pull · push</small></div></div></div>",
-  "css": ".diagram-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-flow .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-17olwgs" title={"1 つのドキュメントに多数の編集者"} summary={"あなたとエージェントは両方とも同じ Yjs パイプラインを通じて書き込みます。 SQL は正規ストアです。ローカル ファイルと Notion はオプションの同期サーフェスです。"}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      入力する<br /><small class="diagram-muted"
+        >slash メニュー、ツールバー</small
+      >
+    </div>
+    <div class="diagram-node">
+      エージェント編集<br /><small class="diagram-muted"
+        >edit-document find/replace</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Yjs CRDT</span
+    ><small class="diagram-muted">ライブ、競合なしマージ</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    documents (markdown)<br /><small class="diagram-muted"
+      >正規 SQL ストア</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&harr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">
+      ローカル .md / .mdx<br /><small class="diagram-muted">/local-files</small>
+    </div>
+    <div class="diagram-box">
+      Notion ページ<br /><small class="diagram-muted">pull · push</small>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-flow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-flow .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## それを使って何ができるか
 
 - **見出し、リスト、表、コード ブロック、画像、リンクを含むリッチ テキストを作成します**。スラッシュ コマンド (`/`) はブロックを挿入します。テキストを選択すると、書式設定ツールバーがポップアップ表示されます。

package/corpus/core/docs/content/locales/ja-JP/template-design.mdx

@@ -18,13 +18,69 @@ Design は、エージェントネイティブの HTML プロトタイピング
 
 アプリを開くと、生成されたプロトタイプがワークスペースの中心となり、プレビュー モード、プロンプト リビジョン、およびエクスポート コントロールがすぐ近くにあります。エージェントが生成するものはすべて本物の HTML であり、調整したり、エクスポートしたり、引き渡したりすることができます。
 
-```an-diagram title="成果物は 1 つ、翻訳なし" summary="エージェントはスタンドアロン Alpine/Tailwind HTML を生成します。 iframe、編集可能なソース、およびすべてのエクスポートはすべて同じファイルを読み取ります。リンクされた設計システムは、トークンを各パスに供給します。"
-{
-  "html": "<div class=\"diagram-design\"><div class=\"diagram-col\"><div class=\"diagram-node\">プロンプト<br><small class=\"diagram-muted\">describe screen / page</small></div><div class=\"diagram-pill\">デザインシステム</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough><span class=\"diagram-pill accent\">エージェント生成</span><small class=\"diagram-muted\">独立したHTML / JSXファイル</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>iframe preview<br><small class=\"diagram-muted\">ノブを調整 · Cmd+Iで refine</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill ok\">Export</span><small class=\"diagram-muted\">HTML · ZIP · PDF · 引き継ぎ</small></div></div>",
-  "css": ".diagram-design{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-design .diagram-col{display:flex;flex-direction:column;gap:8px;align-items:flex-start}.diagram-design .diagram-box{display:flex;flex-direction:column;gap:4px}.diagram-design .diagram-arrow{font-size:20px;line-height:1}.diagram-design .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-1u8a9cl" title={"成果物は 1 つ、翻訳なし"} summary={"エージェントはスタンドアロン Alpine/Tailwind HTML を生成します。 iframe、編集可能なソース、およびすべてのエクスポートはすべて同じファイルを読み取ります。リンクされた設計システムは、トークンを各パスに供給します。"}>
+
+```html
+<div class="diagram-design">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      プロンプト<br /><small class="diagram-muted"
+        >describe screen / page</small
+      >
+    </div>
+    <div class="diagram-pill">デザインシステム</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    <span class="diagram-pill accent">エージェント生成</span
+    ><small class="diagram-muted">独立したHTML / JSXファイル</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    iframe preview<br /><small class="diagram-muted"
+      >ノブを調整 · Cmd+Iで refine</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill ok">Export</span
+    ><small class="diagram-muted">HTML · ZIP · PDF · 引き継ぎ</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-design {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-design .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: flex-start;
+}
+.diagram-design .diagram-box {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.diagram-design .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
+}
+.diagram-design .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## いつ選択するか
 
 - \*\*レイヤー化された描画キャンバスではなく、ツールを実際の HTML のままにできる、洗練されたランディング ページのコンセプト、製品 UI の方向性、またはブランド探索が必要です。
@@ -294,6 +350,52 @@ UI のルートは `templates/design/app/routes/` の下にあります: `_index
 
 デザインは単なるスタンドアロンの HTML/JSX ファイルであるため、エージェントは iframe がレンダリングし、すべてのエクスポート元と同じソースを編集します。変換する個別の「AI モックアップ」形式はありません。リンクされた設計システムはトークンと `custom_instructions` を提供し、エージェントは世代パスごとにそれを尊重します。プレビューでテキストまたは領域を選択し、Cmd+I を押して、エージェントをその部分に正確に集中させます。
 
+### エディターモデル
+
+Design は複数画面の作業では概要を最初に使います。生成後または大きな更
+新後、エディターは画面概要を開きます。これは無限キャンバスで、各画面は
+選択、移動、リサイズ、ドロップ、複製できる静的フレームです。集中スクロールやプロトタイプ操作が必要な画面では、フレームのフルビューボタンを使用します。
+
+単一画面モードは、スクロール、プロトタイプ動作とのインタラクション、1
+つのレンダリング済みファイル内の DOM/コードレイヤー編集に使います。レ
+イヤーパネルもこの分離を反映します。画面は最上位フレームで、アクティブ
+画面の下に DOM/コードレイヤーがネストされます。
+
+安定したレイヤー名には、意味のある要素に
+`data-agent-native-layer-name` を追加します。Design はセマンティック/テ
+キストのフォールバックより先にこれを使い、この属性を編集してレイヤー名
+変更を永続化できます。Inline HTML は、テキスト、class、style、attribute、
+ソース順、小さな構造変更のローカルコードレイヤー編集をサポートします。
+ビジュアルコードレイヤー編集は現在 HTML のみです。Localhost source mode
+はローカル route artboard を登録・解決できますが、ローカルファイルの読
+み書きは明示的な権限制御が強化されるまで bridge contract のままです。
+
+### Design エディター拡張機能
+
+エディターには **Tweaks** の後に **Extensions** インスペクタータブがあり
+ます。これは Design 専用のプラグインレーンのように機能します。ユーザー
+は **+ Extension** をクリックしてエージェントに拡張機能を作成させるか、
+`design.editor.inspector` スロットを宣言する拡張機能をインストールできま
+す。
+
+Design 拡張機能は、標準の拡張機能サンドボックスを通じてアートボードの
+横にインライン表示されます。ホストは `window.slotContext` と
+`window.onSlotContext(...)` の更新として、現在の `designId`、アクティブ
+なファイル、画面一覧、選択中の画面 ID、選択中の要素メタデータ、表示モー
+ド、ズーム、アクティブツール、tweak 値を渡します。これにより、拡張機能
+は現在の選択に関する情報を表示したり、スタイル操作を提供したり、開いて
+いるデザインの周辺に小さなワークフローを構築したりできます。
+
+決定的な処理では、拡張機能は拡張機能ブリッジ経由で app actions を呼び
+出せます。AI 主導の変更では、選択中の要素 selector/source id と要求され
+た変更を含めて `agentNative.chat.send(...)` を呼び出すようにします。エー
+ジェントはまず `view-screen` を呼び出し、要素の style、class、text、move
+変更には `apply-visual-edit` を、アートボード配置の変更には `canvasFrames`
+付きの `update-design` / `generate-design` を使うべきです。サンドボックス、
+永続状態、ブリッジ API については
+[Extensions](/docs/extensions#what-an-extension-can-do) を参照してくださ
+い。
+
 ### カスタマイズ
 
 デザインは完全な複製可能なテンプレートです。いくつかの実践的な拡張アイデア:

package/corpus/core/docs/content/locales/ja-JP/template-dispatch.mdx

@@ -20,13 +20,66 @@ Dispatch は **ワークスペース コントロール プレーン**です。
 
 [multi-app workspace](/docs/multi-app-workspace) を多くのアプリで実行している場合、Dispatch がその役割を果たします。
 
-```an-diagram title="専門化せずにオーケストレーションする" summary="すべてのチャネルからのメッセージが 1 つの受信箱に届きます。オーケストレーターは、A2A を介してドメインの作業を優先順位付けし、適切な専門アプリに委任します。シークレット、リソース、承認は中心的な役割を果たします。"
-{
-  "html": "<div class=\"diagram-dispatch\"><div class=\"diagram-col\"><div class=\"diagram-node\">Slack · Telegram</div><div class=\"diagram-node\">Email</div><div class=\"diagram-node\">A2Aリクエスト</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough><span class=\"diagram-pill accent\">Orchestrator</span><small class=\"diagram-muted\">中央受信箱 · トリアージ · ルーティング</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-node\">Mail エージェント</div><div class=\"diagram-node\">Analytics エージェント</div><div class=\"diagram-node\">Brain · Slides &hellip;</div></div></div><div class=\"diagram-shared\"><span class=\"diagram-pill\">シークレット保管庫</span><span class=\"diagram-pill\">ワークスペースリソース</span><span class=\"diagram-pill warn\">Approvals</span><span class=\"diagram-pill\">スケジュール済みジョブ</span></div>",
-  "css": ".diagram-dispatch{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-dispatch .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-dispatch .diagram-box{display:flex;flex-direction:column;gap:4px}.diagram-dispatch .diagram-arrow{font-size:20px;line-height:1}.diagram-shared{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}"
+<Diagram id="doc-block-1rzdgj8" title={"専門化せずにオーケストレーションする"} summary={"すべてのチャネルからのメッセージが 1 つの受信箱に届きます。オーケストレーターは、A2A を介してドメインの作業を優先順位付けし、適切な専門アプリに委任します。シークレット、リソース、承認は中心的な役割を果たします。"}>
+
+```html
+<div class="diagram-dispatch">
+  <div class="diagram-col">
+    <div class="diagram-node">Slack · Telegram</div>
+    <div class="diagram-node">Email</div>
+    <div class="diagram-node">A2Aリクエスト</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    <span class="diagram-pill accent">Orchestrator</span
+    ><small class="diagram-muted">中央受信箱 · トリアージ · ルーティング</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-node">Mail エージェント</div>
+    <div class="diagram-node">Analytics エージェント</div>
+    <div class="diagram-node">Brain · Slides &hellip;</div>
+  </div>
+</div>
+<div class="diagram-shared">
+  <span class="diagram-pill">シークレット保管庫</span
+  ><span class="diagram-pill">ワークスペースリソース</span
+  ><span class="diagram-pill warn">Approvals</span
+  ><span class="diagram-pill">スケジュール済みジョブ</span>
+</div>
+```
+
+```css
+.diagram-dispatch {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-dispatch .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-dispatch .diagram-box {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.diagram-dispatch .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
+}
+.diagram-shared {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: 12px;
 }
 ```
 
+</Diagram>
+
 ## 機能 {#what-it-does}
 
 - **中央受信箱。** SlackのDM、電報メッセージ、電子メール通知、他のエージェントからの A2A リクエストはすべて 1 か所に届きます。 Dispatch エージェントはトリアージを行い、それ自体または代理でそれらを処理します。 Slack、電子メール、テレグラムをワークスペースに接続する方法については、[Messaging](/docs/messaging) を参照してください。