@agent-native/core 0.76.7 → 0.76.8

package/docs/content/locales/es-ES/key-concepts.md

@@ -17,9 +17,9 @@ Cada aplicación nativa del agente consta de tres cosas que funcionan juntas:
 >
 > **Computadora**: base de datos, navegador, ejecución de código. Los agentes trabajan directamente con SQL y herramientas integradas; Los servidores MCP son complementos opcionales, no la base.
 
-```an-diagram title="Agent, application, and computer" summary="Three layers working together over one shared SQL store. The agent and the application both read and write the same data."
+```an-diagram title="Agente, aplicación y computadora." summary="Tres capas trabajando juntas en una tienda SQL compartida. Tanto el agente como la aplicación leen y escriben los mismos datos."
 {
-  "html": "<div class=\"diagram-arch\"><div class=\"diagram-row\"><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Agent</span><small class=\"diagram-muted\">reads + writes data, runs actions, modifies code</small></div><div class=\"diagram-card\"><span class=\"diagram-pill\">Application</span><small class=\"diagram-muted\">action-only, chat, control plane, or full React UI</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;&nbsp;&uarr;</div><div class=\"diagram-box\" data-rough>Computer<br><small class=\"diagram-muted\">SQL database · browser · code execution</small></div></div>",
+  "html": "<div class=\"diagram-arch\"><div class=\"diagram-row\"><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Agent</span><small class=\"diagram-muted\">reads + writes data, runs actions, modifies code</small></div><div class=\"diagram-card\"><span class=\"diagram-pill\">Application</span><small class=\"diagram-muted\">action-only, chat, control plane, or full React UI</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;&nbsp;&uarr;</div><div class=\"diagram-box\" data-rough>Computer<br><small class=\"diagram-muted\">base de datos SQL · browser · code execution</small></div></div>",
   "css": ".diagram-arch{display:flex;flex-direction:column;align-items:center;gap:10px}.diagram-arch .diagram-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.diagram-arch .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;min-width:220px}.diagram-arch .diagram-arrow{font-size:20px;line-height:1}.diagram-arch .diagram-box{text-align:center;padding:12px 18px}"
 }
 ```
@@ -31,12 +31,12 @@ Las aplicaciones headless pueden ejecutar el mismo bucle de producción de aplic
 Cada aplicación nativa del agente tiene los mismos componentes básicos del agente, independientemente de si
 la superficie del producto es headless, chat-first o UI completo:
 
-```an-file-tree title="Guidance and behavior"
+```an-file-tree title="Guía y comportamiento"
 {
   "entries": [
-    { "path": "AGENTS.md", "note": "always-on instructions: purpose, core rules, state keys, action index, skills index" },
-    { "path": ".agents/skills/<name>/SKILL.md", "note": "reusable behavior: workflow steps, policies, examples, references, and do/don't lists" },
-    { "path": "actions/<name>.ts", "note": "executable capability: typed operation exposed to the agent, UI, CLI, HTTP, MCP, A2A, jobs, and webhooks" }
+    { "path": "AGENTS.md", "note": "Instrucciones siempre activas: propósito, reglas principales, claves de estado, índice de actions e índice de skills" },
+    { "path": ".agents/skills/<name>/SKILL.md", "note": "Comportamiento reutilizable: pasos de workflow, políticas, ejemplos, referencias y listas de qué hacer y no hacer" },
+    { "path": "actions/<name>.ts", "note": "Capacidad ejecutable: operación tipada expuesta al agente, UI, CLI, HTTP, MCP, A2A, jobs y webhooks" }
   ]
 }
 ```
@@ -211,7 +211,7 @@ El flujo es:
 4. Recuperación de ganchos `useActionQuery` y ganchos `useQuery` con versión de origen
 5. Los componentes representan los nuevos datos sin recargar la página
 
