@agent-native/core 0.79.26 → 0.80.0

package/corpus/core/docs/content/locales/ko-KR/getting-started.mdx

@@ -152,13 +152,43 @@ pnpm dev
 이제 해당 작업은 UI, CLI, HTTP, MCP, A2A,
 예약된 작업 및 webhooks. 한 번 정의하면 어디에서나 전화할 수 있습니다.
 
-```an-diagram title="하나의 작업, 모든 표면" summary="추가 배선 없이 단일 defineAction 파일이 모든 소비자에게 전달됩니다."
-{
-  "html": "<div class=\"diagram-fan\"><div class=\"diagram-box\" data-rough>defineAction</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-surfaces\"><span class=\"diagram-pill\">채팅 UI</span><span class=\"diagram-pill\">CLI</span><span class=\"diagram-pill\">HTTP</span><span class=\"diagram-pill\">MCP</span><span class=\"diagram-pill\">A2A</span><span class=\"diagram-pill\">예약된 작업</span><span class=\"diagram-pill\">Webhooks</span></div></div>",
-  "css": ".diagram-fan{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-fan .diagram-surfaces{display:flex;flex-wrap:wrap;gap:8px;max-width:420px}.diagram-fan .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1gct831" title={"하나의 작업, 모든 표면"} summary={"추가 배선 없이 단일 defineAction 파일이 모든 소비자에게 전달됩니다."}>
+
+```html
+<div class="diagram-fan">
+  <div class="diagram-box" data-rough>defineAction</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-surfaces">
+    <span class="diagram-pill">채팅 UI</span
+    ><span class="diagram-pill">CLI</span><span class="diagram-pill">HTTP</span
+    ><span class="diagram-pill">MCP</span><span class="diagram-pill">A2A</span
+    ><span class="diagram-pill">예약된 작업</span
+    ><span class="diagram-pill">Webhooks</span>
+  </div>
+</div>
+```
+
+```css
+.diagram-fan {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-fan .diagram-surfaces {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  max-width: 420px;
+}
+.diagram-fan .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## 상태 내장
 
 헤드리스(headless)는 무국적(stateless)을 의미하지 않습니다. Actions, 세션, 애플리케이션 상태, 스레드,

package/corpus/core/docs/content/locales/ko-KR/harness-agents.mdx

@@ -23,13 +23,54 @@ search: "하네스 에이전트 AgentHarness ai-sdk HarnessAgent Claude 코드 C
 자체 루프가 엔드투엔드이므로 Agent-Native는 이를 단일이 아닌 세션으로 구동합니다
 모델 통화.
 
-```an-diagram title="하네스는 루프를 소유합니다. Agent-Native이 세션을 구동합니다." summary="AgentHarness 기판은 기본 세션을 creates/resumes하고 해당 이벤트를 일반 기록으로 스트리밍하며 턴 사이에 SQL에서 이력서 상태를 유지합니다."
-{
-  "html": "<div class=\"diagram-harness\"><div class=\"diagram-box\" data-rough><strong>AgentHarness substrate</strong><small class=\"diagram-muted\">@agent-native/core/agent/harness</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><strong>Native harness loop</strong><small class=\"diagram-muted\">Claude Code · Codex · Pi — own tools, sandbox, compaction</small></div><div class=\"diagram-col\"><div class=\"diagram-pill accent\">events &rarr; transcript</div><div class=\"diagram-pill ok\">resumeState &rarr; SQL session</div></div></div>",
-  "css": ".diagram-harness{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-harness .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-harness .diagram-arrow{font-size:22px;line-height:1}.diagram-harness .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-15vqyqp" title={"하네스는 루프를 소유합니다. Agent-Native이 세션을 구동합니다."} summary={"AgentHarness 기판은 기본 세션을 creates/resumes하고 해당 이벤트를 일반 기록으로 스트리밍하며 턴 사이에 SQL에서 이력서 상태를 유지합니다."}>
+
+```html
+<div class="diagram-harness">
+  <div class="diagram-box" data-rough>
+    <strong>AgentHarness substrate</strong
+    ><small class="diagram-muted">@agent-native/core/agent/harness</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    <strong>Native harness loop</strong
+    ><small class="diagram-muted"
+      >Claude Code · Codex · Pi — own tools, sandbox, compaction</small
+    >
+  </div>
+  <div class="diagram-col">
+    <div class="diagram-pill accent">events &rarr; transcript</div>
+    <div class="diagram-pill ok">resumeState &rarr; SQL session</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-harness {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-harness .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-harness .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-harness .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## 어떤 코딩 문서를 원하나요? {#which-doc}
 
 | 원하는 것은...                                                           | 사용                                         |
@@ -213,13 +254,41 @@ const run = startAgentHarnessRun({
 **불투명** — Agent-Native는 이를 저장하고 돌려주지만 결코 검사하거나
 해석합니다.
 
-```an-diagram title="차례, 프로세스, 배포 전반에 걸쳐 재개" summary="매 턴마다 불투명한 이력서 상태를 SQL로 분리합니다. 다음 차례에서는 채팅 기록을 재생하는 대신 createSession에 다시 피드백합니다."
-{
-  "html": "<div class=\"diagram-resume\"><div class=\"diagram-node\" data-rough>턴 N<br><small class=\"diagram-muted\">streamTurn</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>detach &rarr; resumeState<br><small class=\"diagram-muted\">불투명 · SQL harness 세션</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\" data-rough>턴 N+1<br><small class=\"diagram-muted\">createSession.resumeState</small></div></div>",
-  "css": ".diagram-resume{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-resume .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-v2i6m2" title={"차례, 프로세스, 배포 전반에 걸쳐 재개"} summary={"매 턴마다 불투명한 이력서 상태를 SQL로 분리합니다. 다음 차례에서는 채팅 기록을 재생하는 대신 createSession에 다시 피드백합니다."}>
+
+```html
+<div class="diagram-resume">
+  <div class="diagram-node" data-rough>
+    턴 N<br /><small class="diagram-muted">streamTurn</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    detach &rarr; resumeState<br /><small class="diagram-muted"
+      >불투명 · SQL harness 세션</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node" data-rough>
+    턴 N+1<br /><small class="diagram-muted">createSession.resumeState</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-resume {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-resume .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ```ts
 import {
   getLatestAgentHarnessSessionForThread,

package/corpus/core/docs/content/locales/ko-KR/human-approval.mdx

@@ -82,13 +82,59 @@ description: "결과가 높은 작업이 실행되기 전에 에이전트를 일
 
 ## 엔드 투 엔드 {#flow}
 
-```an-diagram title="승인 중단" summary="게이트 호출은 run()이 실행되기 전에 차례를 일시 중지합니다. 승인은 통화 키를 가지고 있는 차례를 재발행합니다. 그래야만 부작용이 발생합니다."
-{
-  "html": "<div class=\"diagram-approve\"><div class=\"diagram-box\" data-rough>에이전트가 send-email 호출</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-panel warn\" data-rough><strong>Gate가 참, 호출은 아직 미승인</strong><small class=\"diagram-muted\">loop emits tool_start + approval_required { tool, input, approvalKey }</small><span class=\"diagram-pill warn\">turn pauses &mdash; run() did NOT execute</span></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>사람이 채팅에서 승인 클릭<br><small class=\"diagram-muted\">클라이언트가 approvedToolCalls: [approvalKey]로 턴 재발행</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-panel ok\" data-rough><span class=\"diagram-pill ok\">Gate sees the key &rarr; run() executes &rarr; email sends</span></div></div>",
-  "css": ".diagram-approve{display:flex;flex-direction:column;align-items:center;gap:8px}.diagram-approve .diagram-panel{display:flex;flex-direction:column;gap:6px;align-items:center;padding:12px 16px;text-align:center}.diagram-approve .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-va61ua" title={"승인 중단"} summary={"게이트 호출은 run()이 실행되기 전에 차례를 일시 중지합니다. 승인은 통화 키를 가지고 있는 차례를 재발행합니다. 그래야만 부작용이 발생합니다."}>
+
+```html
+<div class="diagram-approve">
+  <div class="diagram-box" data-rough>에이전트가 send-email 호출</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-panel warn" data-rough>
+    <strong>Gate가 참, 호출은 아직 미승인</strong
+    ><small class="diagram-muted"
+      >loop emits tool_start + approval_required { tool, input, approvalKey
+      }</small
+    ><span class="diagram-pill warn"
+      >turn pauses &mdash; run() did NOT execute</span
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-box" data-rough>
+    사람이 채팅에서 승인 클릭<br /><small class="diagram-muted"
+      >클라이언트가 approvedToolCalls: [approvalKey]로 턴 재발행</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-panel ok" data-rough>
+    <span class="diagram-pill ok"
+      >Gate sees the key &rarr; run() executes &rarr; email sends</span
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-approve {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+.diagram-approve .diagram-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: center;
+  padding: 12px 16px;
+  text-align: center;
+}
+.diagram-approve .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 프레임워크에서 이 게이트를 정식으로(의도적으로 드물게) 사용하는 것은 메일 템플릿의 `send-email` 작업으로, `needsApproval: true`를 설정하여 에이전트가 자유롭게 초안을 작성하고 대기열에 추가할 수 있지만 사람이 특정 전송을 승인하지 않으면 실제로 메시지를 보낼 수는 없습니다.
 
 ## 관련

package/corpus/core/docs/content/locales/ko-KR/key-concepts.mdx

@@ -17,13 +17,67 @@ description: "에이전트 네이티브 앱 작동 방식: actions 우선, SQL
 >
 > **컴퓨터** — 데이터베이스, 브라우저, 코드 실행. 에이전트는 SQL 및 내장 도구를 사용하여 직접 작업합니다. MCP 서버는 기본이 아닌 선택적인 추가 기능입니다.
 
-```an-diagram title="에이전트, 애플리케이션 및 컴퓨터" summary="하나의 공유 SQL 저장소에서 세 개의 레이어가 함께 작동합니다. 에이전트와 애플리케이션은 모두 동일한 데이터를 읽고 씁니다."
-{
-  "html": "<div class=\"diagram-arch\"><div class=\"diagram-row\"><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Agent</span><small class=\"diagram-muted\">데이터를 읽고 쓰고, actions를 실행하고, 코드를 수정</small></div><div class=\"diagram-card\"><span class=\"diagram-pill\">Application</span><small class=\"diagram-muted\">action 전용, 채팅, 제어 평면 또는 전체 React UI 화면</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;&nbsp;&uarr;</div><div class=\"diagram-box\" data-rough>Computer<br><small class=\"diagram-muted\">SQL 데이터베이스 · browser · code execution</small></div></div>",
-  "css": ".diagram-arch{display:flex;flex-direction:column;align-items:center;gap:10px}.diagram-arch .diagram-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.diagram-arch .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;min-width:220px}.diagram-arch .diagram-arrow{font-size:20px;line-height:1}.diagram-arch .diagram-box{text-align:center;padding:12px 18px}"
+<Diagram id="doc-block-nxqkcw" title={"에이전트, 애플리케이션 및 컴퓨터"} summary={"하나의 공유 SQL 저장소에서 세 개의 레이어가 함께 작동합니다. 에이전트와 애플리케이션은 모두 동일한 데이터를 읽고 씁니다."}>
+
+```html
+<div class="diagram-arch">
+  <div class="diagram-row">
+    <div class="diagram-card">
+      <span class="diagram-pill accent">Agent</span
+      ><small class="diagram-muted"
+        >데이터를 읽고 쓰고, actions를 실행하고, 코드를 수정</small
+      >
+    </div>
+    <div class="diagram-card">
+      <span class="diagram-pill">Application</span
+      ><small class="diagram-muted"
+        >action 전용, 채팅, 제어 평면 또는 전체 React UI 화면</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">
+    &darr;&nbsp;&uarr;
+  </div>
+  <div class="diagram-box" data-rough>
+    Computer<br /><small class="diagram-muted"
+      >SQL 데이터베이스 · browser · code execution</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-arch {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+.diagram-arch .diagram-row {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.diagram-arch .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  min-width: 220px;
+}
+.diagram-arch .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
+}
+.diagram-arch .diagram-box {
+  text-align: center;
+  padding: 12px 18px;
 }
 ```
 
+</Diagram>
+
 헤드리스 앱은 `pnpm agent`를 사용하여 폴더에서 동일한 프로덕션 앱-에이전트 루프를 실행할 수 있는 반면, UI 앱은 내장된 에이전트 패널을 마운트하고 `pnpm dev`를 사용하여 로컬로 실행할 수 있습니다. 클라우드에서 Builder.io는 협업, 시각적 편집 및 팀을 위한 관리형 인프라를 갖춘 관리형 프레임(앱 옆에 에이전트를 호스팅하는 환경)을 제공합니다.
 
 ## 에이전트 빌딩 블록 {#agent-building-blocks}
@@ -273,13 +327,55 @@ useDbSync({ queryClient });
 4. `useActionQuery` 후크 및 소스 버전 `useQuery` 후크 다시 가져오기
 5. 구성 요소는 페이지를 다시 로드하지 않고도 새 데이터를 렌더링합니다.
 
-```an-diagram title="라이브 동기화 흐름" summary="에이전트 쓰기는 수동 새로 고침 없이 UI 렌더링이 됩니다. 먼저 SSE, 범용 폴백으로 폴링됩니다."
-{
-  "html": "<div class=\"diagram-sync\"><div class=\"diagram-node\">에이전트 작업<br><small class=\"diagram-muted\">DB에 기록</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">변경 이벤트<br><small class=\"diagram-muted\">source: action / settings</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">useDbSync</span><small class=\"diagram-muted\">SSE &middot; poll fallback</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">쿼리 다시 가져오기<br><small class=\"diagram-muted\">새로고침 없이 렌더링</small></div></div>",
-  "css": ".diagram-sync{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.diagram-sync .diagram-arrow{font-size:22px;line-height:1}.diagram-sync .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 14px}"
+<Diagram id="doc-block-1il45gh" title={"라이브 동기화 흐름"} summary={"에이전트 쓰기는 수동 새로 고침 없이 UI 렌더링이 됩니다. 먼저 SSE, 범용 폴백으로 폴링됩니다."}>
+
+```html
+<div class="diagram-sync">
+  <div class="diagram-node">
+    에이전트 작업<br /><small class="diagram-muted">DB에 기록</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node">
+    변경 이벤트<br /><small class="diagram-muted"
+      >source: action / settings</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">useDbSync</span
+    ><small class="diagram-muted">SSE &middot; poll fallback</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node">
+    쿼리 다시 가져오기<br /><small class="diagram-muted"
+      >새로고침 없이 렌더링</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-sync {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.diagram-sync .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-sync .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 10px 14px;
 }
 ```
 
+</Diagram>
+
 이는 메모리 내 상태나 파일 시스템 감시자가 아닌 데이터베이스를 사용하기 때문에 서버리스 및 엣지를 포함한 모든 배포 환경에서 작동합니다.
 
 ## 프레임 {#frames}

package/corpus/core/docs/content/locales/ko-KR/local-file-mode.mdx

@@ -46,13 +46,65 @@ UI와 에이전트 actions는 두 모드 모두에서 동일한 모양을 유지
 편집자는 여전히 문서를 편집합니다. 차이점은 해당 문서가 해결되는지 여부입니다.
 SQL 행 또는 로컬 파일
 
-```an-diagram title="동일한 행동, 두 가지 진실 소스" summary="UI와 에이전트는 두 모드에서 동일한 작업을 호출합니다. 작업 계층은 각 호출이 SQL 행 또는 repo 파일로 확인되는지 여부를 결정합니다."
-{
-  "html": "<div class=\"diagram-mode\"><div class=\"diagram-col entry\"><div class=\"diagram-node\">콘텐츠 UI</div><div class=\"diagram-node\">에이전트 + actions<br><small class=\"diagram-muted\">list/get/update-document</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-row resolve\"><div class=\"diagram-panel\" data-rough><span class=\"diagram-pill accent\">데이터베이스 모드</span><small class=\"diagram-muted\">SQL rows via Drizzle</small><small class=\"diagram-muted\">호스팅 · 공유 · 댓글 · 기록</small></div><div class=\"diagram-panel\" data-rough><span class=\"diagram-pill ok\">Local File Mode</span><small class=\"diagram-muted\">repo files via agent-native.json</small><small class=\"diagram-muted\">Git 리뷰 · 코딩 에이전트 편집</small></div></div></div>",
-  "css": ".diagram-mode{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-mode .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-mode .diagram-arrow{font-size:22px;line-height:1}.diagram-mode .resolve{display:flex;gap:12px;flex-wrap:wrap}.diagram-mode .diagram-panel{display:flex;flex-direction:column;gap:4px;padding:12px 14px}"
+<Diagram id="doc-block-5u9k9g" title={"동일한 행동, 두 가지 진실 소스"} summary={"UI와 에이전트는 두 모드에서 동일한 작업을 호출합니다. 작업 계층은 각 호출이 SQL 행 또는 repo 파일로 확인되는지 여부를 결정합니다."}>
+
+```html
+<div class="diagram-mode">
+  <div class="diagram-col entry">
+    <div class="diagram-node">콘텐츠 UI</div>
+    <div class="diagram-node">
+      에이전트 + actions<br /><small class="diagram-muted"
+        >list/get/update-document</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-row resolve">
+    <div class="diagram-panel" data-rough>
+      <span class="diagram-pill accent">데이터베이스 모드</span
+      ><small class="diagram-muted">SQL rows via Drizzle</small
+      ><small class="diagram-muted">호스팅 · 공유 · 댓글 · 기록</small>
+    </div>
+    <div class="diagram-panel" data-rough>
+      <span class="diagram-pill ok">Local File Mode</span
+      ><small class="diagram-muted">repo files via agent-native.json</small
+      ><small class="diagram-muted">Git 리뷰 · 코딩 에이전트 편집</small>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-mode {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-mode .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-mode .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-mode .resolve {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-mode .diagram-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 14px;
 }
 ```
 
+</Diagram>
+
 ## 예시 저장소
 
 콘텐츠 작업공간은 다음과 같이 작을 수 있습니다:

package/corpus/core/docs/content/locales/ko-KR/mcp-apps.mdx

@@ -30,14 +30,70 @@ MCP 앱 확장을 지원하는 호스트의 경우 작업은 `mcpApp`를 사용
 
 제품 UI에 대한 일회성 일반 HTML MCP 앱을 직접 작성하지 마세요. 작업에 맞춤 표면이 필요한 경우 먼저 실제 앱 경로/구성요소를 추가하거나 재사용하고 해당 경로를 삽입하세요.
 
-```an-diagram title="MCP 앱 삽입 왕복" summary="작업의 링크 대상도 포함 대상입니다. 가능한 호스트는 동일한 서명된 앱 경로를 인라인으로 로드합니다. 다른 모든 사람들은 딥 링크로 돌아갑니다."
-{
-  "html": "<div class=\"diagram-embed\"><div class=\"diagram-card\" data-rough><strong>Action</strong><small class=\"diagram-muted\">`link` target = MCP App embed target</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\" data-rough><strong>embedApp()</strong><span class=\"diagram-pill accent\">create_embed_session</span><small class=\"diagram-muted\">mints short-lived embed session</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\" data-rough><strong>/_agent-native/embed/start</strong><small class=\"diagram-muted\">일회용 SQL ticket 교환</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\" data-rough><strong>Signed app route</strong><span class=\"diagram-pill ok\">실제 React 라우트</span><small class=\"diagram-muted\">short-lived browser session</small></div><div class=\"diagram-fallback\"><span class=\"diagram-pill warn\">MCP Apps 미지원</span><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>&quot;Open in … &rarr;&quot; deep link</div></div></div>",
-"css": ".diagram-embed{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-embed .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;min-width:140px}.diagram-embed .diagram-arrow{font-size:22px;line-height:1}.diagram-embed .diagram-fallback{display:flex;flex-direction:column;align-items:center;gap:6px;margin-inline-start:8px}"
-}
+<Diagram id="doc-block-9m5f26" title={"MCP 앱 삽입 왕복"} summary={"작업의 링크 대상도 포함 대상입니다. 가능한 호스트는 동일한 서명된 앱 경로를 인라인으로 로드합니다. 다른 모든 사람들은 딥 링크로 돌아갑니다."}>
+
+```html
+<div class="diagram-embed">
+  <div class="diagram-card" data-rough>
+    <strong>Action</strong
+    ><small class="diagram-muted">`link` target = MCP App embed target</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card" data-rough>
+    <strong>embedApp()</strong
+    ><span class="diagram-pill accent">create_embed_session</span
+    ><small class="diagram-muted">mints short-lived embed session</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card" data-rough>
+    <strong>/_agent-native/embed/start</strong
+    ><small class="diagram-muted">일회용 SQL ticket 교환</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card" data-rough>
+    <strong>Signed app route</strong
+    ><span class="diagram-pill ok">실제 React 라우트</span
+    ><small class="diagram-muted">short-lived browser session</small>
+  </div>
+  <div class="diagram-fallback">
+    <span class="diagram-pill warn">MCP Apps 미지원</span>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+    <div class="diagram-box" data-rough>
+      &quot;Open in … &rarr;&quot; deep link
+    </div>
+  </div>
+</div>
+```
 
+```css
+.diagram-embed {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-embed .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  min-width: 140px;
+}
+.diagram-embed .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-embed .diagram-fallback {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  margin-inline-start: 8px;
+}
 ```
 
+</Diagram>
+
 ```ts
 import { embedApp } from "@agent-native/core";
 
@@ -93,14 +149,68 @@ MCP 서버는 확장 `io.modelcontextprotocol/ui`를 광고하고, `_meta.ui.res
 
 MCP 앱 임베드는 별도의 미니 제품이 아닌 경로 임베드입니다. `embedApp()`는 작업의 `link` 대상에서 시작하여 단기 포함 세션을 생성하고 서명된 앱 경로를 시작합니다. 표준 MCP 앱 호스트는 호스트가 경로를 직접 수화할 수 있는 경우 MCP 앱 프레임 자체를 탐색할 수 있습니다.
 
-```an-diagram title="호스트 브리지 경로 2개, 서명된 경로 1개" summary="Claude는 수화된 경로를 이식하고 직접 ui/_bridge을 사용합니다. ChatGPT은 window.openai를 통해 제어된 iframe을 가져오고 postMessage를 통해 호스트 작업을 중계합니다. 둘 다 동일한 서명된 앱 경로를 가리킵니다."
-{
-  "html": "<div class=\"diagram-bridge\"><div class=\"diagram-col\"><div class=\"diagram-card\" data-rough><strong>Claude web</strong><span class=\"diagram-pill accent\">single-frame transplant</span><small class=\"diagram-muted\">Claude iframe에서 서명된 앱 HTML을 hydrate한 뒤 직접 `ui/_` 호스트 브리지</small></div><div class=\"diagram-card\" data-rough><strong>ChatGPT web</strong><span class=\"diagram-pill accent\">controlled route iframe</span><small class=\"diagram-muted\">`window.openai`host APIs ·`agentNative.mcpHost.*` postMessage relay</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Same signed app route<br><small class=\"diagram-muted\">일반 라우트 + React 컴포넌트</small></div></div>",
-"css": ".diagram-bridge{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-bridge .diagram-col{display:flex;flex-direction:column;gap:12px}.diagram-bridge .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;max-width:300px}.diagram-bridge .diagram-arrow{font-size:22px;line-height:1}.diagram-bridge .diagram-box{padding:16px 18px;text-align:center}"
-}
+<Diagram id="doc-block-1fvbryv" title={"호스트 브리지 경로 2개, 서명된 경로 1개"} summary={"Claude는 수화된 경로를 이식하고 직접 ui/_bridge을 사용합니다. ChatGPT은 window.openai를 통해 제어된 iframe을 가져오고 postMessage를 통해 호스트 작업을 중계합니다. 둘 다 동일한 서명된 앱 경로를 가리킵니다."}>
+
+```html
+<div class="diagram-bridge">
+  <div class="diagram-col">
+    <div class="diagram-card" data-rough>
+      <strong>Claude web</strong
+      ><span class="diagram-pill accent">single-frame transplant</span
+      ><small class="diagram-muted"
+        >Claude iframe에서 서명된 앱 HTML을 hydrate한 뒤 직접 `ui/_` 호스트
+        브리지</small
+      >
+    </div>
+    <div class="diagram-card" data-rough>
+      <strong>ChatGPT web</strong
+      ><span class="diagram-pill accent">controlled route iframe</span
+      ><small class="diagram-muted"
+        >`window.openai`host APIs ·`agentNative.mcpHost.*` postMessage
+        relay</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    Same signed app route<br /><small class="diagram-muted"
+      >일반 라우트 + React 컴포넌트</small
+    >
+  </div>
+</div>
+```
 
+```css
+.diagram-bridge {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-bridge .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.diagram-bridge .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  max-width: 300px;
+}
+.diagram-bridge .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-bridge .diagram-box {
+  padding: 16px 18px;
+  text-align: center;
+}
 ```
 
+</Diagram>
+
 Claude 웹은 단일 프레임 이식 경로를 사용합니다. 리소스 문서는 서명된 앱 HTML를 가져와 Claude의 MCP 앱 iframe 내에서 이를 수화합니다. 왜냐하면 Claude는 ​​앱 소유 하위 iframe 또는 외부 프레임 탐색을 안정적으로 허용하지 않기 때문입니다. ChatGPT 웹은 Apps 브리지가 안정적인 `window.openai` 호스트 API 및 제한된 높이 제어를 제공하기 때문에 제어된 경로 iframe을 얻습니다. 모든 경로는 동일한 서명된 앱 경로를 가리키며 일반 경로와 React 구성 요소를 렌더링합니다. 동일한 서명된 URL를 사용하여 다시 로드하면 동일한 뷰가 재구성되도록 포함된 경로를 설계합니다.
 
 동일 앱 `open_app({ embed: true })`의 경우 프레임워크는 원래 도구 호출 중에 포함 시작 티켓을 생성하고 서명된 시작 URL를 숨겨진 도구 메타데이터에 저장합니다. 사용자 정의 actions는 동일한 빠른 경로에 대해 `embedStartUrl`를 반환할 수 있습니다. MCP 레이어는 모델 표시 `structuredContent` 및 일반 오픈 링크 메타데이터에서 티켓 보유 URL를 제거합니다. 포함 시작 URL가 없으면 리소스는 앱 전용 `create_embed_session` 도우미로 대체됩니다. 이는 일회성 앱 세션 URL를 기록으로 유출하지 않고 직접 경로에서 iframe 시작 도구 호출을 제한하는 프로덕션 호스트를 유지합니다. 일회성 시작 티켓이 만료된 후 사용자가 이전 채팅을 다시 열면 시작 경로는 작은 새로 고침 페이지를 반환하고 `agentNative.embedSessionExpired`를 래퍼에 게시합니다. `embedApp()`는 오래된 시작 URL를 지우고 원래 앱 경로가 아직 남아 있으면 `create_embed_session`를 통해 새로운 티켓을 발행합니다.