@agent-native/core 0.79.26 → 0.80.0

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

@@ -7,13 +7,77 @@ description: "Nitro 서버 경로, 플러그인, 프레임워크 탑재 경로,
 
 에이전트 기반 앱은 서버 경로 및 플러그인에 [Nitro](https://nitro.build)를 사용합니다. 대부분의 제품 동작은 [Actions](/docs/actions)에 있어야 합니다. 사용자 정의 경로는 actions가 적합하지 않은 프로토콜 표면(업로드, 스트리밍, 공개 페이지, webhooks, OAuth 콜백 및 공급자별 API)을 위한 것입니다.
 
-```an-diagram title="서버에서 실행되는 것" summary="조치가 기본값입니다. 사용자 정의 파일 경로와 프레임워크 탑재 경로는 동일한 Nitro 앱과 동일한 SQL 데이터베이스를 공유합니다."
-{
-  "html": "<div class=\"diagram-server\"><div class=\"diagram-col entry\"><div class=\"diagram-node\">브라우저 / UI</div><div class=\"diagram-node\">에이전트 루프</div><div class=\"diagram-node\">외부 클라이언트<br><small class=\"diagram-muted\">HTTP · MCP · A2A</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel\" data-rough><strong>Nitro 서버</strong><div class=\"diagram-row\"><span class=\"diagram-pill accent\">Actions</span><small class=\"diagram-muted\">기본 표면</small></div><div class=\"diagram-row\"><span class=\"diagram-pill\">/_agent-native/*</span><small class=\"diagram-muted\">framework routes</small></div><div class=\"diagram-row\"><span class=\"diagram-pill\">/api/*</span><small class=\"diagram-muted\">custom file routes</small></div><div class=\"diagram-row\"><span class=\"diagram-pill\">plugins</span><small class=\"diagram-muted\">시작: 마이그레이션, 작업</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>SQL 데이터베이스<br><small class=\"diagram-muted\">Drizzle · 조정 지점</small></div></div>",
-  "css": ".diagram-server{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-server .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-server .diagram-panel{display:flex;flex-direction:column;gap:8px;padding:14px 16px}.diagram-server .diagram-row{display:flex;align-items:center;gap:8px}.diagram-server .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-lj4dzm" title={"서버에서 실행되는 것"} summary={"조치가 기본값입니다. 사용자 정의 파일 경로와 프레임워크 탑재 경로는 동일한 Nitro 앱과 동일한 SQL 데이터베이스를 공유합니다."}>
+
+```html
+<div class="diagram-server">
+  <div class="diagram-col entry">
+    <div class="diagram-node">브라우저 / UI</div>
+    <div class="diagram-node">에이전트 루프</div>
+    <div class="diagram-node">
+      외부 클라이언트<br /><small class="diagram-muted">HTTP · MCP · A2A</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel" data-rough>
+    <strong>Nitro 서버</strong>
+    <div class="diagram-row">
+      <span class="diagram-pill accent">Actions</span
+      ><small class="diagram-muted">기본 표면</small>
+    </div>
+    <div class="diagram-row">
+      <span class="diagram-pill">/_agent-native/*</span
+      ><small class="diagram-muted">framework routes</small>
+    </div>
+    <div class="diagram-row">
+      <span class="diagram-pill">/api/*</span
+      ><small class="diagram-muted">custom file routes</small>
+    </div>
+    <div class="diagram-row">
+      <span class="diagram-pill">plugins</span
+      ><small class="diagram-muted">시작: 마이그레이션, 작업</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    SQL 데이터베이스<br /><small class="diagram-muted"
+      >Drizzle · 조정 지점</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-server {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-server .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-server .diagram-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px 16px;
+}
+.diagram-server .diagram-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.diagram-server .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## 파일 기반 경로 {#file-based-routes}
 
 경로는 `server/routes/`에 있으며 Nitro는 파일 이름을 메서드 및 경로에 매핑합니다.
@@ -185,13 +249,51 @@ export default runMigrations(
 
 데이터베이스가 조정 지점이기 때문에 이는 서버리스 및 다중 인스턴스 배포 전반에 걸쳐 작동합니다. actions 외부에 사용자 정의 변형을 작성하는 경우 프레임워크 도우미를 사용하거나 적절한 동기화 무효화를 내보내 UI 새로 고침을 엽니다.
 
-```an-diagram title="SQL-backed 동기화 루프" summary="감시자도 없고 끈끈한 상태도 없습니다. 쓰기는 SQL의 버전과 충돌합니다. 모든 클라이언트는 버전을 폴링하고 다시 가져옵니다."
-{
-  "html": "<div class=\"diagram-sync\"><div class=\"diagram-box\" data-rough>Action / 헬퍼<br><small class=\"diagram-muted\">mutates data</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel\" data-rough><strong>SQL 데이터베이스</strong><small class=\"diagram-muted\">sync version increments</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&larr;</div><div class=\"diagram-col\"><div class=\"diagram-node\">useDbSync()<br><small class=\"diagram-muted\">polls /_agent-native/poll</small></div><div class=\"diagram-pill ok\">invalidate caches &rarr; UI refreshes</div></div></div>",
-  "css": ".diagram-sync{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-sync .diagram-col{display:flex;flex-direction:column;gap:8px;align-items:flex-start}.diagram-sync .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-m1gowt" title={"SQL-backed 동기화 루프"} summary={"감시자도 없고 끈끈한 상태도 없습니다. 쓰기는 SQL의 버전과 충돌합니다. 모든 클라이언트는 버전을 폴링하고 다시 가져옵니다."}>
+
+```html
+<div class="diagram-sync">
+  <div class="diagram-box" data-rough>
+    Action / 헬퍼<br /><small class="diagram-muted">mutates data</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel" data-rough>
+    <strong>SQL 데이터베이스</strong
+    ><small class="diagram-muted">sync version increments</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&larr;</div>
+  <div class="diagram-col">
+    <div class="diagram-node">
+      useDbSync()<br /><small class="diagram-muted"
+        >polls /_agent-native/poll</small
+      >
+    </div>
+    <div class="diagram-pill ok">invalidate caches &rarr; UI refreshes</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-sync {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-sync .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: flex-start;
+}
+.diagram-sync .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 <Endpoint id="doc-block-vqe3d1" title={"설문 조사 끝점"} method="GET" path="/_agent-native/poll" summary={"클라이언트가 변경 사항을 감지할 수 있도록 현재 소스별 데이터베이스 동기화 버전을 반환합니다."} auth="Session cookie (request-scoped identity)" responses={[
   {
     "status": "200",
@@ -213,13 +315,70 @@ export default runMigrations(
 4. 즉시 200을 반환합니다.
 5. 새로운 프로세서 실행이 에이전트 루프를 실행하고 결과를 게시하도록 합니다.
 
-```an-diagram title="통합 대기열 패턴" summary="웹훅 핸들러는 밀리초 단위로 반환됩니다. 별도의 서명된 실행은 느린 에이전트 작업을 실행합니다."
-{
-  "html": "<div class=\"diagram-webhook\"><div class=\"diagram-box\" data-rough>인바운드 webhook<br><small class=\"diagram-muted\">Slack · Stripe · email</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel\" data-rough><strong>Handler</strong><div class=\"diagram-step\"><span class=\"diagram-pill\">1</span><small class=\"diagram-muted\">verify signature</small></div><div class=\"diagram-step\"><span class=\"diagram-pill\">2</span><small class=\"diagram-muted\">작업을 SQL에 삽입</small></div><div class=\"diagram-step\"><span class=\"diagram-pill\">3</span><small class=\"diagram-muted\">self-fire processor</small></div><div class=\"diagram-step\"><span class=\"diagram-pill ok\">4</span><small class=\"diagram-muted\">return 200 now</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Signed processor<br><small class=\"diagram-muted\">에이전트 루프를 실행하고 결과 게시</small></div></div>",
-  "css": ".diagram-webhook{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-webhook .diagram-panel{display:flex;flex-direction:column;gap:6px;padding:14px 16px}.diagram-webhook .diagram-step{display:flex;align-items:center;gap:8px}.diagram-webhook .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1wnvkdi" title={"통합 대기열 패턴"} summary={"웹훅 핸들러는 밀리초 단위로 반환됩니다. 별도의 서명된 실행은 느린 에이전트 작업을 실행합니다."}>
+
+```html
+<div class="diagram-webhook">
+  <div class="diagram-box" data-rough>
+    인바운드 webhook<br /><small class="diagram-muted"
+      >Slack · Stripe · email</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel" data-rough>
+    <strong>Handler</strong>
+    <div class="diagram-step">
+      <span class="diagram-pill">1</span
+      ><small class="diagram-muted">verify signature</small>
+    </div>
+    <div class="diagram-step">
+      <span class="diagram-pill">2</span
+      ><small class="diagram-muted">작업을 SQL에 삽입</small>
+    </div>
+    <div class="diagram-step">
+      <span class="diagram-pill">3</span
+      ><small class="diagram-muted">self-fire processor</small>
+    </div>
+    <div class="diagram-step">
+      <span class="diagram-pill ok">4</span
+      ><small class="diagram-muted">return 200 now</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    Signed processor<br /><small class="diagram-muted"
+      >에이전트 루프를 실행하고 결과 게시</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-webhook {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-webhook .diagram-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+}
+.diagram-webhook .diagram-step {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.diagram-webhook .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 > [!WARNING]
 > 응답을 반환한 후 기다리지 않은 약속에 의존하지 마십시오. 서버리스 호스트는 실행을 정지시킵니다. 정식 통합 대기열은 [Messaging](/docs/messaging)를 참조하세요.
 

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

@@ -27,13 +27,54 @@ Google 문서도구처럼 보이고 작동합니다. 동일한 공유 버튼,
 
 `public`는 의도적으로 조용한 수준입니다. 공개 리소스는 직접 링크를 통해 접근할 수 있지만 다른 사용자의 사이드바, 목록 또는 검색에는 표시되지 **않습니다**. 이는 "URL 공유를 위한 공개"를 "교차 사용자 검색을 위한 공개"와 별도로 유지합니다. 교차 사용자 검색을 진정으로 원하는 갤러리 및 템플릿 카탈로그는 명시적으로 선택합니다.
 
-```an-diagram title="가시성, 바깥쪽으로 넓어짐" summary="리소스에 대한 대략적인 가시성은 바닥을 설정합니다. 컴패니언 테이블의 명시적인 공유 부여는 이름이 지정된 사람을 맨 위에 추가합니다."
-{
-  "html": "<div class=\"share-tiers\"><div class=\"diagram-card\"><span class=\"diagram-pill\">private</span><small class=\"diagram-muted\">owner + explicit grants only &middot; <strong>default</strong></small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">org</span><small class=\"diagram-muted\">+ anyone in the same org (read-only)</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill warn\">public</span><small class=\"diagram-muted\">+ anyone with the link (read-only) &middot; hidden from others' lists/search</small></div></div>",
-  "css": ".share-tiers{display:flex;flex-direction:column;align-items:stretch;gap:8px}.share-tiers .diagram-card{display:flex;flex-direction:column;gap:4px;padding:12px 16px}.share-tiers .diagram-arrow{text-align:center;font-size:20px;line-height:1}"
+<Diagram id="doc-block-1iuidh0" title={"가시성, 바깥쪽으로 넓어짐"} summary={"리소스에 대한 대략적인 가시성은 바닥을 설정합니다. 컴패니언 테이블의 명시적인 공유 부여는 이름이 지정된 사람을 맨 위에 추가합니다."}>
+
+```html
+<div class="share-tiers">
+  <div class="diagram-card">
+    <span class="diagram-pill">private</span
+    ><small class="diagram-muted"
+      >owner + explicit grants only &middot; <strong>default</strong></small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">org</span
+    ><small class="diagram-muted">+ anyone in the same org (read-only)</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill warn">public</span
+    ><small class="diagram-muted"
+      >+ anyone with the link (read-only) &middot; hidden from others'
+      lists/search</small
+    >
+  </div>
+</div>
+```
+
+```css
+.share-tiers {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 8px;
+}
+.share-tiers .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 16px;
+}
+.share-tiers .diagram-arrow {
+  text-align: center;
+  font-size: 20px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## 공유 부여에 대한 역할 {#roles}
 
 특정 사용자 또는 조직과 공유할 때 역할을 선택합니다.

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

@@ -13,13 +13,72 @@ Skills는 `.agents/skills/<name>/SKILL.md`에 거주하며 상담원을 위한
 
 모든 스킬의 앞부분 `name` 및 `description`는 항상 시스템 프롬프트의 skills 블록에 삽입되므로 에이전트는 skills가 무엇인지 알 수 있습니다. 전체 기술 본문은 에이전트가 기술이 작업과 관련이 있다고 결정할 때 요청 시 로드됩니다(`docs-search`를 통해서도 표시됨). 이것이 설명을 짧게 유지하고 트리거별로 중요한 이유입니다. 설명은 에이전트가 나머지 로드 여부를 결정하기 전에 읽는 유일한 내용입니다.
 
-```an-diagram title="점진적 공개" summary="모든 기술의 이름 + 설명만 항상 맥락에 있습니다. 작업이 일치할 때 요청 시 전체 본문이 로드됩니다."
-{
-  "html": "<div class=\"sk-flow\"><div class=\"diagram-card\"><span class=\"diagram-pill accent\">항상 시스템 프롬프트에 포함</span><div class=\"sk-list\"><span class=\"diagram-pill\">storing-data &mdash; <small class=\"diagram-muted\">add data models&hellip;</small></span><span class=\"diagram-pill\">real-time-sync &mdash; <small class=\"diagram-muted\">wire polling&hellip;</small></span><span class=\"diagram-pill\">create-skill &mdash; <small class=\"diagram-muted\">add a skill&hellip;</small></span></div><small class=\"diagram-muted\">just name + description (cheap)</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><small class=\"diagram-muted\">task matches a description</small><span class=\"diagram-pill accent\">load on demand</span></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">Full <code>SKILL.md</code> body<br><small class=\"diagram-muted\">규칙, 코드, 해야 할 일과 피할 일</small></div></div>",
-  "css": ".sk-flow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.sk-flow .diagram-card{display:flex;flex-direction:column;gap:8px;padding:14px 16px;min-width:240px}.sk-flow .sk-list{display:flex;flex-direction:column;gap:6px}.sk-flow .center{display:flex;flex-direction:column;align-items:center;gap:6px}.sk-flow .diagram-arrow{font-size:22px}"
+<Diagram id="doc-block-199ekw5" title={"점진적 공개"} summary={"모든 기술의 이름 + 설명만 항상 맥락에 있습니다. 작업이 일치할 때 요청 시 전체 본문이 로드됩니다."}>
+
+```html
+<div class="sk-flow">
+  <div class="diagram-card">
+    <span class="diagram-pill accent">항상 시스템 프롬프트에 포함</span>
+    <div class="sk-list">
+      <span class="diagram-pill"
+        >storing-data &mdash;
+        <small class="diagram-muted">add data models&hellip;</small></span
+      ><span class="diagram-pill"
+        >real-time-sync &mdash;
+        <small class="diagram-muted">wire polling&hellip;</small></span
+      ><span class="diagram-pill"
+        >create-skill &mdash;
+        <small class="diagram-muted">add a skill&hellip;</small></span
+      >
+    </div>
+    <small class="diagram-muted">just name + description (cheap)</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <small class="diagram-muted">task matches a description</small
+    ><span class="diagram-pill accent">load on demand</span>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    Full <code>SKILL.md</code> body<br /><small class="diagram-muted"
+      >규칙, 코드, 해야 할 일과 피할 일</small
+    >
+  </div>
+</div>
+```
+
+```css
+.sk-flow {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.sk-flow .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px 16px;
+  min-width: 240px;
+}
+.sk-flow .sk-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.sk-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+.sk-flow .diagram-arrow {
+  font-size: 22px;
 }
 ```
 
+</Diagram>
+
 ## 프레임워크 skills {#framework-skills}
 
 이것은 **기본 템플릿**과 함께 번들로 제공되는 skills입니다. 특정 앱에서 사용할 수 있는 정확한 세트는 스캐폴드한 템플릿에 따라 다릅니다. 실제로 제공되는 내용은 해당 템플릿의 `.agents/skills/` 디렉터리를 확인하세요.
@@ -148,14 +207,64 @@ scope: dev
 
 이것은 `.claude/skills`만 읽는 Claude 코드에 의존하는 오래된 해킹을 대체합니다. — `scope: dev`는 개발 대 런타임 분할을 일류의 명시적인 선택으로 만듭니다.
 
-```an-diagram title="어떤 에이전트가 어떤 스킬을 로드하는지" summary="범위는 인앱 런타임 에이전트가 기술을 볼지 여부를 결정합니다. 개발 기술은 코딩 에이전트에만 표시됩니다."
-{
-"html": "<div class=\"sc-grid\"><div class=\"diagram-card\"><span class=\"diagram-pill\">.agents/skills/</span><div class=\"sc-row\"><span class=\"diagram-pill ok\">scope: both</span><small class=\"diagram-muted\">default</small></div><div class=\"sc-row\"><span class=\"diagram-pill ok\">scope: runtime</span></div><div class=\"sc-row\"><span class=\"diagram-pill warn\">scope: dev</span></div></div><div class=\"sc-targets\"><div class=\"diagram-box\">Runtime agent<br><small class=\"diagram-muted\">reads <code>both</code> + <code>runtime</code></small></div><div class=\"diagram-box\">코딩 에이전트<br><small class=\"diagram-muted\">Claude Code reads <code>.claude/skills/</code> + <code>dev</code></small></div></div></div>",
-"css": ".sc-grid{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start}.sc-grid .diagram-card{display:flex;flex-direction:column;gap:8px;padding:14px 16px}.sc-grid .sc-row{display:flex;align-items:center;gap:8px}.sc-grid .sc-targets{display:flex;flex-direction:column;gap:10px}"
-}
+<Diagram id="doc-block-i06ksi" title={"어떤 에이전트가 어떤 스킬을 로드하는지"} summary={"범위는 인앱 런타임 에이전트가 기술을 볼지 여부를 결정합니다. 개발 기술은 코딩 에이전트에만 표시됩니다."}>
+
+```html
+<div class="sc-grid">
+  <div class="diagram-card">
+    <span class="diagram-pill">.agents/skills/</span>
+    <div class="sc-row">
+      <span class="diagram-pill ok">scope: both</span
+      ><small class="diagram-muted">default</small>
+    </div>
+    <div class="sc-row">
+      <span class="diagram-pill ok">scope: runtime</span>
+    </div>
+    <div class="sc-row"><span class="diagram-pill warn">scope: dev</span></div>
+  </div>
+  <div class="sc-targets">
+    <div class="diagram-box">
+      Runtime agent<br /><small class="diagram-muted"
+        >reads <code>both</code> + <code>runtime</code></small
+      >
+    </div>
+    <div class="diagram-box">
+      코딩 에이전트<br /><small class="diagram-muted"
+        >Claude Code reads <code>.claude/skills/</code> +
+        <code>dev</code></small
+      >
+    </div>
+  </div>
+</div>
+```
 
+```css
+.sc-grid {
+  display: flex;
+  gap: 24px;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+.sc-grid .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px 16px;
+}
+.sc-grid .sc-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.sc-grid .sc-targets {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
 ```
 
+</Diagram>
+
 > **또한 참조:** 기술 설명을 단어로 표현하고, 점진적인 공개를 적용하고, `AGENTS.md`를 간결하게 유지하는 방법은 [Writing Agent Instructions](/docs/writing-agent-instructions)를 참조하세요.
 
 ## Skills 대 AGENTS.md {#skills-vs-agents-md}

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

@@ -18,13 +18,55 @@ description: "평이한 영어로 분석 질문을 하고 차트와 대시보드
 
 코드, 쿼리 및 데이터를 소유하려는 팀을 위한 Amplitude, Mixpanel 및 Looker를 대체하는 오픈 소스입니다.
 
-```an-diagram title="차트에 대한 질문" summary="에이전트는 데이터 사전을 참조하고 SQL을 작성하고 웨어하우스에 대해 유효성을 확인한 다음 차트를 렌더링하거나 패널을 저장합니다."
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-node\">쉬운 설명<br>question</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\">reads data dictionary</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>SQL 쓰기</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-pill ok\">Dry-run 검증</div><small class=\"diagram-muted\">BigQuery / 소스</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">차트, 표 또는<br>saved panel</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-1jmz292" title={"차트에 대한 질문"} summary={"에이전트는 데이터 사전을 참조하고 SQL을 작성하고 웨어하우스에 대해 유효성을 확인한 다음 차트를 렌더링하거나 패널을 저장합니다."}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-node">쉬운 설명<br />question</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">reads data dictionary</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>SQL 쓰기</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-pill ok">Dry-run 검증</div>
+    <small class="diagram-muted">BigQuery / 소스</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">차트, 표 또는<br />saved panel</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>
+
 ## 그것으로 무엇을 할 수 있나요
 
 - **쉬운 영어로 데이터 질문을 하세요.** "지난달 가입 중 몇 퍼센트가 유료로 전환되었습니까?" 또는 "지난 6개월 동안의 주간 활성 사용자를 보여주세요." 에이전트는 올바른 소스를 선택하고 SQL를 작성한 후 차트를 렌더링합니다.

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

@@ -18,13 +18,71 @@ Assets는 브랜드와 일관된 미디어를 생성하고 관리하기 위한
 
 앱을 열면 선택한 라이브러리, 프롬프트, 참조 및 생성된 후보가 하나의 작업 공간에 유지됩니다. 에이전트는 UI가 사용하는 것과 동일한 actions를 통해 모든 자산을 탐색, 검색, 생성, 구체화 및 내보낼 수 있습니다.
 
-```an-diagram title="생성, 검토, 재사용" summary="참조 및 프롬프트는 생성 및 선택 세션을 제공합니다. 선택한 자산은 라이브러리에 저장되고 선택기나 A2A을 통해 다른 앱으로 흘러나갑니다."
-{
-  "html": "<div class=\"diagram-assets\"><div class=\"diagram-col\"><div class=\"diagram-node\">References<br><small class=\"diagram-muted\">로고, 제품 이미지, 스타일</small></div><div class=\"diagram-node\">프롬프트<br><small class=\"diagram-muted\">채팅 또는 Generate 컨트롤</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough><span class=\"diagram-pill accent\">생성 세션</span><small class=\"diagram-muted\">image &amp; video candidates · audit log</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough><span class=\"diagram-pill ok\">Library</span><small class=\"diagram-muted\">선택된 브랜드 일관 assets</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-node\">Picker<br><small class=\"diagram-muted\">iframe / MCP 앱</small></div><div class=\"diagram-node\">A2A<br><small class=\"diagram-muted\">슬라이드 · 디자인 · 콘텐츠</small></div></div></div>",
-  "css": ".diagram-assets{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-assets .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-assets .diagram-box{display:flex;flex-direction:column;gap:4px}.diagram-assets .diagram-arrow{font-size:20px;line-height:1}"
+<Diagram id="doc-block-4kw99k" title={"생성, 검토, 재사용"} summary={"참조 및 프롬프트는 생성 및 선택 세션을 제공합니다. 선택한 자산은 라이브러리에 저장되고 선택기나 A2A을 통해 다른 앱으로 흘러나갑니다."}>
+
+```html
+<div class="diagram-assets">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      References<br /><small class="diagram-muted"
+        >로고, 제품 이미지, 스타일</small
+      >
+    </div>
+    <div class="diagram-node">
+      프롬프트<br /><small class="diagram-muted"
+        >채팅 또는 Generate 컨트롤</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    <span class="diagram-pill accent">생성 세션</span
+    ><small class="diagram-muted"
+      >image &amp; video candidates · audit log</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    <span class="diagram-pill ok">Library</span
+    ><small class="diagram-muted">선택된 브랜드 일관 assets</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Picker<br /><small class="diagram-muted">iframe / MCP 앱</small>
+    </div>
+    <div class="diagram-node">
+      A2A<br /><small class="diagram-muted">슬라이드 · 디자인 · 콘텐츠</small>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-assets {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-assets .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-assets .diagram-box {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.diagram-assets .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## 선택 시기
 
 - **팀에는 일회성 일반 미디어 프롬프트가 아닌 재사용 가능한 시각적 방향**이 필요합니다. 승인된 로고, 제품 사진, 스타일 예시를 수집하여 여러 세대가 브랜드를 유지할 수 있도록 하세요.

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

@@ -19,13 +19,74 @@ Brain은 승인된 Slack 채널, 클립 녹음, 그래놀라 팀 공간을 수
 경험, **출처**, **검토** 및 **지식**은 관리/지원
 데이터 연결, 제안 승인, 인용 메모리 검사를 위한 표면
 
-```an-diagram title="출처에서 인용 답변까지" summary="Brain은 승인된 소스를 원시 캡처로 수집하고, 내구성 있는 메모리를 추출하고, 검토를 통해 이를 게이트화한 다음 인용으로 답변합니다."
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-card\"><span class=\"diagram-pill\">Sources</span><small class=\"diagram-muted\">Slack · Granola · GitHub · Clips · webhooks</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>원시 캡처<br><small class=\"diagram-muted\">중복 제거됨, 수정됨</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Distill<br><small class=\"diagram-muted\">사실 · 결정 · 프로세스</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill warn\">Review</span><small class=\"diagram-muted\">sensitive / low-confidence queue</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough><span class=\"diagram-pill ok\">Knowledge</span><small class=\"diagram-muted\">승인됨, 원자적</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Ask</span><small class=\"diagram-muted\">cited answer</small></div></div>",
-  "css": ".diagram-flow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.diagram-flow .diagram-card{display:flex;flex-direction:column;gap:4px;padding:10px 12px}.diagram-flow .diagram-box{display:flex;flex-direction:column;gap:4px}.diagram-flow .diagram-arrow{font-size:20px;line-height:1}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-unss0s" title={"출처에서 인용 답변까지"} summary={"Brain은 승인된 소스를 원시 캡처로 수집하고, 내구성 있는 메모리를 추출하고, 검토를 통해 이를 게이트화한 다음 인용으로 답변합니다."}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-card">
+    <span class="diagram-pill">Sources</span
+    ><small class="diagram-muted"
+      >Slack · Granola · GitHub · Clips · webhooks</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    원시 캡처<br /><small class="diagram-muted">중복 제거됨, 수정됨</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    Distill<br /><small class="diagram-muted">사실 · 결정 · 프로세스</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill warn">Review</span
+    ><small class="diagram-muted">sensitive / low-confidence queue</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    <span class="diagram-pill ok">Knowledge</span
+    ><small class="diagram-muted">승인됨, 원자적</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Ask</span
+    ><small class="diagram-muted">cited answer</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-flow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.diagram-flow .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px 12px;
+}
+.diagram-flow .diagram-box {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 <WireframeBlock id="doc-block-vvekcs">
   <Screen
     surface="desktop"