@agent-native/core 0.79.26 → 0.80.0

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

@@ -12,13 +12,53 @@ description: "표준 어댑터 인터페이스(어댑터 가이드에서 다루
 
 CLI 어댑터는 단일 명령줄 도구(`gh`, `ffmpeg`, `stripe`, `aws`)를 래핑하므로 에이전트는 이를 검색하고 설치 여부를 확인한 후 일관된 stdout/stderr/exit 코드 결과로 실행할 수 있습니다. 이 이음매가 없으면 모든 스크립트는 CLI를 호출하고 출력을 구문 분석하는 방법을 다시 고안합니다.
 
-```an-diagram title="CLI 어댑터 → 레지스트리 → 작업 표면" summary="ShellCliAdapter는 바이너리를 래핑합니다. CliRegistry는 검색을 위해 어댑터를 수집합니다. defineAction은 에이전트 + UI 작업 화면에서 하나의 호출을 노출합니다."
-{
-  "html": "<div class=\"diagram-cli\"><div class=\"diagram-node\" data-rough>gh · ffmpeg · stripe<br><small class=\"diagram-muted\">command-line tools</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>ShellCliAdapter<br><small class=\"diagram-muted\">isAvailable · execute</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough>CliRegistry<br><small class=\"diagram-muted\">describe() for discovery</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill accent\">defineAction</div></div>",
-  "css": ".diagram-cli{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-cli .diagram-arrow{font-size:22px;line-height:1}.diagram-cli .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-11h4al7" title={"CLI 어댑터 → 레지스트리 → 작업 표면"} summary={"ShellCliAdapter는 바이너리를 래핑합니다. CliRegistry는 검색을 위해 어댑터를 수집합니다. defineAction은 에이전트 + UI 작업 화면에서 하나의 호출을 노출합니다."}>
+
+```html
+<div class="diagram-cli">
+  <div class="diagram-node" data-rough>
+    gh · ffmpeg · stripe<br /><small class="diagram-muted"
+      >command-line tools</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    ShellCliAdapter<br /><small class="diagram-muted"
+      >isAvailable · execute</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    CliRegistry<br /><small class="diagram-muted"
+      >describe() for discovery</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-pill accent">defineAction</div>
+</div>
+```
+
+```css
+.diagram-cli {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-cli .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-cli .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## 인터페이스 {#the-interface}
 
 모든 CLI 어댑터는 `CliAdapter`를 구현합니다:

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

@@ -15,13 +15,51 @@ description: "에이전트 네이티브 앱용 React 후크 및 유틸리티: se
 
 브라우저에서 앱 데이터를 읽고 쓰는 기본 방법은 작업 후크를 이용하는 것입니다. `/_agent-native/*` 경로에 대한 `fetch` 호출을 직접 작성하지 마세요. 대신 명명된 도우미를 사용하세요([Actions](/docs/actions) 참조).
 
-```an-diagram title="브라우저 데이터 루프" summary="후크는 작업을 통해 읽고 씁니다. useDbSync은 데이터베이스를 감시하므로 에이전트 및 백그라운드 쓰기가 동일한 캐시를 자동으로 다시 가져옵니다."
-{
-  "html": "<div class=\"diagram-client\"><div class=\"diagram-col\"><div class=\"diagram-node\">useActionQuery<br><small class=\"diagram-muted\">cached read</small></div><div class=\"diagram-node\">useActionMutation<br><small class=\"diagram-muted\">write + invalidate</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-box\" data-rough>Actions<br><small class=\"diagram-muted\">/_agent-native/actions/*</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-panel\" data-rough><strong>SQL 데이터베이스</strong></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-pill ok\">useDbSync &rarr; refetch on change</div></div>",
-  "css": ".diagram-client{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-client .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-client .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-151ykjv" title={"브라우저 데이터 루프"} summary={"후크는 작업을 통해 읽고 씁니다. useDbSync은 데이터베이스를 감시하므로 에이전트 및 백그라운드 쓰기가 동일한 캐시를 자동으로 다시 가져옵니다."}>
+
+```html
+<div class="diagram-client">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      useActionQuery<br /><small class="diagram-muted">cached read</small>
+    </div>
+    <div class="diagram-node">
+      useActionMutation<br /><small class="diagram-muted"
+        >write + invalidate</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&harr;</div>
+  <div class="diagram-box" data-rough>
+    Actions<br /><small class="diagram-muted">/_agent-native/actions/*</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&harr;</div>
+  <div class="diagram-panel" data-rough><strong>SQL 데이터베이스</strong></div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+  <div class="diagram-pill ok">useDbSync &rarr; refetch on change</div>
+</div>
+```
+
+```css
+.diagram-client {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-client .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-client .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ```tsx
 import {
   useActionQuery,
@@ -376,13 +414,46 @@ function DashboardView({ id }) {
 - **UI 시작 돌연변이:** `useActionMutation`를 사용하여 UI에서 작업을 실행할 때 돌연변이는 성공 시 즉시 `source: "action"`를 사용하여 로컬 이벤트를 실행합니다. 이렇게 하면 해당 작업에 따라 모든 쿼리 키의 **즉각적이고 낙관적인 다시 가져오기**가 트리거되어 시각적 지연이 방지됩니다.
 - **백그라운드 또는 에이전트 돌연변이:** AI 에이전트, 웹훅 또는 백그라운드 작업자가 데이터를 변형하면 업데이트가 클라이언트에 브로드캐스트됩니다. 클라이언트의 `useDbSync`는 SSE(서버 전송 이벤트)를 통해 즉시 이를 캡처하거나 **2초 폴링 틱**으로 폴백합니다. 그런 다음 쿼리 키 버전이 충돌하여 백그라운드 다시 가져오기가 트리거됩니다.
 
-```an-diagram title="다시 가져오기를 위한 두 가지 경로" summary="로컬 돌연변이는 자체 캐시를 즉시 무효화합니다. 원격 쓰기는 SSE 또는 대체 폴링 틱을 통해 이 탭에 도달합니다."
-{
-  "html": "<div class=\"diagram-latency\"><div class=\"diagram-col\"><div class=\"diagram-card\" data-rough><span class=\"diagram-pill ok\">이 탭</span><strong>useActionMutation</strong><small class=\"diagram-muted\">fires source: \"action\" on success &rarr; instant local refetch</small></div><div class=\"diagram-card\" data-rough><span class=\"diagram-pill accent\">에이전트 · webhook · 다른 탭</span><strong>원격 쓰기</strong><small class=\"diagram-muted\">SSE push, or the ~2s polling tick as fallback &rarr; version bumps &rarr; background refetch</small></div></div></div>",
-  "css": ".diagram-latency .diagram-col{display:flex;flex-direction:column;gap:12px}.diagram-latency .diagram-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px}"
+<Diagram id="doc-block-q6d3kk" title={"다시 가져오기를 위한 두 가지 경로"} summary={"로컬 돌연변이는 자체 캐시를 즉시 무효화합니다. 원격 쓰기는 SSE 또는 대체 폴링 틱을 통해 이 탭에 도달합니다."}>
+
+```html
+<div class="diagram-latency">
+  <div class="diagram-col">
+    <div class="diagram-card" data-rough>
+      <span class="diagram-pill ok">이 탭</span
+      ><strong>useActionMutation</strong
+      ><small class="diagram-muted"
+        >fires source: "action" on success &rarr; instant local refetch</small
+      >
+    </div>
+    <div class="diagram-card" data-rough>
+      <span class="diagram-pill accent">에이전트 · webhook · 다른 탭</span
+      ><strong>원격 쓰기</strong
+      ><small class="diagram-muted"
+        >SSE push, or the ~2s polling tick as fallback &rarr; version bumps
+        &rarr; background refetch</small
+      >
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-latency .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.diagram-latency .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 14px 16px;
 }
 ```
 
+</Diagram>
+
 ## cn(...입력) {#cn}
 
 클래스 이름 병합을 위한 유틸리티(clsx + tailwind-merge):

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

@@ -51,13 +51,54 @@ description: "작동하는 SaaS 제품을 포크하여 귀하의 것으로 만
 
 "나만의 SaaS를 원합니다"에서 "나만의 SaaS가 있습니다"로 가는 길은 짧습니다.
 
-```an-diagram title="포크 및 사용자 정의" summary="완성된 제품을 선택하고 브랜드를 지정하고 일반 영어로 발전시킨 후 자신의 도메인으로 배송하세요."
-{
-  "html": "<div class=\"diagram-fork\"><div class=\"diagram-card\"><span class=\"diagram-pill\">1</span><strong>Pick</strong><small class=\"diagram-muted\">a complete template</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">2</span><strong>Brand</strong><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 accent\">3</span><strong>Customize</strong><small class=\"diagram-muted\">ask the agent &#8635;</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill ok\">4</span><strong>Ship</strong><small class=\"diagram-muted\">your own domain</small></div></div>",
-  "css": ".diagram-fork{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.diagram-fork .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;min-width:130px}.diagram-fork .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-q6okx4" title={"포크 및 사용자 정의"} summary={"완성된 제품을 선택하고 브랜드를 지정하고 일반 영어로 발전시킨 후 자신의 도메인으로 배송하세요."}>
+
+```html
+<div class="diagram-fork">
+  <div class="diagram-card">
+    <span class="diagram-pill">1</span><strong>Pick</strong
+    ><small class="diagram-muted">a complete template</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">2</span><strong>Brand</strong
+    ><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 accent">3</span><strong>Customize</strong
+    ><small class="diagram-muted">ask the agent &#8635;</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill ok">4</span><strong>Ship</strong
+    ><small class="diagram-muted">your own domain</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-fork {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.diagram-fork .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  min-width: 130px;
+}
+.diagram-fork .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 1. **템플릿을 선택하세요.** CLI 선택기를 사용하거나 문서를 찾아보고 시작할 템플릿을 선택하세요.
 2. **브랜드화.** 이름, 색상, 로고 및 문구를 변경합니다. 대부분의 템플릿은 이를 단일 구성 파일에 공개합니다.
 3. **사용자 정의하세요.** 필요한 열을 추가하고, 받은편지함 그룹 방식을 변경하고, 내부 API에 연결하고, 새 보기를 추가하도록 상담원에게 요청하세요. 에이전트가 코드를 편집합니다. 차이점을 검토하세요.
@@ -74,13 +115,49 @@ description: "작동하는 SaaS 제품을 포크하여 귀하의 것으로 만
 
 결과: Claude-각 사용자에 대한 코드 수준의 유연성과 일반적인 SaaS 배포 경제성.
 
-```an-diagram title="사용자별 포크가 확장되는 이유" summary="포크 및 사용자 정의 모델을 실용적으로 유지하는 두 가지 아이디어는 에이전트가 유지 관리를 수행하고 사용자별 사용자 정의가 사용자별 코드가 아닌 SQL에 있다는 것입니다."
-{
-  "html": "<div class=\"diagram-why\"><div class=\"diagram-panel\" data-rough><strong>공유d codebase</strong><small class=\"diagram-muted\">하나의 앱, 한 번 배포</small><div class=\"diagram-pill accent\">agent does the maintenance</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-panel\" data-rough><strong>SQL의 사용자별 레이어</strong><small class=\"diagram-muted\">skills · 메모리 · 지침 · MCP · 하위 에이전트</small><div class=\"diagram-pill ok\">no per-user code</div></div></div>",
-  "css": ".diagram-why{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-why .diagram-panel{display:flex;flex-direction:column;gap:8px;padding:14px 18px;min-width:240px;flex:1}.diagram-why .diagram-arrow{font-size:24px;line-height:1}"
+<Diagram id="doc-block-1nh599" title={"사용자별 포크가 확장되는 이유"} summary={"포크 및 사용자 정의 모델을 실용적으로 유지하는 두 가지 아이디어는 에이전트가 유지 관리를 수행하고 사용자별 사용자 정의가 사용자별 코드가 아닌 SQL에 있다는 것입니다."}>
+
+```html
+<div class="diagram-why">
+  <div class="diagram-panel" data-rough>
+    <strong>공유d codebase</strong
+    ><small class="diagram-muted">하나의 앱, 한 번 배포</small>
+    <div class="diagram-pill accent">agent does the maintenance</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&harr;</div>
+  <div class="diagram-panel" data-rough>
+    <strong>SQL의 사용자별 레이어</strong
+    ><small class="diagram-muted"
+      >skills · 메모리 · 지침 · MCP · 하위 에이전트</small
+    >
+    <div class="diagram-pill ok">no per-user code</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-why {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-why .diagram-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px 18px;
+  min-width: 240px;
+  flex: 1;
+}
+.diagram-why .diagram-arrow {
+  font-size: 24px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## 포크하고 싶지 않으신가요? {#hosted}
 
 꼭 그럴 필요는 없습니다. 모든 템플릿은 `agent-native.com`(`mail.agent-native.com`, `calendar.agent-native.com` 등)에서 호스팅된 앱으로도 사용할 수 있습니다. 무료 또는 유료로 호스팅 버전을 사용하세요. 호스팅 버전이 공개하지 않는 내용을 변경하려는 경우에만 포크하세요.

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

@@ -25,13 +25,71 @@ Agent-Native 코드는 코딩 세션, 슬래시 명령, 마이그레이션, 감
 - **데스크톱**: 왼쪽 사이드바 코드 탭은 동일한 실행 모델을 사용하면서 기본 터미널 실행, 앱 웹뷰 및 데스크톱 딥 링크를 추가합니다.
 - **공유 UI**: `@agent-native/code-agents-ui`는 재사용 가능한 React 표면을 렌더링합니다.
 
-```an-diagram title="하나의 실행 스토어에 3개의 레이어가 있음" summary="CLI, Desktop 및 공유 UI는 동일한 파일 지원 실행 저장소 및 실행기에서 서로 다른 표면입니다. 호스트는 CodeAgentsHost 계약을 통해 이를 조정합니다."
-{
-  "html": "<div class=\"diagram-layers\"><div class=\"diagram-row\"><div class=\"diagram-card\" data-rough><span class=\"diagram-pill\">CLI</span><small class=\"diagram-muted\">시작 · 재개 · 상태 · 중지</small></div><div class=\"diagram-card\" data-rough><span class=\"diagram-pill\">Desktop</span><small class=\"diagram-muted\">네이티브 터미널 · webviews · 딥링크</small></div><div class=\"diagram-card\" data-rough><span class=\"diagram-pill accent\">공유d UI</span><small class=\"diagram-muted\">@agent-native/code-agents-ui</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill\">CodeAgentsHost</span><small class=\"diagram-muted\">host contract</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>파일 기반 run store + 실행기<br><small class=\"diagram-muted\">@agent-native/core/code-agents</small></div></div>",
-  "css": ".diagram-layers{display:flex;flex-direction:column;gap:10px;align-items:center}.diagram-layers .diagram-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.diagram-layers .diagram-card{display:flex;flex-direction:column;gap:4px;padding:12px 16px}.diagram-layers .diagram-arrow{font-size:22px;line-height:1}.diagram-layers .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-1g03zkp" title={"하나의 실행 스토어에 3개의 레이어가 있음"} summary={"CLI, Desktop 및 공유 UI는 동일한 파일 지원 실행 저장소 및 실행기에서 서로 다른 표면입니다. 호스트는 CodeAgentsHost 계약을 통해 이를 조정합니다."}>
+
+```html
+<div class="diagram-layers">
+  <div class="diagram-row">
+    <div class="diagram-card" data-rough>
+      <span class="diagram-pill">CLI</span
+      ><small class="diagram-muted">시작 · 재개 · 상태 · 중지</small>
+    </div>
+    <div class="diagram-card" data-rough>
+      <span class="diagram-pill">Desktop</span
+      ><small class="diagram-muted">네이티브 터미널 · webviews · 딥링크</small>
+    </div>
+    <div class="diagram-card" data-rough>
+      <span class="diagram-pill accent">공유d UI</span
+      ><small class="diagram-muted">@agent-native/code-agents-ui</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-panel center" data-rough>
+    <span class="diagram-pill">CodeAgentsHost</span
+    ><small class="diagram-muted">host contract</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-box" data-rough>
+    파일 기반 run store + 실행기<br /><small class="diagram-muted"
+      >@agent-native/core/code-agents</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-layers {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+}
+.diagram-layers .diagram-row {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.diagram-layers .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 16px;
+}
+.diagram-layers .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-layers .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 현재 분할은 의도적으로 수렴됩니다. 표준 에이전트 사이드바와 에이전트 팀은 핵심 `run-manager` 수명 주기에서 실행되는 반면, Agent-Native 코드는 파일 기반 코드 실행 저장소와 공유 백그라운드 실행 컨트롤러 어휘가 지원하는 로컬 장기 실행 세션을 사용합니다.
 
 공유 UI는 호스트 기반입니다. Electron, 브라우저 템플릿 또는 향후 호스팅 셸에서 실행 중인지 알 수 없습니다. 호스트는 `CodeAgentsHost` 구현을 제공합니다.
@@ -373,13 +431,43 @@ Agent-Native의 나머지 부분:
 5. 모바일은 Dispatch에서 `hosts`, `runs` 및 `transcript`를 읽습니다. 절대 말하지 않는다
    데스크톱으로 직접 연결됩니다.
 
-```an-diagram title="원격 Dispatch은 아웃바운드 전용입니다." summary="모바일은 데스크톱과 직접 대화하지 않습니다. Desktop은 Dispatch을 길게 폴링하고, 명령을 요청하고, 로컬 실행 저장소를 구동하고, 결과를 다시 미러링합니다."
-{
-  "html": "<div class=\"diagram-remote\"><div class=\"diagram-node\" data-rough>모바일 / Telegram<br><small class=\"diagram-muted\">/code · 세션</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Dispatch 릴레이<br><small class=\"diagram-muted\">호스트 · 실행 · 기록</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&larr;</div><div class=\"diagram-node\" data-rough>Desktop<br><small class=\"diagram-muted\">롱폴링 · 클레임 · run store 구동</small></div></div>",
-  "css": ".diagram-remote{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-remote .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1rn65mf" title={"원격 Dispatch은 아웃바운드 전용입니다."} summary={"모바일은 데스크톱과 직접 대화하지 않습니다. Desktop은 Dispatch을 길게 폴링하고, 명령을 요청하고, 로컬 실행 저장소를 구동하고, 결과를 다시 미러링합니다."}>
+
+```html
+<div class="diagram-remote">
+  <div class="diagram-node" data-rough>
+    모바일 / Telegram<br /><small class="diagram-muted">/code · 세션</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    Dispatch 릴레이<br /><small class="diagram-muted"
+      >호스트 · 실행 · 기록</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&larr;</div>
+  <div class="diagram-node" data-rough>
+    Desktop<br /><small class="diagram-muted"
+      >롱폴링 · 클레임 · run store 구동</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-remote {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-remote .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 표준 원격 릴레이 엔드포인트는 다음과 같습니다.
 
 <Endpoint id="doc-block-9q1n8v" title={"데스크톱 클레임 대기 중인 작업"} method="POST" path="/_agent-native/integrations/remote/poll" summary={"데스크톱은 대기열에 포함된 명령을 요청하기 위해 릴레이를 롱 폴링합니다."} auth="Desktop device token" responses={[

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

@@ -25,13 +25,66 @@ import { ResourcesPanel } from "@agent-native/core/client/resources";
 `@agent-native/core/client` 또는 집중된 `@agent-native/core/client/*` 하위 경로
 따라서 번들러는 브라우저 안전 항목을 선택합니다.
 
-```an-diagram title="프레임워크 외부가 아닌 레이어를 드롭다운하세요." summary="각 레이어는 동일한 런타임(작업, 스레드 상태, SQL-backed 동기화)을 유지하면서 크롬에 대한 더 많은 제어권을 제공합니다."
-{
-  "html": "<div class=\"diagram-layers\"><div class=\"diagram-card layer\"><span class=\"diagram-pill accent\">&lt;AgentSidebar&gt;</span><small class=\"diagram-muted\">앱 주변 전체 사이드바. 80% 사용 사례.</small></div><div class=\"diagram-card layer l2\"><span class=\"diagram-pill\">&lt;AgentPanel&gt; &middot; &lt;AgentChatSurface&gt;</span><small class=\"diagram-muted\">자체 레이아웃의 패널 또는 채팅 페이지.</small></div><div class=\"diagram-card layer l3\"><span class=\"diagram-pill\">&lt;AssistantChat&gt; + runtime</span><small class=\"diagram-muted\">Own the chrome; optionally pass a BYO AgentChatRuntime.</small></div><div class=\"diagram-card layer l4\"><span class=\"diagram-pill\">&lt;PromptComposer&gt; &middot; &lt;AgentConversation&gt;</span><small class=\"diagram-muted\">작성r and transcript primitives only.</small></div><div class=\"diagram-rail\" data-rough>동일한 runtime: actions &middot; thread state &middot; SQL-backed sync</div></div>",
-  "css": ".diagram-layers{display:flex;flex-direction:column;gap:10px}.diagram-layers .layer{display:flex;flex-direction:column;gap:4px;padding:12px 14px}.diagram-layers .l2{margin-inline-start:24px}.diagram-layers .l3{margin-inline-start:48px}.diagram-layers .l4{margin-inline-start:72px}.diagram-layers .diagram-rail{margin-top:6px;padding:10px 14px;text-align:center}"
+<Diagram id="doc-block-wyryue" title={"프레임워크 외부가 아닌 레이어를 드롭다운하세요."} summary={"각 레이어는 동일한 런타임(작업, 스레드 상태, SQL-backed 동기화)을 유지하면서 크롬에 대한 더 많은 제어권을 제공합니다."}>
+
+```html
+<div class="diagram-layers">
+  <div class="diagram-card layer">
+    <span class="diagram-pill accent">&lt;AgentSidebar&gt;</span
+    ><small class="diagram-muted">앱 주변 전체 사이드바. 80% 사용 사례.</small>
+  </div>
+  <div class="diagram-card layer l2">
+    <span class="diagram-pill"
+      >&lt;AgentPanel&gt; &middot; &lt;AgentChatSurface&gt;</span
+    ><small class="diagram-muted">자체 레이아웃의 패널 또는 채팅 페이지.</small>
+  </div>
+  <div class="diagram-card layer l3">
+    <span class="diagram-pill">&lt;AssistantChat&gt; + runtime</span
+    ><small class="diagram-muted"
+      >Own the chrome; optionally pass a BYO AgentChatRuntime.</small
+    >
+  </div>
+  <div class="diagram-card layer l4">
+    <span class="diagram-pill"
+      >&lt;PromptComposer&gt; &middot; &lt;AgentConversation&gt;</span
+    ><small class="diagram-muted">작성r and transcript primitives only.</small>
+  </div>
+  <div class="diagram-rail" data-rough>
+    동일한 runtime: actions &middot; thread state &middot; SQL-backed sync
+  </div>
+</div>
+```
+
+```css
+.diagram-layers {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-layers .layer {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 14px;
+}
+.diagram-layers .l2 {
+  margin-inline-start: 24px;
+}
+.diagram-layers .l3 {
+  margin-inline-start: 48px;
+}
+.diagram-layers .l4 {
+  margin-inline-start: 72px;
+}
+.diagram-layers .diagram-rail {
+  margin-top: 6px;
+  padding: 10px 14px;
+  text-align: center;
 }
 ```
 
+</Diagram>
+
 ## 에이전트 및 채팅 UI {#agent-chat-ui}
 
 | API                                  | 가져오기 경로                                   | 다음 경우에 사용                                                                   |
@@ -178,13 +231,64 @@ Liveblocks 스타일의 존재감을 위해 `@agent-native/core/client/collab`
 | `useCollaborativeMap()` / `useCollaborativeArray()` | 서식 있는 텍스트 본문 공동 작업이 적합하지 않은 경우 구조화된 Y.Map/Y.Array 상태를 실험해 보세요. |
 | `dedupeCollabUsersByEmail()`                        | 동일한 사용자에 대해 중복 탭 없이 맞춤 아바타 스택을 구축하세요.                                  |
 
-```an-diagram title="현재 상태: 인간과 에이전트는 하나의 인식 레이어를 공유합니다." summary="useCollaborativeDoc은 인식 인스턴스를 소유합니다. 클라이언트 후크는 커서와 선택 항목을 게시합니다. 서버 도우미를 사용하면 에이전트 작업이 실시간 참가자로 표시됩니다."
-{
-  "html": "<div class=\"diagram-presence\"><div class=\"diagram-col\"><div class=\"diagram-node\">Humans<br><small class=\"diagram-muted\">usePresence &middot; cursors, selection</small></div><div class=\"diagram-node diagram-accent\">에이전트 작업<br><small class=\"diagram-muted\">agentUpdateSelection()</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill accent\">useCollaborativeDoc</span><small class=\"diagram-muted\">awareness layer</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">&lt;PresenceBar&gt; &middot; &lt;LiveCursorOverlay&gt;<br><small class=\"diagram-muted\">에이전트 포함 모두 렌더링</small></div></div>",
-  "css": ".diagram-presence{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-presence .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-presence .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px}.diagram-presence .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-mnr9lc" title={"현재 상태: 인간과 에이전트는 하나의 인식 레이어를 공유합니다."} summary={"useCollaborativeDoc은 인식 인스턴스를 소유합니다. 클라이언트 후크는 커서와 선택 항목을 게시합니다. 서버 도우미를 사용하면 에이전트 작업이 실시간 참가자로 표시됩니다."}>
+
+```html
+<div class="diagram-presence">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Humans<br /><small class="diagram-muted"
+        >usePresence &middot; cursors, selection</small
+      >
+    </div>
+    <div class="diagram-node diagram-accent">
+      에이전트 작업<br /><small class="diagram-muted"
+        >agentUpdateSelection()</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    <span class="diagram-pill accent">useCollaborativeDoc</span
+    ><small class="diagram-muted">awareness layer</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    &lt;PresenceBar&gt; &middot; &lt;LiveCursorOverlay&gt;<br /><small
+      class="diagram-muted"
+      >에이전트 포함 모두 렌더링</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-presence {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-presence .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-presence .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 14px;
+}
+.diagram-presence .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 실시간 참가자로 나타나기를 원하는 서버측 에이전트 actions는
 하위 수준 `@agent-native/core/collab` 에이전트 존재 도우미: