chocolatito-code 1.0.0

package/extension/content.js

@@ -0,0 +1,446 @@
+/**
+ * Script de contenido de Chocolatito Code.
+ *
+ * Corre DENTRO de la pagina, asi que no necesita foco, ni raton, ni que la
+ * ventana este delante. Es lo que permite que el agente trabaje mientras el
+ * usuario esta jugando o en otra aplicacion.
+ *
+ * Responsabilidades:
+ *  - construir el snapshot de elementos accionables con referencias
+ *  - pulsar y escribir de forma que los frameworks (React) SI se enteren
+ *  - pintar el aviso flotante que indica que se esta trabajando aqui
+ */
+
+(() => {
+  if (window.__chocoContentReady) return;
+  window.__chocoContentReady = true;
+
+  const IS_TOP = window.top === window;
+
+  // ======================================================== aviso en pagina
+
+  let bannerHost = null;
+  let bannerBody = null;
+  let bannerHideTimer = null;
+
+  function ensureBanner() {
+    if (!IS_TOP) return null;
+    if (bannerHost && document.documentElement.contains(bannerHost)) return bannerHost;
+
+    bannerHost = document.createElement("div");
+    bannerHost.id = "__chocolatito_banner__";
+    // Shadow DOM: los estilos de la pagina no pueden romper el aviso, ni el
+    // aviso ensuciar la pagina.
+    const shadow = bannerHost.attachShadow({ mode: "closed" });
+    const style = document.createElement("style");
+    style.textContent = `
+      .wrap {
+        position: fixed; right: 16px; bottom: 16px; z-index: 2147483647;
+        display: flex; align-items: center; gap: 10px;
+        max-width: 380px; padding: 10px 14px;
+        background: rgba(24, 18, 16, 0.94);
+        border: 1px solid rgba(217, 119, 87, 0.55);
+        border-left: 3px solid #D97757;
+        border-radius: 10px;
+        box-shadow: 0 6px 24px rgba(0,0,0,0.38);
+        font: 13px/1.4 -apple-system, "Segoe UI", system-ui, sans-serif;
+        color: #F3EAE4;
+        pointer-events: none;
+        transition: opacity .25s ease, transform .25s ease;
+      }
+      .wrap.hide { opacity: 0; transform: translateY(6px); }
+      .dot {
+        width: 9px; height: 9px; border-radius: 50%;
+        background: #D97757; flex: 0 0 auto;
+        animation: pulse 1.15s ease-in-out infinite;
+      }
+      @keyframes pulse { 0%,100% { opacity:1; transform:scale(1);} 50% { opacity:.35; transform:scale(.75);} }
+      .txt { min-width: 0; }
+      .title { font-weight: 600; letter-spacing: .2px; }
+      .action {
+        color: #C9B8AF; font-size: 12px; margin-top: 1px;
+        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+      }
+      @media (prefers-reduced-motion: reduce) { .dot { animation: none; } }
+    `;
+    const wrap = document.createElement("div");
+    wrap.className = "wrap";
+    wrap.innerHTML =
+      '<div class="dot"></div><div class="txt">' +
+      '<div class="title">Chocolatito Code trabajando aqui</div>' +
+      '<div class="action"></div></div>';
+    shadow.appendChild(style);
+    shadow.appendChild(wrap);
+    bannerBody = { wrap, action: wrap.querySelector(".action") };
+    (document.body || document.documentElement).appendChild(bannerHost);
+    return bannerHost;
+  }
+
+  function showBanner(text) {
+    if (!IS_TOP) return;
+    try {
+      ensureBanner();
+      if (!bannerBody) return;
+      bannerBody.action.textContent = text || "";
+      bannerBody.wrap.classList.remove("hide");
+      clearTimeout(bannerHideTimer);
+      // Se desvanece solo si el agente deja de trabajar, para no molestar.
+      bannerHideTimer = setTimeout(() => {
+        if (bannerBody) bannerBody.wrap.classList.add("hide");
+      }, 12000);
+    } catch (_) {}
+  }
+
+  function hideBanner() {
+    if (bannerHost && bannerHost.parentNode) bannerHost.parentNode.removeChild(bannerHost);
+    bannerHost = null;
+    bannerBody = null;
+  }
+
+  // ======================================================== snapshot
+
+  const SELECTOR = [
+    "a[href]", "button", "input", "textarea", "select", "summary",
+    '[role="button"]', '[role="link"]', '[role="textbox"]', '[role="tab"]',
+    '[role="menuitem"]', '[role="option"]', '[role="checkbox"]', '[role="radio"]',
+    '[role="combobox"]', '[role="switch"]', '[contenteditable="true"]', "[onclick]",
+  ].join(",");
+
+  function accessibleName(el) {
+    const aria = el.getAttribute("aria-label");
+    if (aria && aria.trim()) return aria.trim();
+    const by = el.getAttribute("aria-labelledby");
+    if (by) {
+      const l = document.getElementById(by);
+      if (l && l.textContent.trim()) return l.textContent.trim();
+    }
+    if (el.placeholder && el.placeholder.trim()) return el.placeholder.trim();
+    const title = el.getAttribute("title");
+    if (title && title.trim()) return title.trim();
+    if (el.tagName === "IMG" && el.alt) return el.alt.trim();
+    const txt = el.innerText || el.textContent || "";
+    return txt.replace(/\s+/g, " ").trim();
+  }
+
+  function roleOf(el) {
+    const r = el.getAttribute("role");
+    if (r) return r;
+    const tag = el.tagName.toLowerCase();
+    if (tag === "a") return "link";
+    if (tag === "button") return "button";
+    if (tag === "textarea") return "textbox";
+    if (tag === "select") return "combobox";
+    if (tag === "input") {
+      const t = (el.type || "text").toLowerCase();
+      if (t === "checkbox" || t === "radio") return t;
+      if (t === "submit" || t === "button") return "button";
+      return "textbox";
+    }
+    if (el.isContentEditable) return "textbox";
+    return tag;
+  }
+
+  /** Recoge todas las raices, atravesando shadow DOM. */
+  function allRoots() {
+    const roots = [document];
+    for (let i = 0; i < roots.length && i < 400; i++) {
+      const all = roots[i].querySelectorAll("*");
+      for (let j = 0; j < all.length; j++) {
+        if (all[j].shadowRoot) roots.push(all[j].shadowRoot);
+      }
+    }
+    return roots;
+  }
+
+  function norm(s) {
+    return (s || "")
+      .normalize("NFD")
+      .replace(/[̀-ͯ]/g, "")
+      .toLowerCase();
+  }
+
+  function buildSnapshot(startIndex, filter) {
+    if (startIndex === 0) refIdentity.clear();
+    const out = [];
+    let idx = startIndex;
+    const f = norm(filter);
+    const seen = new Set();
+
+    for (const root of allRoots()) {
+      const nodes = root.querySelectorAll(SELECTOR);
+      for (const el of nodes) {
+        if (seen.has(el)) continue;
+        seen.add(el);
+
+        const rect = el.getBoundingClientRect();
+        if (rect.width < 2 || rect.height < 2) continue;
+
+        const st = window.getComputedStyle(el);
+        if (st.visibility === "hidden" || st.display === "none" || Number(st.opacity) === 0) continue;
+        if (rect.bottom < 0 || rect.right < 0) continue;
+
+        const name = accessibleName(el).slice(0, 120);
+        const role = roleOf(el);
+        const value = el.value ? String(el.value).slice(0, 80) : "";
+        if (!name && !value && role !== "textbox") continue;
+
+        if (f && norm(name + " " + value + " " + role).indexOf(f) < 0) continue;
+
+        idx++;
+        el.setAttribute("data-choco-ref", String(idx));
+        refIdentity.set(idx, { role, name, idx: out.length });
+        out.push({
+          ref: idx,
+          role,
+          name,
+          value,
+          disabled: el.disabled === true || el.getAttribute("aria-disabled") === "true",
+          inView: rect.top >= 0 && rect.top < window.innerHeight,
+        });
+      }
+    }
+    return out;
+  }
+
+  /**
+   * Identidad de cada ref del ultimo snapshot: ref -> { role, name, idx }.
+   *
+   * Hace falta porque las apps que re-renderizan (Flow lo hace cada pocos
+   * segundos) destruyen el nodo y con el el atributo data-choco-ref. El ref
+   * quedaba invalido a los pocos segundos y la accion fallaba con "ref no
+   * encontrado" aunque el boton siguiera ahi, con el mismo nombre y en el mismo
+   * sitio. Guardando la identidad se puede volver a localizar.
+   */
+  const refIdentity = new Map();
+
+  function findByRef(ref) {
+    for (const root of allRoots()) {
+      const el = root.querySelector('[data-choco-ref="' + ref + '"]');
+      if (el) return el;
+    }
+
+    // El nodo se fue en un re-render: se busca otro con la misma identidad.
+    const id = refIdentity.get(ref);
+    if (!id) return null;
+
+    const candidatos = [];
+    for (const root of allRoots()) {
+      const nodes = root.querySelectorAll(SELECTOR);
+      for (const el of nodes) {
+        if (roleOf(el) !== id.role) continue;
+        if (accessibleName(el).slice(0, 120) !== id.name) continue;
+        const r = el.getBoundingClientRect();
+        if (r.width < 2 || r.height < 2) continue;
+        candidatos.push(el);
+      }
+    }
+    if (candidatos.length === 0) return null;
+
+    // Con varios iguales se elige el que ocupaba la misma posicion en la lista.
+    const elegido = candidatos[Math.min(id.idx, candidatos.length - 1)];
+    elegido.setAttribute("data-choco-ref", String(ref));
+    return elegido;
+  }
+
+  // ======================================================== acciones
+
+  function centerOf(el) {
+    const r = el.getBoundingClientRect();
+    return { x: r.left + r.width / 2, y: r.top + r.height / 2 };
+  }
+
+  /**
+   * Pulsa sin raton real. Se emite la secuencia completa de eventos porque
+   * muchos componentes escuchan pointerdown/mouseup y no solo click.
+   */
+  function clickElement(el) {
+    try {
+      el.scrollIntoView({ block: "center", inline: "center", behavior: "instant" });
+    } catch (_) {
+      try { el.scrollIntoView(); } catch (_) {}
+    }
+    const c = centerOf(el);
+    const base = { bubbles: true, cancelable: true, composed: true, view: window, clientX: c.x, clientY: c.y, button: 0 };
+    const ptr = Object.assign({ pointerId: 1, isPrimary: true, pointerType: "mouse" }, base);
+
+    el.dispatchEvent(new PointerEvent("pointerover", ptr));
+    el.dispatchEvent(new MouseEvent("mouseover", base));
+    el.dispatchEvent(new PointerEvent("pointermove", ptr));
+    el.dispatchEvent(new MouseEvent("mousemove", base));
+    el.dispatchEvent(new PointerEvent("pointerdown", ptr));
+    el.dispatchEvent(new MouseEvent("mousedown", base));
+    try { el.focus({ preventScroll: true }); } catch (_) {}
+    el.dispatchEvent(new PointerEvent("pointerup", ptr));
+    el.dispatchEvent(new MouseEvent("mouseup", base));
+    el.dispatchEvent(new MouseEvent("click", base));
+    return true;
+  }
+
+  /**
+   * Escribe de forma que React se entere.
+   *
+   * Asignar el.value directamente NO sirve: React guarda su propio estado y no
+   * ve el cambio, asi que el campo parece relleno pero el boton de enviar sigue
+   * deshabilitado. El truco es llamar al setter nativo del prototipo y despues
+   * emitir el evento 'input', que es lo que React escucha.
+   */
+  function setNativeValue(el, value) {
+    const proto =
+      el instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype :
+      el instanceof HTMLInputElement ? HTMLInputElement.prototype : null;
+    if (proto) {
+      const desc = Object.getOwnPropertyDescriptor(proto, "value");
+      if (desc && desc.set) { desc.set.call(el, value); return true; }
+    }
+    return false;
+  }
+
+  function typeInto(el, text, replace) {
+    try { el.scrollIntoView({ block: "center", behavior: "instant" }); } catch (_) {}
+    try { el.focus({ preventScroll: true }); } catch (_) {}
+
+    if (el.isContentEditable) {
+      if (replace) {
+        const sel = window.getSelection();
+        const range = document.createRange();
+        range.selectNodeContents(el);
+        sel.removeAllRanges();
+        sel.addRange(range);
+      }
+      // execCommand emite beforeinput/input igual que si se hubiera tecleado.
+      const ok = document.execCommand("insertText", false, text);
+      if (!ok) {
+        el.textContent = replace ? text : (el.textContent || "") + text;
+        el.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true, data: text }));
+      }
+      return true;
+    }
+
+    const next = replace ? text : (el.value || "") + text;
+    el.dispatchEvent(new InputEvent("beforeinput", { bubbles: true, composed: true, data: text }));
+    if (!setNativeValue(el, next)) el.value = next;
+    el.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true, data: text }));
+    el.dispatchEvent(new Event("change", { bubbles: true }));
+    return true;
+  }
+
+  function pressKey(el, key) {
+    const target = el || document.activeElement || document.body;
+    const map = { Enter: 13, Escape: 27, Tab: 9, Backspace: 8, Delete: 46, ArrowUp: 38, ArrowDown: 40 };
+    const code = map[key] || 0;
+    const init = { key, code: key, keyCode: code, which: code, bubbles: true, cancelable: true, composed: true };
+    target.dispatchEvent(new KeyboardEvent("keydown", init));
+    target.dispatchEvent(new KeyboardEvent("keypress", init));
+    target.dispatchEvent(new KeyboardEvent("keyup", init));
+    // Si es un formulario y la tecla es Enter, se intenta enviar de verdad.
+    if (key === "Enter" && target.form && typeof target.form.requestSubmit === "function") {
+      try { target.form.requestSubmit(); } catch (_) {}
+    }
+    return true;
+  }
+
+  // ======================================================== mensajes
+
+  chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
+    try {
+      switch (msg.cmd) {
+        case "ping":
+          sendResponse({ ok: true, top: IS_TOP, url: location.href });
+          break;
+
+        case "banner":
+          if (msg.text === null) hideBanner();
+          else showBanner(msg.text);
+          sendResponse({ ok: true });
+          break;
+
+        case "snapshot": {
+          const items = buildSnapshot(msg.startIndex || 0, msg.filter || "");
+          sendResponse({ ok: true, items, url: location.href, title: document.title, top: IS_TOP });
+          break;
+        }
+
+        case "click": {
+          const el = findByRef(msg.ref);
+          if (!el) { sendResponse({ ok: false, error: "ref no encontrado en este frame" }); break; }
+          const label = accessibleName(el).slice(0, 60);
+          clickElement(el);
+          sendResponse({ ok: true, label });
+          break;
+        }
+
+        case "type": {
+          const el = findByRef(msg.ref);
+          if (!el) { sendResponse({ ok: false, error: "ref no encontrado en este frame" }); break; }
+          typeInto(el, msg.text, msg.replace !== false);
+          // Se devuelve el valor real tras escribir, para poder verificar.
+          const after = el.isContentEditable ? (el.textContent || "") : (el.value || "");
+          if (msg.submit) pressKey(el, "Enter");
+          sendResponse({ ok: true, value: String(after).slice(0, 200) });
+          break;
+        }
+
+        // Devuelve el centro del elemento en coordenadas del viewport, que es lo
+        // que necesita el protocolo DevTools para entregar un clic real.
+        case "rect": {
+          const el = findByRef(msg.ref);
+          if (!el) { sendResponse({ ok: false, error: "ref no encontrado en este frame" }); break; }
+          try { el.scrollIntoView({ block: "center", behavior: "instant" }); } catch (_) {}
+          const r = el.getBoundingClientRect();
+          sendResponse({
+            ok: true,
+            x: Math.round(r.left + r.width / 2),
+            y: Math.round(r.top + r.height / 2),
+            label: accessibleName(el).slice(0, 60),
+            editable: el.isContentEditable || "value" in el,
+          });
+          break;
+        }
+
+        // Solo lee el valor actual, para verificar despues de escribir.
+        case "value": {
+          const el = findByRef(msg.ref);
+          if (!el) { sendResponse({ ok: false, error: "ref no encontrado" }); break; }
+          sendResponse({
+            ok: true,
+            value: String(el.isContentEditable ? el.textContent || "" : el.value || "").slice(0, 300),
+          });
+          break;
+        }
+
+        case "press": {
+          const el = msg.ref ? findByRef(msg.ref) : null;
+          pressKey(el, msg.keys || "Enter");
+          sendResponse({ ok: true });
+          break;
+        }
+
+        case "getText":
+          sendResponse({
+            ok: true,
+            title: document.title,
+            url: location.href,
+            text: (document.body ? document.body.innerText : "").slice(0, 8000),
+          });
+          break;
+
+        case "eval": {
+          let out;
+          try {
+            out = String(eval(msg.script));
+          } catch (e) {
+            out = "Error JS: " + (e && e.message ? e.message : e);
+          }
+          sendResponse({ ok: true, result: out });
+          break;
+        }
+
+        default:
+          sendResponse({ ok: false, error: "comando desconocido: " + msg.cmd });
+      }
+    } catch (err) {
+      sendResponse({ ok: false, error: String((err && err.message) || err) });
+    }
+    return true;
+  });
+})();