-```an-diagram title="Live sync flow" summary="An agent write becomes a UI render with no manual refresh — SSE first, polling as the universal fallback."
+```an-diagram title="Flujo de sincronización en vivo" summary="La escritura de un agente se convierte en una representación de la interfaz de usuario sin actualización manual: SSE primero, el sondeo como respaldo universal."
 {
   "html": "<div class=\"diagram-sync\"><div class=\"diagram-node\">Agent action<br><small class=\"diagram-muted\">writes to DB</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">Change event<br><small class=\"diagram-muted\">source: action / settings</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">useDbSync</span><small class=\"diagram-muted\">SSE &middot; poll fallback</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">Query refetch<br><small class=\"diagram-muted\">render, no reload</small></div></div>",
   "css": ".diagram-sync{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.diagram-sync .diagram-arrow{font-size:22px;line-height:1}.diagram-sync .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 14px}"

package/docs/content/locales/es-ES/local-file-mode.md

@@ -46,7 +46,7 @@ El UI y el agente actions deben mantener la misma forma en ambos modos. Un conte
 el editor aún edita documentos; la diferencia es si esos documentos resuelven
 a filas SQL o archivos locales.
 
-```an-diagram title="Same actions, two sources of truth" summary="The UI and agent call identical actions in both modes. The action layer decides whether each call resolves to SQL rows or repo files."
+```an-diagram title="Mismas acciones, dos fuentes de verdad" summary="La interfaz de usuario y el agente llaman a acciones idénticas en ambos modos. La capa de acción decide si cada llamada se resuelve en SQL filas o archivos de repositorio."
 {
   "html": "<div class=\"diagram-mode\"><div class=\"diagram-col entry\"><div class=\"diagram-node\">Content UI</div><div class=\"diagram-node\">Agent + actions<br><small class=\"diagram-muted\">list/get/update-document</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-row resolve\"><div class=\"diagram-panel\" data-rough><span class=\"diagram-pill accent\">Database mode</span><small class=\"diagram-muted\">SQL rows via Drizzle</small><small class=\"diagram-muted\">hosted · sharing · comments · history</small></div><div class=\"diagram-panel\" data-rough><span class=\"diagram-pill ok\">Local File Mode</span><small class=\"diagram-muted\">repo files via agent-native.json</small><small class=\"diagram-muted\">Git review · coding-agent edits</small></div></div></div>",
   "css": ".diagram-mode{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-mode .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-mode .diagram-arrow{font-size:22px;line-height:1}.diagram-mode .resolve{display:flex;gap:12px;flex-wrap:wrap}.diagram-mode .diagram-panel{display:flex;flex-direction:column;gap:4px;padding:12px 14px}"
@@ -57,21 +57,21 @@ a filas SQL o archivos locales.
 
 Un espacio de trabajo de contenido puede ser tan pequeño como este:
 
-```an-file-tree title="A Content workspace repo"
+```an-file-tree title="Un repo de workspace de Content"
 {
   "entries": [
-    { "path": "agent-native.json", "note": "declares which folders are content roots and their kinds" },
-    { "path": "docs/", "note": "content root — shows in the sidebar as pages" },
+    { "path": "agent-native.json", "note": "Declara qué carpetas son raíces de contenido y sus tipos" },
+    { "path": "docs/", "note": "Raíz de contenido: aparece en la barra lateral como páginas" },
     { "path": "docs/getting-started.mdx" },
     { "path": "docs/guides/custom-components.mdx" },
-    { "path": "blog/", "note": "content root" },
+    { "path": "blog/", "note": "Raíz de contenido" },
     { "path": "blog/launch-post.mdx" },
-    { "path": "resources/", "note": "content root" },
+    { "path": "resources/", "note": "Raíz de contenido" },
     { "path": "resources/messaging/positioning.md" },
-    { "path": "components/", "note": "NOT a content root — preview component library MDX can import" },
+    { "path": "components/", "note": "NO es una raíz de contenido: biblioteca de componentes de preview que MDX puede importar" },
     { "path": "components/FrameworkTabs.tsx" },
     { "path": "components/Callout.tsx" },
-    { "path": "extensions/", "note": "NOT a content root — local extension library (sandboxed widgets)" },
+    { "path": "extensions/", "note": "NO es una raíz de contenido: biblioteca local de extensions (widgets en sandbox)" },
     { "path": "extensions/doc-status/extension.json" },
     { "path": "extensions/doc-status/index.html" }
   ]

package/docs/content/locales/es-ES/mcp-apps.md

@@ -30,7 +30,7 @@ En raras ocasiones, el objetivo correcto es una ruta de aplicación enfocada que
 
 No escriba a mano aplicaciones únicas HTML MCP para el producto UI; si la acción necesita una superficie personalizada, agregue o reutilice primero una ruta/componente de aplicación real e incruste esa ruta.
 
-```an-diagram title="MCP App embed round-trip" summary="The action's link target is also the embed target. Capable hosts load the same signed app route inline; everyone else falls back to the deep link."
+```an-diagram title="MCP Aplicación integrada de ida y vuelta" summary="El destino del enlace de la acción también es el destino de inserción. Los hosts compatibles cargan la misma ruta de aplicación firmada en línea; todos los demás recurren al enlace profundo."
 {
   "html": "<div class=\"diagram-embed\"><div class=\"diagram-card\" data-rough><strong>Action</strong><small class=\"diagram-muted\">`link` target = MCP App embed target</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\" data-rough><strong>embedApp()</strong><span class=\"diagram-pill accent\">create_embed_session</span><small class=\"diagram-muted\">mints short-lived embed session</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\" data-rough><strong>/_agent-native/embed/start</strong><small class=\"diagram-muted\">exchanges one-time SQL ticket</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\" data-rough><strong>Signed app route</strong><span class=\"diagram-pill ok\">real React route</span><small class=\"diagram-muted\">short-lived browser session</small></div><div class=\"diagram-fallback\"><span class=\"diagram-pill warn\">no MCP Apps support</span><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>&quot;Open in … &rarr;&quot; deep link</div></div></div>",
 "css": ".diagram-embed{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-embed .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;min-width:140px}.diagram-embed .diagram-arrow{font-size:22px;line-height:1}.diagram-embed .diagram-fallback{display:flex;flex-direction:column;align-items:center;gap:6px;margin-inline-start:8px}"
@@ -54,7 +54,7 @@ export default defineAction({
 });
 ```
 
-```an-annotated-code title="The mcpApp resource config"
+```an-annotated-code title="La configuración del recurso mcpApp"
 {
   "filename": "actions/review-draft.ts",
   "language": "ts",
@@ -79,7 +79,7 @@ Dentro de esas rutas `embedApp()`, `sendToAgentChat()` admite integración. Las
 
 MCP Las inserciones de aplicaciones son inserciones de ruta, no miniproductos separados. `embedApp()` comienza desde el objetivo `link` de la acción, crea una sesión de inserción de corta duración e inicia esa ruta de aplicación firmada. Los hosts de aplicaciones MCP estándar pueden navegar por el marco de la aplicación MCP cuando el host puede hidratar la ruta directamente.
 
-```an-diagram title="Two host bridge paths, one signed route" summary="Claude transplants the hydrated route and uses the direct ui/_bridge; ChatGPT gets a controlled iframe via window.openai and relays host actions over postMessage. Both point at the same signed app route."
+```an-diagram title="Dos rutas de puente anfitrión, una ruta señalizada" summary="Claude trasplanta la vía hidratada y utiliza el ui/_bridge directo; ChatGPT obtiene un iframe controlado a través de window.openai y retransmite las acciones del host a través de postMessage. Ambos apuntan a la misma ruta de aplicación señalizada."
 {
   "html": "<div class=\"diagram-bridge\"><div class=\"diagram-col\"><div class=\"diagram-card\" data-rough><strong>Claude web</strong><span class=\"diagram-pill accent\">single-frame transplant</span><small class=\"diagram-muted\">hydrates signed app HTML in Claude's iframe, then direct`ui/_` host bridge</small></div><div class=\"diagram-card\" data-rough><strong>ChatGPT web</strong><span class=\"diagram-pill accent\">controlled route iframe</span><small class=\"diagram-muted\">`window.openai`host APIs ·`agentNative.mcpHost.*` postMessage relay</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Same signed app route<br><small class=\"diagram-muted\">normal route + React components</small></div></div>",
 "css": ".diagram-bridge{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-bridge .diagram-col{display:flex;flex-direction:column;gap:12px}.diagram-bridge .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;max-width:300px}.diagram-bridge .diagram-arrow{font-size:22px;line-height:1}.diagram-bridge .diagram-box{padding:16px 18px;text-align:center}"

package/docs/content/locales/es-ES/mcp-clients.md

@@ -20,7 +20,7 @@ También puedes [connect remote (HTTP) MCP servers at runtime](#remote-via-ui) (
 
 Cada fuente se resuelve en un **administrador MCP** en tiempo de ejecución, y cada herramienta que aprende aterriza en el registro de herramientas del agente bajo un prefijo `mcp__<server-id>__<tool>` a prueba de colisiones, que se puede buscar por intención a través de `tool-search`.
 
-```an-diagram title="Client direction: many sources, one tool registry" summary="Config files, env, and runtime UI all merge into the MCP manager; its tools appear prefixed and tool-searchable alongside your app's actions. This is the mirror of the server direction."
+```an-diagram title="Dirección del cliente: muchas fuentes, un registro de herramientas" summary="Los archivos de configuración, el entorno y la interfaz de usuario en tiempo de ejecución se fusionan en el administrador MCP; sus herramientas aparecen con prefijo y se pueden buscar mediante herramientas junto con las acciones de su aplicación. Este es el espejo de la dirección del servidor."
 {
   "html": "<div class=\"mcp-merge\"><div class=\"diagram-col sources\"><div class=\"diagram-box\" data-rough>Workspace <code>mcp.config.json</code><br><small class=\"diagram-muted\">shared across apps</small></div><div class=\"diagram-box\" data-rough>App-root <code>mcp.config.json</code><br><small class=\"diagram-muted\">per-app override</small></div><div class=\"diagram-box\" data-rough><code>MCP_SERVERS</code> env<br><small class=\"diagram-muted\">CI / production</small></div><div class=\"diagram-box\" data-rough>Remote via settings UI<br><small class=\"diagram-muted\">personal &amp; org scope</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\">MCP manager</span><small class=\"diagram-muted\">merge &middot; hot-reload</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col out\"><div class=\"diagram-node\">Agent tool registry<br><small class=\"diagram-muted\"><code>mcp__&lt;server-id&gt;__&lt;tool&gt;</code></small></div><div class=\"diagram-node\"><code>tool-search</code><br><small class=\"diagram-muted\">discover by intent</small></div></div></div>",
   "css": ".mcp-merge{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.mcp-merge .diagram-col{display:flex;flex-direction:column;gap:8px}.mcp-merge .center{display:flex;flex-direction:column;align-items:center;gap:4px}.mcp-merge .diagram-arrow{font-size:22px;line-height:1}.mcp-merge code{font-size:.85em}"
@@ -102,7 +102,7 @@ Cree `mcp.config.json` en la raíz de su espacio de trabajo (o en la raíz de un
 
 La forma es pequeña: un mapa `servers` codificado por ID de servidor, donde cada entrada es un iniciador estándar (`command` + `args` + `env` opcional) o una entrada remota `{ "type": "http", "url", "headers" }`.
 
-```an-annotated-code title="mcp.config.json, annotated"
+```an-annotated-code title="mcp.config.json, anotado"
 {
   "filename": "mcp.config.json",
   "language": "jsonc",
@@ -202,7 +202,7 @@ Si su espacio de trabajo ejecuta varias aplicaciones nativas del agente (por eje
 
 El envío es el centro convencional: ya coordina todas las aplicaciones.
 
-```an-diagram title="Hub model: one app serves org-scope MCP servers" summary="Dispatch holds the org-scope MCP servers; consumer apps pull and merge them as mcp__hub_<orgId>_<name>__*. Only org-scope rows are shared — personal credentials stay put."
+```an-diagram title="Modelo de concentrador: una aplicación sirve servidores MCP de alcance organizativo" summary="Dispatch contiene los servidores MCP de ámbito de organización; las aplicaciones de consumo las extraen y combinan como mcp__hub_<orgId>_<name>__*. Solo se comparten las filas del ámbito de la organización: las credenciales personales permanecen intactas."
 {
   "html": "<div class=\"mcp-hub\"><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill accent\">Dispatch hub</span><small class=\"diagram-muted\">org-scope MCP servers</small><small class=\"diagram-muted\"><code>GET /mcp/hub/servers</code></small></div><div class=\"diagram-col arrows\"><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div></div><div class=\"diagram-col consumers\"><div class=\"diagram-box\" data-rough>Mail<br><small class=\"diagram-muted\"><code>mcp__hub_&lt;orgId&gt;_&lt;name&gt;__*</code></small></div><div class=\"diagram-box\" data-rough>Clips<br><small class=\"diagram-muted\">pull + merge each ~60s</small></div></div></div><p class=\"diagram-muted note\">Bearer-gated by <code>AGENT_NATIVE_MCP_HUB_TOKEN</code>. Personal (user-scope) servers are never re-exposed.</p>",
   "css": ".mcp-hub{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.mcp-hub .center{display:flex;flex-direction:column;align-items:center;gap:4px}.mcp-hub .diagram-col{display:flex;flex-direction:column;gap:10px}.mcp-hub .arrows .diagram-arrow{font-size:22px;line-height:1}.mcp-hub .note{margin:8px 0 0;font-size:.85em}.mcp-hub code{font-size:.85em}"

package/docs/content/locales/es-ES/mcp-protocol.md

@@ -30,7 +30,7 @@ Conceptos clave:
 - **MCP remoto estándar OAuth**: descubrimiento de OAuth 2.1, registro dinámico de cliente, código de autorización + PKCE, rotación de token de actualización
 - **Reserva de autenticación de portador**: utiliza `ACCESS_TOKEN`, `ACCESS_TOKENS` o JWT conectados para clientes que no pueden ejecutar OAuth
 
-```an-diagram title="Your app as an MCP server" summary="External hosts connect over Streamable HTTP. Each action is one tool; ask-agent delegates to the full agent loop."
+```an-diagram title="Tu aplicación como servidor MCP" summary="Los hosts externos se conectan a través de Streamable HTTP. Cada acción es una herramienta; Ask-Agent delega al ciclo completo del agente."
 {
   "html": "<div class=\"diagram-mcp\"><div class=\"diagram-col\"><div class=\"diagram-node\">Claude</div><div class=\"diagram-node\">ChatGPT</div><div class=\"diagram-node\">Cursor · Codex</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel\"><span class=\"diagram-pill accent\">POST /_agent-native/mcp</span><small class=\"diagram-muted\">Streamable HTTP</small><small class=\"diagram-muted\">initialize &rarr; tools/list &rarr; tools/call</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\" data-rough>each action<br><small class=\"diagram-muted\">= one tool</small></div><div class=\"diagram-box\" data-rough>ask-agent<br><small class=\"diagram-muted\">&rarr; full agent loop</small></div></div></div>",
   "css": ".diagram-mcp{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.diagram-mcp .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-mcp .diagram-panel{display:flex;flex-direction:column;align-items:center;gap:4px}.diagram-mcp .diagram-arrow{font-size:20px;line-height:1}"
@@ -194,7 +194,7 @@ Puntos finales de descubrimiento:
 | `/_agent-native/mcp/oauth/authorize`      | Autorización del navegador + consentimiento                      |
 | `/_agent-native/mcp/oauth/token`          | Concesiones de códigos de autorización y tokens de actualización |
 
-```an-diagram title="OAuth discovery flow" summary="A 401 kicks off discovery, registration, and a PKCE authorize → token exchange. The Bearer token is audience-bound and scoped."
+```an-diagram title="OAuth flujo de descubrimiento" summary="Un 401 inicia el descubrimiento, el registro y una autorización PKCE → intercambio de tokens. El token de portador está limitado a la audiencia y tiene un alcance."
 {
   "html": "<div class=\"diagram-oauth\"><div class=\"diagram-box\" data-rough>first request<br><small class=\"diagram-muted\">no token</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill warn\">401 · WWW-Authenticate</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel\"><span class=\"diagram-pill\">/.well-known/oauth-protected-resource</span><span class=\"diagram-pill\">/.well-known/oauth-authorization-server</span><small class=\"diagram-muted\">discover</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-pill\">register</div><div class=\"diagram-pill\">authorize (PKCE)</div><div class=\"diagram-pill\">token</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Bearer access token<br><small class=\"diagram-muted\">audience-bound · mcp:read / write / apps</small></div></div>",
   "css": ".diagram-oauth{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-oauth .diagram-panel{display:flex;flex-direction:column;align-items:center;gap:4px}.diagram-oauth .diagram-col{display:flex;flex-direction:column;gap:6px}.diagram-oauth .diagram-arrow{font-size:20px;line-height:1}"

package/docs/content/locales/es-ES/messaging.md

@@ -18,7 +18,7 @@ Conecta tu agente a Slack, correo electrónico, Telegram o WhatsApp para que pue
 - **Mismo agente, misma memoria.** Todo lo que diga en Slack se recordará cuando lo envíe por correo electrónico más tarde. El chat web y los mensajes externos comparten un historial de conversaciones.
 - Para alertas unidireccionales en la aplicación (icono de campana, webhooks), consulte [Notifications](/docs/notifications).
 
-```an-diagram title="Many channels, one agent" summary="Every platform fans into the same agent loop and the same SQL thread history — so a Slack DM and an email continue the same conversation."
+```an-diagram title="Muchos canales, un agente" summary="Cada plataforma participa en el mismo bucle de agente y el mismo historial de hilos SQL, por lo que un DM Slack y un correo electrónico continúan la misma conversación."
 {
   "html": "<div class=\"msg-fanin\"><div class=\"diagram-col\"><div class=\"diagram-node\">Slack</div><div class=\"diagram-node\">Email</div><div class=\"diagram-node\">Telegram</div><div class=\"diagram-node\">WhatsApp</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\">One agent loop</span><small class=\"diagram-muted\">same memory · same tools</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>One SQL thread history<br><small class=\"diagram-muted\">web chat + external messages share it</small></div></div>",
   "css": ".msg-fanin{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.msg-fanin .diagram-col{display:flex;flex-direction:column;gap:8px}.msg-fanin .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
@@ -231,7 +231,7 @@ La plataforma de entrada webhooks utiliza un patrón de cola SQL multiplataforma
 3. El punto final del procesador se ejecuta en una **ejecución de función nueva** con su propio presupuesto de tiempo de espera completo. Reclama atómicamente la tarea (`pending` → `processing` vía `claimPendingTask`), ejecuta el bucle del agente, publica la respuesta a través del adaptador y marca la tarea `completed`.
 4. Un trabajo de reintento recurrente (`startPendingTasksRetryJob`, cada 60 s) barre las tareas atascadas en `pending` >90 s o `processing` >5 min y vuelve a encender el procesador. Limitado a 3 intentos, luego marcado como `failed`.
 
-```an-diagram title="Inbound webhook lifecycle" summary="The webhook only verifies, enqueues, and returns 200. A fresh function execution drains the queue and runs the agent loop, with a 60s retry job as the safety net."
+```an-diagram title="Ciclo de vida del webhook entrante" summary="El webhook solo verifica, pone en cola y devuelve 200. Una nueva ejecución de función drena la cola y ejecuta el bucle del agente, con un trabajo de reintento de 60 segundos como red de seguridad."
 {
   "html": "<div class=\"msg-flow\"><div class=\"msg-row\"><div class=\"diagram-node\">Platform<br><small class=\"diagram-muted\">Slack · email · etc.</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough><strong>/webhook</strong><br><small class=\"diagram-muted\">verify signature + parse</small><br><span class=\"diagram-pill\">INSERT pending task</span></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill ok\">return 200</div></div><div class=\"msg-fire\"><span class=\"diagram-muted\">fire-and-forget</span> <span class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</span></div><div class=\"msg-row\"><div class=\"diagram-box\" data-rough><strong>/process-task</strong><br><small class=\"diagram-muted\">fresh execution · own timeout</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill accent\">claim</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill accent\">agent loop</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill accent\">adapter.sendResponse</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill ok\">completed</div></div><div class=\"diagram-panel msg-retry\" data-rough><span class=\"diagram-pill warn\">every 60s</span> <span class=\"diagram-muted\">retry job sweeps stuck tasks (pending &gt;90s · processing &gt;5min) and re-fires /process-task &mdash; capped at 3 attempts, then <strong>failed</strong></span></div></div>",
   "css": ".msg-flow{display:flex;flex-direction:column;gap:12px}.msg-flow .msg-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.msg-flow .msg-fire{display:flex;align-items:center;gap:8px;padding-inline-start:12px}.msg-flow .msg-retry{display:flex;align-items:center;gap:8px;flex-wrap:wrap}"

package/docs/content/locales/es-ES/migration-workbench.md

@@ -9,7 +9,7 @@ La migración **no es un producto o plantilla independiente**: es algo integrado
 Objetivo `/migrate` dentro del espacio de trabajo [Agent-Native Code](/docs/code-agents-ui).
 Se ejecuta como una sesión de Código normal que puede reanudar, adjuntar, inspeccionar y detener.
 
-```an-diagram title="/migrate is a Code session, not a separate app" summary="A path, URL, or description goes in; the run shares the same store, transcript, and controls as every other Code session, and can emit a portable dossier."
+```an-diagram title="/migrate es una sesión de Código, no una aplicación separada" summary="Entra una ruta, URL, o descripción; la ejecución comparte el mismo almacén, transcripción y controles que cualquier otra sesión de Código y puede emitir un expediente portátil."
 {
   "html": "<div class=\"diagram-migrate\"><div class=\"diagram-col\"><div class=\"diagram-pill\">./local-app</div><div class=\"diagram-pill\">https://example.com</div><div class=\"diagram-pill\">--describe \\\"...\\\"</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\">/migrate goal</span><small class=\"diagram-muted\">same store · transcript · run controls</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\" data-rough>Migrated app</div><div class=\"diagram-pill ok\">--emit dossier</div></div></div>",
   "css": ".diagram-migrate{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-migrate .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-migrate .diagram-arrow{font-size:22px;line-height:1}.diagram-migrate .center{display:flex;flex-direction:column;align-items:center;gap:4px}"

package/docs/content/locales/es-ES/multi-app-workspace.md

@@ -45,16 +45,16 @@ El CLI muestra un selector múltiple de cada plantilla propia. Elija tantos como
 
 Obtienes un monorepo pnpm con el paquete compartido privado, un `package.json` raíz que conecta el descubrimiento del espacio de trabajo, un `.env` compartido y un subdirectorio por aplicación que hayas elegido:
 
-```an-file-tree title="A scaffolded workspace"
+```an-file-tree title="Un workspace generado"
 {
   "entries": [
-    { "path": "package.json", "note": "declares agent-native.workspaceCore" },
+    { "path": "package.json", "note": "Declara agent-native.workspaceCore" },
     { "path": "pnpm-workspace.yaml", "note": "packages: [\"packages/*\", \"apps/*\"]" },
-    { "path": ".env.example", "note": "shared ANTHROPIC_API_KEY, A2A_SECRET, DATABASE_URL, ..." },
+    { "path": ".env.example", "note": "ANTHROPIC_API_KEY, A2A_SECRET, DATABASE_URL, ... compartidos" },
     { "path": "packages/shared/", "note": "@my-company-platform/shared" },
-    { "path": "packages/shared/src/server/", "note": "plugin overrides only when needed" },
-    { "path": "packages/shared/src/client/", "note": "shared React code only when needed" },
-    { "path": "packages/shared/AGENTS.md", "note": "workspace-wide instructions" },
+    { "path": "packages/shared/src/server/", "note": "Overrides de plugins solo cuando haga falta" },
+    { "path": "packages/shared/src/client/", "note": "Código React compartido solo cuando haga falta" },
+    { "path": "packages/shared/AGENTS.md", "note": "Instrucciones para todo el workspace" },
     { "path": "apps/mail/" },
     { "path": "apps/calendar/" },
     { "path": "apps/forms/" }
@@ -115,7 +115,7 @@ Las aplicaciones nativas del agente dentro de un espacio de trabajo resuelven el
 
 La fusión se realiza por nombre de archivo. Si una aplicación proporciona un archivo local que también existe en sentido ascendente, el local gana. Si no es así, se aplica la versión compartida del espacio de trabajo. Si compartido tampoco proporciona uno, se activa el marco predeterminado. Esto se aplica a los complementos skills, actions y `AGENTS.md`.
 
-```an-diagram title="Three layers, merged by file name" summary="Each app resolves plugins, skills, actions, and AGENTS.md from app-local first, then the shared package, then the framework default."
+```an-diagram title="Tres capas, fusionadas por nombre de archivo" summary="Cada aplicación resuelve complementos, habilidades, acciones y AGENTS.md desde la aplicación local primero, luego el paquete compartido y luego el marco predeterminado."
 {
   "html": "<div class=\"layer\"><div class=\"diagram-card accent\"><span class=\"diagram-pill accent\">1 &middot; App local</span><small class=\"diagram-muted\"><code>apps/&lt;name&gt;/</code> &mdash; highest priority</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">2 &middot; Workspace shared</span><small class=\"diagram-muted\"><code>packages/shared/</code> &mdash; the mid-layer</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">3 &middot; Framework default</span><small class=\"diagram-muted\"><code>@agent-native/core</code> &mdash; lowest</small></div><div class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box ok\">first match wins</div></div>",
   "css": ".layer{display:flex;flex-direction:column;align-items:center;gap:6px}.layer .diagram-card{display:flex;flex-direction:column;gap:3px;padding:12px 16px;width:320px}.layer .diagram-arrow{font-size:18px;line-height:1}.layer .diagram-box{margin-top:2px}"
@@ -225,7 +225,7 @@ npx @agent-native/core@latest deploy
 
 Cada aplicación se crea con `APP_BASE_PATH=/<name>` y `VITE_APP_BASE_PATH=/<name>` y se emite a través del preajuste Nitro seleccionado. Cloudflare Pages es el valor predeterminado predeterminado y utiliza un trabajador despachador en `dist/_worker.js` más `_routes.json`. Netlify es compatible con `npx @agent-native/core@latest deploy --preset netlify`; emite funciones de aplicación bajo `.netlify/functions-internal/<app>-server` y genera redirecciones que dejan los activos estáticos sin forzar para que CDN entregue los archivos primero. Vercel es compatible con `npx @agent-native/core@latest deploy --preset vercel`; escribe un paquete raíz `.vercel/output` utilizando Build Output API de Vercel.
 
-```an-diagram title="Unified deploy: one origin, one path per app" summary="Every app ships behind a single origin, so login sessions and cross-app A2A are free."
+```an-diagram title="Implementación unificada: un origen, una ruta por aplicación" summary="Cada aplicación se envía detrás de un único origen, por lo que las sesiones de inicio de sesión y la aplicación cruzada A2A son gratuitas."
 {
   "html": "<div class=\"deploy\"><div class=\"diagram-box accent\">your-agents.com<br><small class=\"diagram-muted\">one DNS record &middot; one cert &middot; one CDN</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"deploy-apps\"><div class=\"diagram-box\">/mail/*</div><div class=\"diagram-box\">/calendar/*</div><div class=\"diagram-box\">/forms/*</div></div><div class=\"diagram-pill ok\">shared login cookie on the apex &bull; same-origin A2A, no CORS</div></div>",
   "css": ".deploy{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.deploy .deploy-apps{display:flex;flex-direction:column;gap:8px}.deploy .diagram-arrow{font-size:24px}.deploy .diagram-pill{flex-basis:100%}"

package/docs/content/locales/es-ES/multi-tenancy.md

@@ -19,7 +19,7 @@ Ya se envía un andamio `npx @agent-native/core@latest create` nuevo con:
 
 Si está evaluando un agente nativo para un CRM, un rastreador de proyectos, una bandeja de entrada de soporte o cualquier herramienta de equipo, la base multiinquilino ya está ahí. Todas las plantillas propias son multiinquilino; consulte [Cloneable SaaS templates](/docs/cloneable-saas) para ver la lista.
 
-```an-diagram title="Org membership and isolation" summary="Users join organizations as owner/admin/member. Every ownable row carries the org_id of the tenant that owns it, and no row leaks across the boundary."
+```an-diagram title="Membresía y aislamiento de la organización" summary="Los usuarios se unen a organizaciones como owner/admin/member. Cada fila poseíble lleva el org_id del inquilino propietario y ninguna fila cruza el límite."
 {
   "html": "<div class=\"mt-grid\"><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Org A</span><small class=\"diagram-muted\">members: alice (owner), bob (member)</small><div class=\"diagram-box\">rows where org_id = A</div></div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Org B</span><small class=\"diagram-muted\">members: carol (owner)</small><div class=\"diagram-box\">rows where org_id = B</div></div></div><div class=\"mt-wall\" aria-hidden=\"true\"><span class=\"diagram-pill warn\">no cross-org reads</span></div>",
   "css": ".mt-grid{display:flex;gap:16px;flex-wrap:wrap}.mt-grid .diagram-card{display:flex;flex-direction:column;gap:8px;padding:14px 16px;flex:1;min-width:200px}.mt-wall{display:flex;justify-content:center;margin-top:12px}"
@@ -36,7 +36,7 @@ Este es el módulo `org/` propio del marco, no el complemento de organización d
 
 Los datos del inquilino están aislados mediante una columna `org_id` (agregada por `ownableColumns()`) y el marco abarca cada consulta a la organización activa automáticamente: `session.orgId → AGENT_ORG_ID → SQL`. Cuando un usuario cambia de organización, UI, actions y el agente ven solo los datos de esa organización; el agente no puede acceder a los datos de una organización de la que el usuario no es miembro.
 
-```an-diagram title="From session to scoped SQL" summary="The active org on the session becomes AGENT_ORG_ID, which the framework folds into the WHERE clause of every query."
+```an-diagram title="De la sesión al ámbito SQL" summary="La organización activa en la sesión se convierte en AGENT_ORG_ID, que el marco integra en la cláusula WHERE de cada consulta."
 {
   "html": "<div class=\"mt-pipe\"><div class=\"diagram-node\">session.orgId<br><small class=\"diagram-muted\">active org on session</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">AGENT_ORG_ID<br><small class=\"diagram-muted\">request context</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">SQL row scoping<br><small class=\"diagram-muted\">WHERE owner_email = ? AND org_id = ?</small></div></div>",
   "css": ".mt-pipe{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.mt-pipe .diagram-node{display:flex;flex-direction:column;gap:2px;padding:10px 14px}.mt-pipe .diagram-arrow{font-size:22px;line-height:1}"

package/docs/content/locales/es-ES/native-chat-ui.md

@@ -17,7 +17,7 @@ controles de aprobación/denegación o enlaces a vistas de aplicaciones. Utilice
 cuándo debe renderizar un host externo como Claude, ChatGPT, Copilot o Cursor
 una ruta en línea desde tu aplicación.
 
-```an-diagram title="The native render path" summary="An action returns JSON; the runtime matches an explicit widget discriminant or chatUI.renderer; AssistantChat mounts a real React component. No iframe, no HTML execution."
+```an-diagram title="La ruta de renderizado nativo" summary="Una acción devuelve JSON; el tiempo de ejecución coincide con un widget discriminante explícito o chatUI.renderer; AssistantChat monta un componente React real. Sin iframe, sin ejecución HTML."
 {
   "html": "<div class=\"diagram-render\"><div class=\"diagram-node\">Action runs<br><small class=\"diagram-muted\">returns structured JSON</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\">Match</span><small class=\"diagram-muted\">explicit widget &middot; chatUI.renderer</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">&lt;AssistantChat&gt;<br><small class=\"diagram-muted\">mounts a React widget</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card col\"><div class=\"diagram-pill ok\">DataTable</div><div class=\"diagram-pill ok\">DataChart</div><div class=\"diagram-pill ok\">DataInsights</div></div></div>",
   "css": ".diagram-render{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-render .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px}.diagram-render .col{display:flex;flex-direction:column;gap:6px;padding:12px}.diagram-render .diagram-arrow{font-size:22px;line-height:1}"
@@ -209,7 +209,7 @@ puntos tutoriales aquí para la historia en tiempo de ejecución y [Component AP
 enumera cada conector y adaptador con su ruta de importación; el contrato en sí es
 se describe a continuación.
 
-```an-diagram title="BYO runtime keeps the Agent-Native chat shell" summary="Your external agent streams normalized events through a connector; Agent-Native keeps the composer, transcript, tool cards, approvals, and native widgets."
+```an-diagram title="El tiempo de ejecución BYO mantiene el shell de chat Agent-Native" summary="Su agente externo transmite eventos normalizados a través de un conector; Agent-Native conserva el compositor, la transcripción, las tarjetas de herramientas, las aprobaciones y los widgets nativos."
 {
   "html": "<div class=\"diagram-byo\"><div class=\"diagram-box\" data-rough>Your agent<br><small class=\"diagram-muted\">OpenAI &middot; Claude &middot; Vercel AI &middot; AG-UI &middot; HTTP</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">connector</span><small class=\"diagram-muted\">normalized message-* / tool-* events</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card col\"><div class=\"diagram-pill\">&lt;AssistantChat runtime=&hellip; /&gt;</div><small class=\"diagram-muted\">composer &middot; transcript &middot; tool cards</small><small class=\"diagram-muted\">approvals &middot; native widgets</small></div></div>",
   "css": ".diagram-byo{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-byo .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px}.diagram-byo .col{display:flex;flex-direction:column;gap:6px;padding:14px}.diagram-byo .diagram-arrow{font-size:22px;line-height:1}"

package/docs/content/locales/es-ES/notifications.md

@@ -18,7 +18,7 @@ await notify(
 );
 ```
 
-```an-diagram title="One call, many destinations" summary="notify() always writes the owner-scoped inbox row, fans out to every registered channel in parallel (best-effort), then emits notification.sent on the event bus."
+```an-diagram title="Una llamada, muchos destinos" summary="notify() siempre escribe la fila de la bandeja de entrada del propietario, se distribuye en cada canal registrado en paralelo (mejor esfuerzo) y luego emite notificación.sent en el bus de eventos."
 {
   "html": "<div class=\"diagram-notify\"><div class=\"diagram-node\">notify(input, { owner })<br><small class=\"diagram-muted\">any server code &middot; action, automation, plugin</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel fan\" data-rough><div class=\"fan-row\"><span class=\"diagram-pill accent\">inbox</span><div class=\"diagram-box\" data-rough>notifications table &rarr; bell UI<br><small class=\"diagram-muted\">always on &middot; owner-scoped</small></div></div><div class=\"fan-row\"><span class=\"diagram-pill\">webhook</span><div class=\"diagram-box\" data-rough>POST JSON to NOTIFICATIONS_WEBHOOK_URL<br><small class=\"diagram-muted\">best-effort</small></div></div><div class=\"fan-row\"><span class=\"diagram-pill\">custom</span><div class=\"diagram-box\" data-rough>registerNotificationChannel(...)<br><small class=\"diagram-muted\">best-effort &middot; runs in parallel</small></div></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill ok\">notification.sent</span><small class=\"diagram-muted\">event bus &middot; automations can chain</small></div></div>",
   "css": ".diagram-notify{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-notify .fan{display:flex;flex-direction:column;gap:10px;padding:14px}.diagram-notify .fan-row{display:flex;align-items:center;gap:10px}.diagram-notify .diagram-card{display:flex;flex-direction:column;gap:6px;padding:12px 14px}.diagram-notify .diagram-arrow{font-size:22px;line-height:1}"
@@ -44,7 +44,7 @@ La gravedad determina el estilo de la insignia en el menú desplegable y se tran
 
 El canal de webhook resuelve las referencias de `${keys.NAME}` tanto en URL como en `NOTIFICATIONS_WEBHOOK_AUTH` contra el [secrets](/docs/security) ad-hoc del propietario, por lo que el valor sin procesar nunca ingresa al contexto del agente. Se aplican listas de permitidos URL por clave: la misma regla que utiliza la herramienta de automatizaciones `web-request`.
 
-```an-diagram title="Channels and severity" summary="inbox is always on; webhook needs an env var; custom channels register at startup. Severity drives badge styling and is passed through to every channel."
+```an-diagram title="Canales y gravedad." summary="la bandeja de entrada siempre está activada; el webhook necesita una var env; Los canales personalizados se registran al inicio. La gravedad impulsa el estilo de la insignia y se transmite a todos los canales."
 {
   "html": "<div class=\"diagram-channels\"><div class=\"diagram-panel col\" data-rough><strong>Channels</strong><div class=\"diagram-box\" data-rough>inbox<br><small class=\"diagram-muted\">always on &mdash; part of the primitive</small></div><div class=\"diagram-box\" data-rough>webhook<br><small class=\"diagram-muted\">needs NOTIFICATIONS_WEBHOOK_URL</small></div><div class=\"diagram-box\" data-rough>custom<br><small class=\"diagram-muted\">registerNotificationChannel()</small></div></div><div class=\"diagram-panel col\" data-rough><strong>Severity drives the badge</strong><div class=\"sev-row\"><span class=\"diagram-pill\">info</span><span class=\"diagram-muted\">confirmations, FYI</span></div><div class=\"sev-row\"><span class=\"diagram-pill warn\">warning</span><span class=\"diagram-muted\">look at soon</span></div><div class=\"sev-row\"><span class=\"diagram-pill accent\">critical</span><span class=\"diagram-muted\">needs immediate attention</span></div></div></div>",
   "css": ".diagram-channels{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}.diagram-channels .col{display:flex;flex-direction:column;gap:10px;padding:14px;min-width:240px}.diagram-channels .sev-row{display:flex;align-items:center;gap:10px}"

package/docs/content/locales/es-ES/observability.md

@@ -33,7 +33,7 @@ Cuando un usuario envía un mensaje, el marco registra automáticamente:
 
 No se necesitan cambios de código. La instrumentación se conecta al `production-agent.ts` de forma transparente.
 
-```an-diagram title="Every run feeds the loop" summary="One agent run produces a trace, automated scores, and a feedback hook — all stored in the app's own SQL and surfaced on the dashboard. Experiments split traffic across config variants."
+```an-diagram title="Cada carrera alimenta el bucle" summary="La ejecución de un agente produce un seguimiento, puntuaciones automatizadas y un enlace de retroalimentación, todo almacenado en el SQL de la aplicación y que aparece en el panel. Los experimentos dividen el tráfico entre variantes de configuración."
 {
   "html": "<div class=\"obs-loop\"><div class=\"diagram-node\">Agent run<br><small class=\"diagram-muted\">production-agent.ts</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Captured automatically</span><small class=\"diagram-muted\">tokens &middot; cost &middot; latency &middot; tool calls</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">Traces &amp; spans</div><div class=\"diagram-box\">Evals (5 scorers + LLM judge)</div><div class=\"diagram-box\">Feedback &amp; frustration index</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node ok\">Dashboard<br><small class=\"diagram-muted\">scoped to the signed-in user</small></div></div>",
   "css": ".obs-loop{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.obs-loop .diagram-col{display:flex;flex-direction:column;gap:8px}.obs-loop .diagram-arrow{font-size:22px;line-height:1}.obs-loop .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
@@ -147,9 +147,9 @@ PUT /_agent-native/observability/experiments/:id
 
 Utilice los identificadores de modelo reales que acepta su motor en lugar de `<your-model-id>` / `<other-model-id>` (los nombres de los modelos cambian con frecuencia; consulte con su proveedor/motor para conocer los identificadores actuales). El bucle del agente resuelve automáticamente la variante del usuario y aplica la anulación de la configuración. La asignación utiliza hash consistente: el mismo usuario siempre obtiene la misma variante.
 
-```an-diagram title="Consistent-hash variant assignment" summary="Each user hashes to a stable variant, the loop applies that variant's config override, and results roll up per variant with confidence intervals."
+```an-diagram title="Asignación de variante de hash consistente" summary="Cada usuario aplica un hash a una variante estable, el bucle aplica la anulación de configuración de esa variante y los resultados se acumulan por variante con intervalos de confianza."
 {
-  "html": "<div class=\"exp\"><div class=\"diagram-node\">User id<br><small class=\"diagram-muted\">consistent hash</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-card\"><span class=\"diagram-pill\">control &middot; 50%</span><small class=\"diagram-muted\">config override A</small></div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">treatment &middot; 50%</span><small class=\"diagram-muted\">config override B</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">Results per variant<br><small class=\"diagram-muted\">cost &middot; latency &middot; satisfaction</small></div></div>",
+  "html": "<div class=\"exp\"><div class=\"diagram-node\">User id<br><small class=\"diagram-muted\">consistent hash</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-card\"><span class=\"diagram-pill\">control &middot; 50%</span><small class=\"diagram-muted\">config override A</small></div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">treatment &middot; 50%</span><small class=\"diagram-muted\">config override B</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">Resultados per variant<br><small class=\"diagram-muted\">cost &middot; latency &middot; satisfaction</small></div></div>",
   "css": ".exp{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.exp .diagram-col{display:flex;flex-direction:column;gap:8px}.exp .diagram-card{display:flex;flex-direction:column;gap:2px;padding:8px 12px}.exp .diagram-arrow{font-size:22px;line-height:1}"
 }
 ```

package/docs/content/locales/es-ES/observational-memory.md

@@ -19,7 +19,7 @@ OM representa un hilo largo de tres capas, desde la más destilada hasta la más
 | **Observaciones**                   | Entradas densas y fechadas que combinan una serie de mensajes sin procesar en un registro compacto de lo que sucedió.         |
 | **Mensajes sin procesar recientes** | Los últimos N turnos se mantienen **textualmente** (nunca se doblan) para que el agente siempre vea el contexto más reciente. |
 
-```an-diagram title="Three tiers, distilled to recent" summary="The older prefix folds into dated observations and a long-arc reflection; only the most recent turns stay verbatim."
+```an-diagram title="Tres niveles, destilados a lo reciente" summary="El prefijo más antiguo se convierte en observaciones fechadas y una reflexión de arco largo; sólo los giros más recientes permanecen textuales."
 {
   "html": "<div class=\"om\"><div class=\"diagram-card\"><span class=\"diagram-pill\">Reflections</span><small class=\"diagram-muted\">long-arc summary, condensed from the observation log</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&uarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Observations</span><small class=\"diagram-muted\">dense, dated entries folding stretches of raw messages</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&uarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill ok\">Recent raw messages</span><small class=\"diagram-muted\">last N turns, kept <strong>verbatim</strong> — never folded</small></div></div>",
   "css": ".om{display:flex;flex-direction:column-reverse;align-items:stretch;gap:8px}.om .diagram-card{display:flex;flex-direction:column;gap:4px;padding:12px 16px}.om .diagram-arrow{text-align:center;font-size:20px;line-height:1}"
@@ -35,7 +35,7 @@ Dos pases se ejecutan como un paso de **disparar y olvidar, de mejor esfuerzo**
 1. **Observador**: una vez que los mensajes _no observados_ de un hilo superan el umbral del token de observación, los agrupa en una sola entrada de observación densa.
 2. **Reflector**: una vez que el registro de observación persistente supera el umbral del token de reflexión, condensa las observaciones en una reflexión de nivel superior.
 
-```an-diagram title="Two best-effort passes after a clean turn" summary="Each pass no-ops below its threshold, so running the compactor every turn is cheap. Failures are swallowed and never add latency."
+```an-diagram title="Dos pases de mejor esfuerzo después de un giro limpio" summary="Cada uno pasa sin operaciones por debajo de su umbral, por lo que hacer funcionar el compactador en cada turno es económico. Los fallos se absorben y nunca añaden latencia."
 {
   "html": "<div class=\"om-pass\"><div class=\"diagram-node\">Clean turn ends<br><small class=\"diagram-muted\">fire-and-forget</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Observer</span><small class=\"diagram-muted\">unobserved tokens &gt; 30k? &rarr; fold into one observation</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Reflector</span><small class=\"diagram-muted\">observation log &gt; 40k? &rarr; condense into a reflection</small></div></div>",
   "css": ".om-pass{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.om-pass .diagram-node,.om-pass .diagram-card{display:flex;flex-direction:column;gap:2px;padding:10px 14px}.om-pass .diagram-arrow{font-size:22px;line-height:1}"

package/docs/content/locales/es-ES/onboarding.md

@@ -10,7 +10,7 @@ Lista de verificación de **Configuración** en la barra lateral del agente. Man
 al chat del agente: conecte un motor de IA, opcionalmente apunte la aplicación a compartido
 infraestructura y agregue proveedores solo cuando los necesite.
 
-```an-diagram title="The setup checklist" summary="Only Connect an AI engine is required. The panel tracks completion and auto-hides once everything required is done."
+```an-diagram title="La lista de verificación de configuración" summary="Solo se requiere conectar un motor de IA. El panel realiza un seguimiento de la finalización y se oculta automáticamente una vez que se hace todo lo necesario."
 {
   "html": "<div class=\"ob\"><div class=\"diagram-card\"><span class=\"diagram-pill warn\">required</span><strong>Connect an AI engine</strong><small class=\"diagram-muted\">Connect Builder (one click) or paste an LLM key</small></div><div class=\"diagram-card\"><span class=\"diagram-pill\">optional</span><strong>Database</strong><small class=\"diagram-muted\">set <code>DATABASE_URL</code></small></div><div class=\"diagram-card\"><span class=\"diagram-pill\">optional</span><strong>Authentication</strong><small class=\"diagram-muted\">OAuth / access token</small></div><div class=\"diagram-card\"><span class=\"diagram-pill\">optional</span><strong>Email delivery</strong><small class=\"diagram-muted\">Resend / SendGrid</small></div><div class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box ok\">all required done &rarr; panel auto-hides</div></div>",
   "css": ".ob{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.ob .diagram-card{display:flex;flex-direction:column;gap:3px;padding:12px 14px}.ob .diagram-arrow{font-size:22px}"
@@ -114,7 +114,7 @@ Todas las rutas se encuentran bajo `/_agent-native/onboarding/`:
 
 ### Agregar un paso desde una plantilla
 
-```an-annotated-code title="Registering a custom onboarding step"
+```an-annotated-code title="Registrar un paso de incorporación personalizado"
 {
   "filename": "server/plugins/my-onboarding.ts",
   "language": "ts",

package/docs/content/locales/es-ES/plan-plugin.md

@@ -14,7 +14,7 @@ Una instalación te ofrece:
 - **Dos skills**: `/visual-plan` (el punto de entrada canónico) y `/visual-recap`.
 - **El conector del plan MCP**: registrado en la aplicación alojada en `https://plan.agent-native.com` (extremo MCP `https://plan.agent-native.com/_agent-native/mcp`, nombre de servidor `plan`).
 
-```an-diagram title="Three routes, one bundle" summary="The universal CLI, Claude Code plugin, and Codex plugin all install the same two skills plus the hosted Plan connector."
+```an-diagram title="Tres rutas, un paquete" summary="El complemento universal CLI, Claude Code y Codex instalan las mismas dos habilidades más el conector del plan alojado."
 {
   "html": "<div class=\"diagram-routes\"><div class=\"diagram-col\"><div class=\"diagram-node\">Universal CLI<br><small class=\"diagram-muted\">skills add visual-plan</small></div><div class=\"diagram-node\">Claude Code plugin<br><small class=\"diagram-muted\">/plugin install</small></div><div class=\"diagram-node\">Codex plugin<br><small class=\"diagram-muted\">codex plugin add</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">/visual-plan</span><span class=\"diagram-pill accent\">/visual-recap</span><small class=\"diagram-muted\">two skills</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">Plan MCP connector<br><small class=\"diagram-muted\">plan.agent-native.com/_agent-native/mcp</small></div></div>",
   "css": ".diagram-routes{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-routes .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-routes .diagram-arrow{font-size:22px;line-height:1}.diagram-routes .center{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.diagram-routes .center .diagram-pill{margin:2px}"
@@ -82,7 +82,7 @@ Esto mantiene el contenido del plan fuera de la base de datos del plan Agent-Nat
 Los comentarios, las capturas de pantalla y el historial del plan no están disponibles hasta que usted explícitamente
 publicar más tarde.
 
-```an-diagram title="Hosted vs. local-files mode" summary="By default skills publish through the connector; local-files mode writes MDX to disk and previews via a localhost bridge instead."
+```an-diagram title="Modo alojado frente a archivos locales" summary="De forma predeterminada, las habilidades se publican a través del conector; El modo de archivos locales escribe MDX en el disco y, en su lugar, realiza una vista previa a través de un puente de host local."
 {
   "html": "<div class=\"diagram-modes\"><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Default · hosted</span><strong>Publish to the Plan app</strong><small class=\"diagram-muted\">MCP connector &rarr; hosted DB &rarr; share links, comments, history, screenshots</small></div><div class=\"diagram-card\"><span class=\"diagram-pill warn\">Local-files privacy</span><strong>Write MDX to disk</strong><small class=\"diagram-muted\">plan.mdx + canvas.mdx + prototype.mdx &rarr; localhost bridge &rarr; hosted Plan UI reads local source. No DB writes until <code>publish-visual-plan</code>.</small></div></div>",
   "css": ".diagram-modes{display:flex;gap:14px;flex-wrap:wrap}.diagram-modes .diagram-card{flex:1 1 260px;display:flex;flex-direction:column;gap:6px;padding:16px 18px}"

package/docs/content/locales/es-ES/pr-visual-recap.md

@@ -24,7 +24,7 @@ En cada impulso de relaciones públicas, el flujo de trabajo:
 7. Inserta un único comentario adhesivo de relaciones públicas que incorpora las capturas de pantalla **en línea** con un elemento `<picture>` (publicado a través del proxy de imagen de camuflaje de GitHub) junto al enlace al resumen interactivo.
 8. Completa la comprobación `Visual Recap` con éxito, omitida o neutral.
 
-```an-diagram title="What happens on each PR push" summary="A bounded diff feeds a real coding agent, which authors a recap; the workflow screenshots it and upserts one sticky comment."
+```an-diagram title="¿Qué sucede en cada impulso de relaciones públicas?" summary="Una diferencia limitada alimenta a un agente de codificación real, que elabora un resumen; el flujo de trabajo toma una captura de pantalla y agrega un comentario adhesivo."
 {
   "html": "<div class=\"diagram-recap\"><div class=\"diagram-node\">PR push<br><small class=\"diagram-muted\">bounded base&hellip;head diff</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">Coding agent<br><small class=\"diagram-muted\">Claude Code / Codex reads diff</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">create-visual-recap</span><small class=\"diagram-muted\">publishes recap plan</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">Headless Chrome<br><small class=\"diagram-muted\">light + dark screenshots</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">One sticky PR comment<br><small class=\"diagram-muted\">inline screenshot + plan link</small></div></div><div class=\"diagram-foot diagram-muted\">Plus an informational <span class=\"diagram-pill\">Visual Recap</span> check &mdash; non-blocking, never required.</div>",
   "css": ".diagram-recap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.diagram-recap .diagram-arrow{font-size:20px;line-height:1}.diagram-recap .center{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.diagram-recap .diagram-foot{flex-basis:100%;margin-top:10px;font-size:13px}"
@@ -157,7 +157,7 @@ Si desea generar resúmenes de relaciones públicas de bifurcación, hay disponi
 
 Para instalarlo, copie el archivo de [BuilderIO/agent-native](https://github.com/BuilderIO/agent-native/blob/main/.github/workflows/pr-visual-recap-fork.yml) en el directorio `.github/workflows/` de su repositorio junto con el `pr-visual-recap.yml` existente. Se aplican los mismos secretos (`PLAN_RECAP_TOKEN`, `ANTHROPIC_API_KEY`).
 
-```an-diagram title="Fork PR consent gate" summary="Fork PRs get no secrets by default; trusted authors run automatically, and outside contributors require a fresh maintainer recap label."
+```an-diagram title="Puerta de consentimiento de relaciones públicas de bifurcación" summary="Los PR de bifurcación no obtienen secretos de forma predeterminada; Los autores confiables se ejecutan automáticamente y los contribuyentes externos requieren una nueva etiqueta de resumen del mantenedor."
 {
   "html": "<div class=\"diagram-fork\"><div class=\"diagram-node\">Fork PR opened<br><small class=\"diagram-muted\">main workflow has no secrets</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill ok\">Trusted author</span><small class=\"diagram-muted\">OWNER, MEMBER, or COLLABORATOR runs automatically</small></div><div class=\"diagram-card\"><span class=\"diagram-pill warn\">Outside contributor</span><small class=\"diagram-muted\">maintainer reviews diff, then applies <code>recap</code></small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\">Gate checks<br><small class=\"diagram-muted\">fork PR? &amp; trusted or fresh label?</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box ok\">Recap runs<br><small class=\"diagram-muted\">base-repo code only · fork diff is text input</small></div></div>",
   "css": ".diagram-fork{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.diagram-fork .diagram-arrow{font-size:20px;line-height:1}.diagram-fork .center{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.diagram-fork .diagram-card{display:flex;flex-direction:column;gap:6px;padding:12px 14px}"

package/docs/content/locales/es-ES/processors.md

@@ -7,7 +7,7 @@ description: "Ganchos de barandilla/observador interno de bucle que observan la
 
 Un `Processor` es un **observador/guarda** interno de bucle para la ejecución del agente. Observa la salida transmitida del modelo y la herramienta llama a sus solicitudes _a medida que avanza la ejecución_, mantiene su propio estado inicial y puede **abortar** la ejecución antes de que se reclame un "terminado". Este es el prerrequisito estructural para las barreras de seguridad en tiempo real (bloquear la salida no permitida a mitad de camino) y una puerta de cobertura/prueba de finalización (inspeccionar lo que el modelo está a punto de hacer y detenerlo).
 
-```an-diagram title="Where the three hooks fire in the run" summary="processOutputStream watches every chunk, processOutputStep gates tool calls per response, processOutputResult records a verdict at the end. Any hook can abort with a TripWire."
+```an-diagram title="Donde los tres ganchos disparan en la carrera" summary="processOutputStream observa cada fragmento, processOutputStep controla las llamadas a la herramienta por respuesta, processOutputResult registra un veredicto al final. Cualquier gancho puede abortar con un TripWire."
 {
   "html": "<div class=\"diagram-proc\"><div class=\"diagram-node\" data-rough>stream chunks<br><small class=\"diagram-muted\">processOutputStream</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\" data-rough>per model response<br><small class=\"diagram-muted\">processOutputStep — gate tool calls</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\" data-rough>run end<br><small class=\"diagram-muted\">processOutputResult — verdict</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-pill warn\">abort() &rarr; TripWire &rarr; tripwire event</div></div>",
   "css": ".diagram-proc{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-proc .diagram-arrow{font-size:22px;line-height:1}.diagram-proc .diagram-pill{flex-basis:100%}"

package/docs/content/locales/es-ES/progress.md

@@ -41,7 +41,7 @@ Preocupación separada de [notifications](/docs/notifications): las notificacion
 | `failed`    | Terminal de error                   |
 | `cancelled` | Usuario interrumpido                |
 
-```an-diagram title="Run lifecycle" summary="startRun opens a running row; updateRunProgress patches it; completeRun moves it to one terminal status and stamps completed_at."
+```an-diagram title="Ejecutar ciclo de vida" summary="startRun abre una fila en ejecución; updateRunProgress lo parchea; completeRun lo mueve a un estado de terminal y sella completed_at."
 {
   "html": "<div class=\"diagram-run\"><div class=\"diagram-box\" data-rough>startRun()</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel running\" data-rough><span class=\"diagram-pill accent\">running</span><small class=\"diagram-muted\">updateRunProgress() &#8635; percent + step</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col terminal\"><span class=\"diagram-pill ok\">succeeded</span><span class=\"diagram-pill warn\">failed</span><span class=\"diagram-pill\">cancelled</span><small class=\"diagram-muted\">completeRun() &rarr; sets completed_at</small></div></div>",
   "css": ".diagram-run{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-run .diagram-panel{display:flex;flex-direction:column;gap:6px;padding:12px 16px}.diagram-run .terminal{display:flex;flex-direction:column;gap:6px;align-items:flex-start}.diagram-run .diagram-arrow{font-size:22px;line-height:1}"

package/docs/content/locales/es-ES/pure-agent-apps.md

@@ -12,7 +12,7 @@ métricas diarias a Slack" — y el agente actúa y devuelve el resultado dondeq
 pertenece. Sigue siendo una aplicación real: actions, sesiones, estado de la aplicación, historial,
 La configuración, las credenciales y los registros compartidos se encuentran todos en SQL.
 
-```an-diagram title="The app-agent loop is the front door" summary="Many entry points reach one agent loop over SQL-backed actions and state; results return to wherever the request came from. UI is added only when humans need to supervise."
+```an-diagram title="El bucle aplicación-agente es la puerta de entrada" summary="Muchos puntos de entrada llegan a un bucle de agente sobre SQL-backed acciones y estado; los resultados regresan al lugar de donde vino la solicitud. La interfaz de usuario se agrega solo cuando los humanos necesitan supervisar."
 {
   "html": "<div class=\"diagram-pure\"><div class=\"diagram-col\"><div class=\"diagram-pill\">Terminal</div><div class=\"diagram-pill\">Slack · email</div><div class=\"diagram-pill\">Scheduled job</div><div class=\"diagram-pill\">Another agent (A2A)</div><div class=\"diagram-pill\">Chat</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\">App-agent loop</span><small class=\"diagram-muted\">actions · sessions · app state in SQL</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Result returns<br><small class=\"diagram-muted\">to where it belongs</small></div></div>",
   "css": ".diagram-pure{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-pure .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-pure .diagram-arrow{font-size:22px;line-height:1}.diagram-pure .center{display:flex;flex-direction:column;align-items:center;gap:4px}"