@agent-native/core 0.79.26 → 0.79.27

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

@@ -18,13 +18,69 @@ description: "Google Calendar 동기화 및 Calendly 스타일 예약 링크가
 
 앱을 열면 활성 캘린더 보기가 기본 화면입니다. 상담원은 귀하가 보고 있는 요일, 주 또는 이벤트를 여전히 알고 있으므로 모든 내용을 철자하지 않고도 "오늘 Alex와 30분 통화 예약"이라고 말할 수 있습니다.
 
-```an-diagram title="예약 요청 흐름 방식" summary="달력을 클릭하거나 상담원에게 문의하면 동일한 작업이 Google Calendar에서 실시간으로 읽혀지고 동일한 보기에 다시 작성됩니다."
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-col\"><div class=\"diagram-node\">클릭합니다<br><small class=\"diagram-muted\">드래그, 툴바, 단축키</small></div><div class=\"diagram-node\">에이전트에게 요청<br><small class=\"diagram-muted\">\"find a 1-hour slot next week\"</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\">list-events · check-availability · create-event</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">Google Calendar<br><small class=\"diagram-muted\">실시간, 다중 계정</small></div><div class=\"diagram-box\">SQL<br><small class=\"diagram-muted\">예약 · 가능 시간</small></div></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:10px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-upe470" title={"예약 요청 흐름 방식"} summary={"달력을 클릭하거나 상담원에게 문의하면 동일한 작업이 Google Calendar에서 실시간으로 읽혀지고 동일한 보기에 다시 작성됩니다."}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      클릭합니다<br /><small class="diagram-muted">드래그, 툴바, 단축키</small>
+    </div>
+    <div class="diagram-node">
+      에이전트에게 요청<br /><small class="diagram-muted"
+        >"find a 1-hour slot next week"</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"
+      >list-events · check-availability · create-event</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">
+      Google Calendar<br /><small class="diagram-muted"
+        >실시간, 다중 계정</small
+      >
+    </div>
+    <div class="diagram-box">
+      SQL<br /><small class="diagram-muted">예약 · 가능 시간</small>
+    </div>
+  </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: 10px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## 그것으로 무엇을 할 수 있나요
 
 - **실제 Google Calendar**를 일별, 주별 또는 월별 보기로 여러 계정을 오버레이하여 확인하세요.

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

@@ -37,13 +37,68 @@ description: "최소 채팅 우선 에이전트 기본 앱: 내구성 있는 채
 
 그게 핵심입니다. Chat은 일반적인 척하는 도메인 제품이 아니라 귀하의 에이전트를 위한 얇고 유용한 기본 셸입니다.
 
-```an-diagram title="Chat 셸에 포함된 내용" summary="프레임워크의 표준 런타임(작업, 내구성 있는 스레드, 라이브 동기화 및 인증)에 대한 얇은 채팅 표면과 자체 UI를 추가할 수 있는 공간이 있습니다."
-{
-  "html": "<div class=\"diagram-chat\"><div class=\"diagram-col left\"><div class=\"diagram-node\">스레드 목록<br><small class=\"diagram-muted\">생성 · 다시 열기 · 고정 · 보관</small></div><div class=\"diagram-node\">전체 페이지 채팅<br><small class=\"diagram-muted\">/ 의 프레임워크 채팅 화면</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\">hello.ts · view-screen · navigate</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col right\"><div class=\"diagram-box\">핵심 SQL 테이블<br><small class=\"diagram-muted\">threads · application_state · settings · sessions · runs</small></div><div class=\"diagram-pill ok\">실시간 동기화 &#8635;</div><div class=\"diagram-box\">Better Auth<br><small class=\"diagram-muted\">로그인 · 조직 · 세션</small></div></div></div>",
-  "css": ".diagram-chat{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-chat .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-chat .diagram-arrow{font-size:22px;line-height:1}.diagram-chat .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-curf7p" title={"Chat 셸에 포함된 내용"} summary={"프레임워크의 표준 런타임(작업, 내구성 있는 스레드, 라이브 동기화 및 인증)에 대한 얇은 채팅 표면과 자체 UI를 추가할 수 있는 공간이 있습니다."}>
+
+```html
+<div class="diagram-chat">
+  <div class="diagram-col left">
+    <div class="diagram-node">
+      스레드 목록<br /><small class="diagram-muted"
+        >생성 · 다시 열기 · 고정 · 보관</small
+      >
+    </div>
+    <div class="diagram-node">
+      전체 페이지 채팅<br /><small class="diagram-muted"
+        >/ 의 프레임워크 채팅 화면</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">hello.ts · view-screen · navigate</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col right">
+    <div class="diagram-box">
+      핵심 SQL 테이블<br /><small class="diagram-muted"
+        >threads · application_state · settings · sessions · runs</small
+      >
+    </div>
+    <div class="diagram-pill ok">실시간 동기화 &#8635;</div>
+    <div class="diagram-box">
+      Better Auth<br /><small class="diagram-muted">로그인 · 조직 · 세션</small>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-chat {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-chat .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-chat .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-chat .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## 선택 시기 {#when-to-pick}
 
 - **사용자가 즉시 대화할 수 있는 기본 앱**을 원하고 actions 및 UI로 확장합니다.

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

@@ -19,13 +19,61 @@ search: "클립 브라우저 로그 개발자 로그 콘솔 로그 네트워크
 
 Loom + Granola + Wispr Flow가 하나의 앱으로 통합되었다고 생각해보세요. 그러나 에이전트는 모든 표면에서 일류 편집자이며 녹음, 회의 및 받아쓰기는 SaaS 공급업체의 것이 아니라 귀하의 것입니다. Clips는 공유 녹음물을 상담원이 읽을 수 있도록 해줍니다. 일반 Clips 공유 링크를 상담원에 붙여넣으면 대본을 텍스트로 "듣고" 타임스탬프가 표시된 화면 프레임을 이미지로 "볼" 수 있습니다. 원본 비디오는 필요하지 않습니다. 프레임 보기는 모든 이미지 지원 에이전트(ChatGPT, Claude 코드, 커서, Codex)에서 작동합니다. 텍스트 전용 웹 채팅은 여전히 ​​전체 내용을 얻을 수 있으며 업로드한 프레임을 사용할 수 있습니다.
 
-```an-diagram title="캡처, 복사, 재사용" summary="세 가지 캡처 유형이 하나의 라이브러리에 포함됩니다. 상담원이 스크립트를 작성하고 제목을 지정하고 요약하면 모든 스크립트를 검색하고 공유할 수 있습니다."
-{
-  "html": "<div class=\"diagram-clips\"><div class=\"diagram-col\"><div class=\"diagram-node\">화면 녹화</div><div class=\"diagram-node\">캘린더 회의</div><div class=\"diagram-node\">Fn 길게 누르기 받아쓰기</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>하나의 라이브러리<br><small class=\"diagram-muted\">recordings + transcripts (SQL)</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\">검색</div><div class=\"diagram-pill\">공유</div><div class=\"diagram-pill\">에이전트가 읽을 수 있음 links</div></div></div>",
-  "css": ".diagram-clips{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-clips .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-clips .center{display:flex;flex-direction:column;align-items:center;gap:4px}.diagram-clips .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-wz0gsz" title={"캡처, 복사, 재사용"} summary={"세 가지 캡처 유형이 하나의 라이브러리에 포함됩니다. 상담원이 스크립트를 작성하고 제목을 지정하고 요약하면 모든 스크립트를 검색하고 공유할 수 있습니다."}>
+
+```html
+<div class="diagram-clips">
+  <div class="diagram-col">
+    <div class="diagram-node">화면 녹화</div>
+    <div class="diagram-node">캘린더 회의</div>
+    <div class="diagram-node">Fn 길게 누르기 받아쓰기</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    하나의 라이브러리<br /><small class="diagram-muted"
+      >recordings + transcripts (SQL)</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">검색</div>
+    <div class="diagram-pill">공유</div>
+    <div class="diagram-pill">에이전트가 읽을 수 있음 links</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-clips {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-clips .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-clips .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.diagram-clips .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## 그것으로 무엇을 할 수 있나요
 
 - **내장 레코더, 웹캠 오버레이, 오디오 캡처 및 일시 중지/자르기를 사용하여 화면을 녹화**하세요.

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

@@ -22,13 +22,69 @@ description: "MDX용 오픈 소스 Obsidian: 로컬 Markdown/MDX 파일을 편
 
 앱을 열면 편집기 옆에 페이지 트리가 표시됩니다. 상담원은 항상 귀하가 보고 있는 페이지와 귀하가 선택한 텍스트를 알고 있으므로 문서 편집 내용이 현재 페이지에 그대로 유지될 수 있습니다.
 
-```an-diagram title="하나의 문서, 많은 편집자" summary="귀하와 에이전트는 모두 동일한 Yjs 파이프라인을 통해 작성합니다. SQL은 표준 저장소입니다. 로컬 파일과 Notion은 선택적 동기화 표면입니다."
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-col\"><div class=\"diagram-node\">입력합니다<br><small class=\"diagram-muted\">slash 메뉴, 툴바</small></div><div class=\"diagram-node\">에이전트 편집<br><small class=\"diagram-muted\">edit-document find/replace</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Yjs CRDT</span><small class=\"diagram-muted\">실시간, 충돌 없는 병합</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">documents (markdown)<br><small class=\"diagram-muted\">정식 SQL 저장소</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">로컬 .md / .mdx<br><small class=\"diagram-muted\">/local-files</small></div><div class=\"diagram-box\">Notion 페이지<br><small class=\"diagram-muted\">pull · push</small></div></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 .diagram-arrow{font-size:22px;line-height:1}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-1liwdej" title={"하나의 문서, 많은 편집자"} summary={"귀하와 에이전트는 모두 동일한 Yjs 파이프라인을 통해 작성합니다. SQL은 표준 저장소입니다. 로컬 파일과 Notion은 선택적 동기화 표면입니다."}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      입력합니다<br /><small class="diagram-muted">slash 메뉴, 툴바</small>
+    </div>
+    <div class="diagram-node">
+      에이전트 편집<br /><small class="diagram-muted"
+        >edit-document find/replace</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Yjs CRDT</span
+    ><small class="diagram-muted">실시간, 충돌 없는 병합</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    documents (markdown)<br /><small class="diagram-muted"
+      >정식 SQL 저장소</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&harr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">
+      로컬 .md / .mdx<br /><small class="diagram-muted">/local-files</small>
+    </div>
+    <div class="diagram-box">
+      Notion 페이지<br /><small class="diagram-muted">pull · push</small>
+    </div>
+  </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 .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## 그것으로 무엇을 할 수 있나요
 
 - **제목, 목록, 표, 코드 블록, 이미지 및 링크가 포함된 서식 있는 텍스트를 작성하세요**. 슬래시 명령(`/`)은 블록을 삽입합니다. 텍스트를 선택하면 서식 도구 모음이 나타납니다.

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

@@ -18,13 +18,67 @@ Design은 에이전트 기반 HTML 프로토타이핑 스튜디오입니다. 에
 
 앱을 열면 생성된 프로토타입이 작업 공간의 중심에 있으며 미리 보기 모드, 프롬프트 개정 및 내보내기 제어 기능이 가까이에 있습니다. 에이전트가 생성하는 모든 것은 실제 HTML이며 정제하거나 내보내거나 전달할 수 있습니다.
 
-```an-diagram title="하나의 아티팩트, 번역 없음" summary="에이전트는 독립형 Alpine/Tailwind HTML을 생성합니다. iframe, 편집 가능한 소스 및 모든 내보내기는 모두 동일한 파일을 읽습니다. 연결된 디자인 시스템은 각 패스에 토큰을 공급합니다."
-{
-  "html": "<div class=\"diagram-design\"><div class=\"diagram-col\"><div class=\"diagram-node\">프롬프트<br><small class=\"diagram-muted\">describe screen / page</small></div><div class=\"diagram-pill\">디자인 시스템</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\">독립형 HTML / JSX 파일</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>iframe preview<br><small class=\"diagram-muted\">노브 조정 · Cmd+I로 다듬기</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill ok\">Export</span><small class=\"diagram-muted\">HTML · ZIP · PDF · 핸드오프</small></div></div>",
-  "css": ".diagram-design{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-design .diagram-col{display:flex;flex-direction:column;gap:8px;align-items:flex-start}.diagram-design .diagram-box{display:flex;flex-direction:column;gap:4px}.diagram-design .diagram-arrow{font-size:20px;line-height:1}.diagram-design .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-f6rg8p" title={"하나의 아티팩트, 번역 없음"} summary={"에이전트는 독립형 Alpine/Tailwind HTML을 생성합니다. iframe, 편집 가능한 소스 및 모든 내보내기는 모두 동일한 파일을 읽습니다. 연결된 디자인 시스템은 각 패스에 토큰을 공급합니다."}>
+
+```html
+<div class="diagram-design">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      프롬프트<br /><small class="diagram-muted">describe screen / page</small>
+    </div>
+    <div class="diagram-pill">디자인 시스템</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">독립형 HTML / JSX 파일</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    iframe preview<br /><small class="diagram-muted"
+      >노브 조정 · Cmd+I로 다듬기</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill ok">Export</span
+    ><small class="diagram-muted">HTML · ZIP · PDF · 핸드오프</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-design {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-design .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: flex-start;
+}
+.diagram-design .diagram-box {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.diagram-design .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
+}
+.diagram-design .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## 선택 시기
 
 - **계층화된 그리기 캔버스가 아닌 실제 HTML로 도구를 남길 수 있는 세련된 랜딩 페이지 컨셉, 제품 UI 방향 또는 브랜드 탐색**을 원합니다.

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

@@ -20,13 +20,66 @@ description: "Dispatch는 중앙 받은 편지함, 앱 간 오케스트레이션
 
 많은 앱과 함께 [multi-app workspace](/docs/multi-app-workspace)를 실행하는 경우 Dispatch가 접착제입니다.
 
-```an-diagram title="전문화하지 말고 편성하라" summary="모든 채널의 메시지는 하나의 받은 편지함에 보관됩니다. 오케스트레이터는 도메인 작업을 분류하고 A2A을 통해 올바른 전문가 앱에 위임합니다. 비밀, 리소스 및 승인은 중앙에 유지됩니다."
-{
-  "html": "<div class=\"diagram-dispatch\"><div class=\"diagram-col\"><div class=\"diagram-node\">Slack · Telegram</div><div class=\"diagram-node\">Email</div><div class=\"diagram-node\">A2A 요청</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough><span class=\"diagram-pill accent\">Orchestrator</span><small class=\"diagram-muted\">중앙 inbox · 분류 · 라우팅</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-node\">Mail 에이전트</div><div class=\"diagram-node\">Analytics 에이전트</div><div class=\"diagram-node\">Brain · Slides &hellip;</div></div></div><div class=\"diagram-shared\"><span class=\"diagram-pill\">비밀 저장소</span><span class=\"diagram-pill\">워크스페이스 리소스</span><span class=\"diagram-pill warn\">Approvals</span><span class=\"diagram-pill\">예약된 작업</span></div>",
-  "css": ".diagram-dispatch{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-dispatch .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-dispatch .diagram-box{display:flex;flex-direction:column;gap:4px}.diagram-dispatch .diagram-arrow{font-size:20px;line-height:1}.diagram-shared{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}"
+<Diagram id="doc-block-1mbldph" title={"전문화하지 말고 편성하라"} summary={"모든 채널의 메시지는 하나의 받은 편지함에 보관됩니다. 오케스트레이터는 도메인 작업을 분류하고 A2A을 통해 올바른 전문가 앱에 위임합니다. 비밀, 리소스 및 승인은 중앙에 유지됩니다."}>
+
+```html
+<div class="diagram-dispatch">
+  <div class="diagram-col">
+    <div class="diagram-node">Slack · Telegram</div>
+    <div class="diagram-node">Email</div>
+    <div class="diagram-node">A2A 요청</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    <span class="diagram-pill accent">Orchestrator</span
+    ><small class="diagram-muted">중앙 inbox · 분류 · 라우팅</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-node">Mail 에이전트</div>
+    <div class="diagram-node">Analytics 에이전트</div>
+    <div class="diagram-node">Brain · Slides &hellip;</div>
+  </div>
+</div>
+<div class="diagram-shared">
+  <span class="diagram-pill">비밀 저장소</span
+  ><span class="diagram-pill">워크스페이스 리소스</span
+  ><span class="diagram-pill warn">Approvals</span
+  ><span class="diagram-pill">예약된 작업</span>
+</div>
+```
+
+```css
+.diagram-dispatch {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-dispatch .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-dispatch .diagram-box {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.diagram-dispatch .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
+}
+.diagram-shared {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: 12px;
 }
 ```
 
+</Diagram>
+
 ## 무엇을 하는가 {#what-it-does}
 
 - **중앙 받은 편지함.** Slack DM 메시지, 전보 메시지, 이메일 알림, 다른 에이전트의 A2A 요청 등이 모두 한 곳에 있습니다. Dispatch 에이전트는 심사를 거쳐 자체적으로 처리하거나 위임합니다. Slack, 이메일, 텔레그램을 작업 공간에 연결하는 방법은 [Messaging](/docs/messaging)를 참조하세요.

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

@@ -18,13 +18,69 @@ Forms는 에이전트 기반 양식 작성 도구입니다. 원하는 양식을
 
 앱을 열면 양식, 현재 편집기 및 실시간 미리보기가 표시됩니다. 에이전트는 프롬프트에서 양식을 생성하고, 필드 레이블 및 옵션을 업데이트하고, 유효성 검사를 변경하고, UI가 사용하는 것과 동일한 actions를 사용하여 제출 대상을 연결할 수 있습니다.
 
-```an-diagram title="구축, 게시, 수집" summary="에이전트와 시각적 편집기는 하나의 SQL-backed 양식 정의를 편집합니다. 공개 채우기 페이지는 인증되지 않으며 제출 내용은 서버 측에서 대상으로 라우팅됩니다."
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-col\"><div class=\"diagram-node\">에이전트 프롬프트<br><small class=\"diagram-muted\">\"add an NPS question\"</small></div><div class=\"diagram-node\">비주얼 편집기<br><small class=\"diagram-muted\">레이블, 검증, 순서</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">create-form · update-form</span><small class=\"diagram-muted\">필드 JSON, 설정 JSON</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">forms table<br><small class=\"diagram-muted\">Drizzle 기반 SQL</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">공개 작성 페이지<br><small class=\"diagram-muted\">unauthenticated</small></div><div class=\"diagram-box\">responses<br><small class=\"diagram-muted\">Slack / webhook / Sheets 추가</small></div></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 .diagram-arrow{font-size:22px;line-height:1}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-19nq67h" title={"구축, 게시, 수집"} summary={"에이전트와 시각적 편집기는 하나의 SQL-backed 양식 정의를 편집합니다. 공개 채우기 페이지는 인증되지 않으며 제출 내용은 서버 측에서 대상으로 라우팅됩니다."}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      에이전트 프롬프트<br /><small class="diagram-muted"
+        >"add an NPS question"</small
+      >
+    </div>
+    <div class="diagram-node">
+      비주얼 편집기<br /><small class="diagram-muted">레이블, 검증, 순서</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">create-form · update-form</span
+    ><small class="diagram-muted">필드 JSON, 설정 JSON</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    forms table<br /><small class="diagram-muted">Drizzle 기반 SQL</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">
+      공개 작성 페이지<br /><small class="diagram-muted">unauthenticated</small>
+    </div>
+    <div class="diagram-box">
+      responses<br /><small class="diagram-muted"
+        >Slack / webhook / Sheets 추가</small
+      >
+    </div>
+  </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 .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## 그것으로 무엇을 할 수 있나요
 
 - **대화식으로 양식을 작성하세요.** "연락처 양식 만들기", "NPS 점수 질문 추가", "이메일 필드를 필수로 설정하세요." 에이전트는 양식 스키마를 업데이트하고 SQL 지원 상태에서 미리보기를 업데이트합니다.

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

@@ -18,13 +18,69 @@ description: "에이전트 기반 이메일 클라이언트입니다. Gmail를
 
 앱을 열면 키보드 우선 받은 편지함과 스레드 보기가 메일 자체에 계속 집중됩니다. 상담원은 귀하가 현재 어떤 보기에 있고 어떤 스레드를 열어 놓았는지 항상 알고 있으므로 '이것'이 무엇인지 설명하지 않고도 '이것을 보관하세요' 또는 '우호적 거부 초안 작성'이라고 말할 수 있습니다.
 
-```an-diagram title="메일 요청 흐름 방식" summary="키보드 단축키와 상담원 프롬프트는 동일한 작업을 실행합니다. 이메일은 Gmail에 있습니다. 초안, 자동화 및 추적이 SQL 및 application_state에 실시간으로 제공됩니다."
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-col\"><div class=\"diagram-node\">사용자가 조작<br><small class=\"diagram-muted\">J/K/E/R 단축키</small></div><div class=\"diagram-node\">에이전트에게 요청<br><small class=\"diagram-muted\">\"정중한 거절 초안 작성\"</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\">list-emails · get-thread · manage-draft · send</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">Gmail<br><small class=\"diagram-muted\">여러 계정, OAuth 경유</small></div><div class=\"diagram-box\">SQL + application_state<br><small class=\"diagram-muted\">초안 · 자동화 · 추적</small></div></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:10px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-d9e9pa" title={"메일 요청 흐름 방식"} summary={"키보드 단축키와 상담원 프롬프트는 동일한 작업을 실행합니다. 이메일은 Gmail에 있습니다. 초안, 자동화 및 추적이 SQL 및 application_state에 실시간으로 제공됩니다."}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      사용자가 조작<br /><small class="diagram-muted">J/K/E/R 단축키</small>
+    </div>
+    <div class="diagram-node">
+      에이전트에게 요청<br /><small class="diagram-muted"
+        >"정중한 거절 초안 작성"</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"
+      >list-emails · get-thread · manage-draft · send</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">
+      Gmail<br /><small class="diagram-muted">여러 계정, OAuth 경유</small>
+    </div>
+    <div class="diagram-box">
+      SQL + application_state<br /><small class="diagram-muted"
+        >초안 · 자동화 · 추적</small
+      >
+    </div>
+  </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: 10px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## 그것으로 무엇을 할 수 있나요
 
 - \*\*키보드 단축키(이동하려면 `J`/`K`, 보관하려면 `E`, 답장하려면 `R`, 작성하려면 `C`)를 사용하여 이메일을 읽고 분류하세요.