@agent-native/core 0.79.26 → 0.80.0

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

@@ -11,13 +11,66 @@ Dispatch는 작업 공간의 다른 모든 앱 앞에 위치하며 비밀, 통
 
 Dispatch가 없으면 다중 앱 작업 공간의 모든 앱은 자체 Slack 봇, 자체 비밀 저장소, 자체 예약 작업, 작업 공간 지침의 자체 복사본 등 동일한 배관을 다시 구현하게 됩니다. 하나의 API 키를 순환하면 10개의 재배포가 이루어집니다. 새 정책을 추가하면 10번의 복사-붙여넣기가 수행됩니다. Dispatch는 이 모든 것을 하나의 앱에 중앙 집중화하므로 다른 앱은 해당 도메인에 계속 집중할 수 있습니다.
 
-```an-diagram title="Dispatch을 작업공간 제어 평면으로 사용" summary="하나의 받은 편지함, 하나의 저장소, 하나의 MCP 게이트웨이 및 공유 리소스는 Dispatch가 A2A 피어로 연결되는 도메인 앱 앞에 있습니다."
-{
-  "html": "<div class=\"dsp-hub\"><div class=\"diagram-node\">Users &amp; external agents<br><small class=\"diagram-muted\">Slack · 이메일 · Telegram · WhatsApp · MCP</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-panel dsp-control\" data-rough><span class=\"diagram-pill accent\">Dispatch &mdash; control plane</span><div class=\"dsp-caps\"><span class=\"diagram-pill\">중앙 받은편지함</span><span class=\"diagram-pill\">비밀 저장소</span><span class=\"diagram-pill\">앱 간 위임</span><span class=\"diagram-pill\">MCP gateway</span><span class=\"diagram-pill\">워크스페이스 리소스</span></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"dsp-peers\"><div class=\"diagram-box\" data-rough>Mail</div><div class=\"diagram-box\" data-rough>Calendar</div><div class=\"diagram-box\" data-rough>Analytics</div></div><small class=\"diagram-muted\">domain apps &mdash; A2A peers</small></div>",
-  "css": ".dsp-hub{display:flex;flex-direction:column;align-items:center;gap:10px}.dsp-hub .dsp-control{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}.dsp-hub .dsp-caps{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.dsp-hub .dsp-peers{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}"
+<Diagram id="doc-block-1e2bc76" title={"Dispatch을 작업공간 제어 평면으로 사용"} summary={"하나의 받은 편지함, 하나의 저장소, 하나의 MCP 게이트웨이 및 공유 리소스는 Dispatch가 A2A 피어로 연결되는 도메인 앱 앞에 있습니다."}>
+
+```html
+<div class="dsp-hub">
+  <div class="diagram-node">
+    Users &amp; external agents<br /><small class="diagram-muted"
+      >Slack · 이메일 · Telegram · WhatsApp · MCP</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-panel dsp-control" data-rough>
+    <span class="diagram-pill accent">Dispatch &mdash; control plane</span>
+    <div class="dsp-caps">
+      <span class="diagram-pill">중앙 받은편지함</span
+      ><span class="diagram-pill">비밀 저장소</span
+      ><span class="diagram-pill">앱 간 위임</span
+      ><span class="diagram-pill">MCP gateway</span
+      ><span class="diagram-pill">워크스페이스 리소스</span>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="dsp-peers">
+    <div class="diagram-box" data-rough>Mail</div>
+    <div class="diagram-box" data-rough>Calendar</div>
+    <div class="diagram-box" data-rough>Analytics</div>
+  </div>
+  <small class="diagram-muted">domain apps &mdash; A2A peers</small>
+</div>
+```
+
+```css
+.dsp-hub {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+.dsp-hub .dsp-control {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+}
+.dsp-hub .dsp-caps {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.dsp-hub .dsp-peers {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 ```
 
+</Diagram>
+
 ## 배송을 원하실 때 {#when}
 
 다음 중 하나라도 해당되면 파견을 요청하세요:
@@ -108,13 +161,84 @@ Dispatch Dreams는 이전 에이전트 실행, 피드백, 평가 및 반복적
 4. **스레드에 답변이 게시되었습니다.** 분석 에이전트가 결과를 반환합니다. Dispatch는 이를 형식화하고 연결된 ID가 있는 경우 이를 사용하여 사용자가 작성한 것과 동일한 Slack 스레드에 다시 게시합니다(따라서 에이전트는 작업공간 소유자가 아닌 요청자의 권한으로 작동합니다).
 5. **무엇이든 죽으면 복구됩니다.** 프로세서가 비행 중에 충돌하는 경우(A2A 시간 초과, 다운스트림 에이전트 오류, 기능 정지) 재시도 작업은 60초마다 중단된 작업을 스윕하고 프로세서를 다시 실행합니다. 작업이 `failed`로 표시되기 전에 최대 3번의 시도가 가능합니다.
 
-```an-diagram title="Dispatch을 통한 Slack 메시지" summary="Slack는 SQL에 대기열에 추가되고 새로 실행되면 이를 배출하며 Dispatch 에이전트는 A2A을 통해 도메인 작업을 위임하고 응답은 원래 스레드로 다시 전달됩니다. 60초 재시도 작업은 비행 중에 죽은 모든 것을 복구합니다."
-{
-  "html": "<div class=\"dsp-flow\"><div class=\"dsp-row\"><div class=\"diagram-node\">Slack 개인 메시지 메시지<br><small class=\"diagram-muted\">\"summarize last week's signups\"</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough><strong>/slack/webhook</strong><br><small class=\"diagram-muted\">검증 + 대기 작업 INSERT</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill ok\">200</div></div><div class=\"dsp-row\"><div class=\"diagram-box\" data-rough><strong>fresh processor</strong><br><small class=\"diagram-muted\">작업 클레임 · 에이전트 루프 시작</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\">Dispatch 에이전트가 결정</span><small class=\"diagram-muted\">analytics intent &rarr; call-agent</small></div></div><div class=\"dsp-row\"><div class=\"diagram-box\" data-rough>분석 앱<br><small class=\"diagram-muted\">A2A 피어 · SQL 작업 실행</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill ok\">reply posted in thread</div></div><div class=\"diagram-panel dsp-retry\" data-rough><span class=\"diagram-pill warn\">recovery</span> <span class=\"diagram-muted\">if the processor crashes &mdash; A2A timeout, downstream error, freeze &mdash; the 60s retry job re-fires it (&le;3 attempts) so the Slack reply still arrives</span> <span class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</span></div></div>",
-  "css": ".dsp-flow{display:flex;flex-direction:column;gap:12px}.dsp-flow .dsp-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.dsp-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}.dsp-flow .dsp-retry{display:flex;align-items:center;gap:8px;flex-wrap:wrap}"
+<Diagram id="doc-block-d6y8r7" title={"Dispatch을 통한 Slack 메시지"} summary={"Slack는 SQL에 대기열에 추가되고 새로 실행되면 이를 배출하며 Dispatch 에이전트는 A2A을 통해 도메인 작업을 위임하고 응답은 원래 스레드로 다시 전달됩니다. 60초 재시도 작업은 비행 중에 죽은 모든 것을 복구합니다."}>
+
+```html
+<div class="dsp-flow">
+  <div class="dsp-row">
+    <div class="diagram-node">
+      Slack 개인 메시지 메시지<br /><small class="diagram-muted"
+        >"summarize last week's signups"</small
+      >
+    </div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+    <div class="diagram-box" data-rough>
+      <strong>/slack/webhook</strong><br /><small class="diagram-muted"
+        >검증 + 대기 작업 INSERT</small
+      >
+    </div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+    <div class="diagram-pill ok">200</div>
+  </div>
+  <div class="dsp-row">
+    <div class="diagram-box" data-rough>
+      <strong>fresh processor</strong><br /><small class="diagram-muted"
+        >작업 클레임 · 에이전트 루프 시작</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">Dispatch 에이전트가 결정</span
+      ><small class="diagram-muted">analytics intent &rarr; call-agent</small>
+    </div>
+  </div>
+  <div class="dsp-row">
+    <div class="diagram-box" data-rough>
+      분석 앱<br /><small class="diagram-muted">A2A 피어 · SQL 작업 실행</small>
+    </div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+    <div class="diagram-pill ok">reply posted in thread</div>
+  </div>
+  <div class="diagram-panel dsp-retry" data-rough>
+    <span class="diagram-pill warn">recovery</span>
+    <span class="diagram-muted"
+      >if the processor crashes &mdash; A2A timeout, downstream error, freeze
+      &mdash; the 60s retry job re-fires it (&le;3 attempts) so the Slack reply
+      still arrives</span
+    >
+    <span class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</span>
+  </div>
+</div>
+```
+
+```css
+.dsp-flow {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.dsp-flow .dsp-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.dsp-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.dsp-flow .dsp-retry {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
 }
 ```
 
+</Diagram>
+
 이메일, 텔레그램, WhatsApp에도 동일한 흐름이 적용됩니다. 어댑터만 변경됩니다.
 
 ## 신뢰성 스토리 {#reliability}

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

@@ -27,13 +27,72 @@ description: "<AgentPanel>, <AgentSidebar> 및 sendToAgentChat()을 사용하여
 
 이 모든 것은 `@agent-native/core/client`에서 내보내집니다.
 
-```an-diagram title="마운트 모델" summary="<AgentSidebar>은 기존 레이아웃을 래핑합니다. 경로는 주요 영역에서 렌더링됩니다. 에이전트 패널이 그 옆에 마운트됩니다. <AgentPanel>은 래퍼가 없는 동일한 패널입니다."
-{
-  "html": "<div class=\"diagram-mount\"><div class=\"diagram-box sidebar\" data-rough><span class=\"diagram-pill accent\">&lt;AgentSidebar&gt;</span><div class=\"inner\"><div class=\"diagram-node main\">귀하의 앱<br><small class=\"diagram-muted\">children: header + &lt;Outlet/&gt;</small></div><div class=\"diagram-node panel\">에이전트 패널<br><small class=\"diagram-muted\">chat &middot; CLI &middot; workspace</small></div></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-card alt\"><span class=\"diagram-pill\">&lt;AgentPanel&gt;</span><small class=\"diagram-muted\">same panel, no wrapper &mdash; you own the layout</small></div></div>",
-  "css": ".diagram-mount{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-mount .sidebar{display:flex;flex-direction:column;gap:8px;padding:14px}.diagram-mount .inner{display:flex;gap:10px}.diagram-mount .main{flex:2}.diagram-mount .panel{flex:1}.diagram-mount .alt{display:flex;flex-direction:column;gap:6px;padding:14px}.diagram-mount .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1jfm3tw" title={"마운트 모델"} summary={"<AgentSidebar>은 기존 레이아웃을 래핑합니다. 경로는 주요 영역에서 렌더링됩니다. 에이전트 패널이 그 옆에 마운트됩니다. <AgentPanel>은 래퍼가 없는 동일한 패널입니다."}>
+
+```html
+<div class="diagram-mount">
+  <div class="diagram-box sidebar" data-rough>
+    <span class="diagram-pill accent">&lt;AgentSidebar&gt;</span>
+    <div class="inner">
+      <div class="diagram-node main">
+        귀하의 앱<br /><small class="diagram-muted"
+          >children: header + &lt;Outlet/&gt;</small
+        >
+      </div>
+      <div class="diagram-node panel">
+        에이전트 패널<br /><small class="diagram-muted"
+          >chat &middot; CLI &middot; workspace</small
+        >
+      </div>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&harr;</div>
+  <div class="diagram-card alt">
+    <span class="diagram-pill">&lt;AgentPanel&gt;</span
+    ><small class="diagram-muted"
+      >same panel, no wrapper &mdash; you own the layout</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-mount {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-mount .sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px;
+}
+.diagram-mount .inner {
+  display: flex;
+  gap: 10px;
+}
+.diagram-mount .main {
+  flex: 2;
+}
+.diagram-mount .panel {
+  flex: 1;
+}
+.diagram-mount .alt {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px;
+}
+.diagram-mount .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## 80% 사례: `<AgentSidebar>` {#sidebar}
 
 가장 일반적인 설정은 모든 화면의 오른쪽에서 열리는 사이드바입니다.

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

@@ -13,13 +13,56 @@ description: "호스팅 에이전트 실행이 중단되었다가 다시 시작
 
 튼튼한 이력서가 그 격차를 줄여줍니다. 재개 시 프레임워크는 이미 완료된 부작용 도구 호출을 알고 두 레이어에서 다시 실행을 거부합니다.
 
-```an-diagram title="두 레이어는 이력서의 중복 부작용을 차단합니다." summary="저널은 내구성 있는 원장을 읽고 이전 호출을 분류합니다. 레이어 1은 모델에 알려주고, 레이어 2는 완료된 항목과 일치하는 재배송된 쓰기를 하드 차단합니다."
-{
-  "html": "<div class=\"diagram-durable\"><div class=\"diagram-box\" data-rough>Run-event ledger<br><small class=\"diagram-muted\">tool_start / tool_done</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><strong>Tool-call journal</strong><small class=\"diagram-ok\">completed = start+done</small><small class=\"diagram-warn\">interrupted = start, no done</small></div><div class=\"diagram-col\"><div class=\"diagram-pill\">Layer 1 · prompt note &rarr; model</div><div class=\"diagram-pill accent\">레이어 2 · 하드 블록 후 재디스패치된 쓰기</div></div></div>",
-  "css": ".diagram-durable{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-durable .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-durable .diagram-arrow{font-size:22px;line-height:1}.diagram-durable .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-1rgn59l" title={"두 레이어는 이력서의 중복 부작용을 차단합니다."} summary={"저널은 내구성 있는 원장을 읽고 이전 호출을 분류합니다. 레이어 1은 모델에 알려주고, 레이어 2는 완료된 항목과 일치하는 재배송된 쓰기를 하드 차단합니다."}>
+
+```html
+<div class="diagram-durable">
+  <div class="diagram-box" data-rough>
+    Run-event ledger<br /><small class="diagram-muted"
+      >tool_start / tool_done</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    <strong>Tool-call journal</strong
+    ><small class="diagram-ok">completed = start+done</small
+    ><small class="diagram-warn">interrupted = start, no done</small>
+  </div>
+  <div class="diagram-col">
+    <div class="diagram-pill">Layer 1 · prompt note &rarr; model</div>
+    <div class="diagram-pill accent">
+      레이어 2 · 하드 블록 후 재디스패치된 쓰기
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-durable {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-durable .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-durable .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-durable .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## 도구 호출 일지 {#journal}
 
 저널은 **내구성 있는 실행 이벤트 원장에 대한 순수 읽기**입니다. 핫 경로에 새로운 기록 후크가 없습니다. 현재 차례에 대해 이미 기록된 도구 호출을 분류합니다.

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

@@ -11,13 +11,56 @@ description: "페이지 컨텍스트 및 호스트 명령을 사용하여 기존
 내장형 사이드카 또는 전체 앱으로 시작
 [Agent Surfaces](/docs/agent-surfaces).
 
-```an-diagram title="임베딩 멤브레인" summary="호스트 앱은 서버 측 인증 및 라이브 페이지 컨텍스트를 제공합니다. Agent-Native은 내구성 있는 사이드카를 실행하고 클라이언트 작업 및 호스트 명령을 통해 열린 탭에 도달합니다."
-{
-  "html": "<div class=\"diagram-embed\"><div class=\"diagram-box\" data-rough><strong>호스트 SaaS 앱</strong><small class=\"diagram-muted\">내 UI, 내 인증</small></div><div class=\"diagram-col\"><div class=\"diagram-pill accent\">getContext &rarr;</div><div class=\"diagram-pill\">&larr; 클라이언트 작업</div><div class=\"diagram-pill\">&larr; 호스트 명령</div></div><div class=\"diagram-panel center\" data-rough><strong>Agent-Native sidecar</strong><small class=\"diagram-muted\">영구 채팅 · 앱 상태 · 확장</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>SQL<br><small class=\"diagram-muted\">프레임워크 테이블</small></div></div>",
-  "css": ".diagram-embed{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-embed .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-embed .diagram-arrow{font-size:22px;line-height:1}.diagram-embed .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-ig37ik" title={"임베딩 멤브레인"} summary={"호스트 앱은 서버 측 인증 및 라이브 페이지 컨텍스트를 제공합니다. Agent-Native은 내구성 있는 사이드카를 실행하고 클라이언트 작업 및 호스트 명령을 통해 열린 탭에 도달합니다."}>
+
+```html
+<div class="diagram-embed">
+  <div class="diagram-box" data-rough>
+    <strong>호스트 SaaS 앱</strong
+    ><small class="diagram-muted">내 UI, 내 인증</small>
+  </div>
+  <div class="diagram-col">
+    <div class="diagram-pill accent">getContext &rarr;</div>
+    <div class="diagram-pill">&larr; 클라이언트 작업</div>
+    <div class="diagram-pill">&larr; 호스트 명령</div>
+  </div>
+  <div class="diagram-panel center" data-rough>
+    <strong>Agent-Native sidecar</strong
+    ><small class="diagram-muted">영구 채팅 · 앱 상태 · 확장</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    SQL<br /><small class="diagram-muted">프레임워크 테이블</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-embed {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-embed .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-embed .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-embed .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## 여기서 시작하세요: 배터리 포함 플러그인 {#batteries-included}
 
 대부분의 SaaS 호스트의 경우 **전체 내장 런타임 사용** — 서버 플러그인
@@ -373,13 +416,43 @@ const hostTools = createAgentNativeHostTools({
 
 CLAW 스타일 동료의 경우 iframe은 사이드카 백엔드에 라이브 브라우저 탭을 등록할 수도 있습니다. 그런 다음 에이전트는 요청을 대기열에 추가하는 일반 백엔드 도구를 가져오고, iframe이 이를 요청하고, 호스트 페이지가 이를 실행하며, 백엔드가 결과를 에이전트에 반환합니다.
 
-```an-diagram title="서버 중재 브라우저 세션 브리지" summary="백엔드 도구는 작업을 대기열에 넣습니다. 등록된 탭이 이를 요청하고 라이브 페이지에서 실행하면 결과가 에이전트에 반환됩니다. 따라서 backend/Slack/A2A 에이전트는 여전히 열려 있는 탭을 터치할 수 있습니다."
-{
-  "html": "<div class=\"diagram-bridge\"><div class=\"diagram-node\" data-rough>백엔드 에이전트<br><small class=\"diagram-muted\">채팅 · Slack · A2A</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>enqueue request<br><small class=\"diagram-muted\">/_agent-native/browser-sessions</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\" data-rough>활성 탭이 가져감<br><small class=\"diagram-muted\">registered bridge</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill ok\">result &rarr; agent</div></div>",
-  "css": ".diagram-bridge{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-bridge .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1sxxt6z" title={"서버 중재 브라우저 세션 브리지"} summary={"백엔드 도구는 작업을 대기열에 넣습니다. 등록된 탭이 이를 요청하고 라이브 페이지에서 실행하면 결과가 에이전트에 반환됩니다. 따라서 backend/Slack/A2A 에이전트는 여전히 열려 있는 탭을 터치할 수 있습니다."}>
+
+```html
+<div class="diagram-bridge">
+  <div class="diagram-node" data-rough>
+    백엔드 에이전트<br /><small class="diagram-muted">채팅 · Slack · A2A</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    enqueue request<br /><small class="diagram-muted"
+      >/_agent-native/browser-sessions</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node" data-rough>
+    활성 탭이 가져감<br /><small class="diagram-muted">registered bridge</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-pill ok">result &rarr; agent</div>
+</div>
+```
+
+```css
+.diagram-bridge {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-bridge .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 사이드카 앱에서 iframe이 마운트되면 브라우저 세션 브리지를 한 번 시작합니다.
 
 ```tsx

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

@@ -14,13 +14,61 @@ description: "고정 입력에 대해 실제 에이전트를 실행하고 구성
 
 러너는 기존 레지스트리에서 제공자에 구애받지 않는 엔진/모델을 확인하므로 모델은 하드코딩되지 않습니다. 따라서 앱이 구성된 엔진에 대해 동일한 제품군이 실행됩니다.
 
-```an-diagram title="고정 입력에서 배포 게이트까지" summary="러너는 실제로 각 사례에 대해 에이전트 루프를 실행하고, 출력에 점수를 매기고, 득점자가 임계값 아래로 떨어지면 0이 아닌 상태로 종료하여 드롭인 CI 게이트가 됩니다."
-{
-  "html": "<div class=\"eval-flow\"><div class=\"diagram-node\">*.eval.ts<br><small class=\"diagram-muted\">prompt + expected behavior</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">에이전트 루프 실행<br><small class=\"diagram-muted\">real engine/model</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">Scorers<br><small class=\"diagram-muted\">every one must pass threshold</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box ok\">exit 0 &rarr; deploy</div><div class=\"diagram-box warn\">exit 1 &rarr; block</div></div></div>",
-  "css": ".eval-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.eval-flow .diagram-node{display:flex;flex-direction:column;gap:2px;padding:10px 14px}.eval-flow .diagram-col{display:flex;flex-direction:column;gap:8px}.eval-flow .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1se6fft" title={"고정 입력에서 배포 게이트까지"} summary={"러너는 실제로 각 사례에 대해 에이전트 루프를 실행하고, 출력에 점수를 매기고, 득점자가 임계값 아래로 떨어지면 0이 아닌 상태로 종료하여 드롭인 CI 게이트가 됩니다."}>
+
+```html
+<div class="eval-flow">
+  <div class="diagram-node">
+    *.eval.ts<br /><small class="diagram-muted"
+      >prompt + expected behavior</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node">
+    에이전트 루프 실행<br /><small class="diagram-muted"
+      >real engine/model</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node">
+    Scorers<br /><small class="diagram-muted"
+      >every one must pass threshold</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box ok">exit 0 &rarr; deploy</div>
+    <div class="diagram-box warn">exit 1 &rarr; block</div>
+  </div>
+</div>
+```
+
+```css
+.eval-flow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.eval-flow .diagram-node {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 10px 14px;
+}
+.eval-flow .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.eval-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## 평가 작성 {#writing}
 
 `*.eval.ts` 파일을 앱(또는 `evals/*.ts` 파일)의 아무 곳에나 놓습니다. 각 파일 `export default defineEval(...)`(또는 그 배열을 내보냅니다):
@@ -80,13 +128,59 @@ interface AgentRunOutput {
 
 `createScorer`는 Mastra 스타일의 4단계 파이프라인에서 득점자를 구축합니다. `generateScore`만 필요합니다:
 
-```an-diagram title="4단계 득점자 파이프라인" summary="기본적으로 ID를 전처리하고 분석합니다. generateScore만 필요합니다. analyze는 일반 JS를 실행하거나 ctx를 통해 LLM 판사를 호출할 수 있습니다."
-{
-  "html": "<div class=\"scorer\"><div class=\"diagram-card\"><span class=\"diagram-pill\">preprocess(run)</span><small class=\"diagram-muted\">transform the run/output &middot; optional</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">analyze(x, ctx)</span><small class=\"diagram-muted\">plain JS or LLM judge &middot; optional</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">generateScore(a)</span><small class=\"diagram-muted\">&rarr; 0..1 normalized &middot; <strong>required</strong></small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">generateReason</span><small class=\"diagram-muted\">human-readable why &middot; optional</small></div></div>",
-  "css": ".scorer{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.scorer .diagram-card{display:flex;flex-direction:column;gap:2px;padding:8px 12px}.scorer .diagram-arrow{font-size:20px;line-height:1}"
+<Diagram id="doc-block-1w5mnbn" title={"4단계 득점자 파이프라인"} summary={"기본적으로 ID를 전처리하고 분석합니다. generateScore만 필요합니다. analyze는 일반 JS를 실행하거나 ctx를 통해 LLM 판사를 호출할 수 있습니다."}>
+
+```html
+<div class="scorer">
+  <div class="diagram-card">
+    <span class="diagram-pill">preprocess(run)</span
+    ><small class="diagram-muted"
+      >transform the run/output &middot; optional</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">analyze(x, ctx)</span
+    ><small class="diagram-muted"
+      >plain JS or LLM judge &middot; optional</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">generateScore(a)</span
+    ><small class="diagram-muted"
+      >&rarr; 0..1 normalized &middot; <strong>required</strong></small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">generateReason</span
+    ><small class="diagram-muted">human-readable why &middot; optional</small>
+  </div>
+</div>
+```
+
+```css
+.scorer {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.scorer .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 12px;
+}
+.scorer .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ```text
 preprocess(run)     → x          transform the run/output (optional)
 analyze(x, ctx)     → analysis   plain JS OR an LLM judge (optional)