@agent-native/core 0.79.26 → 0.80.0

package/docs/content/locales/ko-KR/multi-tenancy.mdx

@@ -19,13 +19,49 @@ description: "모든 에이전트 기반 앱은 구성이 필요 없는 조직,
 
 CRM, 프로젝트 추적기, 지원 받은 편지함 또는 모든 팀 도구에 대한 에이전트 기반을 평가하는 경우 다중 테넌트 기반이 이미 존재합니다. 모든 자사 템플릿은 다중 테넌트입니다. 목록은 [Cloneable SaaS templates](/docs/cloneable-saas)를 참조하세요.
 
-```an-diagram title="조직 멤버십 및 격리" summary="사용자는 owner/admin/member로 조직에 가입합니다. 모든 소유 가능 행은 이를 소유한 테넌트의 org_id을 전달하며 경계를 넘어 누출되는 행은 없습니다."
-{
-  "html": "<div class=\"mt-grid\"><div class=\"diagram-card\"><span class=\"diagram-pill accent\">조직 A</span><small class=\"diagram-muted\">members: alice (owner), bob (member)</small><div class=\"diagram-box\">rows where org_id = A</div></div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">조직 B</span><small class=\"diagram-muted\">members: carol (owner)</small><div class=\"diagram-box\">rows where org_id = B</div></div></div><div class=\"mt-wall\" aria-hidden=\"true\"><span class=\"diagram-pill warn\">no cross-org reads</span></div>",
-  "css": ".mt-grid{display:flex;gap:16px;flex-wrap:wrap}.mt-grid .diagram-card{display:flex;flex-direction:column;gap:8px;padding:14px 16px;flex:1;min-width:200px}.mt-wall{display:flex;justify-content:center;margin-top:12px}"
+<Diagram id="doc-block-7qqrxz" title={"조직 멤버십 및 격리"} summary={"사용자는 owner/admin/member로 조직에 가입합니다. 모든 소유 가능 행은 이를 소유한 테넌트의 org_id을 전달하며 경계를 넘어 누출되는 행은 없습니다."}>
+
+```html
+<div class="mt-grid">
+  <div class="diagram-card">
+    <span class="diagram-pill accent">조직 A</span
+    ><small class="diagram-muted">members: alice (owner), bob (member)</small>
+    <div class="diagram-box">rows where org_id = A</div>
+  </div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">조직 B</span
+    ><small class="diagram-muted">members: carol (owner)</small>
+    <div class="diagram-box">rows where org_id = B</div>
+  </div>
+</div>
+<div class="mt-wall" aria-hidden="true">
+  <span class="diagram-pill warn">no cross-org reads</span>
+</div>
+```
+
+```css
+.mt-grid {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.mt-grid .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px 16px;
+  flex: 1;
+  min-width: 200px;
+}
+.mt-wall {
+  display: flex;
+  justify-content: center;
+  margin-top: 12px;
 }
 ```
 
+</Diagram>
+
 ## 조직 전환기 UI {#org-switcher}
 
 조직 전환기와 회원 UI는 추가 코드 없이 모든 템플릿을 렌더링합니다. 이들은 `/_agent-native/org/*` 아래에서 핵심 조직 REST 경로를 구동합니다(조직 생성, 조직 전환, 구성원 목록/초대/제거, 역할 변경, 허용된 이메일 도메인 설정). 사용자는 전환기에서 활성 조직을 선택합니다. 회원 패널은 초대 및 역할 변경을 처리합니다.
@@ -36,13 +72,49 @@ CRM, 프로젝트 추적기, 지원 받은 편지함 또는 모든 팀 도구에
 
 테넌트 데이터는 `org_id` 열(`ownableColumns()`에 의해 추가됨)로 격리되며 프레임워크는 모든 쿼리 범위를 자동으로 활성 조직(`session.orgId → AGENT_ORG_ID → SQL`)으로 지정합니다. 사용자가 조직을 전환하면 UI, actions 및 에이전트는 모두 해당 조직의 데이터만 볼 수 있습니다. 에이전트는 사용자가 구성원이 아닌 조직의 데이터에 접근할 수 없습니다.
 
-```an-diagram title="세션에서 범위가 지정된 SQL까지" summary="세션의 활성 조직은 AGENT_ORG_ID가 되며, 프레임워크는 이를 모든 쿼리의 WHERE 절로 접습니다."
-{
-  "html": "<div class=\"mt-pipe\"><div class=\"diagram-node\">session.orgId<br><small class=\"diagram-muted\">active org on session</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">AGENT_ORG_ID<br><small class=\"diagram-muted\">request context</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">SQL row scoping<br><small class=\"diagram-muted\">WHERE owner_email = ? AND org_id = ?</small></div></div>",
-  "css": ".mt-pipe{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.mt-pipe .diagram-node{display:flex;flex-direction:column;gap:2px;padding:10px 14px}.mt-pipe .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-t3ub5v" title={"세션에서 범위가 지정된 SQL까지"} summary={"세션의 활성 조직은 AGENT_ORG_ID가 되며, 프레임워크는 이를 모든 쿼리의 WHERE 절로 접습니다."}>
+
+```html
+<div class="mt-pipe">
+  <div class="diagram-node">
+    session.orgId<br /><small class="diagram-muted"
+      >active org on session</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node">
+    AGENT_ORG_ID<br /><small class="diagram-muted">request context</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    SQL row scoping<br /><small class="diagram-muted"
+      >WHERE owner_email = ? AND org_id = ?</small
+    >
+  </div>
+</div>
+```
+
+```css
+.mt-pipe {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.mt-pipe .diagram-node {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 10px 14px;
+}
+.mt-pipe .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 이것은 사용자별 범위 지정에 사용되는 것과 동일한 파이프라인입니다. SQL 수준 메커니즘, `ownableColumns()` 계약 및 `accessFilter` / `resolveAccess` / `assertAccess` 가드에 대해서는 범위 지정 파이프라인을 위한 단일 정보 소스인 [Security → Data Scoping](/docs/security#data-scoping)를 참조하세요.
 
 ## 관련 문서 {#related}

package/docs/content/locales/ko-KR/native-chat-ui.mdx

@@ -17,13 +17,63 @@ description: "액션 선언 기본 채팅 렌더러, 재사용 가능한 DataTab
 Claude, ChatGPT, Copilot 또는 Cursor와 같은 외부 호스트가 렌더링되어야 하는 경우
 앱의 인라인 경로
 
-```an-diagram title="네이티브 렌더 경로" summary="작업이 JSON을 반환합니다. 런타임은 명시적인 위젯 판별자 또는 chatUI.renderer와 일치합니다. AssistantChat는 실제 React 구성요소를 마운트합니다. iframe도 없고 HTML 실행도 없습니다."
-{
-  "html": "<div class=\"diagram-render\"><div class=\"diagram-node\">Action 실행<br><small class=\"diagram-muted\">구조화된 JSON 반환</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\">Match</span><small class=\"diagram-muted\">explicit widget &middot; chatUI.renderer</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">&lt;AssistantChat&gt;<br><small class=\"diagram-muted\">React 위젯 마운트</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card col\"><div class=\"diagram-pill ok\">DataTable</div><div class=\"diagram-pill ok\">DataChart</div><div class=\"diagram-pill ok\">DataInsights</div></div></div>",
-  "css": ".diagram-render{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-render .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px}.diagram-render .col{display:flex;flex-direction:column;gap:6px;padding:12px}.diagram-render .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-ve9hhd" title={"네이티브 렌더 경로"} summary={"작업이 JSON을 반환합니다. 런타임은 명시적인 위젯 판별자 또는 chatUI.renderer와 일치합니다. AssistantChat는 실제 React 구성요소를 마운트합니다. iframe도 없고 HTML 실행도 없습니다."}>
+
+```html
+<div class="diagram-render">
+  <div class="diagram-node">
+    Action 실행<br /><small class="diagram-muted">구조화된 JSON 반환</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">Match</span
+    ><small class="diagram-muted"
+      >explicit widget &middot; chatUI.renderer</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    &lt;AssistantChat&gt;<br /><small class="diagram-muted"
+      >React 위젯 마운트</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card col">
+    <div class="diagram-pill ok">DataTable</div>
+    <div class="diagram-pill ok">DataChart</div>
+    <div class="diagram-pill ok">DataInsights</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-render {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-render .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 14px;
+}
+.diagram-render .col {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px;
+}
+.diagram-render .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## 작업 선언 위젯 {#action-declared-widgets}
 
 기본 경로에는 명시적인 두 부분이 있습니다:
@@ -208,13 +258,59 @@ export default defineAction({
 가져오기 경로와 함께 각 커넥터와 어댑터를 나열합니다. 계약 자체는
 아래에 설명되어 있습니다.
 
-```an-diagram title="BYO 런타임은 Agent-Native 채팅 셸을 유지합니다." summary="외부 에이전트는 커넥터를 통해 정규화된 이벤트를 스트리밍합니다. Agent-Native은 작성기, 기록, 도구 카드, 승인 및 기본 위젯을 유지합니다."
-{
-  "html": "<div class=\"diagram-byo\"><div class=\"diagram-box\" data-rough>내 에이전트<br><small class=\"diagram-muted\">OpenAI &middot; Claude &middot; Vercel AI &middot; AG-UI &middot; HTTP</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">connector</span><small class=\"diagram-muted\">정규화된 message-* / tool-* 이벤트</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card col\"><div class=\"diagram-pill\">&lt;AssistantChat runtime=&hellip; /&gt;</div><small class=\"diagram-muted\">composer &middot; transcript &middot; tool cards</small><small class=\"diagram-muted\">approvals &middot; native widgets</small></div></div>",
-  "css": ".diagram-byo{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-byo .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px}.diagram-byo .col{display:flex;flex-direction:column;gap:6px;padding:14px}.diagram-byo .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-fghf4g" title={"BYO 런타임은 Agent-Native 채팅 셸을 유지합니다."} summary={"외부 에이전트는 커넥터를 통해 정규화된 이벤트를 스트리밍합니다. Agent-Native은 작성기, 기록, 도구 카드, 승인 및 기본 위젯을 유지합니다."}>
+
+```html
+<div class="diagram-byo">
+  <div class="diagram-box" data-rough>
+    내 에이전트<br /><small class="diagram-muted"
+      >OpenAI &middot; Claude &middot; Vercel AI &middot; AG-UI &middot;
+      HTTP</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">connector</span
+    ><small class="diagram-muted">정규화된 message-* / tool-* 이벤트</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card col">
+    <div class="diagram-pill">&lt;AssistantChat runtime=&hellip; /&gt;</div>
+    <small class="diagram-muted"
+      >composer &middot; transcript &middot; tool cards</small
+    ><small class="diagram-muted">approvals &middot; native widgets</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-byo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-byo .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 14px;
+}
+.diagram-byo .col {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px;
+}
+.diagram-byo .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 모든 커넥터는 `@agent-native/core/client/chat`(및 루트)에서 내보내집니다.
 `@agent-native/core/client` 항목). 에이전트가 작동할 때 일반 HTTP 런타임을 사용하세요.
 SSE 또는 NDJSON 런타임 이벤트를 반환하는 POST 엔드포인트를 노출할 수 있습니다.

package/docs/content/locales/ko-KR/notifications.mdx

@@ -18,13 +18,84 @@ await notify(
 );
 ```
 
-```an-diagram title="한 번의 통화, 다양한 목적지" summary="통지()는 항상 소유자 범위의 받은 편지함 행을 작성하고 등록된 모든 채널에 병렬로(최선의 노력) 팬아웃한 다음 이벤트 버스에 통지를 내보냅니다."
-{
-  "html": "<div class=\"diagram-notify\"><div class=\"diagram-node\">notify(input, { owner })<br><small class=\"diagram-muted\">any server code &middot; action, automation, plugin</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel fan\" data-rough><div class=\"fan-row\"><span class=\"diagram-pill accent\">inbox</span><div class=\"diagram-box\" data-rough>notifications table &rarr; bell UI<br><small class=\"diagram-muted\">always on &middot; owner-scoped</small></div></div><div class=\"fan-row\"><span class=\"diagram-pill\">webhook</span><div class=\"diagram-box\" data-rough>POST JSON to NOTIFICATIONS_WEBHOOK_URL<br><small class=\"diagram-muted\">best-effort</small></div></div><div class=\"fan-row\"><span class=\"diagram-pill\">custom</span><div class=\"diagram-box\" data-rough>registerNotificationChannel(...)<br><small class=\"diagram-muted\">best-effort &middot; runs in parallel</small></div></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill ok\">notification.sent</span><small class=\"diagram-muted\">event bus &middot; automations can chain</small></div></div>",
-  "css": ".diagram-notify{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-notify .fan{display:flex;flex-direction:column;gap:10px;padding:14px}.diagram-notify .fan-row{display:flex;align-items:center;gap:10px}.diagram-notify .diagram-card{display:flex;flex-direction:column;gap:6px;padding:12px 14px}.diagram-notify .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1kr0pmm" title={"한 번의 통화, 다양한 목적지"} summary={"통지()는 항상 소유자 범위의 받은 편지함 행을 작성하고 등록된 모든 채널에 병렬로(최선의 노력) 팬아웃한 다음 이벤트 버스에 통지를 내보냅니다."}>
+
+```html
+<div class="diagram-notify">
+  <div class="diagram-node">
+    notify(input, { owner })<br /><small class="diagram-muted"
+      >any server code &middot; action, automation, plugin</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel fan" data-rough>
+    <div class="fan-row">
+      <span class="diagram-pill accent">inbox</span>
+      <div class="diagram-box" data-rough>
+        notifications table &rarr; bell UI<br /><small class="diagram-muted"
+          >always on &middot; owner-scoped</small
+        >
+      </div>
+    </div>
+    <div class="fan-row">
+      <span class="diagram-pill">webhook</span>
+      <div class="diagram-box" data-rough>
+        POST JSON to NOTIFICATIONS_WEBHOOK_URL<br /><small class="diagram-muted"
+          >best-effort</small
+        >
+      </div>
+    </div>
+    <div class="fan-row">
+      <span class="diagram-pill">custom</span>
+      <div class="diagram-box" data-rough>
+        registerNotificationChannel(...)<br /><small class="diagram-muted"
+          >best-effort &middot; runs in parallel</small
+        >
+      </div>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill ok">notification.sent</span
+    ><small class="diagram-muted"
+      >event bus &middot; automations can chain</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-notify {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-notify .fan {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px;
+}
+.diagram-notify .fan-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.diagram-notify .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px 14px;
+}
+.diagram-notify .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## 심각도 {#severities}
 
 | 심각도     | 사용                         |
@@ -44,13 +115,69 @@ await notify(
 
 웹훅 채널은 소유자의 임시 [secrets](/docs/security)에 대해 URL 및 `NOTIFICATIONS_WEBHOOK_AUTH` 모두에서 `${keys.NAME}` 참조를 확인하므로 원시 값이 에이전트의 컨텍스트에 입력되지 않습니다. 키별 URL 허용 목록이 시행됩니다. 이는 자동화 `web-request` 도구에서 사용하는 것과 동일한 규칙입니다.
 
-```an-diagram title="채널 및 심각도" summary="받은 편지함은 항상 켜져 있습니다. 웹훅에는 환경 변수가 필요합니다. 맞춤 채널은 시작 시 등록됩니다. 심각도는 배지 스타일을 결정하고 모든 채널에 전달됩니다."
-{
-  "html": "<div class=\"diagram-channels\"><div class=\"diagram-panel col\" data-rough><strong>Channels</strong><div class=\"diagram-box\" data-rough>inbox<br><small class=\"diagram-muted\">always on &mdash; part of the primitive</small></div><div class=\"diagram-box\" data-rough>webhook<br><small class=\"diagram-muted\">needs NOTIFICATIONS_WEBHOOK_URL</small></div><div class=\"diagram-box\" data-rough>custom<br><small class=\"diagram-muted\">registerNotificationChannel()</small></div></div><div class=\"diagram-panel col\" data-rough><strong>심각도가 배지를 결정</strong><div class=\"sev-row\"><span class=\"diagram-pill\">info</span><span class=\"diagram-muted\">확인, FYI</span></div><div class=\"sev-row\"><span class=\"diagram-pill warn\">warning</span><span class=\"diagram-muted\">look at soon</span></div><div class=\"sev-row\"><span class=\"diagram-pill accent\">critical</span><span class=\"diagram-muted\">needs immediate attention</span></div></div></div>",
-  "css": ".diagram-channels{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}.diagram-channels .col{display:flex;flex-direction:column;gap:10px;padding:14px;min-width:240px}.diagram-channels .sev-row{display:flex;align-items:center;gap:10px}"
+<Diagram id="doc-block-1lw1rdr" title={"채널 및 심각도"} summary={"받은 편지함은 항상 켜져 있습니다. 웹훅에는 환경 변수가 필요합니다. 맞춤 채널은 시작 시 등록됩니다. 심각도는 배지 스타일을 결정하고 모든 채널에 전달됩니다."}>
+
+```html
+<div class="diagram-channels">
+  <div class="diagram-panel col" data-rough>
+    <strong>Channels</strong>
+    <div class="diagram-box" data-rough>
+      inbox<br /><small class="diagram-muted"
+        >always on &mdash; part of the primitive</small
+      >
+    </div>
+    <div class="diagram-box" data-rough>
+      webhook<br /><small class="diagram-muted"
+        >needs NOTIFICATIONS_WEBHOOK_URL</small
+      >
+    </div>
+    <div class="diagram-box" data-rough>
+      custom<br /><small class="diagram-muted"
+        >registerNotificationChannel()</small
+      >
+    </div>
+  </div>
+  <div class="diagram-panel col" data-rough>
+    <strong>심각도가 배지를 결정</strong>
+    <div class="sev-row">
+      <span class="diagram-pill">info</span
+      ><span class="diagram-muted">확인, FYI</span>
+    </div>
+    <div class="sev-row">
+      <span class="diagram-pill warn">warning</span
+      ><span class="diagram-muted">look at soon</span>
+    </div>
+    <div class="sev-row">
+      <span class="diagram-pill accent">critical</span
+      ><span class="diagram-muted">needs immediate attention</span>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-channels {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+.diagram-channels .col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px;
+  min-width: 240px;
+}
+.diagram-channels .sev-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 ```
 
+</Diagram>
+
 ## API {#api}
 
 ### `notify(input, meta)` {#notify}

package/docs/content/locales/ko-KR/observability.mdx

@@ -33,13 +33,61 @@ description: "에이전트 추적, 평가, 피드백, A/B 실험 및 내장 대
 
 코드 변경이 필요하지 않습니다. 계측기는 `production-agent.ts`에 투명하게 연결됩니다.
 
-```an-diagram title="모든 실행은 루프에 공급됩니다." summary="한 번의 에이전트 실행으로 추적, 자동 점수 및 피드백 후크가 생성됩니다. 모두 앱 자체의 SQL에 저장되고 대시보드에 표시됩니다. 실험에서는 구성 변형 간에 트래픽을 분할합니다."
-{
-  "html": "<div class=\"obs-loop\"><div class=\"diagram-node\">에이전트 실행<br><small class=\"diagram-muted\">production-agent.ts</small></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\">tokens &middot; cost &middot; latency &middot; tool calls</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">Traces &amp; spans</div><div class=\"diagram-box\">Evals (5 scorers + LLM judge)</div><div class=\"diagram-box\">Feedback &amp; frustration index</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node ok\">Dashboard<br><small class=\"diagram-muted\">scoped to the signed-in user</small></div></div>",
-  "css": ".obs-loop{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.obs-loop .diagram-col{display:flex;flex-direction:column;gap:8px}.obs-loop .diagram-arrow{font-size:22px;line-height:1}.obs-loop .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-1ua8f7i" title={"모든 실행은 루프에 공급됩니다."} summary={"한 번의 에이전트 실행으로 추적, 자동 점수 및 피드백 후크가 생성됩니다. 모두 앱 자체의 SQL에 저장되고 대시보드에 표시됩니다. 실험에서는 구성 변형 간에 트래픽을 분할합니다."}>
+
+```html
+<div class="obs-loop">
+  <div class="diagram-node">
+    에이전트 실행<br /><small class="diagram-muted">production-agent.ts</small>
+  </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"
+      >tokens &middot; cost &middot; latency &middot; tool calls</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">Traces &amp; spans</div>
+    <div class="diagram-box">Evals (5 scorers + LLM judge)</div>
+    <div class="diagram-box">Feedback &amp; frustration index</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node ok">
+    Dashboard<br /><small class="diagram-muted"
+      >scoped to the signed-in user</small
+    >
+  </div>
+</div>
+```
+
+```css
+.obs-loop {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.obs-loop .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.obs-loop .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.obs-loop .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## 대시보드 {#dashboard}
 
 단일 경로를 사용하여 모든 템플릿에 대시보드를 추가하세요.
@@ -147,13 +195,59 @@ PUT /_agent-native/observability/experiments/:id
 
 `<your-model-id>` / `<other-model-id>` 대신 엔진에서 허용하는 실제 모델 식별자를 사용하십시오(모델 이름은 자주 변경됩니다. 현재 ID는 공급자/엔진을 확인하세요). 에이전트 루프는 자동으로 사용자의 변형을 확인하고 구성 재정의를 적용합니다. 할당에서는 일관된 해싱을 사용합니다. 동일한 사용자는 항상 동일한 변형을 얻습니다.
 
-```an-diagram title="일관된 해시 변형 할당" summary="각 사용자는 안정적인 변형으로 해시하고 루프는 해당 변형의 구성 재정의를 적용하며 결과는 신뢰 구간과 함께 변형별로 롤업됩니다."
-{
-  "html": "<div class=\"exp\"><div class=\"diagram-node\">사용자 ID<br><small class=\"diagram-muted\">consistent hash</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-card\"><span class=\"diagram-pill\">control &middot; 50%</span><small class=\"diagram-muted\">구성 오버라이드 A</small></div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">treatment &middot; 50%</span><small class=\"diagram-muted\">구성 오버라이드 B</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">결과 per variant<br><small class=\"diagram-muted\">cost &middot; latency &middot; satisfaction</small></div></div>",
-  "css": ".exp{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.exp .diagram-col{display:flex;flex-direction:column;gap:8px}.exp .diagram-card{display:flex;flex-direction:column;gap:2px;padding:8px 12px}.exp .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-k2p8r6" title={"일관된 해시 변형 할당"} summary={"각 사용자는 안정적인 변형으로 해시하고 루프는 해당 변형의 구성 재정의를 적용하며 결과는 신뢰 구간과 함께 변형별로 롤업됩니다."}>
+
+```html
+<div class="exp">
+  <div class="diagram-node">
+    사용자 ID<br /><small class="diagram-muted">consistent hash</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-card">
+      <span class="diagram-pill">control &middot; 50%</span
+      ><small class="diagram-muted">구성 오버라이드 A</small>
+    </div>
+    <div class="diagram-card">
+      <span class="diagram-pill accent">treatment &middot; 50%</span
+      ><small class="diagram-muted">구성 오버라이드 B</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    결과 per variant<br /><small class="diagram-muted"
+      >cost &middot; latency &middot; satisfaction</small
+    >
+  </div>
+</div>
+```
+
+```css
+.exp {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.exp .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.exp .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 12px;
+}
+.exp .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## 구성 {#config}
 
 모든 설정은 `observability-config` 키에 저장됩니다: