@agent-native/core 0.79.25 → 0.79.27

package/docs/content/locales/ko-KR/template-plan.mdx

@@ -23,13 +23,66 @@ Codex, Claude 코드, Markdown 또는 구조화된 구현 계획에 붙여넣기
 동일한 리뷰 화면에서 주석을 달고 댓글을 달고 피드백을 다시 전달할 수 있습니다
 상담원도 같은 방식으로 진행합니다.
 
-```an-diagram title="두 개의 명령, 하나의 검토 표면" summary="두 명령 모두 호스팅된 Plan MCP 커넥터를 통해 동일한 주석 및 설명 화면에 게시됩니다."
-{
-  "html": "<div class=\"diagram-plan\"><div class=\"diagram-col\"><div class=\"diagram-node\"><span class=\"diagram-pill accent\">/visual-plan</span><small class=\"diagram-muted\">코드 전 — 아키텍처, UI, 리팩터</small></div><div class=\"diagram-node\"><span class=\"diagram-pill\">/visual-recap</span><small class=\"diagram-muted\">코드 후 — PR, 커밋, 브랜치, diff</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\">Plan MCP 커넥터<br><small class=\"diagram-muted\">plan.agent-native.com</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">검토 화면<br><small class=\"diagram-muted\">다이어그램 · 와이어프레임 · 주석 코드 · 댓글</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-node\">코딩 에이전트<br><small class=\"diagram-muted\">피드백 전달됨</small></div></div>",
-  "css": ".diagram-plan{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-plan .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-plan .diagram-arrow{font-size:22px;line-height:1}.diagram-plan .center{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}"
+<Diagram id="doc-block-qhzm43" title={"두 개의 명령, 하나의 검토 표면"} summary={"두 명령 모두 호스팅된 Plan MCP 커넥터를 통해 동일한 주석 및 설명 화면에 게시됩니다."}>
+
+```html
+<div class="diagram-plan">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      <span class="diagram-pill accent">/visual-plan</span
+      ><small class="diagram-muted">코드 전 — 아키텍처, UI, 리팩터</small>
+    </div>
+    <div class="diagram-node">
+      <span class="diagram-pill">/visual-recap</span
+      ><small class="diagram-muted">코드 후 — PR, 커밋, 브랜치, diff</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    Plan MCP 커넥터<br /><small class="diagram-muted"
+      >plan.agent-native.com</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    검토 화면<br /><small class="diagram-muted"
+      >다이어그램 · 와이어프레임 · 주석 코드 · 댓글</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&harr;</div>
+  <div class="diagram-node">
+    코딩 에이전트<br /><small class="diagram-muted">피드백 전달됨</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-plan {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-plan .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-plan .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-plan .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  text-align: center;
 }
 ```
 
+</Diagram>
+
 <WireframeBlock id="doc-block-14v4b6a">
   <Screen
     surface="desktop"

package/docs/content/locales/ko-KR/template-slides.mdx

@@ -18,13 +18,58 @@ description: "프롬프트에서 데크를 생성하고, 시각적으로 편집
 
 데크를 열면 상담원이 actions를 통해 슬라이드를 계속 생성, 수정 및 탐색할 수 있는 동안 슬라이드 캔버스, 개요, 메모 및 필름 스트립이 하나의 편집기 화면에 유지됩니다.
 
-```an-diagram title="갑판으로 안내" summary="자료를 요청하면 상담원이 CLI에서 호출할 수 있는 것과 동일한 작업을 통해 슬라이드를 한 번에 하나씩 스트리밍합니다."
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-node\">프롬프트<br><small class=\"diagram-muted\">\"10-slide pitch deck\"</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Agent</span><small class=\"diagram-muted\">레이아웃 선택</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-pill\">create-deck</div><div class=\"diagram-pill\">add-slide &#215; n</div><small class=\"diagram-muted\">병렬, 스트리밍</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>decks (SQL)</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-box\">편집기가 실시간 렌더링</div></div>",
-  "css": ".diagram-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-flow .diagram-col{display:flex;flex-direction:column;gap:6px;align-items:center}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1o3t3um" title={"갑판으로 안내"} summary={"자료를 요청하면 상담원이 CLI에서 호출할 수 있는 것과 동일한 작업을 통해 슬라이드를 한 번에 하나씩 스트리밍합니다."}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-node">
+    프롬프트<br /><small class="diagram-muted">"10-slide pitch deck"</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Agent</span
+    ><small class="diagram-muted">레이아웃 선택</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-pill">create-deck</div>
+    <div class="diagram-pill">add-slide &#215; n</div>
+    <small class="diagram-muted">병렬, 스트리밍</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>decks (SQL)</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+  <div class="diagram-box">편집기가 실시간 렌더링</div>
+</div>
+```
+
+```css
+.diagram-flow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-flow .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: center;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## 그것으로 무엇을 할 수 있나요
 
 - **프롬프트에서 데크를 생성합니다.** "커피 구독 서비스를 위한 10개 슬라이드 피치 데크를 생성합니다. 청중은 투자자입니다."

