@agent-native/core 0.79.26 → 0.80.0

package/corpus/core/docs/content/locales/ko-KR/a2a-protocol.mdx

@@ -20,13 +20,53 @@ A2A is the substrate for cross-app delegation in this framework — most promine
 - **작업** — 각 메시지는 수명 주기(제출됨, 작업 중, 완료됨, 실패, 취소됨)가 있는 작업을 생성합니다.
 - **JWT 전달자 인증** — 프로덕션 A2A에는 `A2A_SECRET` 또는 명시적인 레거시 `apiKeyEnv`가 필요합니다.
 
-```an-diagram title="한 상담원이 다른 상담원에게 일을 맡깁니다." summary="메일 에이전트는 분석 에이전트의 카드를 발견하고 JSON-RPC 메시지를 보낸 다음 완료된 작업을 돌려받습니다."
-{
-  "html": "<div class=\"diagram-handoff\"><div class=\"diagram-card\"><strong>Mail 에이전트</strong><small class=\"diagram-muted\">needs analytics</small></div><div class=\"diagram-col\"><div class=\"diagram-pill\">GET /.well-known/agent-card.json</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill accent\">POST /_agent-native/a2a<br><small class=\"diagram-muted\">message/send</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&larr;</div><div class=\"diagram-pill ok\">작업 · 완료</div></div><div class=\"diagram-card\" data-rough><strong>Analytics 에이전트</strong><small class=\"diagram-muted\">run-query를 실행하고 결과 반환</small></div></div>",
-  "css": ".diagram-handoff{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.diagram-handoff .diagram-col{display:flex;flex-direction:column;align-items:center;gap:6px}.diagram-handoff .diagram-arrow{font-size:20px;line-height:1}"
+<Diagram id="doc-block-l0qyn5" title={"한 상담원이 다른 상담원에게 일을 맡깁니다."} summary={"메일 에이전트는 분석 에이전트의 카드를 발견하고 JSON-RPC 메시지를 보낸 다음 완료된 작업을 돌려받습니다."}>
+
+```html
+<div class="diagram-handoff">
+  <div class="diagram-card">
+    <strong>Mail 에이전트</strong
+    ><small class="diagram-muted">needs analytics</small>
+  </div>
+  <div class="diagram-col">
+    <div class="diagram-pill">GET /.well-known/agent-card.json</div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+    <div class="diagram-pill accent">
+      POST /_agent-native/a2a<br /><small class="diagram-muted"
+        >message/send</small
+      >
+    </div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&larr;</div>
+    <div class="diagram-pill ok">작업 · 완료</div>
+  </div>
+  <div class="diagram-card" data-rough>
+    <strong>Analytics 에이전트</strong
+    ><small class="diagram-muted">run-query를 실행하고 결과 반환</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-handoff {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.diagram-handoff .diagram-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+.diagram-handoff .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## 서버 설정 {#server-setup}
 
 대부분의 템플릿은 프레임워크 에이전트 채팅 플러그인을 통해 A2A를 얻습니다. 직접 마운트하는 경우 서버 플러그인에서 `mountA2A()`를 호출하세요:
@@ -176,14 +216,62 @@ JSON-RPC 2.0 endpoint for `message/send`, `message/stream`, `tasks/get`, and `ta
 
 `message/send`가 `async: true`와 함께 호출되면 JSON-RPC 핸들러는 작업을 대기열에 추가하고 POST를 내부 `/_agent-native/a2a/_process-task` 경로로 자체 실행하므로 핸들러는 자체 전체 시간 초과로 새로운 함수 실행에서 실행됩니다. 이 경로는 작업 ID(5분 수명, `A2A_SECRET`로 서명됨)에 바인딩된 HMAC 토큰으로 인증됩니다. `/_agent-native/a2a` JSON-RPC 경로 앞에 마운트되므로 h3의 접두사 일치가 이를 삼키지 않습니다.
 
-```an-diagram title="서버리스의 비동기 작업 수명 주기" summary="async:true는 밀리초 단위로 작업을 반환하고 호출자가 폴링하는 동안 새로 실행하면 에이전트 루프가 실행됩니다."
-{
-  "html": "<div class=\"diagram-async\"><div class=\"diagram-box\" data-rough>message/send<br><small class=\"diagram-muted\">async: true</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel\"><span class=\"diagram-pill\">enqueue task</span><span class=\"diagram-pill warn\">return working</span><small class=\"diagram-muted\">~밀리초</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>자체 실행 POST /_agent-native/a2a/_process-task<br><small class=\"diagram-muted\">HMAC token · 새 실행 · 전체 타임아웃</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-pill\">tasks/get (poll)</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-pill ok\">completed</div></div></div>",
-  "css": ".diagram-async{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-async .diagram-panel{display:flex;flex-direction:column;align-items:center;gap:6px}.diagram-async .diagram-col{display:flex;flex-direction:column;align-items:center;gap:6px}.diagram-async .diagram-arrow{font-size:20px;line-height:1}",
-  "caption": "A recurring sweeper re-claims any task left in flight if the function execution dies mid-run."
+<Diagram id="doc-block-19akova" title={"서버리스의 비동기 작업 수명 주기"} summary={"async:true는 밀리초 단위로 작업을 반환하고 호출자가 폴링하는 동안 새로 실행하면 에이전트 루프가 실행됩니다."} caption="A recurring sweeper re-claims any task left in flight if the function execution dies mid-run.">
+
+```html
+<div class="diagram-async">
+  <div class="diagram-box" data-rough>
+    message/send<br /><small class="diagram-muted">async: true</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel">
+    <span class="diagram-pill">enqueue task</span
+    ><span class="diagram-pill warn">return working</span
+    ><small class="diagram-muted">~밀리초</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-box" data-rough>
+    자체 실행 POST /_agent-native/a2a/_process-task<br /><small
+      class="diagram-muted"
+      >HMAC token · 새 실행 · 전체 타임아웃</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-pill">tasks/get (poll)</div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+    <div class="diagram-pill ok">completed</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-async {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-async .diagram-panel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+.diagram-async .diagram-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+.diagram-async .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 > [!IMPORTANT]
 > **서버리스 웹훅 및 게이트웨이 시간 초과:**
 > 호스팅 환경 게이트웨이(예: Netlify, Vercel 또는 Cloudflare Pages)는 공용 HTTP 경로에 엄격한 실행 제한(보통 10~30초)을 적용합니다. 에이전트 루프는 쿼리를 실행하고, 컨텍스트를 가져오고, 도구를 실행하는 데 상당한 시간이 걸릴 수 있으므로 A2A 엔드포인트를 호출하거나 외부 webhooks를 처리할 때 **`async: true`**를 사용해야 합니다. 그러면 `working` 상태가 API 게이트웨이에 즉시 반환되어 몇 밀리초 동안만 연결이 열린 상태로 유지되는 반면, 자체 실행된 `/process-task` POST는 백그라운드에서 에이전트 루프를 실행합니다. 에이전트 루프가 완료되기를 기다리는 기본 HTTP 요청을 차단하지 마십시오.

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

@@ -19,13 +19,72 @@ Actions는 앱이 수행하는 모든 작업에 대한 단일 정보 소스입
 작업을 헤드리스로 노출할지 여부를 결정하는 경우 채팅,
 embedded sidecar, or as a full app screen, see [Agent Surfaces](/docs/agent-surfaces).
 
-```an-diagram title="하나의 정의, 7명의 소비자" summary="단일 defineAction()은 하나의 검증된 스키마와 하나의 run() 본문을 사용하여 에이전트, UI, HTTP, MCP, A2A 및 CLI 등 모든 표면으로 확장됩니다."
-{
-  "html": "<div class=\"diagram-fanout\"><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill accent\">defineAction()</span><small class=\"diagram-muted\">schema + run(), 한 번만 정의</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-grid\"><div class=\"diagram-node\">에이전트 도구<br><small class=\"diagram-muted\">컨텍스트의 JSON Schema</small></div><div class=\"diagram-node\">React 훅<br><small class=\"diagram-muted\">useActionQuery/Mutation</small></div><div class=\"diagram-node\">callAction()<br><small class=\"diagram-muted\">명령형 클라이언트</small></div><div class=\"diagram-node\">HTTP<br><small class=\"diagram-muted\">/_agent-native/actions/:name</small></div><div class=\"diagram-node\">MCP 도구<br><small class=\"diagram-muted\">외부 호스트</small></div><div class=\"diagram-node\">A2A 도구<br><small class=\"diagram-muted\">다른 agent-native 앱</small></div><div class=\"diagram-node\">CLI<br><small class=\"diagram-muted\">pnpm action &lt;name&gt;</small></div></div></div>",
-  "css": ".diagram-fanout{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-fanout .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 16px}.diagram-fanout .diagram-arrow{font-size:22px;line-height:1}.diagram-fanout .diagram-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}"
+<Diagram id="doc-block-r6tbam" title={"하나의 정의, 7명의 소비자"} summary={"단일 defineAction()은 하나의 검증된 스키마와 하나의 run() 본문을 사용하여 에이전트, UI, HTTP, MCP, A2A 및 CLI 등 모든 표면으로 확장됩니다."}>
+
+```html
+<div class="diagram-fanout">
+  <div class="diagram-panel center" data-rough>
+    <span class="diagram-pill accent">defineAction()</span
+    ><small class="diagram-muted">schema + run(), 한 번만 정의</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-grid">
+    <div class="diagram-node">
+      에이전트 도구<br /><small class="diagram-muted"
+        >컨텍스트의 JSON Schema</small
+      >
+    </div>
+    <div class="diagram-node">
+      React 훅<br /><small class="diagram-muted">useActionQuery/Mutation</small>
+    </div>
+    <div class="diagram-node">
+      callAction()<br /><small class="diagram-muted">명령형 클라이언트</small>
+    </div>
+    <div class="diagram-node">
+      HTTP<br /><small class="diagram-muted"
+        >/_agent-native/actions/:name</small
+      >
+    </div>
+    <div class="diagram-node">
+      MCP 도구<br /><small class="diagram-muted">외부 호스트</small>
+    </div>
+    <div class="diagram-node">
+      A2A 도구<br /><small class="diagram-muted">다른 agent-native 앱</small>
+    </div>
+    <div class="diagram-node">
+      CLI<br /><small class="diagram-muted">pnpm action &lt;name&gt;</small>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-fanout {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-fanout .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 14px 16px;
+}
+.diagram-fanout .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-fanout .diagram-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
 }
 ```
 
+</Diagram>
+
 UI와 상담원 모두가 뭔가를 해야 하는 경우 맞춤 작업이 아닌 작업을 수행하세요.
 경로. 경로 형태의 프로토콜이 올바른 호출일 _is_ 경우에는 [Actions 선호
 앱 운영용](/docs/server#actions-first).

package/corpus/core/docs/content/locales/ko-KR/agent-mentions.mdx

@@ -29,13 +29,77 @@ description: "@멘션을 사용하여 사용자 정의 에이전트, 연결된
 
 두 경우 모두 주 상담원이 응답을 보고 이를 참조하거나 구축할 수 있습니다.
 
-```an-diagram title="@-멘션이 라우팅되는 위치" summary="서버는 각 멘션을 유형별로 분할합니다. 사용자 정의 에이전트는 로컬에서 실행되고 연결된 에이전트는 A2A을 통해 이동합니다. 두 응답 모두 기본 에이전트의 컨텍스트로 다시 접힙니다."
-{
-  "html": "<div class=\"diagram-mention\"><div class=\"diagram-node\">@-mention<br><small class=\"diagram-muted\">in the composer</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill accent\">서버가 해석</span><small class=\"diagram-muted\">extract refs by type</small></div><div class=\"diagram-col\"><div class=\"row\"><span class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</span><div class=\"diagram-box\">사용자 지정 에이전트<br><small class=\"diagram-muted\">agents/*.md &middot; runs local</small></div></div><div class=\"row\"><span class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</span><div class=\"diagram-box\">연결된 에이전트<br><small class=\"diagram-muted\">A2A peer &middot; remote call</small></div></div></div><div class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box diagram-accent\">&lt;agent-response&gt;<br><small class=\"diagram-muted\">injected into main agent</small></div></div>",
-  "css": ".diagram-mention{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-mention .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px}.diagram-mention .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-mention .row{display:flex;align-items:center;gap:8px}.diagram-mention .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-r5nrdf" title={"@-멘션이 라우팅되는 위치"} summary={"서버는 각 멘션을 유형별로 분할합니다. 사용자 정의 에이전트는 로컬에서 실행되고 연결된 에이전트는 A2A을 통해 이동합니다. 두 응답 모두 기본 에이전트의 컨텍스트로 다시 접힙니다."}>
+
+```html
+<div class="diagram-mention">
+  <div class="diagram-node">
+    @-mention<br /><small class="diagram-muted">in the composer</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    <span class="diagram-pill accent">서버가 해석</span
+    ><small class="diagram-muted">extract refs by type</small>
+  </div>
+  <div class="diagram-col">
+    <div class="row">
+      <span class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</span>
+      <div class="diagram-box">
+        사용자 지정 에이전트<br /><small class="diagram-muted"
+          >agents/*.md &middot; runs local</small
+        >
+      </div>
+    </div>
+    <div class="row">
+      <span class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</span>
+      <div class="diagram-box">
+        연결된 에이전트<br /><small class="diagram-muted"
+          >A2A peer &middot; remote call</small
+        >
+      </div>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-accent" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box diagram-accent">
+    &lt;agent-response&gt;<br /><small class="diagram-muted"
+      >injected into main agent</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-mention {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-mention .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 14px;
+}
+.diagram-mention .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-mention .row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.diagram-mention .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## 작동 방식 {#how-it-works}
 
 `@` 언급이 포함된 메시지가 전송되면 서버에서 다음이 발생합니다.

package/corpus/core/docs/content/locales/ko-KR/agent-surfaces.mdx

@@ -25,13 +25,67 @@ Those are stages, not separate products. A workflow can start as a headless
 agent with one action, appear in chat as a table or chart, and later become a
 full screen in an app without changing the operation the agent calls.
 
-```an-diagram title="표면 스펙트럼" summary="하나의 작업 표면, 4개의 제품 모양 - 각각 아래의 작업을 변경하지 않고 UI를 추가합니다."
-{
-  "html": "<div class=\"diagram-spectrum\"><div class=\"diagram-card\"><strong>Headless</strong><small class=\"diagram-muted\">actions, 작업, 스크립트, 다른 에이전트</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><strong>리치 채팅</strong><small class=\"diagram-muted\">작성기, 기록, 도구 카드</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><strong>임베디드 sidecar</strong><small class=\"diagram-muted\">agent beside an existing app</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card accent-card\"><span class=\"diagram-pill accent\">대부분의 UI</span><strong>전체 애플리케이션</strong><small class=\"diagram-muted\">지속 화면, 데이터, 협업</small></div></div><div class=\"diagram-base\" data-rough><span class=\"diagram-muted\">같은 actions · 같은 SQL · 같은 에이전트 루프</span></div>",
-  "css": ".diagram-spectrum{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}.diagram-spectrum .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;min-width:150px;flex:1}.diagram-spectrum .diagram-arrow{align-self:center;font-size:22px;line-height:1}.diagram-base{margin-top:12px;padding:10px 14px;text-align:center}"
+<Diagram id="doc-block-1rmwapd" title={"표면 스펙트럼"} summary={"하나의 작업 표면, 4개의 제품 모양 - 각각 아래의 작업을 변경하지 않고 UI를 추가합니다."}>
+
+```html
+<div class="diagram-spectrum">
+  <div class="diagram-card">
+    <strong>Headless</strong
+    ><small class="diagram-muted">actions, 작업, 스크립트, 다른 에이전트</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <strong>리치 채팅</strong
+    ><small class="diagram-muted">작성기, 기록, 도구 카드</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <strong>임베디드 sidecar</strong
+    ><small class="diagram-muted">agent beside an existing app</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card accent-card">
+    <span class="diagram-pill accent">대부분의 UI</span
+    ><strong>전체 애플리케이션</strong
+    ><small class="diagram-muted">지속 화면, 데이터, 협업</small>
+  </div>
+</div>
+<div class="diagram-base" data-rough>
+  <span class="diagram-muted"
+    >같은 actions · 같은 SQL · 같은 에이전트 루프</span
+  >
+</div>
+```
+
+```css
+.diagram-spectrum {
+  display: flex;
+  align-items: stretch;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.diagram-spectrum .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  min-width: 150px;
+  flex: 1;
+}
+.diagram-spectrum .diagram-arrow {
+  align-self: center;
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-base {
+  margin-top: 12px;
+  padding: 10px 14px;
+  text-align: center;
 }
 ```
 
+</Diagram>
+
 ## 헤드리스 에이전트 {#headless}
 
 사용자 지정 앱 화면을 쳐다볼 필요가 없는 경우 헤드리스 경로를 사용하세요.
@@ -347,13 +401,64 @@ export function AppShell({ children }) {
 }
 ```
 
-```an-diagram title="사이드카가 호스트 앱에 연결되는 방법" summary="플러그인은 Agent-Native 경로를 서버 측에 마운트합니다. React 사이드카는 페이지 컨텍스트 입력 및 호스트 명령 출력을 스트리밍합니다."
-{
-  "html": "<div class=\"diagram-sidecar\"><div class=\"diagram-panel\"><strong>호스트 앱</strong><small class=\"diagram-muted\">기존 SaaS</small><div class=\"diagram-node\">getContext()<br><small class=\"diagram-muted\">라우트 · 선택</small></div><div class=\"diagram-node\">onNavigate / onRefresh<br><small class=\"diagram-muted\">호스트 명령</small></div></div><div class=\"diagram-col-arrows\"><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&larr;</div></div><div class=\"diagram-panel accent-panel\"><span class=\"diagram-pill accent\">AgentNativeEmbedded</span><small class=\"diagram-muted\">agent + workspace</small><div class=\"diagram-box\" data-rough>Agent-Native 라우트<br><small class=\"diagram-muted\">mounted by the server plugin</small></div></div></div>",
-  "css": ".diagram-sidecar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-sidecar .diagram-panel{display:flex;flex-direction:column;gap:8px;padding:14px 16px;min-width:200px}.diagram-sidecar .diagram-col-arrows{display:flex;flex-direction:column;gap:6px}.diagram-sidecar .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1wr0qhh" title={"사이드카가 호스트 앱에 연결되는 방법"} summary={"플러그인은 Agent-Native 경로를 서버 측에 마운트합니다. React 사이드카는 페이지 컨텍스트 입력 및 호스트 명령 출력을 스트리밍합니다."}>
+
+```html
+<div class="diagram-sidecar">
+  <div class="diagram-panel">
+    <strong>호스트 앱</strong><small class="diagram-muted">기존 SaaS</small>
+    <div class="diagram-node">
+      getContext()<br /><small class="diagram-muted">라우트 · 선택</small>
+    </div>
+    <div class="diagram-node">
+      onNavigate / onRefresh<br /><small class="diagram-muted"
+        >호스트 명령</small
+      >
+    </div>
+  </div>
+  <div class="diagram-col-arrows">
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&larr;</div>
+  </div>
+  <div class="diagram-panel accent-panel">
+    <span class="diagram-pill accent">AgentNativeEmbedded</span
+    ><small class="diagram-muted">agent + workspace</small>
+    <div class="diagram-box" data-rough>
+      Agent-Native 라우트<br /><small class="diagram-muted"
+        >mounted by the server plugin</small
+      >
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-sidecar {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-sidecar .diagram-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px 16px;
+  min-width: 200px;
+}
+.diagram-sidecar .diagram-col-arrows {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.diagram-sidecar .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 호스트 인증, 데이터베이스 격리는 [Embedding SDK](/docs/embedding-sdk)를 참조하세요.
 iframe/선택기 모드 및 하위 수준 브리지 API.