@agent-native/core 0.79.25 → 0.79.27

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` 에이전트 존재 도우미:
 

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

@@ -24,13 +24,66 @@ description: "사용자가 보고 있는 내용을 에이전트가 아는 방법
 5. **신속한 전달** -- UI는 클릭이 상담원 차례가 되어야 할 때 통화 `sendToAgentChat()`를 제어합니다.
 6. **`navigate`** -- UI에게 어디로 가야 하는지 알려주는 에이전트의 일회성 명령
 
-```an-diagram title="에이전트가 귀하에게 보이는 것을 보는 방법" summary="UI는 경량 상태 키를 작성합니다. 뷰 화면은 이를 실제 기록으로 변환합니다. 에이전트는 뒤로 탐색을 작성하여 UI를 이동할 수 있습니다."
-{
-  "html": "<div class=\"diagram-ctx\"><div class=\"diagram-card col\"><span class=\"diagram-pill\">UI가 씀</span><div class=\"diagram-node\">navigation<br><small class=\"diagram-muted\">보기, 열린 ID</small></div><div class=\"diagram-node\">__url__<br><small class=\"diagram-muted\">shareable filters</small></div><div class=\"diagram-node\">selection<br><small class=\"diagram-muted\">행, 블록, 도형</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\">view-screen</span><small class=\"diagram-muted\">reads state &middot; fetches records</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">에이전트가 동작<br><small class=\"diagram-muted\">on the real object</small></div><div class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-box diagram-accent\">navigate<br><small class=\"diagram-muted\">에이전트가 UI 이동</small></div></div>",
-  "css": ".diagram-ctx{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-ctx .col{display:flex;flex-direction:column;gap:8px;padding:14px}.diagram-ctx .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px}.diagram-ctx .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-cdngrl" title={"에이전트가 귀하에게 보이는 것을 보는 방법"} summary={"UI는 경량 상태 키를 작성합니다. 뷰 화면은 이를 실제 기록으로 변환합니다. 에이전트는 뒤로 탐색을 작성하여 UI를 이동할 수 있습니다."}>
+
+```html
+<div class="diagram-ctx">
+  <div class="diagram-card col">
+    <span class="diagram-pill">UI가 씀</span>
+    <div class="diagram-node">
+      navigation<br /><small class="diagram-muted">보기, 열린 ID</small>
+    </div>
+    <div class="diagram-node">
+      __url__<br /><small class="diagram-muted">shareable filters</small>
+    </div>
+    <div class="diagram-node">
+      selection<br /><small class="diagram-muted">행, 블록, 도형</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">view-screen</span
+    ><small class="diagram-muted">reads state &middot; fetches records</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    에이전트가 동작<br /><small class="diagram-muted">on the real object</small>
+  </div>
+  <div class="diagram-arrow diagram-accent" aria-hidden="true">&#8635;</div>
+  <div class="diagram-box diagram-accent">
+    navigate<br /><small class="diagram-muted">에이전트가 UI 이동</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-ctx {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-ctx .col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px;
+}
+.diagram-ctx .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 14px;
+}
+.diagram-ctx .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## 컨텍스트 레이어 {#context-layers}
 
 다른 작업에 대해 다른 컨텍스트 채널을 사용하십시오:
@@ -382,9 +435,44 @@ useDbSync({
 - 동기화 이벤트를 처리할 때 UI는 자체 `ignoreSource` 값과 일치하는 이벤트를 필터링하므로 방금 쓴 데이터를 다시 가져오지 않습니다.
 - 에이전트, 기타 탭 및 actions의 이벤트는 여전히 정상적으로 진행됩니다.
 
-```an-diagram title="소스 태깅으로 자체 재페치 지터 중지" summary="탭은 자체 TAB_ID으로 스탬프 처리된 동기화 이벤트를 무시하지만 여전히 에이전트 및 기타 탭 쓰기에 반응합니다."
-{
-  "html": "<div class=\"diagram-jitter\"><div class=\"diagram-node\">이 탭이 씀<br><small class=\"diagram-muted\">X-Request-Source: TAB_ID</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>서버가 소스 저장<br>on the event</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card col\"><div class=\"diagram-pill warn\">source == TAB_ID &rarr; ignored</div><small class=\"diagram-muted\">재조회 없음, 깜박임 없음</small><div class=\"diagram-pill ok\">agent / other tab &rarr; applied</div><small class=\"diagram-muted\">UI가 실시간 업데이트</small></div></div>",
-  "css": ".diagram-jitter{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-jitter .col{display:flex;flex-direction:column;gap:6px;padding:14px}.diagram-jitter .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-n6r1t1" title={"소스 태깅으로 자체 재페치 지터 중지"} summary={"탭은 자체 TAB_ID으로 스탬프 처리된 동기화 이벤트를 무시하지만 여전히 에이전트 및 기타 탭 쓰기에 반응합니다."}>
+
+```html
+<div class="diagram-jitter">
+  <div class="diagram-node">
+    이 탭이 씀<br /><small class="diagram-muted"
+      >X-Request-Source: TAB_ID</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>서버가 소스 저장<br />on the event</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card col">
+    <div class="diagram-pill warn">source == TAB_ID &rarr; ignored</div>
+    <small class="diagram-muted">재조회 없음, 깜박임 없음</small>
+    <div class="diagram-pill ok">agent / other tab &rarr; applied</div>
+    <small class="diagram-muted">UI가 실시간 업데이트</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-jitter {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-jitter .col {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px;
+}
+.diagram-jitter .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
+
+</Diagram>

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

@@ -112,13 +112,60 @@ Chat은 인증, 내구성 있는 채팅 스레드, SQL 지원 리소스, 도구,
 
 모든 템플릿의 네 가지 영역은 하나의 공유 작업 표면과 하나의 SQL 데이터베이스를 통해 함께 연결됩니다. 에이전트와 UI는 동일한 작업에 대해 동등한 파트너입니다.
 
-```an-diagram title="템플릿의 네 가지 영역이 연결되는 방식" summary="UI와 에이전트는 모두 동일한 작업을 통해 SQL에 도달합니다. 애플리케이션 상태와 폴링 동기화가 정렬된 상태를 유지합니다."
-{
-  "html": "<div class=\"diagram-tmpl\"><div class=\"diagram-col\"><div class=\"diagram-node\">React 사용자 인터페이스 화면<br><small class=\"diagram-muted\">app/routes · 컴포넌트</small></div><div class=\"diagram-node\">Agent<br><small class=\"diagram-muted\">AGENTS.md · skills</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">작업</span><small class=\"diagram-muted\">defineAction()</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Drizzle 기반 SQL<br><small class=\"diagram-muted\">additive schema</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-pill ok\">폴링ing sync</div></div>",
-  "css": ".diagram-tmpl{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-tmpl .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-tmpl .diagram-arrow{font-size:22px;line-height:1}.diagram-tmpl .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-hjg2nf" title={"템플릿의 네 가지 영역이 연결되는 방식"} summary={"UI와 에이전트는 모두 동일한 작업을 통해 SQL에 도달합니다. 애플리케이션 상태와 폴링 동기화가 정렬된 상태를 유지합니다."}>
+
+```html
+<div class="diagram-tmpl">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      React 사용자 인터페이스 화면<br /><small class="diagram-muted"
+        >app/routes · 컴포넌트</small
+      >
+    </div>
+    <div class="diagram-node">
+      Agent<br /><small class="diagram-muted">AGENTS.md · skills</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">작업</span
+    ><small class="diagram-muted">defineAction()</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    Drizzle 기반 SQL<br /><small class="diagram-muted">additive schema</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+  <div class="diagram-pill ok">폴링ing sync</div>
+</div>
+```
+
+```css
+.diagram-tmpl {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-tmpl .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-tmpl .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-tmpl .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## SQL의 모델 데이터 {#data-models}
 
 SQLite, Postgres, D1, Turso, Supabase, Neon 및 기타 지원되는 백엔드에서 스키마 이식성을 유지할 수 있도록 프레임워크 Drizzle 도우미를 사용하여 도메인 테이블을 정의하세요.

package/corpus/core/docs/content/locales/ko-KR/cross-app-sso.mdx

@@ -26,13 +26,66 @@ description: "Dispatch를 ID 기관으로 사용하여 ID 페더레이션을 통
 
 흐름은 표준 승인 → 서명된 토큰 → 콜백 리디렉션이며, 신뢰 경계를 넘는 유일한 것은 이메일입니다.
 
-```an-diagram title="ID 페더레이션 흐름" summary="Dispatch은 사람을 인증하고 확인된 이메일이라는 단기간 서명된 주장을 반환합니다. 앱은 이메일로 연결되며 자체 로컬 세션을 시작합니다."
-{
-  "html": "<div class=\"diagram-sso\"><div class=\"diagram-card\" data-rough><strong>클라이언트 앱</strong><small class=\"diagram-muted\">own user store</small></div><div class=\"diagram-step\"><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><span class=\"diagram-pill\">authorize</span></div><div class=\"diagram-card\" data-rough><strong>Dispatch</strong><small class=\"diagram-muted\">identity authority</small><span class=\"diagram-pill accent\">authenticates human</span></div><div class=\"diagram-step\"><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><span class=\"diagram-pill accent\">302 + signed JWT</span></div><div class=\"diagram-card\" data-rough><strong>앱 콜백</strong><small class=\"diagram-muted\">verify signature · scope:identity · exp &le; 2 min</small><span class=\"diagram-pill ok\">이메일 기반 JIT 연결</span><span class=\"diagram-pill ok\">mint local session</span></div></div>",
-  "css": ".diagram-sso{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap}.diagram-sso .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;min-width:150px}.diagram-sso .diagram-step{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.diagram-sso .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1axbtj8" title={"ID 페더레이션 흐름"} summary={"Dispatch은 사람을 인증하고 확인된 이메일이라는 단기간 서명된 주장을 반환합니다. 앱은 이메일로 연결되며 자체 로컬 세션을 시작합니다."}>
+
+```html
+<div class="diagram-sso">
+  <div class="diagram-card" data-rough>
+    <strong>클라이언트 앱</strong
+    ><small class="diagram-muted">own user store</small>
+  </div>
+  <div class="diagram-step">
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+    <span class="diagram-pill">authorize</span>
+  </div>
+  <div class="diagram-card" data-rough>
+    <strong>Dispatch</strong
+    ><small class="diagram-muted">identity authority</small
+    ><span class="diagram-pill accent">authenticates human</span>
+  </div>
+  <div class="diagram-step">
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+    <span class="diagram-pill accent">302 + signed JWT</span>
+  </div>
+  <div class="diagram-card" data-rough>
+    <strong>앱 콜백</strong
+    ><small class="diagram-muted"
+      >verify signature · scope:identity · exp &le; 2 min</small
+    ><span class="diagram-pill ok">이메일 기반 JIT 연결</span
+    ><span class="diagram-pill ok">mint local session</span>
+  </div>
+</div>
+```
+
+```css
+.diagram-sso {
+  display: flex;
+  align-items: stretch;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-sso .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  min-width: 150px;
+}
+.diagram-sso .diagram-step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+.diagram-sso .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 1. **앱 → 디스패치(승인).** 앱이 사용자를 신원 인증 기관으로 보냅니다:
 
    ```
@@ -125,13 +178,61 @@ AGENT_NATIVE_IDENTITY_HUB_URL=https://dispatch.agent-native.com
 
 적시 링크는 확인된 이메일에 전적으로 기반한 단일 결정입니다.
 
-```an-diagram title="JIT-link 결정" summary="연결은 확인된 이메일에 입력되며 추가로만 이루어집니다. 기존 계정은 변경 없이 재사용되고, 새 이메일은 새로운 로컬 사용자를 생성합니다."
-{
-  "html": "<div class=\"diagram-jit\"><div class=\"diagram-node\" data-rough>확인된 이메일<br><small class=\"diagram-muted\">서명된 identity JWT에서</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-branch\"><div class=\"diagram-box\" data-rough>Local user exists?<span class=\"diagram-pill ok\">yes &rarr; reuse unchanged</span><span class=\"diagram-pill accent\">no &rarr; create local user</span></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>일반 로컬 세션 발급</div></div></div>",
-  "css": ".diagram-jit{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-jit .diagram-node{display:flex;flex-direction:column;gap:4px;padding:12px 14px}.diagram-jit .diagram-branch{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-jit .diagram-box{display:flex;flex-direction:column;gap:6px;padding:12px 14px}.diagram-jit .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-9m3ozw" title={"JIT-link 결정"} summary={"연결은 확인된 이메일에 입력되며 추가로만 이루어집니다. 기존 계정은 변경 없이 재사용되고, 새 이메일은 새로운 로컬 사용자를 생성합니다."}>
+
+```html
+<div class="diagram-jit">
+  <div class="diagram-node" data-rough>
+    확인된 이메일<br /><small class="diagram-muted"
+      >서명된 identity JWT에서</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-branch">
+    <div class="diagram-box" data-rough>
+      Local user exists?<span class="diagram-pill ok"
+        >yes &rarr; reuse unchanged</span
+      ><span class="diagram-pill accent">no &rarr; create local user</span>
+    </div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+    <div class="diagram-box" data-rough>일반 로컬 세션 발급</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-jit {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-jit .diagram-node {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 14px;
+}
+.diagram-jit .diagram-branch {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-jit .diagram-box {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px 14px;
+}
+.diagram-jit .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## 자체 호스팅 {#self-hosting}
 
 모든 Dispatch 배포는 ID 허브 역할을 할 수 있습니다. `dispatch.agent-native.com`로 제한되지 않습니다. Dispatch 인스턴스를 가리키도록 각 클라이언트 앱의 `AGENT_NATIVE_IDENTITY_HUB_URL`를 설정하세요.