package/docs/content/locales/ko-KR/template-videos.mdx

@@ -18,13 +18,62 @@ description: "모션 그래픽, 제품 데모 및 키네틱 텍스트를 위한
 
 스튜디오를 열면 홈 화면에 작곡 목록이 표시됩니다. 하나를 클릭하면 상단에 플레이어, 하단에 타임라인, 오른쪽에 속성 패널이 표시됩니다. 에이전트는 항상 귀하가 어떤 구성을 열었는지 알고 있습니다.
 
-```an-diagram title="데이터로서의 애니메이션" summary="컴포지션은 React 구성 요소입니다. 모든 애니메이션은 트랙에서 읽혀지므로 에이전트와 타임라인이 동일한 데이터를 편집합니다."
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-col\"><div class=\"diagram-node\">Timeline<br><small class=\"diagram-muted\">드래그, 크기 조절, 스크럽</small></div><div class=\"diagram-node\">Agent<br><small class=\"diagram-muted\">\"fade in at 2s\"</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">AnimationTrack</span><small class=\"diagram-muted\">startFrame / easing / animatedProps</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>React 컴포지션<br><small class=\"diagram-muted\">Remotion &lt;Player&gt;</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">MP4 / WebM</div></div>",
-  "css": ".diagram-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-flow .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-uzmptu" title={"데이터로서의 애니메이션"} summary={"컴포지션은 React 구성 요소입니다. 모든 애니메이션은 트랙에서 읽혀지므로 에이전트와 타임라인이 동일한 데이터를 편집합니다."}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Timeline<br /><small class="diagram-muted"
+        >드래그, 크기 조절, 스크럽</small
+      >
+    </div>
+    <div class="diagram-node">
+      Agent<br /><small class="diagram-muted">"fade in at 2s"</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">AnimationTrack</span
+    ><small class="diagram-muted">startFrame / easing / animatedProps</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    React 컴포지션<br /><small class="diagram-muted"
+      >Remotion &lt;Player&gt;</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">MP4 / WebM</div>
+</div>
+```
+
+```css
+.diagram-flow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-flow .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## 그것으로 무엇을 할 수 있나요
 
 - **프롬프트에서 애니메이션을 생성합니다.** "2초에 페이드 인되고 5초까지 유지되는 타이틀 카드를 추가합니다." 상담원이 작곡을 편집합니다.

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

@@ -19,13 +19,63 @@ track(
 );
 ```
 
