@agent-native/core 0.76.7 → 0.76.9

package/docs/content/locales/ko-KR/cloneable-saas.md

@@ -51,7 +51,7 @@ description: "작동하는 SaaS 제품을 포크하여 귀하의 것으로 만
 
 "나만의 SaaS를 원합니다"에서 "나만의 SaaS가 있습니다"로 가는 길은 짧습니다.
 
-```an-diagram title="Fork and customize" summary="Pick a finished product, brand it, evolve it in plain English, and ship it to your own domain."
+```an-diagram title="포크 및 사용자 정의" summary="완성된 제품을 선택하고 브랜드를 지정하고 일반 영어로 발전시킨 후 자신의 도메인으로 배송하세요."
 {
   "html": "<div class=\"diagram-fork\"><div class=\"diagram-card\"><span class=\"diagram-pill\">1</span><strong>Pick</strong><small class=\"diagram-muted\">a complete template</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">2</span><strong>Brand</strong><small class=\"diagram-muted\">name, colors, logo, copy</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">3</span><strong>Customize</strong><small class=\"diagram-muted\">ask the agent &#8635;</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill ok\">4</span><strong>Ship</strong><small class=\"diagram-muted\">your own domain</small></div></div>",
   "css": ".diagram-fork{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.diagram-fork .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;min-width:130px}.diagram-fork .diagram-arrow{font-size:22px;line-height:1}"
@@ -74,9 +74,9 @@ description: "작동하는 SaaS 제품을 포크하여 귀하의 것으로 만
 
 결과: Claude-각 사용자에 대한 코드 수준의 유연성과 일반적인 SaaS 배포 경제성.
 
-```an-diagram title="Why per-user forks scale" summary="Two ideas keep the fork-and-customize model practical: the agent does the maintenance, and per-user customization lives in SQL — not in per-user code."
+```an-diagram title="사용자별 포크가 확장되는 이유" summary="포크 및 사용자 정의 모델을 실용적으로 유지하는 두 가지 아이디어는 에이전트가 유지 관리를 수행하고 사용자별 사용자 정의가 사용자별 코드가 아닌 SQL에 있다는 것입니다."
 {
-  "html": "<div class=\"diagram-why\"><div class=\"diagram-panel\" data-rough><strong>Shared codebase</strong><small class=\"diagram-muted\">one app, deployed once</small><div class=\"diagram-pill accent\">agent does the maintenance</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-panel\" data-rough><strong>Per-user layer in SQL</strong><small class=\"diagram-muted\">skills · memory · instructions · MCP · sub-agents</small><div class=\"diagram-pill ok\">no per-user code</div></div></div>",
+  "html": "<div class=\"diagram-why\"><div class=\"diagram-panel\" data-rough><strong>공유d codebase</strong><small class=\"diagram-muted\">one app, deployed once</small><div class=\"diagram-pill accent\">agent does the maintenance</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-panel\" data-rough><strong>Per-user layer in SQL</strong><small class=\"diagram-muted\">skills · memory · instructions · MCP · sub-agents</small><div class=\"diagram-pill ok\">no per-user code</div></div></div>",
   "css": ".diagram-why{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-why .diagram-panel{display:flex;flex-direction:column;gap:8px;padding:14px 18px;min-width:240px;flex:1}.diagram-why .diagram-arrow{font-size:24px;line-height:1}"
 }
 ```

package/docs/content/locales/ko-KR/code-agents-ui.md

@@ -25,9 +25,9 @@ Agent-Native 코드는 코딩 세션, 슬래시 명령, 마이그레이션, 감
 - **데스크톱**: 왼쪽 사이드바 코드 탭은 동일한 실행 모델을 사용하면서 기본 터미널 실행, 앱 웹뷰 및 데스크톱 딥 링크를 추가합니다.
 - **공유 UI**: `@agent-native/code-agents-ui`는 재사용 가능한 React 표면을 렌더링합니다.
 
-```an-diagram title="Three layers over one run store" summary="CLI, Desktop, and the shared UI are different surfaces over the same file-backed run store and executor; hosts adapt it via the CodeAgentsHost contract."
+```an-diagram title="하나의 실행 스토어에 3개의 레이어가 있음" summary="CLI, Desktop 및 공유 UI는 동일한 파일 지원 실행 저장소 및 실행기에서 서로 다른 표면입니다. 호스트는 CodeAgentsHost 계약을 통해 이를 조정합니다."
 {
-  "html": "<div class=\"diagram-layers\"><div class=\"diagram-row\"><div class=\"diagram-card\" data-rough><span class=\"diagram-pill\">CLI</span><small class=\"diagram-muted\">start · resume · status · stop</small></div><div class=\"diagram-card\" data-rough><span class=\"diagram-pill\">Desktop</span><small class=\"diagram-muted\">native terminal · webviews · deep links</small></div><div class=\"diagram-card\" data-rough><span class=\"diagram-pill accent\">Shared UI</span><small class=\"diagram-muted\">@agent-native/code-agents-ui</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill\">CodeAgentsHost</span><small class=\"diagram-muted\">host contract</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>File-backed run store + executor<br><small class=\"diagram-muted\">@agent-native/core/code-agents</small></div></div>",
+  "html": "<div class=\"diagram-layers\"><div class=\"diagram-row\"><div class=\"diagram-card\" data-rough><span class=\"diagram-pill\">CLI</span><small class=\"diagram-muted\">start · resume · status · stop</small></div><div class=\"diagram-card\" data-rough><span class=\"diagram-pill\">Desktop</span><small class=\"diagram-muted\">native terminal · webviews · deep links</small></div><div class=\"diagram-card\" data-rough><span class=\"diagram-pill accent\">공유d UI</span><small class=\"diagram-muted\">@agent-native/code-agents-ui</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill\">CodeAgentsHost</span><small class=\"diagram-muted\">host contract</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>File-backed run store + executor<br><small class=\"diagram-muted\">@agent-native/core/code-agents</small></div></div>",
   "css": ".diagram-layers{display:flex;flex-direction:column;gap:10px;align-items:center}.diagram-layers .diagram-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.diagram-layers .diagram-card{display:flex;flex-direction:column;gap:4px;padding:12px 16px}.diagram-layers .diagram-arrow{font-size:22px;line-height:1}.diagram-layers .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
 }
 ```
@@ -373,7 +373,7 @@ Agent-Native의 나머지 부분:
 5. 모바일은 Dispatch에서 `hosts`, `runs` 및 `transcript`를 읽습니다. 절대 말하지 않는다
    데스크톱으로 직접 연결됩니다.
 
-```an-diagram title="Remote Dispatch is outbound-only" summary="Mobile never talks to the desktop directly. Desktop long-polls Dispatch, claims commands, drives the local run store, and mirrors results back."
+```an-diagram title="원격 Dispatch은 아웃바운드 전용입니다." summary="모바일은 데스크톱과 직접 대화하지 않습니다. Desktop은 Dispatch을 길게 폴링하고, 명령을 요청하고, 로컬 실행 저장소를 구동하고, 결과를 다시 미러링합니다."
 {
   "html": "<div class=\"diagram-remote\"><div class=\"diagram-node\" data-rough>Mobile / Telegram<br><small class=\"diagram-muted\">/code · sessions</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Dispatch relay<br><small class=\"diagram-muted\">hosts · runs · transcript</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&larr;</div><div class=\"diagram-node\" data-rough>Desktop<br><small class=\"diagram-muted\">long-polls · claims · drives run store</small></div></div>",
   "css": ".diagram-remote{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-remote .diagram-arrow{font-size:22px;line-height:1}"

package/docs/content/locales/ko-KR/components.md

@@ -25,7 +25,7 @@ import { ResourcesPanel } from "@agent-native/core/client/resources";
 `@agent-native/core/client` 또는 집중된 `@agent-native/core/client/*` 하위 경로
 따라서 번들러는 브라우저 안전 항목을 선택합니다.
 
-```an-diagram title="Drop down a layer, not out of the framework" summary="Each layer keeps the same runtime — actions, thread state, and SQL-backed sync — while giving you more control over the chrome."
+```an-diagram title="프레임워크 외부가 아닌 레이어를 드롭다운하세요." summary="각 레이어는 동일한 런타임(작업, 스레드 상태, SQL-backed 동기화)을 유지하면서 크롬에 대한 더 많은 제어권을 제공합니다."
 {
   "html": "<div class=\"diagram-layers\"><div class=\"diagram-card layer\"><span class=\"diagram-pill accent\">&lt;AgentSidebar&gt;</span><small class=\"diagram-muted\">Whole sidebar around your app. The 80% case.</small></div><div class=\"diagram-card layer l2\"><span class=\"diagram-pill\">&lt;AgentPanel&gt; &middot; &lt;AgentChatSurface&gt;</span><small class=\"diagram-muted\">The panel or a chat page in your own layout.</small></div><div class=\"diagram-card layer l3\"><span class=\"diagram-pill\">&lt;AssistantChat&gt; + runtime</span><small class=\"diagram-muted\">Own the chrome; optionally pass a BYO AgentChatRuntime.</small></div><div class=\"diagram-card layer l4\"><span class=\"diagram-pill\">&lt;PromptComposer&gt; &middot; &lt;AgentConversation&gt;</span><small class=\"diagram-muted\">Composer and transcript primitives only.</small></div><div class=\"diagram-rail\" data-rough>Same runtime: actions &middot; thread state &middot; SQL-backed sync</div></div>",
   "css": ".diagram-layers{display:flex;flex-direction:column;gap:10px}.diagram-layers .layer{display:flex;flex-direction:column;gap:4px;padding:12px 14px}.diagram-layers .l2{margin-inline-start:24px}.diagram-layers .l3{margin-inline-start:48px}.diagram-layers .l4{margin-inline-start:72px}.diagram-layers .diagram-rail{margin-top:6px;padding:10px 14px;text-align:center}"
@@ -178,7 +178,7 @@ Liveblocks 스타일의 존재감을 위해 `@agent-native/core/client/collab`
 | `useCollaborativeMap()` / `useCollaborativeArray()` | 서식 있는 텍스트 본문 공동 작업이 적합하지 않은 경우 구조화된 Y.Map/Y.Array 상태를 실험해 보세요. |
 | `dedupeCollabUsersByEmail()`                        | 동일한 사용자에 대해 중복 탭 없이 맞춤 아바타 스택을 구축하세요.                                  |
 
-```an-diagram title="Presence: humans and the agent share one awareness layer" summary="useCollaborativeDoc owns the awareness instance; client hooks publish cursors and selections; server helpers let an agent action appear as a live participant."
+```an-diagram title="현재 상태: 인간과 에이전트는 하나의 인식 레이어를 공유합니다." summary="useCollaborativeDoc은 인식 인스턴스를 소유합니다. 클라이언트 후크는 커서와 선택 항목을 게시합니다. 서버 도우미를 사용하면 에이전트 작업이 실시간 참가자로 표시됩니다."
 {
   "html": "<div class=\"diagram-presence\"><div class=\"diagram-col\"><div class=\"diagram-node\">Humans<br><small class=\"diagram-muted\">usePresence &middot; cursors, selection</small></div><div class=\"diagram-node diagram-accent\">Agent action<br><small class=\"diagram-muted\">agentUpdateSelection()</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill accent\">useCollaborativeDoc</span><small class=\"diagram-muted\">awareness layer</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">&lt;PresenceBar&gt; &middot; &lt;LiveCursorOverlay&gt;<br><small class=\"diagram-muted\">render everyone, agent included</small></div></div>",
   "css": ".diagram-presence{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-presence .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-presence .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px}.diagram-presence .diagram-arrow{font-size:22px;line-height:1}"

package/docs/content/locales/ko-KR/context-awareness.md

@@ -24,7 +24,7 @@ description: "사용자가 보고 있는 내용을 에이전트가 아는 방법
 5. **신속한 전달** -- UI는 클릭이 상담원 차례가 되어야 할 때 통화 `sendToAgentChat()`를 제어합니다.
 6. **`navigate`** -- UI에게 어디로 가야 하는지 알려주는 에이전트의 일회성 명령
 
-```an-diagram title="How the agent sees what you see" summary="The UI writes lightweight state keys; view-screen hydrates them into real records; the agent can write navigate back to move the UI."
+```an-diagram title="에이전트가 귀하에게 보이는 것을 보는 방법" summary="UI는 경량 상태 키를 작성합니다. 뷰 화면은 이를 실제 기록으로 변환합니다. 에이전트는 뒤로 탐색을 작성하여 UI를 이동할 수 있습니다."
 {
   "html": "<div class=\"diagram-ctx\"><div class=\"diagram-card col\"><span class=\"diagram-pill\">UI writes</span><div class=\"diagram-node\">navigation<br><small class=\"diagram-muted\">view, open ids</small></div><div class=\"diagram-node\">__url__<br><small class=\"diagram-muted\">shareable filters</small></div><div class=\"diagram-node\">selection<br><small class=\"diagram-muted\">rows, blocks, shapes</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill accent\">view-screen</span><small class=\"diagram-muted\">reads state &middot; fetches records</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">Agent acts<br><small class=\"diagram-muted\">on the real object</small></div><div class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-box diagram-accent\">navigate<br><small class=\"diagram-muted\">agent moves the UI</small></div></div>",
   "css": ".diagram-ctx{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-ctx .col{display:flex;flex-direction:column;gap:8px;padding:14px}.diagram-ctx .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px}.diagram-ctx .diagram-arrow{font-size:22px;line-height:1}"
@@ -191,7 +191,7 @@ await setClientAppState(
 
 모든 템플릿에는 `view-screen` 작업이 있어야 합니다. 탐색 및 선택 상태를 읽고, 관련 데이터를 가져오고, 사용자가 보는 내용의 스냅샷을 반환합니다. 상담원의 눈입니다.
 
-```an-annotated-code title="view-screen — the agent's eyes"
+```an-annotated-code title="보기 화면 — 에이전트의 눈"
 {
   "filename": "actions/view-screen.ts",
   "language": "ts",
@@ -365,7 +365,7 @@ useDbSync({
 - 동기화 이벤트를 처리할 때 UI는 자체 `ignoreSource` 값과 일치하는 이벤트를 필터링하므로 방금 쓴 데이터를 다시 가져오지 않습니다.
 - 에이전트, 기타 탭 및 actions의 이벤트는 여전히 정상적으로 진행됩니다.
 
-```an-diagram title="Source tagging stops self-refetch jitter" summary="A tab ignores sync events stamped with its own TAB_ID, but still reacts to agent and other-tab writes."
+```an-diagram title="소스 태깅으로 자체 재페치 지터 중지" summary="탭은 자체 TAB_ID으로 스탬프 처리된 동기화 이벤트를 무시하지만 여전히 에이전트 및 기타 탭 쓰기에 반응합니다."
 {
   "html": "<div class=\"diagram-jitter\"><div class=\"diagram-node\">This tab writes<br><small class=\"diagram-muted\">X-Request-Source: TAB_ID</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Server stores source<br>on the event</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card col\"><div class=\"diagram-pill warn\">source == TAB_ID &rarr; ignored</div><small class=\"diagram-muted\">no refetch, no flicker</small><div class=\"diagram-pill ok\">agent / other tab &rarr; applied</div><small class=\"diagram-muted\">UI updates live</small></div></div>",
   "css": ".diagram-jitter{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-jitter .col{display:flex;flex-direction:column;gap:6px;padding:14px}.diagram-jitter .diagram-arrow{font-size:22px;line-height:1}"

package/docs/content/locales/ko-KR/creating-templates.md

@@ -39,23 +39,23 @@ Chat은 인증, 내구성 있는 채팅 스레드, SQL 지원 리소스, 도구,
 
 모든 템플릿은 동일한 광범위한 레이아웃을 따릅니다.
 
-```an-file-tree title="Template project layout"
+```an-file-tree title="템플릿 프로젝트 구조"
 {
   "title": "my-template/",
   "entries": [
-    { "path": "app/", "note": "React frontend" },
-    { "path": "app/root.tsx", "note": "HTML shell and providers" },
-    { "path": "app/routes/", "note": "React Router file routes" },
-    { "path": "app/components/", "note": "Template UI" },
-    { "path": "app/hooks/", "note": "UI state and data hooks" },
-    { "path": "actions/", "note": "defineAction operations — the single source of truth" },
-    { "path": "server/db/schema.ts", "note": "Drizzle schema" },
-    { "path": "server/plugins/db.ts", "note": "additive migrations" },
-    { "path": "server/plugins/", "note": "startup integrations" },
-    { "path": "server/routes/api/", "note": "custom routes only when actions are not enough" },
-    { "path": "shared/types.ts", "note": "shared client/server types" },
-    { "path": ".agents/skills/", "note": "<skill>/SKILL.md — agent guidance for complex workflows" },
-    { "path": "AGENTS.md", "note": "template-specific agent instructions" },
+    { "path": "app/", "note": "React 프런트엔드" },
+    { "path": "app/root.tsx", "note": "HTML shell과 providers" },
+    { "path": "app/routes/", "note": "React Router 파일 routes" },
+    { "path": "app/components/", "note": "템플릿 UI" },
+    { "path": "app/hooks/", "note": "UI 상태 및 데이터 hooks" },
+    { "path": "actions/", "note": "defineAction 작업: 단일 진실 공급원" },
+    { "path": "server/db/schema.ts", "note": "Drizzle 스키마" },
+    { "path": "server/plugins/db.ts", "note": "추가형 migrations" },
+    { "path": "server/plugins/", "note": "시작 integrations" },
+    { "path": "server/routes/api/", "note": "actions만으로 부족할 때만 custom routes 사용" },
+    { "path": "shared/types.ts", "note": "공유 client/server 타입" },
+    { "path": ".agents/skills/", "note": "<skill>/SKILL.md: 복잡한 workflow를 위한 에이전트 지침" },
+    { "path": "AGENTS.md", "note": "템플릿별 에이전트 지침" },
     { "path": "package.json" },
     { "path": "react-router.config.ts" },
     { "path": "vite.config.ts" }
@@ -67,7 +67,7 @@ Chat은 인증, 내구성 있는 채팅 스레드, SQL 지원 리소스, 도구,
 
 모든 템플릿의 네 가지 영역은 하나의 공유 작업 표면과 하나의 SQL 데이터베이스를 통해 함께 연결됩니다. 에이전트와 UI는 동일한 작업에 대해 동등한 파트너입니다.
 
-```an-diagram title="How a template's four areas connect" summary="The UI and the agent both reach SQL through the same actions; application state and polling sync keep them aligned."
+```an-diagram title="템플릿의 네 가지 영역이 연결되는 방식" summary="UI와 에이전트는 모두 동일한 작업을 통해 SQL에 도달합니다. 애플리케이션 상태와 폴링 동기화가 정렬된 상태를 유지합니다."
 {
   "html": "<div class=\"diagram-tmpl\"><div class=\"diagram-col\"><div class=\"diagram-node\">React UI<br><small class=\"diagram-muted\">app/routes · components</small></div><div class=\"diagram-node\">Agent<br><small class=\"diagram-muted\">AGENTS.md · skills</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\">defineAction()</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>SQL via Drizzle<br><small class=\"diagram-muted\">additive schema</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-pill ok\">Polling sync</div></div>",
   "css": ".diagram-tmpl{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-tmpl .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-tmpl .diagram-arrow{font-size:22px;line-height:1}.diagram-tmpl .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
@@ -149,7 +149,7 @@ Actions는 앱 동작에 대한 단일 정보 소스입니다. 에이전트는
   "annotations": [
     { "lines": "2", "note": "`getDb` is created per app via `createGetDb(schema)` in `server/db/index.ts`." },
     { "lines": "8", "label": "Tool surface", "note": "The `description` is what the agent reads to decide when to call this action as a tool." },
-    { "lines": "9-11", "label": "타입 계약", "note": "One zod `schema` validates input from the agent, the UI, HTTP, MCP, and A2A." },
+    { "lines": "9-11", "label": "타입 계약", "note": "하나의 zod `schema`가 에이전트, UI, HTTP, MCP, A2A의 입력을 검증합니다." },
     { "lines": "18-19", "label": "Scoped write", "note": "Stamp `ownerEmail` / `orgId` from `ctx` so the row is correctly scoped for sharing and access checks." }
   ]
 }

package/docs/content/locales/ko-KR/cross-app-sso.md

@@ -26,7 +26,7 @@ description: "Dispatch를 ID 기관으로 사용하여 ID 페더레이션을 통
 
 흐름은 표준 승인 → 서명된 토큰 → 콜백 리디렉션이며, 신뢰 경계를 넘는 유일한 것은 이메일입니다.
 
-```an-diagram title="Identity federation flow" summary="Dispatch authenticates the human and returns a short-lived signed assertion of one thing — the verified email. The app links by email and mints its own local session."
+```an-diagram title="ID 페더레이션 흐름" summary="Dispatch은 사람을 인증하고 확인된 이메일이라는 단기간 서명된 주장을 반환합니다. 앱은 이메일로 연결되며 자체 로컬 세션을 시작합니다."
 {
   "html": "<div class=\"diagram-sso\"><div class=\"diagram-card\" data-rough><strong>Client app</strong><small class=\"diagram-muted\">own user store</small></div><div class=\"diagram-step\"><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><span class=\"diagram-pill\">authorize</span></div><div class=\"diagram-card\" data-rough><strong>Dispatch</strong><small class=\"diagram-muted\">identity authority</small><span class=\"diagram-pill accent\">authenticates human</span></div><div class=\"diagram-step\"><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><span class=\"diagram-pill accent\">302 + signed JWT</span></div><div class=\"diagram-card\" data-rough><strong>App callback</strong><small class=\"diagram-muted\">verify signature · scope:identity · exp &le; 2 min</small><span class=\"diagram-pill ok\">JIT-link by email</span><span class=\"diagram-pill ok\">mint local session</span></div></div>",
   "css": ".diagram-sso{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap}.diagram-sso .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;min-width:150px}.diagram-sso .diagram-step{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.diagram-sso .diagram-arrow{font-size:22px;line-height:1}"
@@ -109,7 +109,7 @@ AGENT_NATIVE_IDENTITY_HUB_URL=https://dispatch.agent-native.com
 
 적시 링크는 확인된 이메일에 전적으로 기반한 단일 결정입니다.
 
-```an-diagram title="JIT-link decision" summary="Linking is keyed on the verified email and is additive only — existing accounts are reused unchanged, new emails create a fresh local user."
+```an-diagram title="JIT-link 결정" summary="연결은 확인된 이메일에 입력되며 추가로만 이루어집니다. 기존 계정은 변경 없이 재사용되고, 새 이메일은 새로운 로컬 사용자를 생성합니다."
 {
   "html": "<div class=\"diagram-jit\"><div class=\"diagram-node\" data-rough>Verified email<br><small class=\"diagram-muted\">from signed identity JWT</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-branch\"><div class=\"diagram-box\" data-rough>Local user exists?<span class=\"diagram-pill ok\">yes &rarr; reuse unchanged</span><span class=\"diagram-pill accent\">no &rarr; create local user</span></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Mint normal local session</div></div></div>",
   "css": ".diagram-jit{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-jit .diagram-node{display:flex;flex-direction:column;gap:4px;padding:12px 14px}.diagram-jit .diagram-branch{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-jit .diagram-box{display:flex;flex-direction:column;gap:6px;padding:12px 14px}.diagram-jit .diagram-arrow{font-size:22px;line-height:1}"

package/docs/content/locales/ko-KR/database.md

@@ -7,7 +7,7 @@ description: "이식 가능한 SQL 데이터베이스를 에이전트 기반 앱
 
 에이전트 기본 앱은 [Drizzle ORM](https://orm.drizzle.team)를 사용하고 휴대용 SQL 백엔드를 지원합니다. 로컬 개발 이상의 작업을 위해서는 `DATABASE_URL`를 설정하여 영구 SQL 데이터베이스(Postgres, libSQL/Turso 또는 다른 Drizzle 호환 백엔드)를 연결하세요. 해당 변수가 설정 해제되면 앱은 구성이 0인 로컬 SQLite 파일로 대체되므로 즉시 개발을 시작할 수 있습니다.
 
-```an-diagram title="One schema, many backends" summary="App code uses the framework's dialect-agnostic helpers. The dialect is auto-detected from DATABASE_URL at runtime; unset means a local SQLite file."
+```an-diagram title="하나의 스키마, 많은 백엔드" summary="앱 코드는 프레임워크의 방언에 구애받지 않는 도우미를 사용합니다. 방언은 런타임 시 DATABASE_URL에서 자동 감지됩니다. unset은 로컬 SQLite 파일을 의미합니다."
 {
   "html": "<div class=\"diagram-db\"><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill accent\">@agent-native/core/db/schema</span><small class=\"diagram-muted\">table · text · integer · real · now</small><small class=\"diagram-muted\">+ Drizzle query DSL</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>DATABASE_URL<br><small class=\"diagram-muted\">dialect auto-detected</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-grid\"><span class=\"diagram-pill\">Postgres<br><small class=\"diagram-muted\">Neon · Supabase</small></span><span class=\"diagram-pill\">libSQL / Turso</span><span class=\"diagram-pill\">Cloudflare D1</span><span class=\"diagram-pill warn\">SQLite file<br><small class=\"diagram-muted\">unset = local dev only</small></span></div></div>",
   "css": ".diagram-db{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-db .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 16px}.diagram-db .diagram-arrow{font-size:22px;line-height:1}.diagram-db .diagram-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}"
@@ -162,7 +162,7 @@ Drizzle 쿼리 외부에 원시 SQL가 꼭 필요한 경우:
 
 직접 푸시하는 대신 애플리케이션 시작 시 실행되는 SQL 마이그레이션을 통해 스키마 변경 사항을 적용해야 합니다. 프레임워크의 `runMigrations()` 도우미를 호출하여 서버 플러그인(예: `server/plugins/db.ts`) 내에서 추가 마이그레이션을 구현합니다.
 
-```an-annotated-code title="An additive migration plugin"
+```an-annotated-code title="추가 마이그레이션 플러그인"
 {
   "filename": "server/plugins/db.ts",
   "language": "ts",

package/docs/content/locales/ko-KR/deployment.md

@@ -28,7 +28,7 @@ npx @agent-native/core@latest deploy
 
 각 앱은 `APP_BASE_PATH=/<name>` 및 `VITE_APP_BASE_PATH=/<name>`로 빌드된 다음 대상 Nitro 사전 설정용으로 패키징됩니다. Cloudflare Pages는 기본 사전 설정이며 `dist/_worker.js`에서 생성된 디스패처 작업자를 사용합니다. Netlify는 `.netlify/functions-internal/<app>-server`의 앱당 하나의 기능과 생성된 리디렉션을 사용합니다. Vercel은 빌드 출력 API를 사용하여 작업공간 수준 `.vercel/output`를 작성합니다.
 
-```an-diagram title="One origin, many apps" summary="Each workspace app is built with its own base path and mounted under a path prefix on a single origin — so login and cross-app A2A are same-origin and free."
+```an-diagram title="하나의 오리진, 다양한 앱" summary="각 작업 공간 앱은 자체 기본 경로로 구축되고 단일 원본의 경로 접두사 아래에 마운트됩니다. 따라서 로그인 및 교차 앱 A2A은 원본이 동일하고 무료입니다."
 {
   "html": "<div class=\"diagram-ws\"><div class=\"diagram-panel\" data-rough><strong>https://your-agents.com</strong><div class=\"diagram-row\"><span class=\"diagram-pill accent\">/mail/*</span><small class=\"diagram-muted\">apps/mail</small></div><div class=\"diagram-row\"><span class=\"diagram-pill accent\">/calendar/*</span><small class=\"diagram-muted\">apps/calendar</small></div><div class=\"diagram-row\"><span class=\"diagram-pill accent\">/forms/*</span><small class=\"diagram-muted\">apps/forms</small></div></div><div class=\"diagram-col wins\"><span class=\"diagram-pill ok\">shared login session</span><span class=\"diagram-pill ok\">zero-config cross-app A2A</span></div></div>",
   "css": ".diagram-ws{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.diagram-ws .diagram-panel{display:flex;flex-direction:column;gap:6px;padding:14px 16px}.diagram-ws .diagram-row{display:flex;align-items:center;gap:8px}.diagram-ws .wins{display:flex;flex-direction:column;gap:8px;align-items:flex-start}"
@@ -70,20 +70,20 @@ npx @agent-native/core@latest deploy --preset vercel
 
 `npx @agent-native/core@latest build`를 실행하면 Nitro는 클라이언트 SPA와 서버 API를 모두 `.output/`에 빌드합니다.
 
-```an-file-tree title="Build output"
+```an-file-tree title="빌드 출력"
 {
   "entries": [
-    { "path": ".output/", "note": "self-contained — copy to any environment and run" },
-    { "path": ".output/public/", "note": "built SPA (static assets)" },
-    { "path": ".output/server/index.mjs", "note": "server entry point" },
-    { "path": ".output/server/chunks/", "note": "server code chunks" }
+    { "path": ".output/", "note": "자체 포함: 어떤 환경에든 복사해 실행" },
+    { "path": ".output/public/", "note": "빌드된 SPA(정적 assets)" },
+    { "path": ".output/server/index.mjs", "note": "서버 entry point" },
+    { "path": ".output/server/chunks/", "note": "서버 코드 chunks" }
   ]
 }
 ```
 
 출력은 독립적입니다. `.output/`를 임의의 환경에 복사하고 실행하세요.
 
-```an-diagram title="Build to deploy" summary="One source tree builds to a Nitro preset; the same self-contained output runs on Node, Vercel, Netlify, Cloudflare, AWS, or Deno. Every instance points at the same persistent DATABASE_URL."
+```an-diagram title="배포를 위해 구축" summary="하나의 소스 트리는 Nitro 사전 설정으로 구축됩니다. 동일한 자체 포함 출력은 Node, Vercel, Netlify, Cloudflare, AWS 또는 Deno에서 실행됩니다. 모든 인스턴스는 동일한 영구 DATABASE_URL을 가리킵니다."
 {
   "html": "<div class=\"diagram-deploy\"><div class=\"diagram-box\" data-rough>App source</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill accent\">build</span><small class=\"diagram-muted\">Nitro preset</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-grid\"><span class=\"diagram-pill\">Node.js</span><span class=\"diagram-pill\">Vercel</span><span class=\"diagram-pill\">Netlify</span><span class=\"diagram-pill\">Cloudflare</span><span class=\"diagram-pill\">AWS Lambda</span><span class=\"diagram-pill\">Deno</span></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Persistent DATABASE_URL<br><small class=\"diagram-muted\">shared by every instance</small></div></div>",
   "css": ".diagram-deploy{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-deploy .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 16px}.diagram-deploy .diagram-arrow{font-size:22px;line-height:1}.diagram-deploy .diagram-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}"
@@ -95,12 +95,11 @@ npx @agent-native/core@latest deploy --preset vercel
 기본적으로 Nitro는 Node.js용으로 빌드됩니다. 다른 플랫폼을 대상으로 하려면 `vite.config.ts`에서 사전 설정을 설정하세요:
 
 ```ts
-import { defineConfig } from "@agent-native/core/vite";
+import { agentNative } from "@agent-native/core/vite";
+import { defineConfig } from "vite";
 
 export default defineConfig({
-  nitro: {
-    preset: "vercel",
-  },
+  plugins: [agentNative({ nitro: { preset: "vercel" } })],
 });
 ```
 
@@ -151,7 +150,7 @@ CMD ["node", ".output/server/index.mjs"]
 ```ts
 // vite.config.ts
 export default defineConfig({
-  nitro: { preset: "vercel" },
+  plugins: [agentNative({ nitro: { preset: "vercel" } })],
 });
 ```
 
@@ -182,7 +181,7 @@ Nitro `netlify` 사전 설정은 잘 작동하며 실제로 외부 Postgres(Neon
 ```ts
 // vite.config.ts
 export default defineConfig({
-  nitro: { preset: "netlify" },
+  plugins: [agentNative({ nitro: { preset: "netlify" } })],
 });
 ```
 
@@ -201,7 +200,7 @@ npx @agent-native/core@latest deploy --preset netlify
 ```ts
 // vite.config.ts
 export default defineConfig({
-  nitro: { preset: "cloudflare_pages" },
+  plugins: [agentNative({ nitro: { preset: "cloudflare_pages" } })],
 });
 ```
 
@@ -210,7 +209,7 @@ export default defineConfig({
 ```ts
 // vite.config.ts
 export default defineConfig({
-  nitro: { preset: "aws_lambda" },
+  plugins: [agentNative({ nitro: { preset: "aws_lambda" } })],
 });
 ```
 
@@ -219,7 +218,7 @@ export default defineConfig({
 ```ts
 // vite.config.ts
 export default defineConfig({
-  nitro: { preset: "deno_deploy" },
+  plugins: [agentNative({ nitro: { preset: "deno_deploy" } })],
 });
 ```
 

package/docs/content/locales/ko-KR/dispatch.md

@@ -11,7 +11,7 @@ Dispatch는 작업 공간의 다른 모든 앱 앞에 위치하며 비밀, 통
 
 Dispatch가 없으면 다중 앱 작업 공간의 모든 앱은 자체 Slack 봇, 자체 비밀 저장소, 자체 예약 작업, 작업 공간 지침의 자체 복사본 등 동일한 배관을 다시 구현하게 됩니다. 하나의 API 키를 순환하면 10개의 재배포가 이루어집니다. 새 정책을 추가하면 10번의 복사-붙여넣기가 수행됩니다. Dispatch는 이 모든 것을 하나의 앱에 중앙 집중화하므로 다른 앱은 해당 도메인에 계속 집중할 수 있습니다.
 
-```an-diagram title="Dispatch as the workspace control plane" summary="One inbox, one vault, one MCP gateway, and shared resources sit in front of the domain apps, which Dispatch reaches as A2A peers."
+```an-diagram title="Dispatch을 작업공간 제어 평면으로 사용" summary="하나의 받은 편지함, 하나의 저장소, 하나의 MCP 게이트웨이 및 공유 리소스는 Dispatch가 A2A 피어로 연결되는 도메인 앱 앞에 있습니다."
 {
   "html": "<div class=\"dsp-hub\"><div class=\"diagram-node\">Users &amp; external agents<br><small class=\"diagram-muted\">Slack · email · Telegram · WhatsApp · MCP</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-panel dsp-control\" data-rough><span class=\"diagram-pill accent\">Dispatch &mdash; control plane</span><div class=\"dsp-caps\"><span class=\"diagram-pill\">Central inbox</span><span class=\"diagram-pill\">Secret vault</span><span class=\"diagram-pill\">Cross-app delegation</span><span class=\"diagram-pill\">MCP gateway</span><span class=\"diagram-pill\">Workspace resources</span></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"dsp-peers\"><div class=\"diagram-box\" data-rough>Mail</div><div class=\"diagram-box\" data-rough>Calendar</div><div class=\"diagram-box\" data-rough>Analytics</div></div><small class=\"diagram-muted\">domain apps &mdash; A2A peers</small></div>",
   "css": ".dsp-hub{display:flex;flex-direction:column;align-items:center;gap:10px}.dsp-hub .dsp-control{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}.dsp-hub .dsp-caps{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.dsp-hub .dsp-peers{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}"
@@ -110,7 +110,7 @@ Dispatch Dreams는 이전 에이전트 실행, 피드백, 평가 및 반복적
 4. **스레드에 답변이 게시되었습니다.** 분석 에이전트가 결과를 반환합니다. Dispatch는 이를 형식화하고 연결된 ID가 있는 경우 이를 사용하여 사용자가 작성한 것과 동일한 Slack 스레드에 다시 게시합니다(따라서 에이전트는 작업공간 소유자가 아닌 요청자의 권한으로 작동합니다).
 5. **무엇이든 죽으면 복구됩니다.** 프로세서가 비행 중에 충돌하는 경우(A2A 시간 초과, 다운스트림 에이전트 오류, 기능 정지) 재시도 작업은 60초마다 중단된 작업을 스윕하고 프로세서를 다시 실행합니다. 작업이 `failed`로 표시되기 전에 최대 3번의 시도가 가능합니다.
 
-```an-diagram title="A Slack message through Dispatch" summary="Slack enqueues into SQL, a fresh execution drains it, the Dispatch agent delegates the domain work over A2A, and the reply lands back in the originating thread. A 60s retry job recovers anything that dies mid-flight."
+```an-diagram title="Dispatch을 통한 Slack 메시지" summary="Slack는 SQL에 대기열에 추가되고 새로 실행되면 이를 배출하며 Dispatch 에이전트는 A2A을 통해 도메인 작업을 위임하고 응답은 원래 스레드로 다시 전달됩니다. 60초 재시도 작업은 비행 중에 죽은 모든 것을 복구합니다."
 {
   "html": "<div class=\"dsp-flow\"><div class=\"dsp-row\"><div class=\"diagram-node\">Slack DM<br><small class=\"diagram-muted\">\"summarize last week's signups\"</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough><strong>/slack/webhook</strong><br><small class=\"diagram-muted\">verify + INSERT pending task</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill ok\">200</div></div><div class=\"dsp-row\"><div class=\"diagram-box\" data-rough><strong>fresh processor</strong><br><small class=\"diagram-muted\">claim task · start agent loop</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill accent\">Dispatch agent decides</span><small class=\"diagram-muted\">analytics intent &rarr; call-agent</small></div></div><div class=\"dsp-row\"><div class=\"diagram-box\" data-rough>Analytics app<br><small class=\"diagram-muted\">A2A peer · runs the SQL work</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill ok\">reply posted in thread</div></div><div class=\"diagram-panel dsp-retry\" data-rough><span class=\"diagram-pill warn\">recovery</span> <span class=\"diagram-muted\">if the processor crashes &mdash; A2A timeout, downstream error, freeze &mdash; the 60s retry job re-fires it (&le;3 attempts) so the Slack reply still arrives</span> <span class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</span></div></div>",
   "css": ".dsp-flow{display:flex;flex-direction:column;gap:12px}.dsp-flow .dsp-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.dsp-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}.dsp-flow .dsp-retry{display:flex;align-items:center;gap:8px;flex-wrap:wrap}"

package/docs/content/locales/ko-KR/drop-in-agent.md

@@ -27,7 +27,7 @@ description: "<AgentPanel>, <AgentSidebar> 및 sendToAgentChat()을 사용하여
 
 이 모든 것은 `@agent-native/core/client`에서 내보내집니다.
 
-```an-diagram title="The mount model" summary="<AgentSidebar> wraps your existing layout. Your routes render in the main area; the agent panel mounts beside them. <AgentPanel> is the same panel without the wrapper."
+```an-diagram title="마운트 모델" summary="<AgentSidebar>은 기존 레이아웃을 래핑합니다. 경로는 주요 영역에서 렌더링됩니다. 에이전트 패널이 그 옆에 마운트됩니다. <AgentPanel>은 래퍼가 없는 동일한 패널입니다."
 {
   "html": "<div class=\"diagram-mount\"><div class=\"diagram-box sidebar\" data-rough><span class=\"diagram-pill accent\">&lt;AgentSidebar&gt;</span><div class=\"inner\"><div class=\"diagram-node main\">Your app<br><small class=\"diagram-muted\">children: header + &lt;Outlet/&gt;</small></div><div class=\"diagram-node panel\">Agent panel<br><small class=\"diagram-muted\">chat &middot; CLI &middot; workspace</small></div></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-card alt\"><span class=\"diagram-pill\">&lt;AgentPanel&gt;</span><small class=\"diagram-muted\">same panel, no wrapper &mdash; you own the layout</small></div></div>",
   "css": ".diagram-mount{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-mount .sidebar{display:flex;flex-direction:column;gap:8px;padding:14px}.diagram-mount .inner{display:flex;gap:10px}.diagram-mount .main{flex:2}.diagram-mount .panel{flex:1}.diagram-mount .alt{display:flex;flex-direction:column;gap:6px;padding:14px}.diagram-mount .diagram-arrow{font-size:22px;line-height:1}"
@@ -40,7 +40,7 @@ description: "<AgentPanel>, <AgentSidebar> 및 sendToAgentChat()을 사용하여
 기존 루트 레이아웃을 `<AgentSidebar>`로 래핑합니다. 당신이 전달하는 무엇이든
 어린이는 기본 앱 영역에 머물러 있습니다. 상담원 채팅은 측면 패널입니다.
 
-```an-annotated-code title="Wrapping the root layout with <AgentSidebar>"
+```an-annotated-code title="<AgentSidebar>으로 루트 레이아웃 래핑"
 {
   "filename": "app/root.tsx",
   "language": "tsx",

package/docs/content/locales/ko-KR/durable-resume.md

@@ -13,7 +13,7 @@ description: "호스팅 에이전트 실행이 중단되었다가 다시 시작
 
 튼튼한 이력서가 그 격차를 줄여줍니다. 재개 시 프레임워크는 이미 완료된 부작용 도구 호출을 알고 두 레이어에서 다시 실행을 거부합니다.
 
-```an-diagram title="Two layers block duplicate side effects on resume" summary="The journal reads the durable ledger and classifies prior calls; layer 1 tells the model, layer 2 hard-blocks a re-dispatched write that matches a completed entry."
+```an-diagram title="두 레이어는 이력서의 중복 부작용을 차단합니다." summary="저널은 내구성 있는 원장을 읽고 이전 호출을 분류합니다. 레이어 1은 모델에 알려주고, 레이어 2는 완료된 항목과 일치하는 재배송된 쓰기를 하드 차단합니다."
 {
   "html": "<div class=\"diagram-durable\"><div class=\"diagram-box\" data-rough>Run-event ledger<br><small class=\"diagram-muted\">tool_start / tool_done</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><strong>Tool-call journal</strong><small class=\"diagram-ok\">completed = start+done</small><small class=\"diagram-warn\">interrupted = start, no done</small></div><div class=\"diagram-col\"><div class=\"diagram-pill\">Layer 1 · prompt note &rarr; model</div><div class=\"diagram-pill accent\">Layer 2 · hard-block re-dispatched write</div></div></div>",
   "css": ".diagram-durable{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-durable .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-durable .diagram-arrow{font-size:22px;line-height:1}.diagram-durable .center{display:flex;flex-direction:column;align-items:center;gap:4px}"

package/docs/content/locales/ko-KR/embedding-sdk.md

@@ -11,7 +11,7 @@ description: "페이지 컨텍스트 및 호스트 명령을 사용하여 기존
 내장형 사이드카 또는 전체 앱으로 시작
 [Agent Surfaces](/docs/agent-surfaces).
 
-```an-diagram title="The embedding membrane" summary="The host app supplies server-side auth and live page context; Agent-Native runs the durable sidecar and reaches the open tab through client actions and host commands."
+```an-diagram title="임베딩 멤브레인" summary="호스트 앱은 서버 측 인증 및 라이브 페이지 컨텍스트를 제공합니다. Agent-Native은 내구성 있는 사이드카를 실행하고 클라이언트 작업 및 호스트 명령을 통해 열린 탭에 도달합니다."
 {
   "html": "<div class=\"diagram-embed\"><div class=\"diagram-box\" data-rough><strong>Host SaaS app</strong><small class=\"diagram-muted\">your UI, your auth</small></div><div class=\"diagram-col\"><div class=\"diagram-pill accent\">getContext &rarr;</div><div class=\"diagram-pill\">&larr; client actions</div><div class=\"diagram-pill\">&larr; host commands</div></div><div class=\"diagram-panel center\" data-rough><strong>Agent-Native sidecar</strong><small class=\"diagram-muted\">durable chat · app state · extensions</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>SQL<br><small class=\"diagram-muted\">framework tables</small></div></div>",
   "css": ".diagram-embed{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-embed .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-embed .diagram-arrow{font-size:22px;line-height:1}.diagram-embed .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
@@ -373,7 +373,7 @@ const hostTools = createAgentNativeHostTools({
 
 CLAW 스타일 동료의 경우 iframe은 사이드카 백엔드에 라이브 브라우저 탭을 등록할 수도 있습니다. 그런 다음 에이전트는 요청을 대기열에 추가하는 일반 백엔드 도구를 가져오고, iframe이 이를 요청하고, 호스트 페이지가 이를 실행하며, 백엔드가 결과를 에이전트에 반환합니다.
 
-```an-diagram title="Server-mediated browser-session bridge" summary="A backend tool enqueues work; the registered tab claims it, runs it on the live page, and the result returns to the agent — so a backend/Slack/A2A agent can still touch the open tab."
+```an-diagram title="서버 중재 브라우저 세션 브리지" summary="백엔드 도구는 작업을 대기열에 넣습니다. 등록된 탭이 이를 요청하고 라이브 페이지에서 실행하면 결과가 에이전트에 반환됩니다. 따라서 backend/Slack/A2A 에이전트는 여전히 열려 있는 탭을 터치할 수 있습니다."
 {
   "html": "<div class=\"diagram-bridge\"><div class=\"diagram-node\" data-rough>Backend agent<br><small class=\"diagram-muted\">chat · Slack · A2A</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>enqueue request<br><small class=\"diagram-muted\">/_agent-native/browser-sessions</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\" data-rough>Live tab claims it<br><small class=\"diagram-muted\">registered bridge</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill ok\">result &rarr; agent</div></div>",
   "css": ".diagram-bridge{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-bridge .diagram-arrow{font-size:22px;line-height:1}"

package/docs/content/locales/ko-KR/evals.md

@@ -14,7 +14,7 @@ description: "고정 입력에 대해 실제 에이전트를 실행하고 구성
 
 러너는 기존 레지스트리에서 제공자에 구애받지 않는 엔진/모델을 확인하므로 모델은 하드코딩되지 않습니다. 따라서 앱이 구성된 엔진에 대해 동일한 제품군이 실행됩니다.
 
-```an-diagram title="From fixed input to deploy gate" summary="The runner actually runs the agent loop on each case, scores the output, and exits non-zero if any scorer falls below threshold — making it a drop-in CI gate."
+```an-diagram title="고정 입력에서 배포 게이트까지" summary="러너는 실제로 각 사례에 대해 에이전트 루프를 실행하고, 출력에 점수를 매기고, 득점자가 임계값 아래로 떨어지면 0이 아닌 상태로 종료하여 드롭인 CI 게이트가 됩니다."
 {
   "html": "<div class=\"eval-flow\"><div class=\"diagram-node\">*.eval.ts<br><small class=\"diagram-muted\">prompt + expected behavior</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">Run the agent loop<br><small class=\"diagram-muted\">real engine/model</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">Scorers<br><small class=\"diagram-muted\">every one must pass threshold</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box ok\">exit 0 &rarr; deploy</div><div class=\"diagram-box warn\">exit 1 &rarr; block</div></div></div>",
   "css": ".eval-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.eval-flow .diagram-node{display:flex;flex-direction:column;gap:2px;padding:10px 14px}.eval-flow .diagram-col{display:flex;flex-direction:column;gap:8px}.eval-flow .diagram-arrow{font-size:22px;line-height:1}"
@@ -80,7 +80,7 @@ interface AgentRunOutput {
 
 `createScorer`는 Mastra 스타일의 4단계 파이프라인에서 득점자를 구축합니다. `generateScore`만 필요합니다:
 
-```an-diagram title="The 4-step scorer pipeline" summary="preprocess and analyze default to identity; only generateScore is required. analyze can run plain JS or call an LLM judge via ctx."
+```an-diagram title="4단계 득점자 파이프라인" summary="기본적으로 ID를 전처리하고 분석합니다. generateScore만 필요합니다. analyze는 일반 JS를 실행하거나 ctx를 통해 LLM 판사를 호출할 수 있습니다."
 {
   "html": "<div class=\"scorer\"><div class=\"diagram-card\"><span class=\"diagram-pill\">preprocess(run)</span><small class=\"diagram-muted\">transform the run/output &middot; optional</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">analyze(x, ctx)</span><small class=\"diagram-muted\">plain JS or LLM judge &middot; optional</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">generateScore(a)</span><small class=\"diagram-muted\">&rarr; 0..1 normalized &middot; <strong>required</strong></small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">generateReason</span><small class=\"diagram-muted\">human-readable why &middot; optional</small></div></div>",
   "css": ".scorer{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.scorer .diagram-card{display:flex;flex-direction:column;gap:2px;padding:8px 12px}.scorer .diagram-arrow{font-size:20px;line-height:1}"

package/docs/content/locales/ko-KR/extensions.md

@@ -22,7 +22,7 @@ QuickBooks Online을 사용해 본 적이 있다면 모델을 본 적이 있을
 상담원용 확장 actions 및 나머지 부분을 떠나는 동안 즉각적인 안내
 앱 에이전트가 그대로 유지됩니다.
 
-```an-diagram title="The sandbox bridge" summary="Extension HTML runs in an isolated iframe and reaches the host only through a fixed set of bridge helpers — every call is scoped and access-checked."
+```an-diagram title="샌드박스 브리지" summary="확장 HTML은 격리된 iframe에서 실행되며 고정된 브리지 도우미 세트를 통해서만 호스트에 도달합니다. 모든 호출은 범위가 지정되고 액세스가 확인됩니다."
 {
   "html": "<div class=\"ext-bridge\"><div class=\"diagram-card sandbox\" data-rough><span class=\"diagram-pill warn\">Sandboxed iframe</span><small class=\"diagram-muted\">Alpine.js HTML &middot; no host cookies, session, or DOM</small><div class=\"ext-helpers\"><span class=\"diagram-pill\">appAction</span><span class=\"diagram-pill\">appFetch</span><span class=\"diagram-pill\">dbQuery / dbExec</span><span class=\"diagram-pill\">extensionData</span><span class=\"diagram-pill\">extensionFetch</span></div></div><div class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">Host template<br><small class=\"diagram-muted\">actions, auto-scoped SQL</small></div><div class=\"diagram-box\">Secret proxy<br><small class=\"diagram-muted\"><code>${keys.NAME}</code>, domain-locked</small></div><div class=\"diagram-box\">External APIs<br><small class=\"diagram-muted\">via extensionFetch only</small></div></div></div>",
   "css": ".ext-bridge{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.ext-bridge .sandbox{display:flex;flex-direction:column;gap:8px;padding:16px 18px;flex:1;min-width:240px}.ext-bridge .ext-helpers{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}.ext-bridge .diagram-col{display:flex;flex-direction:column;gap:8px}.ext-bridge .diagram-arrow{font-size:24px}"
@@ -220,7 +220,7 @@ iframe 샌드박스 내부의 모든 확장 프로그램에는 `window`에 다
 
 확장 프로그램이 **슬롯에 설치**되면 호스트는 관련 컨텍스트(연락처 이메일, 대시보드 ID, 이벤트 ID)를 iframe에 푸시합니다. 확장 프로그램은 `window.slotContext`를 읽어 사용자가 무엇을 보고 있는지 파악합니다.
 
-```an-diagram title="Slots push context into the widget" summary="The host template owns named slots; installing an extension into one feeds it window.slotContext for whatever the user is currently viewing."
+```an-diagram title="슬롯은 컨텍스트를 위젯에 푸시합니다." summary="호스트 템플릿은 명명된 슬롯을 소유합니다. 확장 기능을 설치하면 사용자가 현재 보고 있는 모든 항목에 대한 window.slotContext가 제공됩니다."
 {
 "html": "<div class=\"slot\"><div class=\"diagram-card\"><span class=\"diagram-pill\">Mail thread</span><small class=\"diagram-muted\">slot <code>mail.contact-sidebar.bottom</code></small></div><div class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box accent\"><code>window.slotContext</code><br><small class=\"diagram-muted\">{ contactEmail }</small></div><div class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">Contact notes</span><small class=\"diagram-muted\">loads notes for that contact &mdash; same widget, different context</small></div></div>",
 "css": ".slot{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.slot .diagram-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;min-width:180px}.slot .diagram-arrow{font-size:22px}"

package/docs/content/locales/ko-KR/external-agents.md

@@ -19,7 +19,7 @@ search: "Claude ChatGPT Claude 코드 Codex 커서 Claude Cowork MCP 앱 에이
 
 외부 에이전트 브리지가 루프를 닫습니다. 먼저 앱의 원격 MCP URL를 Claude 또는 ChatGPT와 같은 채팅 호스트에 붙여넣거나 로컬 코딩 에이전트에 대한 개발자 CLI 흐름을 실행하여 자체 에이전트를 **호스팅된** 앱에 연결합니다. 그런 다음 에이전트는 MCP를 통해 작업을 수행하고 호환 호스트의 인라인 **MCP 앱** UI 또는 정확히 생성된 항목에 초점을 맞춘 실제 앱을 여는 단일 **"<앱>에서 열기 →"** 링크를 사용자에게 전달합니다. 이는 기존 `navigate` / `application_state` 계약을 재사용합니다. UI는 이미 2초마다 소모합니다([Context Awareness](/docs/context-awareness) 참조) — 두 번째 탐색 메커니즘은 없습니다.
 
-```an-diagram title="The external-agent round-trip" summary="An external host calls a tool over MCP; the app returns an artifact plus an Open link. Clicking it resolves the browser session and focuses the artifact in the running UI — the link carries no privileged state."
+```an-diagram title="외부 에이전트 왕복" summary="외부 호스트가 MCP을 통해 도구를 호출합니다. 앱은 아티팩트와 Open 링크를 반환합니다. 이를 클릭하면 브라우저 세션이 해결되고 실행 중인 UI의 아티팩트에 초점이 맞춰집니다. 링크에는 권한 있는 상태가 없습니다."
 {
   "html": "<div class=\"xa-trip\"><div class=\"diagram-box\" data-rough>External host<br><small class=\"diagram-muted\">Claude &middot; ChatGPT &middot; Codex &middot; Cursor</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill accent\">MCP tool call</span><small class=\"diagram-muted\">e.g. <code>manage-draft</code></small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>App produces artifact<br><small class=\"diagram-muted\">+ <code>Open in &lt;app&gt; &rarr;</code> deep link / MCP App</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>User clicks link</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill ok\"><code>/_agent-native/open</code></span><small class=\"diagram-muted\">resolves the <strong>browser</strong> session</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Writes <code>navigate</code> app-state<br><small class=\"diagram-muted\">UI focuses the artifact</small></div></div>",
   "css": ".xa-trip{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.xa-trip .center{display:flex;flex-direction:column;align-items:center;gap:4px}.xa-trip .diagram-arrow{font-size:22px;line-height:1}.xa-trip code{font-size:.85em}"
@@ -247,7 +247,7 @@ OAuth 흐름은 새로 고침 토큰 순환이 포함된 인증 코드 + PKCE입
 
 MCP 서버는 호스팅된 커넥터(ChatGPT, Claude), 코드 클라이언트(Claude 코드, 커서, Codex) 및 로컬 CLI/stdio 프록시 등 **기본적으로 모든 호출자에게 컴팩트 카탈로그**를 제공합니다. 전체 작업 화면은 명시적으로 동의한 경우에만 제공됩니다. 카탈로그는 클라이언트 이름이나 사용자 에이전트에서 추론되지 않습니다.
 
-```an-diagram title="Two catalog tiers" summary="Every caller gets the compact tier by default; the full ~105-tool surface is opt-in only. tool-search bridges the gap so nothing is ever truly hidden."
+```an-diagram title="두 개의 카탈로그 계층" summary="모든 호출자는 기본적으로 컴팩트 계층을 얻습니다. 전체 ~105개 도구 표면은 선택적으로만 제공됩니다. 도구 검색은 격차를 해소하므로 실제로 숨겨진 것은 없습니다."
 {
   "html": "<div class=\"xa-tiers\"><div class=\"diagram-card\" data-rough><span class=\"diagram-pill ok\">Compact / connector tier &middot; default</span><strong>~20&ndash;30 tools</strong><small class=\"diagram-muted\">Template-declared app actions + cross-app builtins (<code>list_apps</code>, <code>open_app</code>, <code>ask_app</code>, <code>create_embed_session</code>) + always-present <code>tool-search</code>.</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-card\" data-rough><span class=\"diagram-pill accent\">Full tier &middot; opt-in</span><strong>~105 tools</strong><small class=\"diagram-muted\">Explicit opt-in only: <code>--full-catalog</code> token or <code>AGENT_NATIVE_MCP_FULL_CATALOG=1</code>.</small></div></div><p class=\"diagram-muted note\"><code>tool-search</code> reaches any full-tier tool on demand &mdash; so the compact default keeps context small without hiding capability.</p>",
   "css": ".xa-tiers{display:flex;align-items:stretch;gap:14px;flex-wrap:wrap}.xa-tiers .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;flex:1;min-width:240px}.xa-tiers .diagram-arrow{align-self:center;font-size:24px;line-height:1}.xa-tiers .note{flex-basis:100%;margin:4px 0 0;font-size:.85em}.xa-tiers code{font-size:.85em}"

package/docs/content/locales/ko-KR/faq.md

@@ -28,7 +28,7 @@ description: "에이전트 네이티브에 대한 일반적인 질문 - 그것
 
 대부분의 앱은 앱에서 실제로 _할_ 수 없는 일을 나중에 고려하여 AI를 추가합니다. 에이전트 네이티브 앱에서 에이전트는 동일한 actions, 데이터베이스 및 상태를 UI와 공유하는 일급 시민이므로 버튼으로 할 수 있는 모든 작업을 수행하고 앱 자체 코드를 수정할 수 있습니다. [What Is Agent-Native?](/docs/what-is-agent-native#the-ladder)를 참조하세요.
 
-```an-diagram title="Bolted-on AI vs. agent-native" summary="A bolted-on chat sidebar lives in its own world. An agent-native agent shares the same actions, database, and state as the UI."
+```an-diagram title="추가 AI 대 agent-native" summary="고정된 채팅 사이드바는 그 자체의 세계에 살고 있습니다. agent-native 에이전트는 UI와 동일한 작업, 데이터베이스 및 상태를 공유합니다."
 {
   "html": "<div class=\"diagram-vs\"><div class=\"diagram-col\"><span class=\"diagram-pill warn\">Bolted-on AI</span><div class=\"diagram-node\">Chat sidebar</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>separate AI world<br><small class=\"diagram-muted\">can't touch the app</small></div><div class=\"diagram-box diagram-muted\">App UI &amp; data</div></div><div class=\"diagram-divider\" aria-hidden=\"true\"></div><div class=\"diagram-col\"><span class=\"diagram-pill ok\">Agent-native</span><div class=\"diagram-row2\"><div class=\"diagram-node\">UI</div><div class=\"diagram-node\">Agent</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>shared actions, DB &amp; state</div></div></div>",
   "css": ".diagram-vs{display:flex;align-items:stretch;gap:18px;flex-wrap:wrap}.diagram-vs .diagram-col{display:flex;flex-direction:column;gap:8px;align-items:center;flex:1;min-width:200px}.diagram-vs .diagram-row2{display:flex;gap:8px}.diagram-vs .diagram-arrow{font-size:20px;line-height:1}.diagram-vs .diagram-divider{width:1px;align-self:stretch;background:currentColor;opacity:.15}"
@@ -126,7 +126,7 @@ Anthropic Claude, OpenAI(GPT-5 제품군), Google Gemini 및 OpenAI API 형태
 
 SSE는 동일 프로세스 쓰기에 브라우저에 대한 즉각적인 경로를 제공하고, 경량 버전 카운터 폴링은 영구 소켓을 사용할 수 없는 서버리스 및 에지를 포함한 모든 배포 환경에서 작동하기 때문에 대체 수단으로 남아 있습니다. [Key Concepts — Live sync](/docs/key-concepts#polling-sync)를 참조하세요.
 
-```an-diagram title="SSE first, polling fallback" summary="Same-process writes stream instantly; a version-counter poll keeps serverless, edge, and cross-process writes convergent."
+```an-diagram title="SSE 먼저 폴링 폴백" summary="동일한 프로세스는 즉시 스트림을 씁니다. 버전 카운터 폴링은 서버리스, 에지 및 크로스 프로세스 쓰기를 수렴되게 유지합니다."
 {
   "html": "<div class=\"diagram-transport\"><div class=\"diagram-box\" data-rough>DB write</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-node\">SSE<br><small class=\"diagram-muted\">/_agent-native/events &middot; instant</small></div><div class=\"diagram-node\">Poll<br><small class=\"diagram-muted\">/_agent-native/poll &middot; universal fallback</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Browser refetch</div></div>",
   "css": ".diagram-transport{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-transport .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-transport .diagram-arrow{font-size:22px;line-height:1}"

package/docs/content/locales/ko-KR/file-uploads.md

@@ -17,7 +17,7 @@ description: "파일 업로드 저장소 구성 - 개발용 SQL 대체, 프로
 2. **Builder.io 공급자** — 내장, Builder.io가 연결되면 자동으로 활성화됨
 3. **SQL 대체** — 파일을 데이터베이스에 base64로 저장합니다(프로덕션이 아닌 개발에 적합)
 
-```an-diagram title="Provider resolution order" summary="uploadFile() picks the first configured provider in order. The SQL fallback always exists so uploads work with zero setup."
+```an-diagram title="공급자 해결 순서" summary="uploadFile()은 첫 번째로 구성된 공급자를 순서대로 선택합니다. SQL 대체는 항상 존재하므로 업로드는 설정 없이 작동합니다."
 {
   "html": "<div class=\"diagram-upload\"><div class=\"diagram-box\" data-rough>uploadFile()<br><small class=\"diagram-muted\">POST /_agent-native/file-upload</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-step\"><span class=\"diagram-pill accent\">1</span><div class=\"diagram-node\">User-registered<br><small class=\"diagram-muted\">registerFileUploadProvider() — S3, R2, GCS…</small></div></div><div class=\"diagram-step\"><span class=\"diagram-pill\">2</span><div class=\"diagram-node\">Builder.io<br><small class=\"diagram-muted\">auto when connected — CDN-served</small></div></div><div class=\"diagram-step\"><span class=\"diagram-pill warn\">3</span><div class=\"diagram-node\">SQL fallback<br><small class=\"diagram-muted\">base64 in DB — dev only</small></div></div></div></div>",
   "css": ".diagram-upload{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-upload .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-upload .diagram-step{display:flex;align-items:center;gap:8px}.diagram-upload .diagram-arrow{font-size:22px;line-height:1}"