@agent-native/core 0.79.26 → 0.79.27

package/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/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.
 

package/docs/content/locales/ko-KR/agent-teams.mdx

@@ -20,13 +20,72 @@ Agent Teams는 핵심 실행 관리자에서 실행됩니다. 이벤트 스트
 
 하위 에이전트 상태는 `application_state` SQL 테이블(`agent-task:<taskId>` 아래)에 유지되므로 작업은 서버리스 콜드 스타트에서도 유지되고 여러 프로세스에서 작동합니다.
 
-```an-diagram title="오케스트레이터 및 전문가" summary="기본 채팅은 자체 스레드에서 실행되고 인라인 칩으로 다시 보고하는 하위 에이전트에 위임됩니다."
-{
-  "html": "<div class=\"at-orc\"><div class=\"diagram-card main\"><span class=\"diagram-pill accent\">기본 채팅</span><small class=\"diagram-muted\">orchestrator &mdash; reads your request, delegates</small></div><div class=\"at-fan\"><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"at-subs\"><div class=\"diagram-box\">코드 리뷰<br><small class=\"diagram-muted\">own thread &amp; prompt</small></div><div class=\"diagram-box\">BigQuery 분석<br><small class=\"diagram-muted\">own tools</small></div><div class=\"diagram-box\">음성으로 이메일<br><small class=\"diagram-muted\">own context</small></div></div></div><div class=\"diagram-pill\">each appears inline as a live chip &#8635;</div></div>",
-  "css": ".at-orc{display:flex;flex-direction:column;align-items:center;gap:12px}.at-orc .diagram-card{padding:14px 18px;display:flex;flex-direction:column;gap:4px;align-items:center}.at-orc .at-fan{display:flex;flex-direction:column;align-items:center;gap:8px}.at-orc .diagram-arrow{font-size:22px}.at-orc .at-subs{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.at-orc .diagram-box{text-align:center}"
+<Diagram id="doc-block-14fetr8" title={"오케스트레이터 및 전문가"} summary={"기본 채팅은 자체 스레드에서 실행되고 인라인 칩으로 다시 보고하는 하위 에이전트에 위임됩니다."}>
+
+```html
+<div class="at-orc">
+  <div class="diagram-card main">
+    <span class="diagram-pill accent">기본 채팅</span
+    ><small class="diagram-muted"
+      >orchestrator &mdash; reads your request, delegates</small
+    >
+  </div>
+  <div class="at-fan">
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+    <div class="at-subs">
+      <div class="diagram-box">
+        코드 리뷰<br /><small class="diagram-muted"
+          >own thread &amp; prompt</small
+        >
+      </div>
+      <div class="diagram-box">
+        BigQuery 분석<br /><small class="diagram-muted">own tools</small>
+      </div>
+      <div class="diagram-box">
+        음성으로 이메일<br /><small class="diagram-muted">own context</small>
+      </div>
+    </div>
+  </div>
+  <div class="diagram-pill">each appears inline as a live chip &#8635;</div>
+</div>
+```
+
+```css
+.at-orc {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+.at-orc .diagram-card {
+  padding: 14px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: center;
+}
+.at-orc .at-fan {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+.at-orc .diagram-arrow {
+  font-size: 22px;
+}
+.at-orc .at-subs {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.at-orc .diagram-box {
+  text-align: center;
 }
 ```
 
+</Diagram>
+
 ## 하위 에이전트 생성 시기 {#when-to-spawn}
 
 작업이 수행될 때 생성:
@@ -85,13 +144,70 @@ const task = await spawnTask({
 
 ## 작업 수명 주기 {#lifecycle}
 
-```an-diagram title="스폰태스크()가 하는 일" summary="각 생성은 스레드를 생성하고 상태를 SQL에 유지하며 완료될 때까지 칩 이벤트를 스트리밍합니다."
-{
-  "html": "<div class=\"at-life\"><div class=\"diagram-box\"><code>spawnTask()</code></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">create thread</span><small class=\"diagram-muted\">new row in <code>chat_threads</code>, description as first message</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">persist state</span><small class=\"diagram-muted\"><code>agent-task:&lt;id&gt;</code> &rarr; <code>application_state</code>, status=running</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">stream</span><small class=\"diagram-muted\"><code>agent_task_started</code> &rarr; chip appears; <code>agent_task_step</code> &rarr; chip updates live</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card ok\"><span class=\"diagram-pill ok\">complete</span><small class=\"diagram-muted\">status=completed, write summary + preview, emit <code>agent_task_done</code></small></div></div>",
-  "css": ".at-life{display:flex;flex-direction:column;align-items:stretch;gap:6px;max-width:560px}.at-life .diagram-card{display:flex;flex-direction:column;gap:3px;padding:10px 14px}.at-life .diagram-box{align-self:flex-start}.at-life .diagram-arrow{font-size:18px;align-self:center}"
+<Diagram id="doc-block-nrndtz" title={"스폰태스크()가 하는 일"} summary={"각 생성은 스레드를 생성하고 상태를 SQL에 유지하며 완료될 때까지 칩 이벤트를 스트리밍합니다."}>
+
+```html
+<div class="at-life">
+  <div class="diagram-box"><code>spawnTask()</code></div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">create thread</span
+    ><small class="diagram-muted"
+      >new row in <code>chat_threads</code>, description as first message</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">persist state</span
+    ><small class="diagram-muted"
+      ><code>agent-task:&lt;id&gt;</code> &rarr; <code>application_state</code>,
+      status=running</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">stream</span
+    ><small class="diagram-muted"
+      ><code>agent_task_started</code> &rarr; chip appears;
+      <code>agent_task_step</code> &rarr; chip updates live</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card ok">
+    <span class="diagram-pill ok">complete</span
+    ><small class="diagram-muted"
+      >status=completed, write summary + preview, emit
+      <code>agent_task_done</code></small
+    >
+  </div>
+</div>
+```
+
+```css
+.at-life {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 6px;
+  max-width: 560px;
+}
+.at-life .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 10px 14px;
+}
+.at-life .diagram-box {
+  align-self: flex-start;
+}
+.at-life .diagram-arrow {
+  font-size: 18px;
+  align-self: center;
 }
 ```
 
+</Diagram>
+
 언제든지 상위 에이전트는 `sendToTask(taskId, message)`를 통한 후속 조치로 하위 에이전트를 재개할 수 있습니다. 하위 에이전트에 오류가 발생하면 `markTaskErrored(taskId, reason)`는 오류를 기록하고 이를 사용자에게 표시합니다.
 
 양방향 메시징은 내구성이 있습니다. 하위 에이전트 실행에 대한 상위 후속 조치는 다음과 같습니다.
@@ -138,13 +254,56 @@ interface AgentTask {
 
 최상위 채팅은 깊이 `0`입니다. 생성되는 하위 에이전트는 깊이 `1`입니다. 해당 하위 에이전트가 한 번 더 생성될 수 있습니다(깊이 `2`). 깊이 `3` 하위 에이전트를 생성하는 스폰은 **거부**됩니다. 기본 한도는 **2**입니다.
 
-```an-diagram title="위임 깊이 가드(기본 캡 2)" summary="각 레벨은 상한선까지 더 깊게 생성될 수 있습니다. 그 이후의 스폰은 서버 측에서 거부됩니다."
-{
-  "html": "<div class=\"at-depth\"><div class=\"diagram-card ok\"><span class=\"diagram-pill\">depth 0</span><strong>최상위 채팅</strong><small class=\"diagram-muted ok\">may spawn &darr;</small></div><div class=\"diagram-card ok\"><span class=\"diagram-pill\">depth 1</span><strong>하위 에이전트</strong><small class=\"diagram-muted ok\">may spawn &darr;</small></div><div class=\"diagram-card warn\"><span class=\"diagram-pill warn\">depth 2</span><strong>하위 에이전트's sub-agent</strong><small class=\"diagram-muted\">at the cap &mdash; may NOT spawn</small></div><div class=\"diagram-card\"><span class=\"diagram-pill warn\">depth 3</span><strong>Refused</strong><small class=\"diagram-muted\">server-side error</small></div></div>",
-  "css": ".at-depth{display:flex;flex-direction:column;gap:8px}.at-depth .diagram-card{display:flex;flex-direction:column;gap:2px;padding:10px 14px}.at-depth .rung-1,.at-depth .diagram-card:nth-child(2){margin-inline-start:24px}.at-depth .diagram-card:nth-child(3){margin-inline-start:48px}.at-depth .diagram-card:nth-child(4){margin-inline-start:72px}"
+<Diagram id="doc-block-1cx4o5x" title={"위임 깊이 가드(기본 캡 2)"} summary={"각 레벨은 상한선까지 더 깊게 생성될 수 있습니다. 그 이후의 스폰은 서버 측에서 거부됩니다."}>
+
+```html
+<div class="at-depth">
+  <div class="diagram-card ok">
+    <span class="diagram-pill">depth 0</span><strong>최상위 채팅</strong
+    ><small class="diagram-muted ok">may spawn &darr;</small>
+  </div>
+  <div class="diagram-card ok">
+    <span class="diagram-pill">depth 1</span><strong>하위 에이전트</strong
+    ><small class="diagram-muted ok">may spawn &darr;</small>
+  </div>
+  <div class="diagram-card warn">
+    <span class="diagram-pill warn">depth 2</span
+    ><strong>하위 에이전트's sub-agent</strong
+    ><small class="diagram-muted">at the cap &mdash; may NOT spawn</small>
+  </div>
+  <div class="diagram-card">
+    <span class="diagram-pill warn">depth 3</span><strong>Refused</strong
+    ><small class="diagram-muted">server-side error</small>
+  </div>
+</div>
+```
+
+```css
+.at-depth {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.at-depth .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 10px 14px;
+}
+.at-depth .rung-1,
+.at-depth .diagram-card:nth-child(2) {
+  margin-inline-start: 24px;
+}
+.at-depth .diagram-card:nth-child(3) {
+  margin-inline-start: 48px;
+}
+.at-depth .diagram-card:nth-child(4) {
+  margin-inline-start: 72px;
 }
 ```
 
+</Diagram>
+
 적용은 주변적입니다. 각 하위 에이전트는 자체 깊이를 기록하는 `AsyncLocalStorage` 내부에서 실행되므로 해당 실행에서 전이적으로 도달한 모든 `spawnTask`는 상위의 깊이를 읽고 한도에 도달하면 거부합니다. `agent-teams` 도구가 이를 가져서는 안 되는 하위 에이전트에 전달된 경우에도 마찬가지입니다. 결정은 순수하고 단위 테스트 가능한 `evaluateSubagentDepth(parentDepth)`로 노출됩니다. 거부된 생성은 다음과 같은 명확한 오류를 반환합니다. _"위임 깊이 제한에 도달했습니다(최대 N). 다른 하위 에이전트를 생성할 수 없습니다."_
 
 ### 캡 구성 {#depth-guard-config}

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

@@ -19,13 +19,60 @@ description: "공개 경로를 에이전트(robots.txt, llms.txt, 마크다운
 
 `publicMcp: true`를 설정하면 선택한 actions가 공개 MCP 엔드포인트로 추가로 노출되어 외부 에이전트가 직접 호출할 수 있습니다([MCP Protocol](/docs/mcp-protocol) 참조).
 
-```an-diagram title="공개 경로가 게시하는 내용" summary="공개 경로는 상담원 친화적인 표현으로 전개됩니다. 경로 읽기는 통화 도구와 별개입니다. 도구 액세스는 선택적으로 유지됩니다."
-{
-  "html": "<div class=\"diagram-web\"><div class=\"diagram-box\" data-rough>공개 라우트<br><small class=\"diagram-muted\">derived from route access settings</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-grid\"><span class=\"diagram-pill\">robots.txt</span><span class=\"diagram-pill\">sitemap.xml</span><span class=\"diagram-pill\">llms.txt</span><span class=\"diagram-pill\">.md mirror</span><span class=\"diagram-pill\">JSON-LD</span><span class=\"diagram-pill\">text/markdown</span></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col gate\"><span class=\"diagram-pill warn\">도구는 비공개 유지</span><small class=\"diagram-muted\">publicMcp + publicAgent.expose required</small></div></div>",
-  "css": ".diagram-web{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-web .diagram-arrow{font-size:22px;line-height:1}.diagram-web .diagram-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.diagram-web .gate{display:flex;flex-direction:column;gap:4px;align-items:flex-start}"
+<Diagram id="doc-block-qcp06n" title={"공개 경로가 게시하는 내용"} summary={"공개 경로는 상담원 친화적인 표현으로 전개됩니다. 경로 읽기는 통화 도구와 별개입니다. 도구 액세스는 선택적으로 유지됩니다."}>
+
+```html
+<div class="diagram-web">
+  <div class="diagram-box" data-rough>
+    공개 라우트<br /><small class="diagram-muted"
+      >derived from route access settings</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-grid">
+    <span class="diagram-pill">robots.txt</span
+    ><span class="diagram-pill">sitemap.xml</span
+    ><span class="diagram-pill">llms.txt</span
+    ><span class="diagram-pill">.md mirror</span
+    ><span class="diagram-pill">JSON-LD</span
+    ><span class="diagram-pill">text/markdown</span>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col gate">
+    <span class="diagram-pill warn">도구는 비공개 유지</span
+    ><small class="diagram-muted"
+      >publicMcp + publicAgent.expose required</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-web {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-web .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-web .diagram-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+.diagram-web .gate {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: flex-start;
 }
 ```
 
+</Diagram>
+
 ## 구성 {#config}
 
 기존 작업 공간 앱 구성 아래에 `agentWeb`를 추가합니다(앱의 `agent-native` 키 아래 `package.json` 또는 이에 상응하는 `workspace.agentWeb`, `agentWeb` 또는 `root.agentWeb`). 공개 경로 목록은 여전히 ​​앱의 경로 액세스 설정에서 파생됩니다. `agentWeb`는 공개 화면이 상담원에게 표시되는 방식을 제어합니다.