-```an-diagram title="하나의 track() 호출, 모든 공급자" summary="서버 및 클라이언트 호출자는 동일한 레지스트리에 도달하여 모든 이벤트를 모든 활성 공급자에게 병렬로 전달합니다."
-{
-  "html": "<div class=\"trk\"><div class=\"diagram-col\"><div class=\"diagram-node\">서버 코드<br><small class=\"diagram-muted\">actions &middot; plugins &middot; routes</small></div><div class=\"diagram-node\">브라우저 코드<br><small class=\"diagram-muted\">POST /_agent-native/track</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Provider registry</span><small class=\"diagram-muted\">fan-out, 보내고 잊기</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">PostHog</div><div class=\"diagram-box\">Mixpanel</div><div class=\"diagram-box\">Amplitude</div><div class=\"diagram-box\">Webhook</div></div></div>",
-  "css": ".trk{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.trk .diagram-col{display:flex;flex-direction:column;gap:8px}.trk .diagram-arrow{font-size:22px;line-height:1}.trk .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-1sxtz3c" title={"하나의 track() 호출, 모든 공급자"} summary={"서버 및 클라이언트 호출자는 동일한 레지스트리에 도달하여 모든 이벤트를 모든 활성 공급자에게 병렬로 전달합니다."}>
+
+```html
+<div class="trk">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      서버 코드<br /><small class="diagram-muted"
+        >actions &middot; plugins &middot; routes</small
+      >
+    </div>
+    <div class="diagram-node">
+      브라우저 코드<br /><small class="diagram-muted"
+        >POST /_agent-native/track</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Provider registry</span
+    ><small class="diagram-muted">fan-out, 보내고 잊기</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">PostHog</div>
+    <div class="diagram-box">Mixpanel</div>
+    <div class="diagram-box">Amplitude</div>
+    <div class="diagram-box">Webhook</div>
+  </div>
+</div>
+```
+
+```css
+.trk {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.trk .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.trk .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.trk .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## 내장 제공자 {#built-in}
 
 env var를 설정하면 공급자가 서버 시작 시 자동 등록됩니다. 코드 변경이 필요하지 않습니다.

package/docs/content/locales/ko-KR/using-your-agent.mdx

@@ -9,13 +9,60 @@ description: "에이전트와 함께 작업하는 일상적인 루프: 에이전
 
 간단한 통과선이 있습니다. 상담원은 귀하가 보고 있는 내용을 **보고** 원하는 방향으로 **지시**하고, 어디에든 **삽입**할 수 있으며, 더 적합할 때는 완전히 **가벼운 UI**할 수 있으며, 동일한 문서를 동시에 **공동 편집**할 수 있습니다. 각각은 이 섹션의 페이지입니다.
 
-```an-diagram title="일상적인 루프" summary="도킹된 에이전트로 작업하는 5가지 방법 - 각각이 이 섹션의 페이지입니다."
-{
-  "html": "<div class=\"diagram-loop\"><div class=\"diagram-card\"><strong>Sees</strong><small class=\"diagram-muted\">your view &amp; selection</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><strong>Direct</strong><small class=\"diagram-muted\">@-mentions &amp; voice</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><strong>Embed</strong><small class=\"diagram-muted\">drop into any app</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><strong>가벼운 UI</strong><small class=\"diagram-muted\">chat is the product</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card accent-card\"><span class=\"diagram-pill accent\">공동 편집</span><small class=\"diagram-muted\">실시간, 나란히</small></div></div>",
-  "css": ".diagram-loop{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}.diagram-loop .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;min-width:130px;flex:1}.diagram-loop .diagram-arrow{align-self:center;font-size:22px;line-height:1}"
+<Diagram id="doc-block-1ohc2nc" title={"일상적인 루프"} summary={"도킹된 에이전트로 작업하는 5가지 방법 - 각각이 이 섹션의 페이지입니다."}>
+
+```html
+<div class="diagram-loop">
+  <div class="diagram-card">
+    <strong>Sees</strong
+    ><small class="diagram-muted">your view &amp; selection</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <strong>Direct</strong
+    ><small class="diagram-muted">@-mentions &amp; voice</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <strong>Embed</strong><small class="diagram-muted">drop into any app</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <strong>가벼운 UI</strong
+    ><small class="diagram-muted">chat is the product</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card accent-card">
+    <span class="diagram-pill accent">공동 편집</span
+    ><small class="diagram-muted">실시간, 나란히</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-loop {
+  display: flex;
+  align-items: stretch;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.diagram-loop .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  min-width: 130px;
+  flex: 1;
+}
+.diagram-loop .diagram-arrow {
+  align-self: center;
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## 당신이 보고 있는 것을 봅니다 {#it-sees}
 
 에이전트는 화면을 보지 못합니다. 이메일을 열면 어떤 스레드인지 알 수 있습니다. 차트를 선택하면 어떤 차트인지 알 수 있습니다. 단락을 강조 표시하면 해당 범위에서만 작동할 수 있습니다. 이러한 공유된 인식 덕분에 매번 맥락을 자세히 설명하지 않고도 "답변" 또는 "선택 항목 요약"이라고 말할 수 있습니다.

package/docs/content/locales/ko-KR/voice-input.mdx

@@ -19,13 +19,52 @@ description: "에이전트 채팅 작성기의 음성 받아쓰기 — Builder G
 
 제공자 선택은 `voice-transcription-prefs` 아래 애플리케이션 상태에 저장되므로 사용자는 사이드바 설정에서 `"auto"`(기본값 - 사용 가능한 최상의 제공자 선택), `"builder-gemini"`, `"builder"`, `"gemini"`, `"groq"`, `"openai"` 또는 `"browser"`를 강제로 설정할 수 있습니다.
 
-```an-diagram title="음성 녹음 제공자 대체" summary="작곡가는 오디오를 녹음한 다음 서버 공급자를 순서대로 안내하고 서버 공급자를 사용할 수 없는 경우에만 브라우저 Web Speech API에 드롭합니다."
-{
-  "html": "<div class=\"diagram-voice\"><div class=\"diagram-node\">마이크 버튼<br><small class=\"diagram-muted\">webm/opus 녹음</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card col\"><div class=\"diagram-pill accent\">1 &middot; Builder Gemini</div><small class=\"diagram-muted\">Builder 연결 시 기본값</small><div class=\"diagram-pill\">2 &middot; BYOK cloud</div><small class=\"diagram-muted\">Gemini &middot; Groq &middot; OpenAI Whisper</small></div><div class=\"diagram-arrow diagram-warn\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box diagram-warn\" data-rough>3 &middot; Browser Web Speech<br><small class=\"diagram-muted\">fallback on 400 &middot; streams live</small></div></div>",
-  "css": ".diagram-voice{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-voice .col{display:flex;flex-direction:column;gap:6px;padding:14px}.diagram-voice .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-pmjo6m" title={"음성 녹음 제공자 대체"} summary={"작곡가는 오디오를 녹음한 다음 서버 공급자를 순서대로 안내하고 서버 공급자를 사용할 수 없는 경우에만 브라우저 Web Speech API에 드롭합니다."}>
+
+```html
+<div class="diagram-voice">
+  <div class="diagram-node">
+    마이크 버튼<br /><small class="diagram-muted">webm/opus 녹음</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card col">
+    <div class="diagram-pill accent">1 &middot; Builder Gemini</div>
+    <small class="diagram-muted">Builder 연결 시 기본값</small>
+    <div class="diagram-pill">2 &middot; BYOK cloud</div>
+    <small class="diagram-muted"
+      >Gemini &middot; Groq &middot; OpenAI Whisper</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-warn" aria-hidden="true">&darr;</div>
+  <div class="diagram-box diagram-warn" data-rough>
+    3 &middot; Browser Web Speech<br /><small class="diagram-muted"
+      >fallback on 400 &middot; streams live</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-voice {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-voice .col {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px;
+}
+.diagram-voice .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 경로는 **동일 출처만**입니다. 교차 사이트 POST가 거부되므로 공격자가 외부 페이지에서 전사 크레딧을 태울 수 없습니다.
 
 ## 공급자 활성화 {#enabling-providers}

package/docs/content/locales/ko-KR/what-is-agent-native.mdx

@@ -50,13 +50,57 @@ SaaS 제품에 기본적으로 부착된 "요약" 버튼인 "AI 기능"은 어
 
 3번 단계입니다. 에이전트 기본입니다.
 
-```an-diagram title="사다리 원리" summary="대부분의 팀은 렁 1 또는 2에서 멈춥니다. 에이전트 네이티브는 렁 3입니다. 즉, 하나의 공유 작업 표면에 대한 실제 앱이자 실제 에이전트입니다."
-{
-  "html": "<div class=\"diagram-ladder\"><div class=\"diagram-card rung rung-3\"><span class=\"diagram-pill accent\">단계 3 · agent-native</span><strong>에이전트 + UI가 동등한 파트너</strong><small class=\"diagram-muted\">One action surface. Every agent tool is also a button; every button runs the same logic the agent uses.</small></div><div class=\"diagram-card rung rung-2\"><span class=\"diagram-pill\">단계 2</span><strong>도구가 있는 채팅</strong><small class=\"diagram-muted\">에이전트는 동작할 수 있지만 여전히 채팅 창일 뿐입니다. 대시보드, 목록, 단축키는 없습니다.</small></div><div class=\"diagram-card rung rung-1\"><span class=\"diagram-pill warn\">단계 1</span><strong>단일 LLM 호출</strong><small class=\"diagram-muted\">Prompt in, string out. Impressive in a demo; breaks the moment reality gets messy.</small></div></div>",
-  "css": ".diagram-ladder{display:flex;flex-direction:column;gap:14px}.diagram-ladder .rung{display:flex;flex-direction:column;gap:6px;padding:16px 18px}.diagram-ladder .rung-2{margin-inline-end:48px}.diagram-ladder .rung-1{margin-inline-end:96px}"
+<Diagram id="doc-block-6q3x33" title={"사다리 원리"} summary={"대부분의 팀은 렁 1 또는 2에서 멈춥니다. 에이전트 네이티브는 렁 3입니다. 즉, 하나의 공유 작업 표면에 대한 실제 앱이자 실제 에이전트입니다."}>
+
+```html
+<div class="diagram-ladder">
+  <div class="diagram-card rung rung-3">
+    <span class="diagram-pill accent">단계 3 · agent-native</span
+    ><strong>에이전트 + UI가 동등한 파트너</strong
+    ><small class="diagram-muted"
+      >One action surface. Every agent tool is also a button; every button runs
+      the same logic the agent uses.</small
+    >
+  </div>
+  <div class="diagram-card rung rung-2">
+    <span class="diagram-pill">단계 2</span><strong>도구가 있는 채팅</strong
+    ><small class="diagram-muted"
+      >에이전트는 동작할 수 있지만 여전히 채팅 창일 뿐입니다. 대시보드, 목록,
+      단축키는 없습니다.</small
+    >
+  </div>
+  <div class="diagram-card rung rung-1">
+    <span class="diagram-pill warn">단계 1</span><strong>단일 LLM 호출</strong
+    ><small class="diagram-muted"
+      >Prompt in, string out. Impressive in a demo; breaks the moment reality
+      gets messy.</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-ladder {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.diagram-ladder .rung {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 16px 18px;
+}
+.diagram-ladder .rung-2 {
+  margin-inline-end: 48px;
+}
+.diagram-ladder .rung-1 {
+  margin-inline-end: 96px;
 }
 ```
 
+</Diagram>
+
 이 모든 것이 동일한 작업 정의에서 어떻게 중단되는지는 [Key Concepts — Protocols](/docs/key-concepts#protocols)를 참조하세요.
 
 ## 모든 상담원에게 UI가 필요한 이유 {#why-every-agent-needs-a-ui}
@@ -89,13 +133,56 @@ SaaS 제품에 기본적으로 부착된 "요약" 버튼인 "AI 기능"은 어
 >
 > **에이전트에서** — 자연어, A2A, Slack, Telegram을 통한 기타 에이전트. 에이전트는 데이터베이스에 씁니다. UI는 자동으로 업데이트됩니다.
 
-```an-diagram title="하나의 시스템, 두 가지 방식" summary="에이전트와 UI는 동일한 작업과 동일한 데이터베이스에 기록합니다. 한 사람이 무엇을 하든 다른 사람이 본다."
-{
-  "html": "<div class=\"diagram-parity\"><div class=\"diagram-col\"><div class=\"diagram-node\">Human<br><small class=\"diagram-muted\">클릭, 폼, 단축키</small></div><div class=\"diagram-node\">Agent<br><small class=\"diagram-muted\">자연어 · A2A · Slack</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Actions</span><small class=\"diagram-muted\">defined once</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">SQL 데이터베이스</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-box\">UI가 실시간 업데이트</div></div>",
-  "css": ".diagram-parity{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-parity .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-parity .diagram-arrow{font-size:22px;line-height:1}.diagram-parity .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-jh2i6u" title={"하나의 시스템, 두 가지 방식"} summary={"에이전트와 UI는 동일한 작업과 동일한 데이터베이스에 기록합니다. 한 사람이 무엇을 하든 다른 사람이 본다."}>
+
+```html
+<div class="diagram-parity">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Human<br /><small class="diagram-muted">클릭, 폼, 단축키</small>
+    </div>
+    <div class="diagram-node">
+      Agent<br /><small class="diagram-muted">자연어 · A2A · Slack</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Actions</span
+    ><small class="diagram-muted">defined once</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">SQL 데이터베이스</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+  <div class="diagram-box">UI가 실시간 업데이트</div>
+</div>
+```
+
+```css
+.diagram-parity {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-parity .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-parity .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-parity .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 상담원이 이메일 초안을 작성하면 UI에 표시됩니다. "보내기"를 클릭하면 에이전트는 해당 내용이 전송되었음을 알 수 있습니다. 별도의 "에이전트 세계"와 "UI 세계"는 없으며 하나의 시스템입니다. 이 작업을 수행하는 아키텍처는 [Key Concepts](/docs/key-concepts)를 참조하세요.
 
 ## 일반적으로 전동 공구를 위한 맞춤화 {#workspace-customization}