package/extension/manifest.json

@@ -0,0 +1,36 @@
+{
+  "manifest_version": 3,
+  "name": "Chocolatito Code",
+  "version": "1.0.0",
+  "description": "Deja que Chocolatito Code trabaje dentro de tu Chrome, en segundo plano y con tus sesiones ya iniciadas.",
+  "permissions": [
+    "tabs",
+    "tabGroups",
+    "scripting",
+    "debugger",
+    "webNavigation",
+    "storage"
+  ],
+  "host_permissions": [
+    "<all_urls>"
+  ],
+  "background": {
+    "service_worker": "background.js"
+  },
+  "content_scripts": [
+    {
+      "matches": [
+        "<all_urls>"
+      ],
+      "js": [
+        "content.js"
+      ],
+      "run_at": "document_idle",
+      "all_frames": true
+    }
+  ],
+  "action": {
+    "default_title": "Chocolatito Code",
+    "default_popup": "popup.html"
+  }
+}

package/extension/popup.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<meta charset="utf-8" />
+<style>
+  body {
+    margin: 0;
+    width: 260px;
+    padding: 14px;
+    font: 13px/1.45 -apple-system, "Segoe UI", system-ui, sans-serif;
+    background: #191211;
+    color: #F3EAE4;
+  }
+  h1 { margin: 0 0 10px; font-size: 14px; letter-spacing: .2px; }
+  .row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
+  .dot { width: 9px; height: 9px; border-radius: 50%; background: #6B5B54; }
+  .dot.on { background: #4ADE80; }
+  .muted { color: #B5A49C; font-size: 12px; }
+  code { background: #2A1F1C; padding: 1px 5px; border-radius: 4px; font-size: 11px; }
+</style>
+<h1>Chocolatito Code</h1>
+<div class="row"><span class="dot" id="dot"></span><span id="state">Comprobando…</span></div>
+<div class="row muted" id="hint"></div>
+<script src="popup.js"></script>

package/extension/popup.js

@@ -0,0 +1,12 @@
+// Estado de la conexion con la CLI. El badge lo pone el service worker; aqui
+// solo se traduce a algo legible para el usuario.
+chrome.action.getBadgeText({}, (text) => {
+  const on = text === "on";
+  document.getElementById("dot").className = "dot" + (on ? " on" : "");
+  document.getElementById("state").textContent = on
+    ? "Conectado a la CLI"
+    : "Sin conexion con la CLI";
+  document.getElementById("hint").innerHTML = on
+    ? "El agente puede trabajar en tus pestanas en segundo plano."
+    : 'Arranca <code>chocolatito</code> en la terminal y esta pestana se conectara sola.';
+});

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "chocolatito-code",
+  "version": "1.0.0",
+  "description": "Agente autónomo de programación para la terminal, con control real del ordenador y del navegador. Desarrollado por Chocolatito.",
+  "type": "module",
+  "bin": {
+    "chocolatito": "dist/index.js"
+  },
+  "files": [
+    "dist",
+    "extension",
+    "skills",
+    "LICENSE",
+    "README.md",
+    "COMPUTER-USE.md",
+    ".mcp.json.ejemplo"
+  ],
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "os": [
+    "win32",
+    "darwin",
+    "linux"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "start": "node ./dist/index.js",
+    "test": "node --test tests/*.test.mjs",
+    "prepublishOnly": "npm run build && npm test"
+  },
+  "keywords": [
+    "ai",
+    "cli",
+    "coding-agent",
+    "computer-use",
+    "browser-automation",
+    "chocolatito",
+    "espectro-engine"
+  ],
+  "author": "Chocolatito",
+  "license": "MIT",
+  "homepage": "https://chocolatito.space",
+  "dependencies": {
+    "@inquirer/prompts": "^7.2.1",
+    "boxen": "^8.0.1",
+    "chalk": "^5.4.1",
+    "diff": "^7.0.0",
+    "dotenv": "^16.4.7",
+    "execa": "^9.5.2",
+    "fast-glob": "^3.3.3",
+    "marked": "^15.0.12",
+    "marked-terminal": "^7.3.0",
+    "openai": "^4.85.4",
+    "ora": "^8.2.0",
+    "puppeteer-core": "^25.9.0",
+    "ws": "^8.21.3"
+  },
+  "devDependencies": {
+    "@types/diff": "^7.0.0",
+    "@types/node": "^22.13.5",
+    "@types/ws": "^8.18.1",
+    "typescript": "^5.7.3"
+  }
+}

package/skills/complex-refactor/SKILL.md

@@ -0,0 +1,13 @@
+---
+name: complex-refactor
+description: Guía para refactorización de gran escala, modernización de código legado y migración segura de arquitecturas sin romper funcionalidad.
+---
+
+# ⚡ Skill: Complex Refactoring & Modernization
+
+Usa este skill cuando reorganices módulos, migres a TypeScript estricto o desacoples sistemas.
+
+## 1. Reglas de Oro del Refactoring Seguro
+- **Tests como Red de Seguridad**: Asegúrate de tener pruebas antes de mover código.
+- **Pasos Atómicos**: Haz cambios pequeños y verifica la compilación tras cada uno.
+- **Preservación de Comportamiento**: No cambies lógica y arquitectura al mismo tiempo.

package/skills/deep-debugger/SKILL.md

@@ -0,0 +1,14 @@
+---
+name: deep-debugger
+description: Metodología de depuración científica paso a paso para diagnosticar y solucionar bugs complejos, memory leaks y condiciones de carrera.
+---
+
+# 🔬 Skill: Deep Debugging & Root Cause Analysis
+
+Usa este skill para resolver errores esquivos, excepciones intermitentes o fallos de compilación.
+
+## 1. Protocolo Científico de Depuración en 4 Pasos
+1. **Reproducción Sistemática**: Ejecuta el test o comando para ver el error exacto.
+2. **Aislamiento y Trazado**: Localiza la línea precisa del stack trace y rastrea el flujo de datos.
+3. **Corrección Quirúrgica**: Modifica solo la causa raíz sin alterar contratos colaterales.
+4. **Verificación de Regresión**: Ejecuta la suite de tests completa para asegurar que no se introdujeron nuevos fallos.

package/skills/software-architect/SKILL.md

@@ -0,0 +1,20 @@
+---
+name: software-architect
+description: Guía experta para diseño de sistemas complejos, patrones de diseño (SOLID, DDD, Clean Architecture), APIs y bases de datos escalables.
+---
+
+# 🏛️ Skill: Software Architect & Systems Engineering
+
+Usa este skill cuando diseñes o crees software complejo desde cero o planees arquitecturas de gran escala.
+
+## 1. Principios Fundamentales de Arquitectura
+- **Clean Architecture & Hexagonal**: Separa la lógica de negocio pura de los adaptadores externos.
+- **SOLID & DRY**: Alta cohesión, bajo acoplamiento e interfaces explícitas.
+- **Modelado de Tipos**: Modela tipos e interfaces antes de implementar la lógica.
+
+## 2. Metodología de Creación de Software Complejo
+1. **Definir el Dominio**: Interfaces, contratos de datos y tipos inmutables.
+2. **Capa de Servicios**: Casos de uso desacoplados.
+3. **Capa de Infraestructura**: Adaptadores de persistencia y red.
+4. **Capa de Presentación / API / CLI**: Controladores y comandos.
+5. **Estrategia de Tests**: Diseñar para testabilidad con pruebas unitarias y de integración.