@agent-native/core 0.79.26 → 0.79.27

package/corpus/core/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` 키에 저장됩니다:

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

@@ -19,13 +19,53 @@ OM은 긴 스레드를 가장 최근의 것부터 가장 최근의 것까지 3
 | **관찰**             | 일자가 기록된 조밀한 항목으로, 일련의 원시 메시지를 무슨 일이 일어났는지에 대한 압축된 기록으로 접습니다. |
 | **최근 원시 메시지** | 마지막 N 턴은 **그대로** 유지되며 절대 접히지 않으므로 에이전트는 항상 최신 컨텍스트를 볼 수 있습니다.    |
 
-```an-diagram title="3단계, 최근 단계로 증류됨" summary="오래된 접두사는 날짜가 지정된 관찰과 긴 호 반사로 접혀집니다. 가장 최근 턴만 그대로 유지됩니다."
-{
-  "html": "<div class=\"om\"><div class=\"diagram-card\"><span class=\"diagram-pill\">회고</span><small class=\"diagram-muted\">관찰 로그에서 압축한 장기 요약</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&uarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">관찰</span><small class=\"diagram-muted\">원본 메시지 구간을 접은 조밀한 날짜별 항목</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&uarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill ok\">최근 원본 메시지</span><small class=\"diagram-muted\">last N turns, kept <strong>verbatim</strong> — 절대 접지 않음</small></div></div>",
-  "css": ".om{display:flex;flex-direction:column-reverse;align-items:stretch;gap:8px}.om .diagram-card{display:flex;flex-direction:column;gap:4px;padding:12px 16px}.om .diagram-arrow{text-align:center;font-size:20px;line-height:1}"
+<Diagram id="doc-block-n1ot61" title={"3단계, 최근 단계로 증류됨"} summary={"오래된 접두사는 날짜가 지정된 관찰과 긴 호 반사로 접혀집니다. 가장 최근 턴만 그대로 유지됩니다."}>
+
+```html
+<div class="om">
+  <div class="diagram-card">
+    <span class="diagram-pill">회고</span
+    ><small class="diagram-muted">관찰 로그에서 압축한 장기 요약</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&uarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">관찰</span
+    ><small class="diagram-muted"
+      >원본 메시지 구간을 접은 조밀한 날짜별 항목</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&uarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill ok">최근 원본 메시지</span
+    ><small class="diagram-muted"
+      >last N turns, kept <strong>verbatim</strong> — 절대 접지 않음</small
+    >
+  </div>
+</div>
+```
+
+```css
+.om {
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: stretch;
+  gap: 8px;
+}
+.om .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 16px;
+}
+.om .diagram-arrow {
+  text-align: center;
+  font-size: 20px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 각 차례마다 읽기 측은 이를 원시 이전 접두사를 대체하고 최근 원시 창을 그대로 유지하며 압축된 레코드를 신뢰할 수 있는 것으로 처리하도록 모델에 지시하는 자체 레이블이 지정된 단일 `[Observational Memory]` 블록으로 이를 조립합니다(완료된 작업을 다시 실행하지 말고 기록된 결정, 이름, 날짜 및 상태를 신뢰하십시오).
 
 ## 압축 실행 방법 {#compaction}
@@ -35,13 +75,52 @@ OM은 긴 스레드를 가장 최근의 것부터 가장 최근의 것까지 3
 1. **관찰자** — 스레드의 _unobserved_ 메시지가 관찰 토큰 임계값을 초과하면 해당 메시지를 하나의 조밀한 관찰 항목으로 접습니다.
 2. **리플렉터** — 지속 관찰 로그 자체가 반사 토큰 임계값을 초과하면 관찰을 더 높은 수준의 반영으로 압축합니다.
 
-```an-diagram title="깔끔한 회전 후 두 번의 최선의 패스" summary="각 패스는 임계값 이하로 작동하지 않으므로 매 턴마다 압축기를 실행하는 것이 저렴합니다. 실패는 무시되며 대기 시간을 추가하지 않습니다."
-{
-  "html": "<div class=\"om-pass\"><div class=\"diagram-node\">깨끗한 턴 종료<br><small class=\"diagram-muted\">fire-and-forget</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Observer</span><small class=\"diagram-muted\">unobserved tokens &gt; 30k? &rarr; fold into one observation</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Reflector</span><small class=\"diagram-muted\">observation log &gt; 40k? &rarr; condense into a reflection</small></div></div>",
-  "css": ".om-pass{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.om-pass .diagram-node,.om-pass .diagram-card{display:flex;flex-direction:column;gap:2px;padding:10px 14px}.om-pass .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1hw22ay" title={"깔끔한 회전 후 두 번의 최선의 패스"} summary={"각 패스는 임계값 이하로 작동하지 않으므로 매 턴마다 압축기를 실행하는 것이 저렴합니다. 실패는 무시되며 대기 시간을 추가하지 않습니다."}>
+
+```html
+<div class="om-pass">
+  <div class="diagram-node">
+    깨끗한 턴 종료<br /><small class="diagram-muted">fire-and-forget</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">Observer</span
+    ><small class="diagram-muted"
+      >unobserved tokens &gt; 30k? &rarr; fold into one observation</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">Reflector</span
+    ><small class="diagram-muted"
+      >observation log &gt; 40k? &rarr; condense into a reflection</small
+    >
+  </div>
+</div>
+```
+
+```css
+.om-pass {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.om-pass .diagram-node,
+.om-pass .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 10px 14px;
+}
+.om-pass .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 둘 다 임계값 아래에서 무작동을 통과하므로 매 회전 후에 압축기를 호출하는 것이 저렴합니다. OM은 휘발성 원시 접두사를 안정적인 압축 텍스트로 대체하기 때문에 긴 스레드가 반복되는 동안 프롬프트 **캐시 안정성**을 유지합니다.
 
 OM 데이터는 소유자(및 존재하는 경우 조직)로 범위가 지정된 앱 자체 SQL 데이터베이스에 있습니다. 이는 프레임워크의 나머지 부분과 동일한 범위 지정 모델입니다. 사용자 간에 공유되지 않습니다.

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

@@ -10,13 +10,53 @@ description: "최초 실행 구성을 위한 설정 체크리스트 — API 키,
 에이전트 채팅: AI 엔진을 연결하고 선택적으로 앱을 공유 위치로 지정
 인프라를 구축하고 필요할 때만 공급자를 추가하세요.
 
-```an-diagram title="설정 체크리스트" summary="AI 엔진 연결만 필요합니다. 패널은 완료를 추적하고 필요한 모든 작업이 완료되면 자동으로 숨겨집니다."
-{
-  "html": "<div class=\"ob\"><div class=\"diagram-card\"><span class=\"diagram-pill warn\">required</span><strong>AI 엔진 연결</strong><small class=\"diagram-muted\">Connect Builder (one click) or paste an LLM key</small></div><div class=\"diagram-card\"><span class=\"diagram-pill\">optional</span><strong>Database</strong><small class=\"diagram-muted\">set <code>DATABASE_URL</code></small></div><div class=\"diagram-card\"><span class=\"diagram-pill\">optional</span><strong>Authentication</strong><small class=\"diagram-muted\">OAuth / access token</small></div><div class=\"diagram-card\"><span class=\"diagram-pill\">optional</span><strong>이메일 전달</strong><small class=\"diagram-muted\">Resend / SendGrid</small></div><div class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box ok\">all required done &rarr; panel auto-hides</div></div>",
-  "css": ".ob{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.ob .diagram-card{display:flex;flex-direction:column;gap:3px;padding:12px 14px}.ob .diagram-arrow{font-size:22px}"
+<Diagram id="doc-block-uafnku" title={"설정 체크리스트"} summary={"AI 엔진 연결만 필요합니다. 패널은 완료를 추적하고 필요한 모든 작업이 완료되면 자동으로 숨겨집니다."}>
+
+```html
+<div class="ob">
+  <div class="diagram-card">
+    <span class="diagram-pill warn">required</span><strong>AI 엔진 연결</strong
+    ><small class="diagram-muted"
+      >Connect Builder (one click) or paste an LLM key</small
+    >
+  </div>
+  <div class="diagram-card">
+    <span class="diagram-pill">optional</span><strong>Database</strong
+    ><small class="diagram-muted">set <code>DATABASE_URL</code></small>
+  </div>
+  <div class="diagram-card">
+    <span class="diagram-pill">optional</span><strong>Authentication</strong
+    ><small class="diagram-muted">OAuth / access token</small>
+  </div>
+  <div class="diagram-card">
+    <span class="diagram-pill">optional</span><strong>이메일 전달</strong
+    ><small class="diagram-muted">Resend / SendGrid</small>
+  </div>
+  <div class="diagram-arrow diagram-accent" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box ok">all required done &rarr; panel auto-hides</div>
+</div>
+```
+
+```css
+.ob {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.ob .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 12px 14px;
+}
+.ob .diagram-arrow {
+  font-size: 22px;
 }
 ```
 
+</Diagram>
+
 ## 최종 사용자용
 
 ### 볼 내용

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

@@ -14,13 +14,70 @@ Agent-Native **Plan** 앱은 설치 가능한 하나의 번들로 제공됩니
 - **2개의 skills** — `/visual-plan`(표준 진입점) 및 `/visual-recap`.
 - **Plan MCP 커넥터** — `https://plan.agent-native.com`(MCP 엔드포인트 `https://plan.agent-native.com/_agent-native/mcp`, 서버 이름 `plan`)에서 호스팅된 앱에 대해 등록되었습니다.
 
-```an-diagram title="세 가지 경로, 하나의 번들" summary="범용 CLI, Claude Code 플러그인 및 Codex 플러그인은 모두 동일한 두 가지 기술과 호스팅된 계획 커넥터를 설치합니다."
-{
-  "html": "<div class=\"diagram-routes\"><div class=\"diagram-col\"><div class=\"diagram-node\">Universal CLI<br><small class=\"diagram-muted\">skills add visual-plan</small></div><div class=\"diagram-node\">Claude Code 플러그인<br><small class=\"diagram-muted\">/plugin install</small></div><div class=\"diagram-node\">Codex 플러그인<br><small class=\"diagram-muted\">codex plugin add</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">/visual-plan</span><span class=\"diagram-pill accent\">/visual-recap</span><small class=\"diagram-muted\">two skills</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">Plan MCP connector<br><small class=\"diagram-muted\">plan.agent-native.com/_agent-native/mcp</small></div></div>",
-  "css": ".diagram-routes{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-routes .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-routes .diagram-arrow{font-size:22px;line-height:1}.diagram-routes .center{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.diagram-routes .center .diagram-pill{margin:2px}"
+<Diagram id="doc-block-u395er" title={"세 가지 경로, 하나의 번들"} summary={"범용 CLI, Claude Code 플러그인 및 Codex 플러그인은 모두 동일한 두 가지 기술과 호스팅된 계획 커넥터를 설치합니다."}>
+
+```html
+<div class="diagram-routes">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Universal CLI<br /><small class="diagram-muted"
+        >skills add visual-plan</small
+      >
+    </div>
+    <div class="diagram-node">
+      Claude Code 플러그인<br /><small class="diagram-muted"
+        >/plugin install</small
+      >
+    </div>
+    <div class="diagram-node">
+      Codex 플러그인<br /><small class="diagram-muted">codex plugin add</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">/visual-plan</span
+    ><span class="diagram-pill accent">/visual-recap</span
+    ><small class="diagram-muted">two skills</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    Plan MCP connector<br /><small class="diagram-muted"
+      >plan.agent-native.com/_agent-native/mcp</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-routes {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-routes .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-routes .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-routes .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  text-align: center;
+}
+.diagram-routes .center .diagram-pill {
+  margin: 2px;
 }
 ```
 
+</Diagram>
+
 기본적으로 skills는 모두 호스팅된 계획 앱에 게시하며 다음을 통해 계획을 생성합니다.
 MCP 커넥터를 검토하고 검토할 링크 또는 인라인 계획을 건네줍니다. 그들은 절대로 버리지 않습니다
 인라인 Markdown/ASCII 계획을 결과물로 채팅에 포함합니다. 계획 도구인 경우
@@ -82,13 +139,47 @@ npx @agent-native/core@latest plan local serve --dir plans/<slug> --kind plan --
 댓글, 스크린샷, 계획 내역은 귀하가 명시적으로 설명할 때까지 사용할 수 없습니다.
 나중에 게시하세요.
 
-```an-diagram title="호스팅 대 로컬 파일 모드" summary="기본적으로 기술은 커넥터를 통해 게시됩니다. 로컬 파일 모드는 MDX을 디스크에 쓰고 대신 localhost 브리지를 통해 미리 봅니다."
-{
-  "html": "<div class=\"diagram-modes\"><div class=\"diagram-card\"><span class=\"diagram-pill accent\">기본 · 호스팅됨</span><strong>Plan 앱에 게시</strong><small class=\"diagram-muted\">MCP connector &rarr; hosted DB &rarr; share links, comments, history, screenshots</small></div><div class=\"diagram-card\"><span class=\"diagram-pill warn\">로컬 파일 개인정보 보호</span><strong>MDX를 디스크에 쓰기</strong><small class=\"diagram-muted\">plan.mdx + canvas.mdx + prototype.mdx &rarr; localhost bridge &rarr; hosted Plan UI reads local source. No DB 쓰기s until <code>publish-visual-plan</code>.</small></div></div>",
-  "css": ".diagram-modes{display:flex;gap:14px;flex-wrap:wrap}.diagram-modes .diagram-card{flex:1 1 260px;display:flex;flex-direction:column;gap:6px;padding:16px 18px}"
+<Diagram id="doc-block-1hw7qno" title={"호스팅 대 로컬 파일 모드"} summary={"기본적으로 기술은 커넥터를 통해 게시됩니다. 로컬 파일 모드는 MDX을 디스크에 쓰고 대신 localhost 브리지를 통해 미리 봅니다."}>
+
+```html
+<div class="diagram-modes">
+  <div class="diagram-card">
+    <span class="diagram-pill accent">기본 · 호스팅됨</span
+    ><strong>Plan 앱에 게시</strong
+    ><small class="diagram-muted"
+      >MCP connector &rarr; hosted DB &rarr; share links, comments, history,
+      screenshots</small
+    >
+  </div>
+  <div class="diagram-card">
+    <span class="diagram-pill warn">로컬 파일 개인정보 보호</span
+    ><strong>MDX를 디스크에 쓰기</strong
+    ><small class="diagram-muted"
+      >plan.mdx + canvas.mdx + prototype.mdx &rarr; localhost bridge &rarr;
+      hosted Plan UI reads local source. No DB 쓰기s until
+      <code>publish-visual-plan</code>.</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-modes {
+  display: flex;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-modes .diagram-card {
+  flex: 1 1 260px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 16px 18px;
 }
 ```
 
+</Diagram>
+
 Agent Native 데스크탑에는 호스팅 계획에 대한 별도의 로컬 파일 동기화 경로가 있습니다:
 데스크톱 앱은 호스팅된 계획을 로컬 MDX 파일에 미러링하고 편집 내용을 다시 가져올 수 있습니다.
 Plan 앱을 복제하거나 CLI를 실행하지 않고. 해당 워크플로우는 호스팅된

package/corpus/core/docs/content/locales/ko-KR/pr-visual-recap.mdx

@@ -24,13 +24,72 @@ PR Visual Recap은 모든 끌어오기 요청을 **시각적 코드 검토**로
 7. 대화형 요약 링크 옆에 `<picture>` 요소(GitHub의 위장 이미지 프록시를 통해 제공됨)와 함께 스크린샷 **인라인**을 삽입하는 단일 고정 PR 댓글을 업로드합니다.
 8. `Visual Recap` 검사를 성공, 건너뛰기 또는 중립으로 완료합니다.
 
-```an-diagram title="각 PR 푸시 시 어떤 일이 발생합니까?" summary="제한된 diff는 실제 코딩 에이전트에 공급되어 요약을 작성합니다. 워크플로는 이를 스크린샷하고 고정 댓글 하나를 업데이트합니다."
-{
-  "html": "<div class=\"diagram-recap\"><div class=\"diagram-node\">PR 푸시<br><small class=\"diagram-muted\">bounded base&hellip;head diff</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">코딩 에이전트<br><small class=\"diagram-muted\">Claude Code / Codex가 diff를 읽음</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">create-visual-recap</span><small class=\"diagram-muted\">publishes recap plan</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">헤드리스 Chrome<br><small class=\"diagram-muted\">light + dark screenshots</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">고정 PR 댓글 하나<br><small class=\"diagram-muted\">inline screenshot + plan link</small></div></div><div class=\"diagram-foot diagram-muted\">Plus an informational <span class=\"diagram-pill\">Visual Recap</span> check &mdash; non-blocking, never required.</div>",
-  "css": ".diagram-recap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.diagram-recap .diagram-arrow{font-size:20px;line-height:1}.diagram-recap .center{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.diagram-recap .diagram-foot{flex-basis:100%;margin-top:10px;font-size:13px}"
+<Diagram id="doc-block-110s0f0" title={"각 PR 푸시 시 어떤 일이 발생합니까?"} summary={"제한된 diff는 실제 코딩 에이전트에 공급되어 요약을 작성합니다. 워크플로는 이를 스크린샷하고 고정 댓글 하나를 업데이트합니다."}>
+
+```html
+<div class="diagram-recap">
+  <div class="diagram-node">
+    PR 푸시<br /><small class="diagram-muted"
+      >bounded base&hellip;head diff</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node">
+    코딩 에이전트<br /><small class="diagram-muted"
+      >Claude Code / Codex가 diff를 읽음</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">create-visual-recap</span
+    ><small class="diagram-muted">publishes recap plan</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node">
+    헤드리스 Chrome<br /><small class="diagram-muted"
+      >light + dark screenshots</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    고정 PR 댓글 하나<br /><small class="diagram-muted"
+      >inline screenshot + plan link</small
+    >
+  </div>
+</div>
+<div class="diagram-foot diagram-muted">
+  Plus an informational <span class="diagram-pill">Visual Recap</span> check
+  &mdash; non-blocking, never required.
+</div>
+```
+
+```css
+.diagram-recap {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.diagram-recap .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
+}
+.diagram-recap .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  text-align: center;
+}
+.diagram-recap .diagram-foot {
+  flex-basis: 100%;
+  margin-top: 10px;
+  font-size: 13px;
 }
 ```
 
+</Diagram>
+
 다시 푸시하면 동일한 계획과 동일한 고정 댓글이 업데이트됩니다. 고아 계획이나 댓글 스팸이 없습니다.
 
 ## 설치
@@ -157,13 +216,71 @@ npx @agent-native/core@latest recap setup
 
 설치하려면 [BuilderIO/agent-native](https://github.com/BuilderIO/agent-native/blob/main/.github/workflows/pr-visual-recap-fork.yml)의 파일을 기존 `pr-visual-recap.yml`와 함께 저장소의 `.github/workflows/` 디렉터리에 복사하세요. 동일한 비밀(`PLAN_RECAP_TOKEN`, `ANTHROPIC_API_KEY`)이 적용됩니다.
 
-```an-diagram title="포크 PR 동의 게이트" summary="포크 PR에는 기본적으로 비밀이 없습니다. 신뢰할 수 있는 작성자는 자동으로 실행되며 외부 기여자는 새로운 관리자 요약 레이블이 필요합니다."
-{
-  "html": "<div class=\"diagram-fork\"><div class=\"diagram-node\">Fork PR 열림<br><small class=\"diagram-muted\">main workflow has no secrets</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill ok\">신뢰할 수 있는 작성자</span><small class=\"diagram-muted\">OWNER, MEMBER 또는 COLLABORATOR는 자동 실행</small></div><div class=\"diagram-card\"><span class=\"diagram-pill warn\">외부 기여자</span><small class=\"diagram-muted\">메인테이너가 diff를 검토한 뒤 적용 <code>recap</code></small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\">게이트 검사<br><small class=\"diagram-muted\">fork PR? &amp; trusted or fresh label?</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box ok\">요약 실행<br><small class=\"diagram-muted\">base repo 코드만 · fork diff는 텍스트 입력</small></div></div>",
-  "css": ".diagram-fork{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.diagram-fork .diagram-arrow{font-size:20px;line-height:1}.diagram-fork .center{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.diagram-fork .diagram-card{display:flex;flex-direction:column;gap:6px;padding:12px 14px}"
+<Diagram id="doc-block-1r88r3y" title={"포크 PR 동의 게이트"} summary={"포크 PR에는 기본적으로 비밀이 없습니다. 신뢰할 수 있는 작성자는 자동으로 실행되며 외부 기여자는 새로운 관리자 요약 레이블이 필요합니다."}>
+
+```html
+<div class="diagram-fork">
+  <div class="diagram-node">
+    Fork PR 열림<br /><small class="diagram-muted"
+      >main workflow has no secrets</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill ok">신뢰할 수 있는 작성자</span
+    ><small class="diagram-muted"
+      >OWNER, MEMBER 또는 COLLABORATOR는 자동 실행</small
+    >
+  </div>
+  <div class="diagram-card">
+    <span class="diagram-pill warn">외부 기여자</span
+    ><small class="diagram-muted"
+      >메인테이너가 diff를 검토한 뒤 적용 <code>recap</code></small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    게이트 검사<br /><small class="diagram-muted"
+      >fork PR? &amp; trusted or fresh label?</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box ok">
+    요약 실행<br /><small class="diagram-muted"
+      >base repo 코드만 · fork diff는 텍스트 입력</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-fork {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.diagram-fork .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
+}
+.diagram-fork .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  text-align: center;
+}
+.diagram-fork .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px 14px;
 }
 ```
 
+</Diagram>
+
 ### 라벨 게이트 작동 방식
 
 1. 포크 기여자가 PR을 엽니다. GitHub는 포크 실행에서 비밀을 보류하기 때문에 일반적인 `pull_request` 워크플로는 건너뜁니다.