From d43fa7fe80c4ab641c9cc81c5be2fa0a6d77b6a4 Mon Sep 17 00:00:00 2001
From: JoseMelNet <josemelnet@gmail.com>
Date: Sat, 23 May 2026 11:57:31 -0500
Subject: [PATCH 01/13] Extract shared Jinja UI components

---
 .../web/templates/applications/_list.html     | 33 +++++--------------
 .../web/templates/applications/_shell.html    |  6 ++--
 .../web/templates/applications/index.html     | 10 +++---
 .../web/templates/components/_flash.html      |  3 ++
 .../templates/components/_page_header.html    |  6 ++++
 .../web/templates/components/_pagination.html | 25 ++++++++++++++
 .../web/templates/profile/_shell.html         |  4 ++-
 .../web/templates/profile/index.html          | 10 +++---
 .../web/templates/vacancies/_list.html        | 33 +++++--------------
 .../web/templates/vacancies/index.html        | 16 ++++-----
 .../web/templates/vacancies/new.html          | 22 ++++++-------
 11 files changed, 81 insertions(+), 87 deletions(-)
 create mode 100644 app/interfaces/web/templates/components/_flash.html
 create mode 100644 app/interfaces/web/templates/components/_page_header.html
 create mode 100644 app/interfaces/web/templates/components/_pagination.html

diff --git a/app/interfaces/web/templates/applications/_list.html b/app/interfaces/web/templates/applications/_list.html
index 2ecb11b..aa1128b 100644
--- a/app/interfaces/web/templates/applications/_list.html
+++ b/app/interfaces/web/templates/applications/_list.html
@@ -27,31 +27,14 @@
             </a>
         {% endfor %}
     </div>
-    {% if pagination.total_pages > 1 %}
-        <div class="detail-actions">
-            {% if pagination.has_prev %}
-                <a
-                    class="secondary-link"
-                    href="/app/applications?q={{ query }}&state={{ current_state }}&page={{ pagination.prev_page }}&page_size={{ pagination.page_size }}"
-                    hx-get="/app/applications/shell?q={{ query }}&state={{ current_state }}&page={{ pagination.prev_page }}&page_size={{ pagination.page_size }}"
-                    hx-target="#applications-shell"
-                    hx-swap="outerHTML"
-                    hx-push-url="true"
-                >Anterior</a>
-            {% endif %}
-            <span class="muted-note">Pagina {{ pagination.page }} de {{ pagination.total_pages }}</span>
-            {% if pagination.has_next %}
-                <a
-                    class="secondary-link"
-                    href="/app/applications?q={{ query }}&state={{ current_state }}&page={{ pagination.next_page }}&page_size={{ pagination.page_size }}"
-                    hx-get="/app/applications/shell?q={{ query }}&state={{ current_state }}&page={{ pagination.next_page }}&page_size={{ pagination.page_size }}"
-                    hx-target="#applications-shell"
-                    hx-swap="outerHTML"
-                    hx-push-url="true"
-                >Siguiente</a>
-            {% endif %}
-        </div>
-    {% endif %}
+    {% set pagination_prev_href = "/app/applications?q=%s&state=%s&page=%s&page_size=%s"|format(query, current_state, pagination.prev_page, pagination.page_size) %}
+    {% set pagination_prev_hx_get = "/app/applications/shell?q=%s&state=%s&page=%s&page_size=%s"|format(query, current_state, pagination.prev_page, pagination.page_size) %}
+    {% set pagination_next_href = "/app/applications?q=%s&state=%s&page=%s&page_size=%s"|format(query, current_state, pagination.next_page, pagination.page_size) %}
+    {% set pagination_next_hx_get = "/app/applications/shell?q=%s&state=%s&page=%s&page_size=%s"|format(query, current_state, pagination.next_page, pagination.page_size) %}
+    {% set pagination_hx_target = "#applications-shell" %}
+    {% set pagination_hx_swap = "outerHTML" %}
+    {% set pagination_hx_push_url = "true" %}
+    {% include "components/_pagination.html" %}
 {% else %}
     <div class="empty-panel">
         <h3>Sin coincidencias</h3>
diff --git a/app/interfaces/web/templates/applications/_shell.html b/app/interfaces/web/templates/applications/_shell.html
index f087755..712b03f 100644
--- a/app/interfaces/web/templates/applications/_shell.html
+++ b/app/interfaces/web/templates/applications/_shell.html
@@ -1,7 +1,7 @@
 {% if flash_message %}
-    <section class="flash-message flash-{{ flash_message[0] }}">
-        {{ flash_message[1] }}
-    </section>
+    {% set flash_tone = flash_message[0] %}
+    {% set flash_text = flash_message[1] %}
+    {% include "components/_flash.html" %}
 {% endif %}
 
 <section class="panel filter-panel">
diff --git a/app/interfaces/web/templates/applications/index.html b/app/interfaces/web/templates/applications/index.html
index 8897e0c..4075b9b 100644
--- a/app/interfaces/web/templates/applications/index.html
+++ b/app/interfaces/web/templates/applications/index.html
@@ -1,12 +1,10 @@
 {% extends "base.html" %}
 
 {% block content %}
-<section class="page-header">
-    <div>
-        <h1>Seguimiento</h1>
-        <p>Control simple de vacantes que ya te interesan o a las que ya aplicaste.</p>
-    </div>
-</section>
+{% set page_header_title = "Seguimiento" %}
+{% set page_header_description = "Control simple de vacantes que ya te interesan o a las que ya aplicaste." %}
+{% set page_header_copy_class = none %}
+{% include "components/_page_header.html" %}
 
 <div id="applications-shell">
     {% include "applications/_shell.html" %}
diff --git a/app/interfaces/web/templates/components/_flash.html b/app/interfaces/web/templates/components/_flash.html
new file mode 100644
index 0000000..c10d301
--- /dev/null
+++ b/app/interfaces/web/templates/components/_flash.html
@@ -0,0 +1,3 @@
+<section class="flash-message flash-{{ flash_tone }}">
+    {{ flash_text }}
+</section>
diff --git a/app/interfaces/web/templates/components/_page_header.html b/app/interfaces/web/templates/components/_page_header.html
new file mode 100644
index 0000000..3e0a299
--- /dev/null
+++ b/app/interfaces/web/templates/components/_page_header.html
@@ -0,0 +1,6 @@
+<section class="page-header">
+    <div{% if page_header_copy_class %} class="{{ page_header_copy_class }}"{% endif %}>
+        <h1>{{ page_header_title }}</h1>
+        <p>{{ page_header_description }}</p>
+    </div>
+</section>
diff --git a/app/interfaces/web/templates/components/_pagination.html b/app/interfaces/web/templates/components/_pagination.html
new file mode 100644
index 0000000..29d9af1
--- /dev/null
+++ b/app/interfaces/web/templates/components/_pagination.html
@@ -0,0 +1,25 @@
+{% if pagination.total_pages > 1 %}
+    <div class="detail-actions">
+        {% if pagination.has_prev %}
+            <a
+                class="secondary-link"
+                href="{{ pagination_prev_href }}"
+                hx-get="{{ pagination_prev_hx_get }}"
+                hx-target="{{ pagination_hx_target }}"
+                hx-swap="{{ pagination_hx_swap }}"
+                hx-push-url="{{ pagination_hx_push_url }}"
+            >Anterior</a>
+        {% endif %}
+        <span class="muted-note">Pagina {{ pagination.page }} de {{ pagination.total_pages }}</span>
+        {% if pagination.has_next %}
+            <a
+                class="secondary-link"
+                href="{{ pagination_next_href }}"
+                hx-get="{{ pagination_next_hx_get }}"
+                hx-target="{{ pagination_hx_target }}"
+                hx-swap="{{ pagination_hx_swap }}"
+                hx-push-url="{{ pagination_hx_push_url }}"
+            >Siguiente</a>
+        {% endif %}
+    </div>
+{% endif %}
diff --git a/app/interfaces/web/templates/profile/_shell.html b/app/interfaces/web/templates/profile/_shell.html
index 922b81d..6597b3f 100644
--- a/app/interfaces/web/templates/profile/_shell.html
+++ b/app/interfaces/web/templates/profile/_shell.html
@@ -1,5 +1,7 @@
 {% if flash_message %}
-    <section class="flash-message flash-{{ flash_message[0] }}">{{ flash_message[1] }}</section>
+    {% set flash_tone = flash_message[0] %}
+    {% set flash_text = flash_message[1] %}
+    {% include "components/_flash.html" %}
 {% endif %}
 
 <section class="summary-strip profile-summary-strip">
diff --git a/app/interfaces/web/templates/profile/index.html b/app/interfaces/web/templates/profile/index.html
index 9f8b8d1..446ddc9 100644
--- a/app/interfaces/web/templates/profile/index.html
+++ b/app/interfaces/web/templates/profile/index.html
@@ -1,12 +1,10 @@
 {% extends "base.html" %}
 
 {% block content %}
-<section class="page-header">
-    <div>
-        <h1>Mi Perfil</h1>
-        <p>Configura tu contexto profesional para mejorar el analisis de vacantes y mantener tu hoja de vida al dia.</p>
-    </div>
-</section>
+{% set page_header_title = "Mi Perfil" %}
+{% set page_header_description = "Configura tu contexto profesional para mejorar el analisis de vacantes y mantener tu hoja de vida al dia." %}
+{% set page_header_copy_class = none %}
+{% include "components/_page_header.html" %}
 
 <div id="profile-shell">
     {% include "profile/_shell.html" %}
diff --git a/app/interfaces/web/templates/vacancies/_list.html b/app/interfaces/web/templates/vacancies/_list.html
index a00f56d..e491385 100644
--- a/app/interfaces/web/templates/vacancies/_list.html
+++ b/app/interfaces/web/templates/vacancies/_list.html
@@ -69,31 +69,14 @@
             {% endif %}
         {% endfor %}
     </div>
-    {% if pagination.total_pages > 1 %}
-        <div class="detail-actions">
-            {% if pagination.has_prev %}
-                <a
-                    class="secondary-link"
-                    href="/app/vacancies?q={{ query }}&view={{ current_view }}&page={{ pagination.prev_page }}&page_size={{ pagination.page_size }}"
-                    hx-get="/app/vacancies/list?q={{ query }}&view={{ current_view }}&page={{ pagination.prev_page }}&page_size={{ pagination.page_size }}"
-                    hx-target="#vacancy-list"
-                    hx-swap="innerHTML"
-                    hx-push-url="true"
-                >Anterior</a>
-            {% endif %}
-            <span class="muted-note">Pagina {{ pagination.page }} de {{ pagination.total_pages }}</span>
-            {% if pagination.has_next %}
-                <a
-                    class="secondary-link"
-                    href="/app/vacancies?q={{ query }}&view={{ current_view }}&page={{ pagination.next_page }}&page_size={{ pagination.page_size }}"
-                    hx-get="/app/vacancies/list?q={{ query }}&view={{ current_view }}&page={{ pagination.next_page }}&page_size={{ pagination.page_size }}"
-                    hx-target="#vacancy-list"
-                    hx-swap="innerHTML"
-                    hx-push-url="true"
-                >Siguiente</a>
-            {% endif %}
-        </div>
-    {% endif %}
+    {% set pagination_prev_href = "/app/vacancies?q=%s&view=%s&page=%s&page_size=%s"|format(query, current_view, pagination.prev_page, pagination.page_size) %}
+    {% set pagination_prev_hx_get = "/app/vacancies/list?q=%s&view=%s&page=%s&page_size=%s"|format(query, current_view, pagination.prev_page, pagination.page_size) %}
+    {% set pagination_next_href = "/app/vacancies?q=%s&view=%s&page=%s&page_size=%s"|format(query, current_view, pagination.next_page, pagination.page_size) %}
+    {% set pagination_next_hx_get = "/app/vacancies/list?q=%s&view=%s&page=%s&page_size=%s"|format(query, current_view, pagination.next_page, pagination.page_size) %}
+    {% set pagination_hx_target = "#vacancy-list" %}
+    {% set pagination_hx_swap = "innerHTML" %}
+    {% set pagination_hx_push_url = "true" %}
+    {% include "components/_pagination.html" %}
 {% else %}
     <div class="empty-panel">
         <h3>No hay coincidencias</h3>
diff --git a/app/interfaces/web/templates/vacancies/index.html b/app/interfaces/web/templates/vacancies/index.html
index 743d547..f12ea44 100644
--- a/app/interfaces/web/templates/vacancies/index.html
+++ b/app/interfaces/web/templates/vacancies/index.html
@@ -1,12 +1,10 @@
 {% extends "base.html" %}
 
 {% block content %}
-<section class="page-header">
-    <div class="page-header-copy">
-        <h1>Inbox de Vacantes</h1>
-        <p>Revisa, prioriza y decide sin salir del workspace.</p>
-    </div>
-</section>
+{% set page_header_title = "Inbox de Vacantes" %}
+{% set page_header_description = "Revisa, prioriza y decide sin salir del workspace." %}
+{% set page_header_copy_class = "page-header-copy" %}
+{% include "components/_page_header.html" %}
 
 <section class="context-strip">
     {% for item in context_bar %}
@@ -18,9 +16,9 @@ <h1>Inbox de Vacantes</h1>
 </section>
 
 {% if flash_message %}
-    <section class="flash-message flash-{{ flash_message[0] }}">
-        {{ flash_message[1] }}
-    </section>
+    {% set flash_tone = flash_message[0] %}
+    {% set flash_text = flash_message[1] %}
+    {% include "components/_flash.html" %}
 {% endif %}
 
 <section class="filter-panel">
diff --git a/app/interfaces/web/templates/vacancies/new.html b/app/interfaces/web/templates/vacancies/new.html
index 990a98b..e538805 100644
--- a/app/interfaces/web/templates/vacancies/new.html
+++ b/app/interfaces/web/templates/vacancies/new.html
@@ -1,23 +1,21 @@
 {% extends "base.html" %}
 
 {% block content %}
-<section class="page-header">
-    <div>
-        <h1>Nueva Vacante</h1>
-        <p>Entrada manual de vacantes. La extension de Chrome seguira usando la API actual.</p>
-    </div>
-</section>
+{% set page_header_title = "Nueva Vacante" %}
+{% set page_header_description = "Entrada manual de vacantes. La extension de Chrome seguira usando la API actual." %}
+{% set page_header_copy_class = none %}
+{% include "components/_page_header.html" %}
 
 <section class="layout-two-columns form-layout">
     <section class="panel">
         {% if request.query_params.get("flash") == "validation_error" %}
-            <section class="flash-message flash-warning">
-                Revisa los datos de la vacante. Hay un valor invalido o faltante.
-            </section>
+            {% set flash_tone = "warning" %}
+            {% set flash_text = "Revisa los datos de la vacante. Hay un valor invalido o faltante." %}
+            {% include "components/_flash.html" %}
         {% elif request.query_params.get("flash") == "save_error" %}
-            <section class="flash-message flash-warning">
-                No se pudo guardar la vacante. Intenta nuevamente.
-            </section>
+            {% set flash_tone = "warning" %}
+            {% set flash_text = "No se pudo guardar la vacante. Intenta nuevamente." %}
+            {% include "components/_flash.html" %}
         {% endif %}
 
         <form class="stack-form" method="post" action="/app/vacancies/new">

From 8a20ec20ff24b85ab23c1b8685839e3a235e1819 Mon Sep 17 00:00:00 2001
From: JoseMelNet <josemelnet@gmail.com>
Date: Sat, 23 May 2026 12:02:30 -0500
Subject: [PATCH 02/13] Normalize UI refactor validation baseline

---
 test_connection.py | 2 --
 1 file changed, 2 deletions(-)

diff --git a/test_connection.py b/test_connection.py
index 448e55d..19d81fa 100644
--- a/test_connection.py
+++ b/test_connection.py
@@ -2,8 +2,6 @@
 
 from __future__ import annotations
 
-import sys
-
 import pyodbc
 
 from app.infrastructure.persistence.connection import (

From 5b368cb602c99012c3ed38d296fc14a22bab7054 Mon Sep 17 00:00:00 2001
From: JoseMelNet <josemelnet@gmail.com>
Date: Sat, 23 May 2026 12:10:23 -0500
Subject: [PATCH 03/13] Normalize vacancies HTMX structure

---
 .../web/templates/vacancies/_filters.html     | 34 +++++++++
 .../web/templates/vacancies/_shell.html       | 15 ++++
 .../web/templates/vacancies/_summary.html     |  8 +++
 .../web/templates/vacancies/index.html        | 56 +--------------
 tests/test_web_vacancies.py                   | 69 +++++++++++++++++++
 5 files changed, 127 insertions(+), 55 deletions(-)
 create mode 100644 app/interfaces/web/templates/vacancies/_filters.html
 create mode 100644 app/interfaces/web/templates/vacancies/_shell.html
 create mode 100644 app/interfaces/web/templates/vacancies/_summary.html

diff --git a/app/interfaces/web/templates/vacancies/_filters.html b/app/interfaces/web/templates/vacancies/_filters.html
new file mode 100644
index 0000000..190a796
--- /dev/null
+++ b/app/interfaces/web/templates/vacancies/_filters.html
@@ -0,0 +1,34 @@
+<section class="filter-panel">
+    <form
+        class="filter-form filter-form-compact"
+        method="get"
+        action="/app/vacancies"
+        hx-get="/app/vacancies/list"
+        hx-target="#vacancy-list"
+        hx-swap="innerHTML"
+        hx-push-url="true"
+    >
+        <label>
+            <span>Buscar</span>
+            <input type="text" name="q" value="{{ query }}" placeholder="Empresa o cargo">
+        </label>
+        <label>
+            <span>Vista</span>
+            <select name="view">
+                {% for option in inbox_views %}
+                    <option value="{{ option }}"{% if option == current_view %} selected{% endif %}>{{ option }}</option>
+                {% endfor %}
+            </select>
+        </label>
+        <label>
+            <span>Por pagina</span>
+            <select name="page_size">
+                {% for option in pagination.page_size_options %}
+                    <option value="{{ option }}"{% if option == pagination.page_size %} selected{% endif %}>{{ option }}</option>
+                {% endfor %}
+            </select>
+        </label>
+        <input type="hidden" name="page" value="1">
+        <button class="secondary-action filter-submit" type="submit">Aplicar</button>
+    </form>
+</section>
diff --git a/app/interfaces/web/templates/vacancies/_shell.html b/app/interfaces/web/templates/vacancies/_shell.html
new file mode 100644
index 0000000..3092f2c
--- /dev/null
+++ b/app/interfaces/web/templates/vacancies/_shell.html
@@ -0,0 +1,15 @@
+{% include "vacancies/_summary.html" %}
+
+{% if flash_message %}
+    {% set flash_tone = flash_message[0] %}
+    {% set flash_text = flash_message[1] %}
+    {% include "components/_flash.html" %}
+{% endif %}
+
+{% include "vacancies/_filters.html" %}
+
+<section class="panel workspace-panel list-panel inbox-list-panel">
+    <div id="vacancy-list">
+        {% include "vacancies/_list.html" %}
+    </div>
+</section>
diff --git a/app/interfaces/web/templates/vacancies/_summary.html b/app/interfaces/web/templates/vacancies/_summary.html
new file mode 100644
index 0000000..6220b36
--- /dev/null
+++ b/app/interfaces/web/templates/vacancies/_summary.html
@@ -0,0 +1,8 @@
+<section class="context-strip">
+    {% for item in context_bar %}
+        <article class="context-item">
+            <span class="context-value">{{ item.value }}</span>
+            <span class="context-label">{{ item.label }}</span>
+        </article>
+    {% endfor %}
+</section>
diff --git a/app/interfaces/web/templates/vacancies/index.html b/app/interfaces/web/templates/vacancies/index.html
index f12ea44..37c57ed 100644
--- a/app/interfaces/web/templates/vacancies/index.html
+++ b/app/interfaces/web/templates/vacancies/index.html
@@ -6,61 +6,7 @@
 {% set page_header_copy_class = "page-header-copy" %}
 {% include "components/_page_header.html" %}
 
-<section class="context-strip">
-    {% for item in context_bar %}
-        <article class="context-item">
-            <span class="context-value">{{ item.value }}</span>
-            <span class="context-label">{{ item.label }}</span>
-        </article>
-    {% endfor %}
-</section>
-
-{% if flash_message %}
-    {% set flash_tone = flash_message[0] %}
-    {% set flash_text = flash_message[1] %}
-    {% include "components/_flash.html" %}
-{% endif %}
-
-<section class="filter-panel">
-    <form
-        class="filter-form filter-form-compact"
-        method="get"
-        action="/app/vacancies"
-        hx-get="/app/vacancies/list"
-        hx-target="#vacancy-list"
-        hx-swap="innerHTML"
-        hx-push-url="true"
-    >
-        <label>
-            <span>Buscar</span>
-            <input type="text" name="q" value="{{ query }}" placeholder="Empresa o cargo">
-        </label>
-        <label>
-            <span>Vista</span>
-            <select name="view">
-                {% for option in inbox_views %}
-                    <option value="{{ option }}"{% if option == current_view %} selected{% endif %}>{{ option }}</option>
-                {% endfor %}
-            </select>
-        </label>
-        <label>
-            <span>Por pagina</span>
-            <select name="page_size">
-                {% for option in pagination.page_size_options %}
-                    <option value="{{ option }}"{% if option == pagination.page_size %} selected{% endif %}>{{ option }}</option>
-                {% endfor %}
-            </select>
-        </label>
-        <input type="hidden" name="page" value="1">
-        <button class="secondary-action filter-submit" type="submit">Aplicar</button>
-    </form>
-</section>
-
-<section class="panel workspace-panel list-panel inbox-list-panel">
-    <div id="vacancy-list">
-        {% include "vacancies/_list.html" %}
-    </div>
-</section>
+{% include "vacancies/_shell.html" %}
 <script>
     (function () {
         function focusSelectedInboxRow() {
diff --git a/tests/test_web_vacancies.py b/tests/test_web_vacancies.py
index fd1a4c4..fc6a249 100644
--- a/tests/test_web_vacancies.py
+++ b/tests/test_web_vacancies.py
@@ -179,6 +179,75 @@ def test_inbox_moves_to_page_of_selected_vacancy(self, mock_build_items, _mock_n
         self.assertIn("Empresa 25 - Cargo 25", response.text)
         self.assertIn('title="Cerrar"', response.text)
 
+    @patch("app.interfaces.web.routes.vacancies._build_vacancy_items")
+    def test_vacancy_list_partial_renders_selected_inline_detail(self, mock_build_items):
+        mock_build_items.return_value = [
+            {
+                "id": item_id,
+                "empresa": f"Empresa {item_id}",
+                "cargo": f"Cargo {item_id}",
+                "modalidad": "Remoto",
+                "fecha_registro": date(2026, 4, 1),
+                "descripcion": f"Descripcion {item_id}",
+                "link": None,
+                "analisis": None,
+                "status_label": "Registrada",
+                "status_meta": {"tone": "gray", "label": "Registrada"},
+                "score_label": "Sin score",
+                "score_meta": {"tone": "gray", "label": "Sin analisis", "value": None},
+                "affinity_meta": {"tone": "gray", "label": "-", "raw": None},
+                "decision_meta": {"tone": "gray", "label": "-", "raw": None},
+                "has_application": False,
+            }
+            for item_id in range(1, 4)
+        ]
+
+        response = self.client.get("/app/vacancies/list?selected=2&q=Empresa&view=Todas&page=1&page_size=20")
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('data-selected-row="true"', response.text)
+        self.assertIn('data-inline-detail="true"', response.text)
+        self.assertIn("Empresa 2 - Cargo 2", response.text)
+        self.assertIn(
+            'hx-get="/app/vacancies/list?q=Empresa&view=Todas&page=1&page_size=20"',
+            response.text,
+        )
+
+    @patch("app.interfaces.web.routes.vacancies._build_vacancy_items")
+    def test_vacancy_detail_partial_preserves_query_view_and_pagination(self, mock_build_items):
+        mock_build_items.return_value = [
+            {
+                "id": 25,
+                "empresa": "Empresa 25",
+                "cargo": "Cargo 25",
+                "modalidad": "Remoto",
+                "fecha_registro": date(2026, 4, 1),
+                "descripcion": "Descripcion 25",
+                "link": None,
+                "analisis": None,
+                "status_label": "Registrada",
+                "status_meta": {"tone": "gray", "label": "Registrada"},
+                "score_label": "Sin score",
+                "score_meta": {"tone": "gray", "label": "Sin analisis", "value": None},
+                "affinity_meta": {"tone": "gray", "label": "-", "raw": None},
+                "decision_meta": {"tone": "gray", "label": "-", "raw": None},
+                "has_application": False,
+            }
+        ]
+
+        response = self.client.get("/app/vacancies/25/detail?q=data&view=Todas&page=3&page_size=10")
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn("Empresa 25 - Cargo 25", response.text)
+        self.assertIn(
+            'href="/app/vacancies?q=data&view=Todas&page=3&page_size=10"',
+            response.text,
+        )
+        self.assertIn(
+            'hx-get="/app/vacancies/list?q=data&view=Todas&page=3&page_size=10"',
+            response.text,
+        )
+
     @patch("app.interfaces.web.routes.vacancies.application_repository")
     @patch("app.interfaces.web.routes.vacancies.analysis_repository")
     @patch("app.interfaces.web.routes.vacancies.vacancy_repository")

From dacb1a94b787df9259c39f3c66448e4eb388520e Mon Sep 17 00:00:00 2001
From: JoseMelNet <josemelnet@gmail.com>
Date: Sat, 23 May 2026 12:19:18 -0500
Subject: [PATCH 04/13] Improve applications UI structure

---
 app/interfaces/web/static/css/app.css         | 27 +++++++++
 .../web/templates/applications/_filters.html  | 35 ++++++++++++
 .../web/templates/applications/_list.html     |  2 +-
 .../web/templates/applications/_shell.html    | 40 +-------------
 tests/test_web_applications.py                | 55 +++++++++++++++++++
 5 files changed, 121 insertions(+), 38 deletions(-)
 create mode 100644 app/interfaces/web/templates/applications/_filters.html

diff --git a/app/interfaces/web/static/css/app.css b/app/interfaces/web/static/css/app.css
index 4e637a8..7143731 100644
--- a/app/interfaces/web/static/css/app.css
+++ b/app/interfaces/web/static/css/app.css
@@ -463,6 +463,33 @@ a {
     min-width: 0;
 }
 
+.application-row {
+    border: 1px solid var(--border);
+    border-radius: 14px;
+    background: #fbfcfe;
+}
+
+.application-row:hover {
+    border-color: #bfdbfe;
+    background: #f8fbff;
+    transform: translateY(-1px);
+}
+
+.application-row.is-selected {
+    border-color: #b3c9ff;
+    background: #eef4ff;
+    box-shadow: inset 4px 0 0 #1d4ed8;
+}
+
+.application-list-panel,
+.application-detail-panel {
+    min-width: 0;
+}
+
+.application-detail-panel {
+    align-self: start;
+}
+
 .table-row-shell:hover {
     border-color: #bfdbfe;
     background: #f8fbff;
diff --git a/app/interfaces/web/templates/applications/_filters.html b/app/interfaces/web/templates/applications/_filters.html
new file mode 100644
index 0000000..c10c9af
--- /dev/null
+++ b/app/interfaces/web/templates/applications/_filters.html
@@ -0,0 +1,35 @@
+<section class="panel filter-panel">
+    <form
+        class="filter-form"
+        method="get"
+        action="/app/applications"
+        hx-get="/app/applications/shell"
+        hx-target="#applications-shell"
+        hx-swap="outerHTML"
+        hx-push-url="true"
+    >
+        <label>
+            <span>Buscar</span>
+            <input type="text" name="q" value="{{ query }}" placeholder="Empresa o cargo">
+        </label>
+        <label>
+            <span>Estado</span>
+            <select name="state">
+                <option value="Todos"{% if current_state == "Todos" %} selected{% endif %}>Todos</option>
+                {% for option in follow_up_states %}
+                    <option value="{{ option }}"{% if option == current_state %} selected{% endif %}>{{ status_labels.get(option, option) }}</option>
+                {% endfor %}
+            </select>
+        </label>
+        <label>
+            <span>Por pagina</span>
+            <select name="page_size">
+                {% for option in pagination.page_size_options %}
+                    <option value="{{ option }}"{% if option == pagination.page_size %} selected{% endif %}>{{ option }}</option>
+                {% endfor %}
+            </select>
+        </label>
+        <input type="hidden" name="page" value="1">
+        <button class="secondary-action filter-submit" type="submit">Filtrar</button>
+    </form>
+</section>
diff --git a/app/interfaces/web/templates/applications/_list.html b/app/interfaces/web/templates/applications/_list.html
index aa1128b..a6e507c 100644
--- a/app/interfaces/web/templates/applications/_list.html
+++ b/app/interfaces/web/templates/applications/_list.html
@@ -9,7 +9,7 @@
         </div>
         {% for item in applications %}
             <a
-                class="table-row row-link{% if selected_application and selected_application.id == item.id %} is-selected{% endif %}"
+                class="table-row row-link application-row{% if selected_application and selected_application.id == item.id %} is-selected{% endif %}"
                 href="/app/applications?selected={{ item.id }}&q={{ query }}&state={{ current_state }}&page={{ pagination.page }}&page_size={{ pagination.page_size }}"
                 hx-get="/app/applications/shell?selected={{ item.id }}&q={{ query }}&state={{ current_state }}&page={{ pagination.page }}&page_size={{ pagination.page_size }}"
                 hx-target="#applications-shell"
diff --git a/app/interfaces/web/templates/applications/_shell.html b/app/interfaces/web/templates/applications/_shell.html
index 712b03f..9073819 100644
--- a/app/interfaces/web/templates/applications/_shell.html
+++ b/app/interfaces/web/templates/applications/_shell.html
@@ -4,50 +4,16 @@
     {% include "components/_flash.html" %}
 {% endif %}
 
-<section class="panel filter-panel">
-    <form
-        class="filter-form"
-        method="get"
-        action="/app/applications"
-        hx-get="/app/applications/shell"
-        hx-target="#applications-shell"
-        hx-swap="outerHTML"
-        hx-push-url="true"
-    >
-        <label>
-            <span>Buscar</span>
-            <input type="text" name="q" value="{{ query }}" placeholder="Empresa o cargo">
-        </label>
-        <label>
-            <span>Estado</span>
-            <select name="state">
-                <option value="Todos"{% if current_state == "Todos" %} selected{% endif %}>Todos</option>
-                {% for option in follow_up_states %}
-                    <option value="{{ option }}"{% if option == current_state %} selected{% endif %}>{{ status_labels.get(option, option) }}</option>
-                {% endfor %}
-            </select>
-        </label>
-        <label>
-            <span>Por pagina</span>
-            <select name="page_size">
-                {% for option in pagination.page_size_options %}
-                    <option value="{{ option }}"{% if option == pagination.page_size %} selected{% endif %}>{{ option }}</option>
-                {% endfor %}
-            </select>
-        </label>
-        <input type="hidden" name="page" value="1">
-        <button type="submit">Filtrar</button>
-    </form>
-</section>
+{% include "applications/_filters.html" %}
 
 <section class="layout-two-columns">
-    <section class="panel">
+    <section class="panel application-list-panel">
         <div id="application-list">
             {% include "applications/_list.html" %}
         </div>
     </section>
 
-    <div id="application-detail">
+    <div id="application-detail" class="application-detail-panel">
         {% include "applications/_detail.html" %}
     </div>
 </section>
diff --git a/tests/test_web_applications.py b/tests/test_web_applications.py
index cc270c0..3ce179a 100644
--- a/tests/test_web_applications.py
+++ b/tests/test_web_applications.py
@@ -166,3 +166,58 @@ def test_applications_index_moves_to_page_of_selected_application(self, mock_rep
         self.assertIn("ACME 25", response.text)
         self.assertIn("Pagina 3 de 3", response.text)
         self.assertIn("ACME 25 - Role 25", response.text)
+
+    @patch("app.interfaces.web.routes.applications.application_repository")
+    def test_applications_shell_uses_system_filter_button_and_preserves_shell_target(self, mock_repository):
+        mock_repository.list_all.return_value = [
+            {
+                "id": 7,
+                "vacante_id": 3,
+                "empresa": "ACME",
+                "cargo": "Data Analyst",
+                "modalidad": "Remoto",
+                "link": "https://example.com",
+                "fecha_aplicacion": date(2026, 4, 1),
+                "estado": "Pending",
+                "nombre_recruiter": None,
+                "email_recruiter": None,
+                "telefono_recruiter": None,
+                "notas": "Pendiente",
+                "fecha_registro": date(2026, 4, 1),
+            }
+        ]
+
+        response = self.client.get("/app/applications/shell?q=acme&state=Todos&page=1&page_size=20")
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('class="secondary-action filter-submit"', response.text)
+        self.assertIn('hx-target="#applications-shell"', response.text)
+        self.assertIn('hx-swap="outerHTML"', response.text)
+        self.assertIn('hx-push-url="true"', response.text)
+
+    @patch("app.interfaces.web.routes.applications.application_repository")
+    def test_applications_detail_partial_preserves_state_query_and_pagination(self, mock_repository):
+        mock_repository.list_all.return_value = [
+            {
+                "id": 25,
+                "vacante_id": 25,
+                "empresa": "ACME 25",
+                "cargo": "Role 25",
+                "modalidad": "Remoto",
+                "link": "https://example.com",
+                "fecha_aplicacion": date(2026, 4, 1),
+                "estado": "Pending",
+                "nombre_recruiter": None,
+                "email_recruiter": None,
+                "telefono_recruiter": None,
+                "notas": "",
+                "fecha_registro": date(2026, 4, 1),
+            }
+        ]
+
+        response = self.client.get("/app/applications/25/detail?q=acme&state=Todos&page=3&page_size=10")
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn("ACME 25 - Role 25", response.text)
+        self.assertIn('value="acme"', response.text)
+        self.assertIn('value="Todos"', response.text)

From 1b9b4a91b363a7bdd7cb2efe18365da566a61e29 Mon Sep 17 00:00:00 2001
From: JoseMelNet <josemelnet@gmail.com>
Date: Sat, 23 May 2026 12:28:59 -0500
Subject: [PATCH 05/13] Reorganize CSS structure

---
 app/interfaces/web/static/css/app.css | 66 ++++++++++++++++-----------
 1 file changed, 39 insertions(+), 27 deletions(-)

diff --git a/app/interfaces/web/static/css/app.css b/app/interfaces/web/static/css/app.css
index 7143731..b930856 100644
--- a/app/interfaces/web/static/css/app.css
+++ b/app/interfaces/web/static/css/app.css
@@ -1,3 +1,4 @@
+/* Layer 1: Design tokens */
 :root {
     --bg: #f5f7fb;
     --surface: #ffffff;
@@ -12,6 +13,7 @@
     --shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
 }
 
+/* Layer 2: Reset and base elements */
 * {
     box-sizing: border-box;
 }
@@ -27,6 +29,7 @@ a {
     color: var(--brand);
 }
 
+/* Layer 3: Global shell and page layout */
 .shell-header,
 .kpi-strip,
 .page-shell {
@@ -214,6 +217,7 @@ a {
     font-size: 0.92rem;
 }
 
+/* Layer 4: Shared surfaces, links and summary components */
 .primary-link,
 .stack-form button {
     display: inline-flex;
@@ -304,6 +308,7 @@ a {
     color: var(--muted);
 }
 
+/* Layer 5: Forms and interactive controls */
 .filter-form {
     display: grid;
     grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr) auto;
@@ -403,6 +408,7 @@ a {
     font: inherit;
 }
 
+/* Layer 6: Shared tables, rows, details and status states */
 .simple-table {
     display: grid;
     gap: 8px;
@@ -463,33 +469,6 @@ a {
     min-width: 0;
 }
 
-.application-row {
-    border: 1px solid var(--border);
-    border-radius: 14px;
-    background: #fbfcfe;
-}
-
-.application-row:hover {
-    border-color: #bfdbfe;
-    background: #f8fbff;
-    transform: translateY(-1px);
-}
-
-.application-row.is-selected {
-    border-color: #b3c9ff;
-    background: #eef4ff;
-    box-shadow: inset 4px 0 0 #1d4ed8;
-}
-
-.application-list-panel,
-.application-detail-panel {
-    min-width: 0;
-}
-
-.application-detail-panel {
-    align-self: start;
-}
-
 .table-row-shell:hover {
     border-color: #bfdbfe;
     background: #f8fbff;
@@ -809,6 +788,7 @@ a {
     padding: 16px;
 }
 
+/* Layer 7: Vacancies feature */
 .inbox-workspace {
     align-items: start;
 }
@@ -1113,6 +1093,35 @@ a {
     margin: 0;
 }
 
+/* Layer 8: Applications feature */
+.application-row {
+    border: 1px solid var(--border);
+    border-radius: 14px;
+    background: #fbfcfe;
+}
+
+.application-row:hover {
+    border-color: #bfdbfe;
+    background: #f8fbff;
+    transform: translateY(-1px);
+}
+
+.application-row.is-selected {
+    border-color: #b3c9ff;
+    background: #eef4ff;
+    box-shadow: inset 4px 0 0 #1d4ed8;
+}
+
+.application-list-panel,
+.application-detail-panel {
+    min-width: 0;
+}
+
+.application-detail-panel {
+    align-self: start;
+}
+
+/* Layer 9: Shared helpers and feedback */
 .pill-group {
     display: flex;
     flex-wrap: wrap;
@@ -1147,6 +1156,7 @@ a {
     margin: 0 0 8px;
 }
 
+/* Layer 10: Flash feedback states */
 .flash-message {
     margin-bottom: 14px;
     padding: 12px 14px;
@@ -1172,6 +1182,7 @@ a {
     color: #92400e;
 }
 
+/* Layer 11: Profile feature and CV preview */
 .profile-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
@@ -1484,6 +1495,7 @@ a {
     color: var(--text);
 }
 
+/* Layer 12: Responsive adjustments */
 @media (max-width: 900px) {
     .shell-header,
     .page-header {

From 9c6cc5ac52e0b510a08e7e8392661e670ef437e9 Mon Sep 17 00:00:00 2001
From: JoseMelNet <josemelnet@gmail.com>
Date: Sat, 23 May 2026 14:42:11 -0500
Subject: [PATCH 06/13] Extract profile presentation partials

---
 .../web/templates/profile/_basics.html        |  52 +++++++
 .../web/templates/profile/_overview.html      |  16 +++
 .../templates/profile/_profile_status.html    |  14 ++
 .../web/templates/profile/_shell.html         | 130 +-----------------
 .../web/templates/profile/_skills.html        |  43 ++++++
 tests/test_web_profile.py                     |  23 ++++
 6 files changed, 152 insertions(+), 126 deletions(-)
 create mode 100644 app/interfaces/web/templates/profile/_basics.html
 create mode 100644 app/interfaces/web/templates/profile/_overview.html
 create mode 100644 app/interfaces/web/templates/profile/_profile_status.html
 create mode 100644 app/interfaces/web/templates/profile/_skills.html

diff --git a/app/interfaces/web/templates/profile/_basics.html b/app/interfaces/web/templates/profile/_basics.html
new file mode 100644
index 0000000..f4a408a
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_basics.html
@@ -0,0 +1,52 @@
+<section class="panel">
+    <div class="section-title">
+        <div>
+            <h2>Datos principales</h2>
+            <p>Estos datos alimentan el analisis de vacantes y el resumen general del perfil.</p>
+        </div>
+    </div>
+    <p class="section-caption">Los campos de esta seccion son la base del perfil y del contexto que consume el analizador.</p>
+    <form class="stack-form" method="post" action="/app/profile/save" hx-post="/app/profile/save" hx-target="#profile-shell" hx-swap="innerHTML">
+        <div class="grid-two">
+            <label><span>Nombre completo</span><input type="text" name="nombre" placeholder="Ej. Jose Martinez" value="{{ profile.nombre if profile else '' }}"></label>
+            <label><span>Titulo profesional</span><input type="text" name="titulo_profesional" placeholder="Ej. Data Analyst | BI | SQL" value="{{ profile.titulo_profesional if profile else '' }}"></label>
+        </div>
+        <div class="grid-two">
+            <label><span>Ciudad</span><input type="text" name="ciudad" placeholder="Ej. Bogota" value="{{ profile.ciudad if profile else '' }}"></label>
+            <label><span>Celular</span><input type="text" name="celular" placeholder="Ej. 3001234567" value="{{ profile.celular if profile else '' }}"></label>
+        </div>
+        <label><span>Direccion</span><input type="text" name="direccion" placeholder="Opcional" value="{{ profile.direccion if profile else '' }}"></label>
+        <div class="grid-two">
+            <label><span>Correo</span><input type="email" name="correo" value="{{ profile.correo if profile else '' }}"></label>
+            <label>
+                <span>Nivel actual</span>
+                <select name="nivel_actual">
+                    {% for option in level_options %}
+                        <option value="{{ option }}"{% if profile and profile.nivel_actual == option %} selected{% endif %}>{{ option }}</option>
+                    {% endfor %}
+                </select>
+            </label>
+        </div>
+        <div class="grid-two">
+            <label><span>LinkedIn</span><input type="url" name="perfil_linkedin" placeholder="https://linkedin.com/in/..." value="{{ profile.perfil_linkedin if profile else '' }}"></label>
+            <label><span>GitHub</span><input type="url" name="perfil_github" placeholder="https://github.com/..." value="{{ profile.perfil_github if profile else '' }}"></label>
+        </div>
+        <div class="grid-three">
+            <label><span>Anios de experiencia</span><input type="number" min="0" name="anos_experiencia" value="{{ profile.anos_experiencia if profile and profile.anos_experiencia is not none else 0 }}"></label>
+            <label><span>Salario minimo</span><input type="number" min="0" name="salario_min" value="{{ profile.salario_min if profile and profile.salario_min is not none else '' }}"></label>
+            <label><span>Salario maximo</span><input type="number" min="0" name="salario_max" value="{{ profile.salario_max if profile and profile.salario_max is not none else '' }}"></label>
+        </div>
+        <div class="grid-two">
+            <label><span>Moneda</span><input type="text" name="moneda" value="{{ profile.moneda if profile else 'COP' }}"></label>
+            <fieldset class="checkbox-group">
+                <legend>Modalidades aceptadas</legend>
+                <div class="checkbox-list">
+                    {% for option in modality_options %}
+                        <label class="checkbox-item"><input type="checkbox" name="modalidades_aceptadas" value="{{ option }}"{% if option in selected_modalities %} checked{% endif %}><span>{{ option }}</span></label>
+                    {% endfor %}
+                </div>
+            </fieldset>
+        </div>
+        <button type="submit">Guardar perfil</button>
+    </form>
+</section>
diff --git a/app/interfaces/web/templates/profile/_overview.html b/app/interfaces/web/templates/profile/_overview.html
new file mode 100644
index 0000000..74a5af6
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_overview.html
@@ -0,0 +1,16 @@
+<section class="summary-strip profile-summary-strip">
+    <article class="summary-card"><div class="summary-label">Skills</div><div class="summary-value">{{ skills|length }}</div></article>
+    <article class="summary-card"><div class="summary-label">Experiencias</div><div class="summary-value">{{ experiences|length }}</div></article>
+    <article class="summary-card"><div class="summary-label">Formacion</div><div class="summary-value">{{ education|length + courses|length + certifications|length }}</div></article>
+</section>
+
+<section class="profile-hint-grid">
+    <article class="helper-box soft">
+        <h3>Como usar esta pantalla</h3>
+        <p>Empieza por datos principales y skills. Luego completa experiencia y proyectos para mejorar el analisis de vacantes.</p>
+    </article>
+    <article class="helper-box">
+        <h3>Vista CV</h3>
+        <p>La vista CV se actualiza con la informacion registrada aqui y te sirve para revisar la consistencia general del perfil.</p>
+    </article>
+</section>
diff --git a/app/interfaces/web/templates/profile/_profile_status.html b/app/interfaces/web/templates/profile/_profile_status.html
new file mode 100644
index 0000000..9aec520
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_profile_status.html
@@ -0,0 +1,14 @@
+<section class="panel helper-panel">
+    <h2>Estado del perfil</h2>
+    <ul class="flow-list">
+        <li>Datos principales: {% if profile %}configurados{% else %}pendientes{% endif %}</li>
+        <li>Skills registradas: {{ skills|length }}</li>
+        <li>Experiencias registradas: {{ experiences|length }}</li>
+        <li>Proyectos registrados: {{ projects|length }}</li>
+        <li>Formacion registrada: {{ education|length + courses|length + certifications|length }}</li>
+    </ul>
+    <div class="helper-box soft">
+        <h3>Estado de migracion</h3>
+        <p>Mi Perfil ya puede mantenerse desde la web para el flujo principal del producto.</p>
+    </div>
+</section>
diff --git a/app/interfaces/web/templates/profile/_shell.html b/app/interfaces/web/templates/profile/_shell.html
index 6597b3f..ccba615 100644
--- a/app/interfaces/web/templates/profile/_shell.html
+++ b/app/interfaces/web/templates/profile/_shell.html
@@ -4,136 +4,14 @@
     {% include "components/_flash.html" %}
 {% endif %}
 
-<section class="summary-strip profile-summary-strip">
-    <article class="summary-card"><div class="summary-label">Skills</div><div class="summary-value">{{ skills|length }}</div></article>
-    <article class="summary-card"><div class="summary-label">Experiencias</div><div class="summary-value">{{ experiences|length }}</div></article>
-    <article class="summary-card"><div class="summary-label">Formacion</div><div class="summary-value">{{ education|length + courses|length + certifications|length }}</div></article>
-</section>
-
-<section class="profile-hint-grid">
-    <article class="helper-box soft">
-        <h3>Como usar esta pantalla</h3>
-        <p>Empieza por datos principales y skills. Luego completa experiencia y proyectos para mejorar el analisis de vacantes.</p>
-    </article>
-    <article class="helper-box">
-        <h3>Vista CV</h3>
-        <p>La vista CV se actualiza con la informacion registrada aqui y te sirve para revisar la consistencia general del perfil.</p>
-    </article>
-</section>
+{% include "profile/_overview.html" %}
 
 <section class="layout-two-columns profile-layout">
-    <section class="panel">
-        <div class="section-title">
-            <div>
-                <h2>Datos principales</h2>
-                <p>Estos datos alimentan el analisis de vacantes y el resumen general del perfil.</p>
-            </div>
-        </div>
-        <p class="section-caption">Los campos de esta seccion son la base del perfil y del contexto que consume el analizador.</p>
-        <form class="stack-form" method="post" action="/app/profile/save" hx-post="/app/profile/save" hx-target="#profile-shell" hx-swap="innerHTML">
-            <div class="grid-two">
-                <label><span>Nombre completo</span><input type="text" name="nombre" placeholder="Ej. Jose Martinez" value="{{ profile.nombre if profile else '' }}"></label>
-                <label><span>Titulo profesional</span><input type="text" name="titulo_profesional" placeholder="Ej. Data Analyst | BI | SQL" value="{{ profile.titulo_profesional if profile else '' }}"></label>
-            </div>
-            <div class="grid-two">
-                <label><span>Ciudad</span><input type="text" name="ciudad" placeholder="Ej. Bogota" value="{{ profile.ciudad if profile else '' }}"></label>
-                <label><span>Celular</span><input type="text" name="celular" placeholder="Ej. 3001234567" value="{{ profile.celular if profile else '' }}"></label>
-            </div>
-            <label><span>Direccion</span><input type="text" name="direccion" placeholder="Opcional" value="{{ profile.direccion if profile else '' }}"></label>
-            <div class="grid-two">
-                <label><span>Correo</span><input type="email" name="correo" value="{{ profile.correo if profile else '' }}"></label>
-                <label>
-                    <span>Nivel actual</span>
-                    <select name="nivel_actual">
-                        {% for option in level_options %}
-                            <option value="{{ option }}"{% if profile and profile.nivel_actual == option %} selected{% endif %}>{{ option }}</option>
-                        {% endfor %}
-                    </select>
-                </label>
-            </div>
-            <div class="grid-two">
-                <label><span>LinkedIn</span><input type="url" name="perfil_linkedin" placeholder="https://linkedin.com/in/..." value="{{ profile.perfil_linkedin if profile else '' }}"></label>
-                <label><span>GitHub</span><input type="url" name="perfil_github" placeholder="https://github.com/..." value="{{ profile.perfil_github if profile else '' }}"></label>
-            </div>
-            <div class="grid-three">
-                <label><span>Anios de experiencia</span><input type="number" min="0" name="anos_experiencia" value="{{ profile.anos_experiencia if profile and profile.anos_experiencia is not none else 0 }}"></label>
-                <label><span>Salario minimo</span><input type="number" min="0" name="salario_min" value="{{ profile.salario_min if profile and profile.salario_min is not none else '' }}"></label>
-                <label><span>Salario maximo</span><input type="number" min="0" name="salario_max" value="{{ profile.salario_max if profile and profile.salario_max is not none else '' }}"></label>
-            </div>
-            <div class="grid-two">
-                <label><span>Moneda</span><input type="text" name="moneda" value="{{ profile.moneda if profile else 'COP' }}"></label>
-                <fieldset class="checkbox-group">
-                    <legend>Modalidades aceptadas</legend>
-                    <div class="checkbox-list">
-                        {% for option in modality_options %}
-                            <label class="checkbox-item"><input type="checkbox" name="modalidades_aceptadas" value="{{ option }}"{% if option in selected_modalities %} checked{% endif %}><span>{{ option }}</span></label>
-                        {% endfor %}
-                    </div>
-                </fieldset>
-            </div>
-            <button type="submit">Guardar perfil</button>
-        </form>
-    </section>
+    {% include "profile/_basics.html" %}
 
     <section class="stack-panel">
-        <section class="panel">
-            <div class="section-title">
-                <div>
-                    <h2>Skills</h2>
-                    <p>Manten tus skills clave visibles para el analisis de afinidad.</p>
-                </div>
-            </div>
-            <p class="section-caption">Mantener skills claras y concretas ayuda a que la afinidad con vacantes sea mas fiable.</p>
-            <form class="stack-form compact-form" method="post" action="/app/profile/skills" hx-post="/app/profile/skills" hx-target="#profile-shell" hx-swap="innerHTML">
-                <div class="grid-two">
-                    <label><span>Categoria</span><input type="text" name="categoria" placeholder="Ej. Data, BI, Backend" required></label>
-                    <label><span>Skill</span><input type="text" name="skill" placeholder="Ej. SQL" required></label>
-                </div>
-                <label>
-                    <span>Nivel</span>
-                    <select name="nivel">
-                        {% for option in skill_level_options %}
-                            <option value="{{ option }}">{{ option }}</option>
-                        {% endfor %}
-                    </select>
-                </label>
-                <button type="submit">Agregar skill</button>
-            </form>
-            {% if skills %}
-                <div class="record-list compact-record-list">
-                    {% for item in skills %}
-                        <article class="record-card">
-                            <div class="record-header">
-                                <div>
-                                    <h3>{{ item.skill }}</h3>
-                                    <p>{{ item.categoria }} · {{ item.nivel }}</p>
-                                </div>
-                                <form method="post" action="/app/profile/skills/{{ item.id }}/delete" hx-post="/app/profile/skills/{{ item.id }}/delete" hx-target="#profile-shell" hx-swap="innerHTML">
-                                    <button type="submit" class="danger-action">Eliminar</button>
-                                </form>
-                            </div>
-                        </article>
-                    {% endfor %}
-                </div>
-            {% else %}
-                <div class="empty-panel"><h3>Sin skills</h3><p>Agrega tus skills principales para que el analisis de vacantes sea mas preciso.</p></div>
-            {% endif %}
-        </section>
-
-        <section class="panel helper-panel">
-            <h2>Estado del perfil</h2>
-            <ul class="flow-list">
-                <li>Datos principales: {% if profile %}configurados{% else %}pendientes{% endif %}</li>
-                <li>Skills registradas: {{ skills|length }}</li>
-                <li>Experiencias registradas: {{ experiences|length }}</li>
-                <li>Proyectos registrados: {{ projects|length }}</li>
-                <li>Formacion registrada: {{ education|length + courses|length + certifications|length }}</li>
-            </ul>
-            <div class="helper-box soft">
-                <h3>Estado de migracion</h3>
-                <p>Mi Perfil ya puede mantenerse desde la web para el flujo principal del producto.</p>
-            </div>
-        </section>
+        {% include "profile/_skills.html" %}
+        {% include "profile/_profile_status.html" %}
     </section>
 </section>
 
diff --git a/app/interfaces/web/templates/profile/_skills.html b/app/interfaces/web/templates/profile/_skills.html
new file mode 100644
index 0000000..71b2e3d
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_skills.html
@@ -0,0 +1,43 @@
+<section class="panel">
+    <div class="section-title">
+        <div>
+            <h2>Skills</h2>
+            <p>Manten tus skills clave visibles para el analisis de afinidad.</p>
+        </div>
+    </div>
+    <p class="section-caption">Mantener skills claras y concretas ayuda a que la afinidad con vacantes sea mas fiable.</p>
+    <form class="stack-form compact-form" method="post" action="/app/profile/skills" hx-post="/app/profile/skills" hx-target="#profile-shell" hx-swap="innerHTML">
+        <div class="grid-two">
+            <label><span>Categoria</span><input type="text" name="categoria" placeholder="Ej. Data, BI, Backend" required></label>
+            <label><span>Skill</span><input type="text" name="skill" placeholder="Ej. SQL" required></label>
+        </div>
+        <label>
+            <span>Nivel</span>
+            <select name="nivel">
+                {% for option in skill_level_options %}
+                    <option value="{{ option }}">{{ option }}</option>
+                {% endfor %}
+            </select>
+        </label>
+        <button type="submit">Agregar skill</button>
+    </form>
+    {% if skills %}
+        <div class="record-list compact-record-list">
+            {% for item in skills %}
+                <article class="record-card">
+                    <div class="record-header">
+                        <div>
+                            <h3>{{ item.skill }}</h3>
+                            <p>{{ item.categoria }} · {{ item.nivel }}</p>
+                        </div>
+                        <form method="post" action="/app/profile/skills/{{ item.id }}/delete" hx-post="/app/profile/skills/{{ item.id }}/delete" hx-target="#profile-shell" hx-swap="innerHTML">
+                            <button type="submit" class="danger-action">Eliminar</button>
+                        </form>
+                    </div>
+                </article>
+            {% endfor %}
+        </div>
+    {% else %}
+        <div class="empty-panel"><h3>Sin skills</h3><p>Agrega tus skills principales para que el analisis de vacantes sea mas preciso.</p></div>
+    {% endif %}
+</section>
diff --git a/tests/test_web_profile.py b/tests/test_web_profile.py
index 72ad31c..8655d3a 100644
--- a/tests/test_web_profile.py
+++ b/tests/test_web_profile.py
@@ -38,6 +38,29 @@ def test_profile_index_renders_profile_shell(self, mock_repository, _mock_nav, _
         self.assertIn("Jose", response.text)
         self.assertIn("SQL", response.text)
 
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_profile_shell_partial_renders_profile_sections(self, mock_repository):
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = [{"id": 1, "categoria": "Data", "skill": "SQL", "nivel": "Avanzado"}]
+        mock_repository.get_experiences.return_value = []
+        mock_repository.get_projects.return_value = []
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.get("/app/profile/shell?flash=skill_added")
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn("La skill fue agregada al perfil.", response.text)
+        self.assertIn("Datos principales", response.text)
+        self.assertIn("Estado del perfil", response.text)
+        self.assertIn("Vista CV", response.text)
+
     @patch("app.interfaces.web.routes.profile.profile_repository")
     def test_save_profile_hx_returns_profile_shell(self, mock_repository):
         mock_repository.save_profile.return_value = {"success": True, "id": 1}

From 7ebe3eec3798da7b1e633456c8ab7ecf99e45879 Mon Sep 17 00:00:00 2001
From: JoseMelNet <josemelnet@gmail.com>
Date: Sat, 23 May 2026 14:57:01 -0500
Subject: [PATCH 07/13] Isolate profile skills HTMX section

---
 app/interfaces/web/routes/profile.py          | 23 +++++-
 .../web/templates/profile/_shell.html         |  9 +--
 .../web/templates/profile/_skills.html        |  4 +-
 .../templates/profile/_skills_fragment.html   |  5 ++
 .../web/templates/profile/_skills_shell.html  |  9 +++
 tests/test_web_profile.py                     | 80 +++++++++++++++++++
 6 files changed, 121 insertions(+), 9 deletions(-)
 create mode 100644 app/interfaces/web/templates/profile/_skills_fragment.html
 create mode 100644 app/interfaces/web/templates/profile/_skills_shell.html

diff --git a/app/interfaces/web/routes/profile.py b/app/interfaces/web/routes/profile.py
index 413c2f0..4df0d71 100644
--- a/app/interfaces/web/routes/profile.py
+++ b/app/interfaces/web/routes/profile.py
@@ -209,6 +209,20 @@ def _render_profile_shell(request: Request, flash: str):
     )
 
 
+def _render_profile_skills_shell(request: Request, flash: str = "", include_oob: bool = False):
+    context = _build_profile_context(flash=flash)
+    template_name = "profile/_skills_fragment.html" if include_oob else "profile/_skills_shell.html"
+    return templates.TemplateResponse(
+        request=request,
+        name=template_name,
+        context={
+            "request": request,
+            **context,
+            "skills_flash_message": context["flash_message"] if flash else None,
+        },
+    )
+
+
 @router.get("/app/profile")
 def profile_index(request: Request, flash: str | None = None):
     context = _build_profile_context(flash=flash)
@@ -230,6 +244,11 @@ def profile_shell_partial(request: Request, flash: str | None = None):
     return _render_profile_shell(request, flash or "")
 
 
+@router.get("/app/profile/skills", response_class=HTMLResponse)
+def profile_skills_partial(request: Request, flash: str | None = None):
+    return _render_profile_skills_shell(request, flash or "")
+
+
 @router.post("/app/profile/save")
 def save_profile(
     request: Request,
@@ -287,7 +306,7 @@ def add_skill(
         flash = "skill_added" if result["success"] else "profile_error"
 
     if request.headers.get("HX-Request") == "true":
-        return _render_profile_shell(request, flash)
+        return _render_profile_skills_shell(request, flash, include_oob=True)
     return RedirectResponse(url=f"/app/profile?flash={flash}", status_code=303)
 
 
@@ -296,7 +315,7 @@ def delete_skill(request: Request, skill_id: int):
     result = profile_repository.delete_skill(skill_id)
     flash = "skill_deleted" if result["success"] else "profile_error"
     if request.headers.get("HX-Request") == "true":
-        return _render_profile_shell(request, flash)
+        return _render_profile_skills_shell(request, flash, include_oob=True)
     return RedirectResponse(url=f"/app/profile?flash={flash}", status_code=303)
 
 
diff --git a/app/interfaces/web/templates/profile/_shell.html b/app/interfaces/web/templates/profile/_shell.html
index ccba615..af15db9 100644
--- a/app/interfaces/web/templates/profile/_shell.html
+++ b/app/interfaces/web/templates/profile/_shell.html
@@ -4,15 +4,14 @@
     {% include "components/_flash.html" %}
 {% endif %}
 
-{% include "profile/_overview.html" %}
+<div id="profile-overview">
+    {% include "profile/_overview.html" %}
+</div>
 
 <section class="layout-two-columns profile-layout">
     {% include "profile/_basics.html" %}
 
-    <section class="stack-panel">
-        {% include "profile/_skills.html" %}
-        {% include "profile/_profile_status.html" %}
-    </section>
+    {% include "profile/_skills_shell.html" %}
 </section>
 
 <section class="profile-sections-grid">
diff --git a/app/interfaces/web/templates/profile/_skills.html b/app/interfaces/web/templates/profile/_skills.html
index 71b2e3d..880bba2 100644
--- a/app/interfaces/web/templates/profile/_skills.html
+++ b/app/interfaces/web/templates/profile/_skills.html
@@ -6,7 +6,7 @@ <h2>Skills</h2>
         </div>
     </div>
     <p class="section-caption">Mantener skills claras y concretas ayuda a que la afinidad con vacantes sea mas fiable.</p>
-    <form class="stack-form compact-form" method="post" action="/app/profile/skills" hx-post="/app/profile/skills" hx-target="#profile-shell" hx-swap="innerHTML">
+    <form class="stack-form compact-form" method="post" action="/app/profile/skills" hx-post="/app/profile/skills" hx-target="#profile-skills-shell" hx-swap="outerHTML">
         <div class="grid-two">
             <label><span>Categoria</span><input type="text" name="categoria" placeholder="Ej. Data, BI, Backend" required></label>
             <label><span>Skill</span><input type="text" name="skill" placeholder="Ej. SQL" required></label>
@@ -30,7 +30,7 @@ <h2>Skills</h2>
                             <h3>{{ item.skill }}</h3>
                             <p>{{ item.categoria }} · {{ item.nivel }}</p>
                         </div>
-                        <form method="post" action="/app/profile/skills/{{ item.id }}/delete" hx-post="/app/profile/skills/{{ item.id }}/delete" hx-target="#profile-shell" hx-swap="innerHTML">
+                        <form method="post" action="/app/profile/skills/{{ item.id }}/delete" hx-post="/app/profile/skills/{{ item.id }}/delete" hx-target="#profile-skills-shell" hx-swap="outerHTML">
                             <button type="submit" class="danger-action">Eliminar</button>
                         </form>
                     </div>
diff --git a/app/interfaces/web/templates/profile/_skills_fragment.html b/app/interfaces/web/templates/profile/_skills_fragment.html
new file mode 100644
index 0000000..4860978
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_skills_fragment.html
@@ -0,0 +1,5 @@
+<div id="profile-overview" hx-swap-oob="innerHTML">
+    {% include "profile/_overview.html" %}
+</div>
+
+{% include "profile/_skills_shell.html" %}
diff --git a/app/interfaces/web/templates/profile/_skills_shell.html b/app/interfaces/web/templates/profile/_skills_shell.html
new file mode 100644
index 0000000..6622a34
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_skills_shell.html
@@ -0,0 +1,9 @@
+<section id="profile-skills-shell" class="stack-panel">
+    {% if skills_flash_message %}
+        {% set flash_tone = skills_flash_message[0] %}
+        {% set flash_text = skills_flash_message[1] %}
+        {% include "components/_flash.html" %}
+    {% endif %}
+    {% include "profile/_skills.html" %}
+    {% include "profile/_profile_status.html" %}
+</section>
diff --git a/tests/test_web_profile.py b/tests/test_web_profile.py
index 8655d3a..f8ad0f3 100644
--- a/tests/test_web_profile.py
+++ b/tests/test_web_profile.py
@@ -60,6 +60,30 @@ def test_profile_shell_partial_renders_profile_sections(self, mock_repository):
         self.assertIn("Datos principales", response.text)
         self.assertIn("Estado del perfil", response.text)
         self.assertIn("Vista CV", response.text)
+        self.assertIn('id="profile-skills-shell"', response.text)
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_profile_skills_partial_renders_isolated_skills_shell(self, mock_repository):
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = [{"id": 1, "categoria": "Data", "skill": "SQL", "nivel": "Avanzado"}]
+        mock_repository.get_experiences.return_value = []
+        mock_repository.get_projects.return_value = []
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.get("/app/profile/skills")
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('id="profile-skills-shell"', response.text)
+        self.assertIn("SQL", response.text)
+        self.assertIn("Estado del perfil", response.text)
+        self.assertNotIn('action="/app/profile/save"', response.text)
 
     @patch("app.interfaces.web.routes.profile.profile_repository")
     def test_save_profile_hx_returns_profile_shell(self, mock_repository):
@@ -97,3 +121,59 @@ def test_save_profile_hx_returns_profile_shell(self, mock_repository):
         self.assertIn("Los datos principales del perfil fueron guardados.", response.text)
         payload = mock_repository.save_profile.call_args.args[0]
         self.assertEqual(payload["modalidades_aceptadas"], "Remoto,Hibrido")
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_add_skill_hx_returns_isolated_skills_fragment(self, mock_repository):
+        mock_repository.add_skill.return_value = {"success": True}
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = [{"id": 2, "categoria": "Data", "skill": "Python", "nivel": "Avanzado"}]
+        mock_repository.get_experiences.return_value = []
+        mock_repository.get_projects.return_value = []
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.post(
+            "/app/profile/skills",
+            data={"categoria": "Data", "skill": "Python", "nivel": "Avanzado"},
+            headers={"HX-Request": "true"},
+        )
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('id="profile-skills-shell"', response.text)
+        self.assertIn('hx-swap-oob="innerHTML"', response.text)
+        self.assertIn("La skill fue agregada al perfil.", response.text)
+        self.assertIn("Python", response.text)
+        self.assertNotIn('action="/app/profile/save"', response.text)
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_delete_skill_hx_returns_isolated_skills_fragment(self, mock_repository):
+        mock_repository.delete_skill.return_value = {"success": True}
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = []
+        mock_repository.get_experiences.return_value = []
+        mock_repository.get_projects.return_value = []
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.post(
+            "/app/profile/skills/2/delete",
+            headers={"HX-Request": "true"},
+        )
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('id="profile-skills-shell"', response.text)
+        self.assertIn("La skill fue eliminada.", response.text)
+        self.assertIn("Sin skills", response.text)
+        self.assertNotIn('action="/app/profile/save"', response.text)

From 028977e6dc5cc899bdf836c56f9e29ccf5f3d73b Mon Sep 17 00:00:00 2001
From: JoseMelNet <josemelnet@gmail.com>
Date: Sat, 23 May 2026 15:06:52 -0500
Subject: [PATCH 08/13] Isolate profile basics HTMX section

---
 app/interfaces/web/routes/profile.py          | 21 +++++++++++-
 .../web/templates/profile/_basics.html        |  9 +++--
 .../templates/profile/_basics_fragment.html   |  7 ++++
 .../web/templates/profile/_cv_preview.html    | 16 +++++++++
 .../web/templates/profile/_shell.html         | 17 +---------
 .../web/templates/profile/_skills_shell.html  |  2 +-
 tests/test_web_profile.py                     | 33 ++++++++++++++++++-
 7 files changed, 84 insertions(+), 21 deletions(-)
 create mode 100644 app/interfaces/web/templates/profile/_basics_fragment.html
 create mode 100644 app/interfaces/web/templates/profile/_cv_preview.html

diff --git a/app/interfaces/web/routes/profile.py b/app/interfaces/web/routes/profile.py
index 4df0d71..6ca3d1d 100644
--- a/app/interfaces/web/routes/profile.py
+++ b/app/interfaces/web/routes/profile.py
@@ -223,6 +223,20 @@ def _render_profile_skills_shell(request: Request, flash: str = "", include_oob:
     )
 
 
+def _render_profile_basics_shell(request: Request, flash: str = "", include_oob: bool = False):
+    context = _build_profile_context(flash=flash)
+    template_name = "profile/_basics_fragment.html" if include_oob else "profile/_basics.html"
+    return templates.TemplateResponse(
+        request=request,
+        name=template_name,
+        context={
+            "request": request,
+            **context,
+            "basics_flash_message": context["flash_message"] if flash else None,
+        },
+    )
+
+
 @router.get("/app/profile")
 def profile_index(request: Request, flash: str | None = None):
     context = _build_profile_context(flash=flash)
@@ -249,6 +263,11 @@ def profile_skills_partial(request: Request, flash: str | None = None):
     return _render_profile_skills_shell(request, flash or "")
 
 
+@router.get("/app/profile/basics", response_class=HTMLResponse)
+def profile_basics_partial(request: Request, flash: str | None = None):
+    return _render_profile_basics_shell(request, flash or "")
+
+
 @router.post("/app/profile/save")
 def save_profile(
     request: Request,
@@ -287,7 +306,7 @@ def save_profile(
     )
     flash = "profile_saved" if result["success"] else "profile_error"
     if request.headers.get("HX-Request") == "true":
-        return _render_profile_shell(request, flash)
+        return _render_profile_basics_shell(request, flash, include_oob=True)
     return RedirectResponse(url=f"/app/profile?flash={flash}", status_code=303)
 
 
diff --git a/app/interfaces/web/templates/profile/_basics.html b/app/interfaces/web/templates/profile/_basics.html
index f4a408a..4e50e27 100644
--- a/app/interfaces/web/templates/profile/_basics.html
+++ b/app/interfaces/web/templates/profile/_basics.html
@@ -1,4 +1,9 @@
-<section class="panel">
+<section id="profile-basics-shell" class="panel">
+    {% if basics_flash_message %}
+        {% set flash_tone = basics_flash_message[0] %}
+        {% set flash_text = basics_flash_message[1] %}
+        {% include "components/_flash.html" %}
+    {% endif %}
     <div class="section-title">
         <div>
             <h2>Datos principales</h2>
@@ -6,7 +11,7 @@ <h2>Datos principales</h2>
         </div>
     </div>
     <p class="section-caption">Los campos de esta seccion son la base del perfil y del contexto que consume el analizador.</p>
-    <form class="stack-form" method="post" action="/app/profile/save" hx-post="/app/profile/save" hx-target="#profile-shell" hx-swap="innerHTML">
+    <form class="stack-form" method="post" action="/app/profile/save" hx-post="/app/profile/save" hx-target="#profile-basics-shell" hx-swap="outerHTML">
         <div class="grid-two">
             <label><span>Nombre completo</span><input type="text" name="nombre" placeholder="Ej. Jose Martinez" value="{{ profile.nombre if profile else '' }}"></label>
             <label><span>Titulo profesional</span><input type="text" name="titulo_profesional" placeholder="Ej. Data Analyst | BI | SQL" value="{{ profile.titulo_profesional if profile else '' }}"></label>
diff --git a/app/interfaces/web/templates/profile/_basics_fragment.html b/app/interfaces/web/templates/profile/_basics_fragment.html
new file mode 100644
index 0000000..cb13dcc
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_basics_fragment.html
@@ -0,0 +1,7 @@
+{% set skills_shell_oob = true %}
+{% include "profile/_skills_shell.html" %}
+
+{% set cv_preview_oob = true %}
+{% include "profile/_cv_preview.html" %}
+
+{% include "profile/_basics.html" %}
diff --git a/app/interfaces/web/templates/profile/_cv_preview.html b/app/interfaces/web/templates/profile/_cv_preview.html
new file mode 100644
index 0000000..7cb7033
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_cv_preview.html
@@ -0,0 +1,16 @@
+<section id="profile-cv-preview" class="panel cv-panel"{% if cv_preview_oob %} hx-swap-oob="outerHTML"{% endif %}>
+    <div class="section-title">
+        <div>
+            <h2>Vista CV</h2>
+            <p>Vista de solo lectura del perfil consolidado para revisar como se presentaria tu hoja de vida.</p>
+        </div>
+    </div>
+    {% if cv_preview_html %}
+        {{ cv_preview_html | safe }}
+    {% else %}
+        <div class="empty-panel">
+            <h3>Sin vista CV disponible</h3>
+            <p>Completa los datos principales del perfil para generar esta vista.</p>
+        </div>
+    {% endif %}
+</section>
diff --git a/app/interfaces/web/templates/profile/_shell.html b/app/interfaces/web/templates/profile/_shell.html
index af15db9..f2e9113 100644
--- a/app/interfaces/web/templates/profile/_shell.html
+++ b/app/interfaces/web/templates/profile/_shell.html
@@ -270,21 +270,6 @@
     </section>
 </section>
 
-<section class="panel cv-panel">
-    <div class="section-title">
-        <div>
-            <h2>Vista CV</h2>
-            <p>Vista de solo lectura del perfil consolidado para revisar como se presentaria tu hoja de vida.</p>
-        </div>
-    </div>
-    {% if cv_preview_html %}
-        {{ cv_preview_html | safe }}
-    {% else %}
-        <div class="empty-panel">
-            <h3>Sin vista CV disponible</h3>
-            <p>Completa los datos principales del perfil para generar esta vista.</p>
-        </div>
-    {% endif %}
-</section>
+{% include "profile/_cv_preview.html" %}
 
 
diff --git a/app/interfaces/web/templates/profile/_skills_shell.html b/app/interfaces/web/templates/profile/_skills_shell.html
index 6622a34..134887a 100644
--- a/app/interfaces/web/templates/profile/_skills_shell.html
+++ b/app/interfaces/web/templates/profile/_skills_shell.html
@@ -1,4 +1,4 @@
-<section id="profile-skills-shell" class="stack-panel">
+<section id="profile-skills-shell" class="stack-panel"{% if skills_shell_oob %} hx-swap-oob="outerHTML"{% endif %}>
     {% if skills_flash_message %}
         {% set flash_tone = skills_flash_message[0] %}
         {% set flash_text = skills_flash_message[1] %}
diff --git a/tests/test_web_profile.py b/tests/test_web_profile.py
index f8ad0f3..7f08b32 100644
--- a/tests/test_web_profile.py
+++ b/tests/test_web_profile.py
@@ -86,7 +86,33 @@ def test_profile_skills_partial_renders_isolated_skills_shell(self, mock_reposit
         self.assertNotIn('action="/app/profile/save"', response.text)
 
     @patch("app.interfaces.web.routes.profile.profile_repository")
-    def test_save_profile_hx_returns_profile_shell(self, mock_repository):
+    def test_profile_basics_partial_renders_isolated_basics_shell(self, mock_repository):
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+            "nivel_actual": "Mid",
+            "anos_experiencia": 3,
+            "moneda": "COP",
+        }
+        mock_repository.get_skills.return_value = []
+        mock_repository.get_experiences.return_value = []
+        mock_repository.get_projects.return_value = []
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.get("/app/profile/basics")
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('id="profile-basics-shell"', response.text)
+        self.assertIn("Datos principales", response.text)
+        self.assertIn('action="/app/profile/save"', response.text)
+        self.assertNotIn('id="profile-skills-shell"', response.text)
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_save_profile_hx_returns_isolated_basics_fragment(self, mock_repository):
         mock_repository.save_profile.return_value = {"success": True, "id": 1}
         mock_repository.get_active_profile.return_value = {
             "id": 1,
@@ -119,6 +145,11 @@ def test_save_profile_hx_returns_profile_shell(self, mock_repository):
 
         self.assertEqual(response.status_code, 200)
         self.assertIn("Los datos principales del perfil fueron guardados.", response.text)
+        self.assertIn('id="profile-basics-shell"', response.text)
+        self.assertIn('id="profile-skills-shell"', response.text)
+        self.assertIn('id="profile-cv-preview"', response.text)
+        self.assertIn('hx-swap-oob="outerHTML"', response.text)
+        self.assertNotIn('action="/app/profile/experiences"', response.text)
         payload = mock_repository.save_profile.call_args.args[0]
         self.assertEqual(payload["modalidades_aceptadas"], "Remoto,Hibrido")
 

From 3542aeab1ceedc240ff31e20ebb340c6e803ef2c Mon Sep 17 00:00:00 2001
From: JoseMelNet <josemelnet@gmail.com>
Date: Sat, 23 May 2026 15:15:18 -0500
Subject: [PATCH 09/13] Extract profile formation partials

---
 .../templates/profile/_certifications.html    |  38 ++++++
 .../web/templates/profile/_courses.html       |  38 ++++++
 .../web/templates/profile/_education.html     |  41 ++++++
 .../web/templates/profile/_shell.html         | 121 +-----------------
 tests/test_web_profile.py                     |  25 ++++
 5 files changed, 145 insertions(+), 118 deletions(-)
 create mode 100644 app/interfaces/web/templates/profile/_certifications.html
 create mode 100644 app/interfaces/web/templates/profile/_courses.html
 create mode 100644 app/interfaces/web/templates/profile/_education.html

diff --git a/app/interfaces/web/templates/profile/_certifications.html b/app/interfaces/web/templates/profile/_certifications.html
new file mode 100644
index 0000000..f06a63f
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_certifications.html
@@ -0,0 +1,38 @@
+<section class="panel">
+    <div class="section-title"><div><h2>Certificaciones</h2><p>Credenciales y badges relevantes para tus postulaciones.</p></div><span class="soft-badge">{{ certifications|length }} registros</span></div>
+    <details class="section-disclosure" {% if not certifications %}open{% endif %}>
+        <summary>Agregar certificacion</summary>
+        <form class="stack-form compact-form section-form" method="post" action="/app/profile/certifications" hx-post="/app/profile/certifications" hx-target="#profile-shell" hx-swap="innerHTML">
+        <div class="grid-two">
+            <label><span>Titulo</span><input type="text" name="titulo" placeholder="Ej. AWS Certified Data Analytics" required></label>
+            <label><span>Institucion</span><input type="text" name="institucion" placeholder="Ej. Amazon Web Services" required></label>
+        </div>
+        <div class="grid-three">
+            <label><span>Fecha obtencion</span><input type="date" name="fecha_obtencion" required></label>
+            <label><span>Fecha vencimiento</span><input type="date" name="fecha_vencimiento"></label>
+            <label><span>Estado</span><select name="status">{% for option in certification_status_options %}<option value="{{ option }}">{{ option }}</option>{% endfor %}</select></label>
+        </div>
+        <label><span>URL certificado</span><input type="url" name="url_certificado"></label>
+        <button type="submit">Agregar certificacion</button>
+        </form>
+    </details>
+    {% if certifications %}
+        <div class="record-list compact-record-list">
+            {% for item in certifications %}
+                <article class="record-card">
+                    <div class="record-header">
+                        <div><h3>{{ item.titulo }}</h3><p>{{ item.institucion }}</p></div>
+                        <span class="soft-badge">{{ item.status }}</span>
+                    </div>
+                    <div class="detail-actions">
+                        <form method="post" action="/app/profile/certifications/{{ item.id }}/delete" hx-post="/app/profile/certifications/{{ item.id }}/delete" hx-target="#profile-shell" hx-swap="innerHTML">
+                            <button type="submit" class="danger-action">Eliminar</button>
+                        </form>
+                    </div>
+                </article>
+            {% endfor %}
+        </div>
+    {% else %}
+        <div class="empty-panel"><h3>Sin certificaciones registradas</h3><p>No hay certificaciones cargadas todavia.</p></div>
+    {% endif %}
+</section>
diff --git a/app/interfaces/web/templates/profile/_courses.html b/app/interfaces/web/templates/profile/_courses.html
new file mode 100644
index 0000000..f026166
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_courses.html
@@ -0,0 +1,38 @@
+<section class="panel">
+    <div class="section-title"><div><h2>Cursos</h2><p>Formacion complementaria para reforzar tu perfil.</p></div><span class="soft-badge">{{ courses|length }} registros</span></div>
+    <details class="section-disclosure" {% if not courses %}open{% endif %}>
+        <summary>Agregar curso</summary>
+        <form class="stack-form compact-form section-form" method="post" action="/app/profile/courses" hx-post="/app/profile/courses" hx-target="#profile-shell" hx-swap="innerHTML">
+        <div class="grid-two">
+            <label><span>Titulo</span><input type="text" name="titulo" placeholder="Ej. SQL para analisis de datos" required></label>
+            <label><span>Institucion</span><input type="text" name="institucion" placeholder="Ej. Coursera" required></label>
+        </div>
+        <div class="grid-three">
+            <label><span>Fecha inicio</span><input type="date" name="fecha_inicio"></label>
+            <label><span>Fecha fin</span><input type="date" name="fecha_fin"></label>
+            <label><span>Estado</span><select name="status">{% for option in course_status_options %}<option value="{{ option }}">{{ option }}</option>{% endfor %}</select></label>
+        </div>
+        <label><span>URL certificado</span><input type="url" name="url_certificado"></label>
+        <button type="submit">Agregar curso</button>
+        </form>
+    </details>
+    {% if courses %}
+        <div class="record-list compact-record-list">
+            {% for item in courses %}
+                <article class="record-card">
+                    <div class="record-header">
+                        <div><h3>{{ item.titulo }}</h3><p>{{ item.institucion }}</p></div>
+                        <span class="soft-badge">{{ item.status }}</span>
+                    </div>
+                    <div class="detail-actions">
+                        <form method="post" action="/app/profile/courses/{{ item.id }}/delete" hx-post="/app/profile/courses/{{ item.id }}/delete" hx-target="#profile-shell" hx-swap="innerHTML">
+                            <button type="submit" class="danger-action">Eliminar</button>
+                        </form>
+                    </div>
+                </article>
+            {% endfor %}
+        </div>
+    {% else %}
+        <div class="empty-panel"><h3>Sin cursos registrados</h3><p>No hay cursos cargados todavia.</p></div>
+    {% endif %}
+</section>
diff --git a/app/interfaces/web/templates/profile/_education.html b/app/interfaces/web/templates/profile/_education.html
new file mode 100644
index 0000000..11a1cbe
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_education.html
@@ -0,0 +1,41 @@
+<section class="panel">
+    <div class="section-title"><div><h2>Educacion</h2><p>Formacion academica principal.</p></div><span class="soft-badge">{{ education|length }} registros</span></div>
+    <details class="section-disclosure" {% if not education %}open{% endif %}>
+        <summary>Agregar educacion</summary>
+        <form class="stack-form compact-form section-form" method="post" action="/app/profile/education" hx-post="/app/profile/education" hx-target="#profile-shell" hx-swap="innerHTML">
+        <div class="grid-two">
+            <label><span>Titulo</span><input type="text" name="titulo" placeholder="Ej. Ingenieria de Sistemas" required></label>
+            <label><span>Institucion</span><input type="text" name="institucion" placeholder="Ej. Universidad Nacional" required></label>
+        </div>
+        <div class="grid-three">
+            <label><span>Nivel</span><select name="nivel">{% for option in education_level_options %}<option value="{{ option }}">{{ option }}</option>{% endfor %}</select></label>
+            <label><span>Ciudad</span><input type="text" name="ciudad"></label>
+            <label><span>Estado</span><select name="status">{% for option in education_status_options %}<option value="{{ option }}">{{ option }}</option>{% endfor %}</select></label>
+        </div>
+        <div class="grid-two">
+            <label><span>Fecha inicio</span><input type="date" name="fecha_inicio" required></label>
+            <label><span>Fecha fin</span><input type="date" name="fecha_fin"></label>
+        </div>
+        <button type="submit">Agregar educacion</button>
+        </form>
+    </details>
+    {% if education %}
+        <div class="record-list compact-record-list">
+            {% for item in education %}
+                <article class="record-card">
+                    <div class="record-header">
+                        <div><h3>{{ item.titulo }}</h3><p>{{ item.institucion }} · {{ item.nivel }}</p></div>
+                        <span class="soft-badge">{{ item.status }}</span>
+                    </div>
+                    <div class="detail-actions">
+                        <form method="post" action="/app/profile/education/{{ item.id }}/delete" hx-post="/app/profile/education/{{ item.id }}/delete" hx-target="#profile-shell" hx-swap="innerHTML">
+                            <button type="submit" class="danger-action">Eliminar</button>
+                        </form>
+                    </div>
+                </article>
+            {% endfor %}
+        </div>
+    {% else %}
+        <div class="empty-panel"><h3>Sin educacion registrada</h3><p>No hay estudios cargados todavia.</p></div>
+    {% endif %}
+</section>
diff --git a/app/interfaces/web/templates/profile/_shell.html b/app/interfaces/web/templates/profile/_shell.html
index f2e9113..daa2b08 100644
--- a/app/interfaces/web/templates/profile/_shell.html
+++ b/app/interfaces/web/templates/profile/_shell.html
@@ -147,127 +147,12 @@
 </section>
 
 <section class="profile-sections-grid">
-    <section class="panel">
-        <div class="section-title"><div><h2>Educacion</h2><p>Formacion academica principal.</p></div><span class="soft-badge">{{ education|length }} registros</span></div>
-        <details class="section-disclosure" {% if not education %}open{% endif %}>
-            <summary>Agregar educacion</summary>
-            <form class="stack-form compact-form section-form" method="post" action="/app/profile/education" hx-post="/app/profile/education" hx-target="#profile-shell" hx-swap="innerHTML">
-            <div class="grid-two">
-                <label><span>Titulo</span><input type="text" name="titulo" placeholder="Ej. Ingenieria de Sistemas" required></label>
-                <label><span>Institucion</span><input type="text" name="institucion" placeholder="Ej. Universidad Nacional" required></label>
-            </div>
-            <div class="grid-three">
-                <label><span>Nivel</span><select name="nivel">{% for option in education_level_options %}<option value="{{ option }}">{{ option }}</option>{% endfor %}</select></label>
-                <label><span>Ciudad</span><input type="text" name="ciudad"></label>
-                <label><span>Estado</span><select name="status">{% for option in education_status_options %}<option value="{{ option }}">{{ option }}</option>{% endfor %}</select></label>
-            </div>
-            <div class="grid-two">
-                <label><span>Fecha inicio</span><input type="date" name="fecha_inicio" required></label>
-                <label><span>Fecha fin</span><input type="date" name="fecha_fin"></label>
-            </div>
-            <button type="submit">Agregar educacion</button>
-            </form>
-        </details>
-        {% if education %}
-            <div class="record-list compact-record-list">
-                {% for item in education %}
-                    <article class="record-card">
-                        <div class="record-header">
-                            <div><h3>{{ item.titulo }}</h3><p>{{ item.institucion }} · {{ item.nivel }}</p></div>
-                            <span class="soft-badge">{{ item.status }}</span>
-                        </div>
-                        <div class="detail-actions">
-                            <form method="post" action="/app/profile/education/{{ item.id }}/delete" hx-post="/app/profile/education/{{ item.id }}/delete" hx-target="#profile-shell" hx-swap="innerHTML">
-                                <button type="submit" class="danger-action">Eliminar</button>
-                            </form>
-                        </div>
-                    </article>
-                {% endfor %}
-            </div>
-        {% else %}
-            <div class="empty-panel"><h3>Sin educacion registrada</h3><p>No hay estudios cargados todavia.</p></div>
-        {% endif %}
-    </section>
-
-    <section class="panel">
-        <div class="section-title"><div><h2>Cursos</h2><p>Formacion complementaria para reforzar tu perfil.</p></div><span class="soft-badge">{{ courses|length }} registros</span></div>
-        <details class="section-disclosure" {% if not courses %}open{% endif %}>
-            <summary>Agregar curso</summary>
-            <form class="stack-form compact-form section-form" method="post" action="/app/profile/courses" hx-post="/app/profile/courses" hx-target="#profile-shell" hx-swap="innerHTML">
-            <div class="grid-two">
-                <label><span>Titulo</span><input type="text" name="titulo" placeholder="Ej. SQL para analisis de datos" required></label>
-                <label><span>Institucion</span><input type="text" name="institucion" placeholder="Ej. Coursera" required></label>
-            </div>
-            <div class="grid-three">
-                <label><span>Fecha inicio</span><input type="date" name="fecha_inicio"></label>
-                <label><span>Fecha fin</span><input type="date" name="fecha_fin"></label>
-                <label><span>Estado</span><select name="status">{% for option in course_status_options %}<option value="{{ option }}">{{ option }}</option>{% endfor %}</select></label>
-            </div>
-            <label><span>URL certificado</span><input type="url" name="url_certificado"></label>
-            <button type="submit">Agregar curso</button>
-            </form>
-        </details>
-        {% if courses %}
-            <div class="record-list compact-record-list">
-                {% for item in courses %}
-                    <article class="record-card">
-                        <div class="record-header">
-                            <div><h3>{{ item.titulo }}</h3><p>{{ item.institucion }}</p></div>
-                            <span class="soft-badge">{{ item.status }}</span>
-                        </div>
-                        <div class="detail-actions">
-                            <form method="post" action="/app/profile/courses/{{ item.id }}/delete" hx-post="/app/profile/courses/{{ item.id }}/delete" hx-target="#profile-shell" hx-swap="innerHTML">
-                                <button type="submit" class="danger-action">Eliminar</button>
-                            </form>
-                        </div>
-                    </article>
-                {% endfor %}
-            </div>
-        {% else %}
-            <div class="empty-panel"><h3>Sin cursos registrados</h3><p>No hay cursos cargados todavia.</p></div>
-        {% endif %}
-    </section>
+    {% include "profile/_education.html" %}
+    {% include "profile/_courses.html" %}
 </section>
 
 <section class="profile-sections-grid">
-    <section class="panel">
-        <div class="section-title"><div><h2>Certificaciones</h2><p>Credenciales y badges relevantes para tus postulaciones.</p></div><span class="soft-badge">{{ certifications|length }} registros</span></div>
-        <details class="section-disclosure" {% if not certifications %}open{% endif %}>
-            <summary>Agregar certificacion</summary>
-            <form class="stack-form compact-form section-form" method="post" action="/app/profile/certifications" hx-post="/app/profile/certifications" hx-target="#profile-shell" hx-swap="innerHTML">
-            <div class="grid-two">
-                <label><span>Titulo</span><input type="text" name="titulo" placeholder="Ej. AWS Certified Data Analytics" required></label>
-                <label><span>Institucion</span><input type="text" name="institucion" placeholder="Ej. Amazon Web Services" required></label>
-            </div>
-            <div class="grid-three">
-                <label><span>Fecha obtencion</span><input type="date" name="fecha_obtencion" required></label>
-                <label><span>Fecha vencimiento</span><input type="date" name="fecha_vencimiento"></label>
-                <label><span>Estado</span><select name="status">{% for option in certification_status_options %}<option value="{{ option }}">{{ option }}</option>{% endfor %}</select></label>
-            </div>
-            <label><span>URL certificado</span><input type="url" name="url_certificado"></label>
-            <button type="submit">Agregar certificacion</button>
-            </form>
-        </details>
-        {% if certifications %}
-            <div class="record-list compact-record-list">
-                {% for item in certifications %}
-                    <article class="record-card">
-                        <div class="record-header">
-                            <div><h3>{{ item.titulo }}</h3><p>{{ item.institucion }}</p></div>
-                            <span class="soft-badge">{{ item.status }}</span>
-                        </div>
-                        <div class="detail-actions">
-                            <form method="post" action="/app/profile/certifications/{{ item.id }}/delete" hx-post="/app/profile/certifications/{{ item.id }}/delete" hx-target="#profile-shell" hx-swap="innerHTML">
-                                <button type="submit" class="danger-action">Eliminar</button>
-                            </form>
-                        </div>
-                    </article>
-                {% endfor %}
-            </div>
-        {% else %}
-            <div class="empty-panel"><h3>Sin certificaciones registradas</h3><p>No hay certificaciones cargadas todavia.</p></div>
-        {% endif %}
-    </section>
+    {% include "profile/_certifications.html" %}
 </section>
 
 {% include "profile/_cv_preview.html" %}
diff --git a/tests/test_web_profile.py b/tests/test_web_profile.py
index 7f08b32..8740f1d 100644
--- a/tests/test_web_profile.py
+++ b/tests/test_web_profile.py
@@ -208,3 +208,28 @@ def test_delete_skill_hx_returns_isolated_skills_fragment(self, mock_repository)
         self.assertIn("La skill fue eliminada.", response.text)
         self.assertIn("Sin skills", response.text)
         self.assertNotIn('action="/app/profile/save"', response.text)
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_profile_shell_partial_keeps_formation_sections(self, mock_repository):
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = []
+        mock_repository.get_experiences.return_value = []
+        mock_repository.get_projects.return_value = []
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.get("/app/profile/shell")
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn("Educacion", response.text)
+        self.assertIn("Cursos", response.text)
+        self.assertIn("Certificaciones", response.text)
+        self.assertIn('action="/app/profile/education"', response.text)
+        self.assertIn('action="/app/profile/courses"', response.text)
+        self.assertIn('action="/app/profile/certifications"', response.text)

From ac78bf5b6fdfa43c29ef794cb99a885ab4ddd023 Mon Sep 17 00:00:00 2001
From: JoseMelNet <josemelnet@gmail.com>
Date: Sat, 23 May 2026 15:25:03 -0500
Subject: [PATCH 10/13] Isolate profile formation HTMX section

---
 app/interfaces/web/routes/profile.py          |  31 ++-
 .../templates/profile/_certifications.html    |   4 +-
 .../web/templates/profile/_courses.html       |   4 +-
 .../web/templates/profile/_education.html     |   4 +-
 .../profile/_formation_fragment.html          |  11 +
 .../templates/profile/_formation_shell.html   |  16 ++
 .../web/templates/profile/_shell.html         |   9 +-
 tests/test_web_profile.py                     | 227 ++++++++++++++++++
 8 files changed, 286 insertions(+), 20 deletions(-)
 create mode 100644 app/interfaces/web/templates/profile/_formation_fragment.html
 create mode 100644 app/interfaces/web/templates/profile/_formation_shell.html

diff --git a/app/interfaces/web/routes/profile.py b/app/interfaces/web/routes/profile.py
index 6ca3d1d..8a51bfd 100644
--- a/app/interfaces/web/routes/profile.py
+++ b/app/interfaces/web/routes/profile.py
@@ -237,6 +237,20 @@ def _render_profile_basics_shell(request: Request, flash: str = "", include_oob:
     )
 
 
+def _render_profile_formation_shell(request: Request, flash: str = "", include_oob: bool = False):
+    context = _build_profile_context(flash=flash)
+    template_name = "profile/_formation_fragment.html" if include_oob else "profile/_formation_shell.html"
+    return templates.TemplateResponse(
+        request=request,
+        name=template_name,
+        context={
+            "request": request,
+            **context,
+            "formation_flash_message": context["flash_message"] if flash else None,
+        },
+    )
+
+
 @router.get("/app/profile")
 def profile_index(request: Request, flash: str | None = None):
     context = _build_profile_context(flash=flash)
@@ -268,6 +282,11 @@ def profile_basics_partial(request: Request, flash: str | None = None):
     return _render_profile_basics_shell(request, flash or "")
 
 
+@router.get("/app/profile/formation", response_class=HTMLResponse)
+def profile_formation_partial(request: Request, flash: str | None = None):
+    return _render_profile_formation_shell(request, flash or "")
+
+
 @router.post("/app/profile/save")
 def save_profile(
     request: Request,
@@ -531,7 +550,7 @@ def add_education(
         )
         flash = "education_saved" if result["success"] else "profile_error"
     if request.headers.get("HX-Request") == "true":
-        return _render_profile_shell(request, flash)
+        return _render_profile_formation_shell(request, flash, include_oob=True)
     return RedirectResponse(url=f"/app/profile?flash={flash}", status_code=303)
 
 
@@ -540,7 +559,7 @@ def delete_education(request: Request, education_id: int):
     result = profile_repository.delete_education(education_id)
     flash = "education_deleted" if result["success"] else "profile_error"
     if request.headers.get("HX-Request") == "true":
-        return _render_profile_shell(request, flash)
+        return _render_profile_formation_shell(request, flash, include_oob=True)
     return RedirectResponse(url=f"/app/profile?flash={flash}", status_code=303)
 
 
@@ -571,7 +590,7 @@ def add_course(
         )
         flash = "course_saved" if result["success"] else "profile_error"
     if request.headers.get("HX-Request") == "true":
-        return _render_profile_shell(request, flash)
+        return _render_profile_formation_shell(request, flash, include_oob=True)
     return RedirectResponse(url=f"/app/profile?flash={flash}", status_code=303)
 
 
@@ -580,7 +599,7 @@ def delete_course(request: Request, course_id: int):
     result = profile_repository.delete_course(course_id)
     flash = "course_deleted" if result["success"] else "profile_error"
     if request.headers.get("HX-Request") == "true":
-        return _render_profile_shell(request, flash)
+        return _render_profile_formation_shell(request, flash, include_oob=True)
     return RedirectResponse(url=f"/app/profile?flash={flash}", status_code=303)
 
 
@@ -611,7 +630,7 @@ def add_certification(
         )
         flash = "certification_saved" if result["success"] else "profile_error"
     if request.headers.get("HX-Request") == "true":
-        return _render_profile_shell(request, flash)
+        return _render_profile_formation_shell(request, flash, include_oob=True)
     return RedirectResponse(url=f"/app/profile?flash={flash}", status_code=303)
 
 
@@ -620,6 +639,6 @@ def delete_certification(request: Request, certification_id: int):
     result = profile_repository.delete_certification(certification_id)
     flash = "certification_deleted" if result["success"] else "profile_error"
     if request.headers.get("HX-Request") == "true":
-        return _render_profile_shell(request, flash)
+        return _render_profile_formation_shell(request, flash, include_oob=True)
     return RedirectResponse(url=f"/app/profile?flash={flash}", status_code=303)
 
diff --git a/app/interfaces/web/templates/profile/_certifications.html b/app/interfaces/web/templates/profile/_certifications.html
index f06a63f..08fc722 100644
--- a/app/interfaces/web/templates/profile/_certifications.html
+++ b/app/interfaces/web/templates/profile/_certifications.html
@@ -2,7 +2,7 @@
     <div class="section-title"><div><h2>Certificaciones</h2><p>Credenciales y badges relevantes para tus postulaciones.</p></div><span class="soft-badge">{{ certifications|length }} registros</span></div>
     <details class="section-disclosure" {% if not certifications %}open{% endif %}>
         <summary>Agregar certificacion</summary>
-        <form class="stack-form compact-form section-form" method="post" action="/app/profile/certifications" hx-post="/app/profile/certifications" hx-target="#profile-shell" hx-swap="innerHTML">
+        <form class="stack-form compact-form section-form" method="post" action="/app/profile/certifications" hx-post="/app/profile/certifications" hx-target="#profile-formation-shell" hx-swap="outerHTML">
         <div class="grid-two">
             <label><span>Titulo</span><input type="text" name="titulo" placeholder="Ej. AWS Certified Data Analytics" required></label>
             <label><span>Institucion</span><input type="text" name="institucion" placeholder="Ej. Amazon Web Services" required></label>
@@ -25,7 +25,7 @@
                         <span class="soft-badge">{{ item.status }}</span>
                     </div>
                     <div class="detail-actions">
-                        <form method="post" action="/app/profile/certifications/{{ item.id }}/delete" hx-post="/app/profile/certifications/{{ item.id }}/delete" hx-target="#profile-shell" hx-swap="innerHTML">
+                        <form method="post" action="/app/profile/certifications/{{ item.id }}/delete" hx-post="/app/profile/certifications/{{ item.id }}/delete" hx-target="#profile-formation-shell" hx-swap="outerHTML">
                             <button type="submit" class="danger-action">Eliminar</button>
                         </form>
                     </div>
diff --git a/app/interfaces/web/templates/profile/_courses.html b/app/interfaces/web/templates/profile/_courses.html
index f026166..9b0030e 100644
--- a/app/interfaces/web/templates/profile/_courses.html
+++ b/app/interfaces/web/templates/profile/_courses.html
@@ -2,7 +2,7 @@
     <div class="section-title"><div><h2>Cursos</h2><p>Formacion complementaria para reforzar tu perfil.</p></div><span class="soft-badge">{{ courses|length }} registros</span></div>
     <details class="section-disclosure" {% if not courses %}open{% endif %}>
         <summary>Agregar curso</summary>
-        <form class="stack-form compact-form section-form" method="post" action="/app/profile/courses" hx-post="/app/profile/courses" hx-target="#profile-shell" hx-swap="innerHTML">
+        <form class="stack-form compact-form section-form" method="post" action="/app/profile/courses" hx-post="/app/profile/courses" hx-target="#profile-formation-shell" hx-swap="outerHTML">
         <div class="grid-two">
             <label><span>Titulo</span><input type="text" name="titulo" placeholder="Ej. SQL para analisis de datos" required></label>
             <label><span>Institucion</span><input type="text" name="institucion" placeholder="Ej. Coursera" required></label>
@@ -25,7 +25,7 @@
                         <span class="soft-badge">{{ item.status }}</span>
                     </div>
                     <div class="detail-actions">
-                        <form method="post" action="/app/profile/courses/{{ item.id }}/delete" hx-post="/app/profile/courses/{{ item.id }}/delete" hx-target="#profile-shell" hx-swap="innerHTML">
+                        <form method="post" action="/app/profile/courses/{{ item.id }}/delete" hx-post="/app/profile/courses/{{ item.id }}/delete" hx-target="#profile-formation-shell" hx-swap="outerHTML">
                             <button type="submit" class="danger-action">Eliminar</button>
                         </form>
                     </div>
diff --git a/app/interfaces/web/templates/profile/_education.html b/app/interfaces/web/templates/profile/_education.html
index 11a1cbe..828c86e 100644
--- a/app/interfaces/web/templates/profile/_education.html
+++ b/app/interfaces/web/templates/profile/_education.html
@@ -2,7 +2,7 @@
     <div class="section-title"><div><h2>Educacion</h2><p>Formacion academica principal.</p></div><span class="soft-badge">{{ education|length }} registros</span></div>
     <details class="section-disclosure" {% if not education %}open{% endif %}>
         <summary>Agregar educacion</summary>
-        <form class="stack-form compact-form section-form" method="post" action="/app/profile/education" hx-post="/app/profile/education" hx-target="#profile-shell" hx-swap="innerHTML">
+        <form class="stack-form compact-form section-form" method="post" action="/app/profile/education" hx-post="/app/profile/education" hx-target="#profile-formation-shell" hx-swap="outerHTML">
         <div class="grid-two">
             <label><span>Titulo</span><input type="text" name="titulo" placeholder="Ej. Ingenieria de Sistemas" required></label>
             <label><span>Institucion</span><input type="text" name="institucion" placeholder="Ej. Universidad Nacional" required></label>
@@ -28,7 +28,7 @@
                         <span class="soft-badge">{{ item.status }}</span>
                     </div>
                     <div class="detail-actions">
-                        <form method="post" action="/app/profile/education/{{ item.id }}/delete" hx-post="/app/profile/education/{{ item.id }}/delete" hx-target="#profile-shell" hx-swap="innerHTML">
+                        <form method="post" action="/app/profile/education/{{ item.id }}/delete" hx-post="/app/profile/education/{{ item.id }}/delete" hx-target="#profile-formation-shell" hx-swap="outerHTML">
                             <button type="submit" class="danger-action">Eliminar</button>
                         </form>
                     </div>
diff --git a/app/interfaces/web/templates/profile/_formation_fragment.html b/app/interfaces/web/templates/profile/_formation_fragment.html
new file mode 100644
index 0000000..1314b26
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_formation_fragment.html
@@ -0,0 +1,11 @@
+<div id="profile-overview" hx-swap-oob="innerHTML">
+    {% include "profile/_overview.html" %}
+</div>
+
+{% set skills_shell_oob = true %}
+{% include "profile/_skills_shell.html" %}
+
+{% set cv_preview_oob = true %}
+{% include "profile/_cv_preview.html" %}
+
+{% include "profile/_formation_shell.html" %}
diff --git a/app/interfaces/web/templates/profile/_formation_shell.html b/app/interfaces/web/templates/profile/_formation_shell.html
new file mode 100644
index 0000000..3a4a353
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_formation_shell.html
@@ -0,0 +1,16 @@
+<section id="profile-formation-shell">
+    {% if formation_flash_message %}
+        {% set flash_tone = formation_flash_message[0] %}
+        {% set flash_text = formation_flash_message[1] %}
+        {% include "components/_flash.html" %}
+    {% endif %}
+
+    <section class="profile-sections-grid">
+        {% include "profile/_education.html" %}
+        {% include "profile/_courses.html" %}
+    </section>
+
+    <section class="profile-sections-grid">
+        {% include "profile/_certifications.html" %}
+    </section>
+</section>
diff --git a/app/interfaces/web/templates/profile/_shell.html b/app/interfaces/web/templates/profile/_shell.html
index daa2b08..63400a1 100644
--- a/app/interfaces/web/templates/profile/_shell.html
+++ b/app/interfaces/web/templates/profile/_shell.html
@@ -146,14 +146,7 @@
     </section>
 </section>
 
-<section class="profile-sections-grid">
-    {% include "profile/_education.html" %}
-    {% include "profile/_courses.html" %}
-</section>
-
-<section class="profile-sections-grid">
-    {% include "profile/_certifications.html" %}
-</section>
+{% include "profile/_formation_shell.html" %}
 
 {% include "profile/_cv_preview.html" %}
 
diff --git a/tests/test_web_profile.py b/tests/test_web_profile.py
index 8740f1d..83995cd 100644
--- a/tests/test_web_profile.py
+++ b/tests/test_web_profile.py
@@ -233,3 +233,230 @@ def test_profile_shell_partial_keeps_formation_sections(self, mock_repository):
         self.assertIn('action="/app/profile/education"', response.text)
         self.assertIn('action="/app/profile/courses"', response.text)
         self.assertIn('action="/app/profile/certifications"', response.text)
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_profile_formation_partial_renders_isolated_formation_shell(self, mock_repository):
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = []
+        mock_repository.get_experiences.return_value = []
+        mock_repository.get_projects.return_value = []
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.get("/app/profile/formation")
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('id="profile-formation-shell"', response.text)
+        self.assertIn("Educacion", response.text)
+        self.assertIn("Cursos", response.text)
+        self.assertIn("Certificaciones", response.text)
+        self.assertNotIn('id="profile-skills-shell"', response.text)
+        self.assertNotIn('id="profile-basics-shell"', response.text)
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_add_education_hx_returns_isolated_formation_fragment(self, mock_repository):
+        mock_repository.add_education.return_value = {"success": True}
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = []
+        mock_repository.get_experiences.return_value = []
+        mock_repository.get_projects.return_value = []
+        mock_repository.get_education.return_value = [
+            {
+                "id": 1,
+                "titulo": "Ingenieria",
+                "institucion": "UN",
+                "nivel": "Pregrado",
+                "status": "Completado",
+                "fecha_inicio": "2020-01-01",
+                "fecha_fin": None,
+            }
+        ]
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.post(
+            "/app/profile/education",
+            data={
+                "titulo": "Ingenieria",
+                "institucion": "UN",
+                "nivel": "Pregrado",
+                "status": "Completado",
+                "fecha_inicio": "2020-01-01",
+            },
+            headers={"HX-Request": "true"},
+        )
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('id="profile-formation-shell"', response.text)
+        self.assertIn("La educacion fue guardada.", response.text)
+        self.assertIn('id="profile-skills-shell"', response.text)
+        self.assertIn('id="profile-cv-preview"', response.text)
+        self.assertIn('hx-swap-oob="outerHTML"', response.text)
+        self.assertNotIn('action="/app/profile/experiences"', response.text)
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_delete_education_hx_returns_isolated_formation_fragment(self, mock_repository):
+        mock_repository.delete_education.return_value = {"success": True}
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = []
+        mock_repository.get_experiences.return_value = []
+        mock_repository.get_projects.return_value = []
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.post(
+            "/app/profile/education/1/delete",
+            headers={"HX-Request": "true"},
+        )
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('id="profile-formation-shell"', response.text)
+        self.assertIn("La educacion fue eliminada.", response.text)
+        self.assertIn("Sin educacion registrada", response.text)
+        self.assertNotIn('action="/app/profile/save"', response.text)
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_add_course_hx_returns_isolated_formation_fragment(self, mock_repository):
+        mock_repository.add_course.return_value = {"success": True}
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = []
+        mock_repository.get_experiences.return_value = []
+        mock_repository.get_projects.return_value = []
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = [{"id": 2, "titulo": "SQL", "institucion": "Coursera", "status": "Completado"}]
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.post(
+            "/app/profile/courses",
+            data={
+                "titulo": "SQL",
+                "institucion": "Coursera",
+                "status": "Completado",
+            },
+            headers={"HX-Request": "true"},
+        )
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('id="profile-formation-shell"', response.text)
+        self.assertIn("El curso fue guardado.", response.text)
+        self.assertIn("SQL", response.text)
+        self.assertIn('id="profile-cv-preview"', response.text)
+        self.assertNotIn('action="/app/profile/save"', response.text)
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_delete_course_hx_returns_isolated_formation_fragment(self, mock_repository):
+        mock_repository.delete_course.return_value = {"success": True}
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = []
+        mock_repository.get_experiences.return_value = []
+        mock_repository.get_projects.return_value = []
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.post(
+            "/app/profile/courses/2/delete",
+            headers={"HX-Request": "true"},
+        )
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('id="profile-formation-shell"', response.text)
+        self.assertIn("El curso fue eliminado.", response.text)
+        self.assertIn("Sin cursos registrados", response.text)
+        self.assertNotIn('action="/app/profile/save"', response.text)
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_add_certification_hx_returns_isolated_formation_fragment(self, mock_repository):
+        mock_repository.add_certification.return_value = {"success": True}
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = []
+        mock_repository.get_experiences.return_value = []
+        mock_repository.get_projects.return_value = []
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = [
+            {
+                "id": 3,
+                "titulo": "AWS",
+                "institucion": "AWS",
+                "status": "Vigente",
+                "fecha_obtencion": "2024-01-01",
+            }
+        ]
+
+        response = self.client.post(
+            "/app/profile/certifications",
+            data={
+                "titulo": "AWS",
+                "institucion": "AWS",
+                "status": "Vigente",
+                "fecha_obtencion": "2024-01-01",
+            },
+            headers={"HX-Request": "true"},
+        )
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('id="profile-formation-shell"', response.text)
+        self.assertIn("La certificacion fue guardada.", response.text)
+        self.assertIn("AWS", response.text)
+        self.assertIn('id="profile-cv-preview"', response.text)
+        self.assertNotIn('action="/app/profile/save"', response.text)
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_delete_certification_hx_returns_isolated_formation_fragment(self, mock_repository):
+        mock_repository.delete_certification.return_value = {"success": True}
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = []
+        mock_repository.get_experiences.return_value = []
+        mock_repository.get_projects.return_value = []
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.post(
+            "/app/profile/certifications/3/delete",
+            headers={"HX-Request": "true"},
+        )
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('id="profile-formation-shell"', response.text)
+        self.assertIn("La certificacion fue eliminada.", response.text)
+        self.assertIn("Sin certificaciones registradas", response.text)
+        self.assertNotIn('action="/app/profile/save"', response.text)

From da65e15363d2dd7600a4b322f7ba3287731ae16c Mon Sep 17 00:00:00 2001
From: JoseMelNet <josemelnet@gmail.com>
Date: Sat, 23 May 2026 15:46:29 -0500
Subject: [PATCH 11/13] Extract profile experience and project partials

---
 .../templates/profile/_experience_record.html |  31 +++++
 .../web/templates/profile/_experiences.html   |  33 +++++
 .../templates/profile/_project_record.html    |  32 +++++
 .../web/templates/profile/_projects.html      |  34 +++++
 .../web/templates/profile/_shell.html         | 130 +-----------------
 tests/test_web_profile.py                     |  56 ++++++++
 6 files changed, 188 insertions(+), 128 deletions(-)
 create mode 100644 app/interfaces/web/templates/profile/_experience_record.html
 create mode 100644 app/interfaces/web/templates/profile/_experiences.html
 create mode 100644 app/interfaces/web/templates/profile/_project_record.html
 create mode 100644 app/interfaces/web/templates/profile/_projects.html

diff --git a/app/interfaces/web/templates/profile/_experience_record.html b/app/interfaces/web/templates/profile/_experience_record.html
new file mode 100644
index 0000000..e21eb02
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_experience_record.html
@@ -0,0 +1,31 @@
+<details class="record-card record-disclosure">
+    <summary class="record-summary">
+        <div class="record-header">
+            <div><h3>{{ item.cargo }} · {{ item.empresa }}</h3><p>{{ item.ciudad or '-' }}</p></div>
+            <span class="soft-badge">{{ item.fecha_inicio.strftime("%m/%Y") if item.fecha_inicio else "-" }} - {% if item.es_trabajo_actual %}Actual{% elif item.fecha_fin %}{{ item.fecha_fin.strftime("%m/%Y") }}{% else %}-{% endif %}</span>
+        </div>
+    </summary>
+    <div class="disclosure-body">
+        <form class="stack-form compact-form" method="post" action="/app/profile/experiences/{{ item.id }}/update" hx-post="/app/profile/experiences/{{ item.id }}/update" hx-target="#profile-shell" hx-swap="innerHTML">
+            <div class="grid-two">
+                <label><span>Cargo</span><input type="text" name="cargo" value="{{ item.cargo }}" required></label>
+                <label><span>Empresa</span><input type="text" name="empresa" value="{{ item.empresa }}" required></label>
+            </div>
+            <div class="grid-two">
+                <label><span>Ciudad</span><input type="text" name="ciudad" value="{{ item.ciudad or '' }}"></label>
+                <label><span>Descripcion empresa</span><input type="text" name="descripcion_empresa" value="{{ item.descripcion_empresa or '' }}"></label>
+            </div>
+            <div class="grid-three">
+                <label><span>Fecha inicio</span><input type="date" name="fecha_inicio" value="{{ item.fecha_inicio.isoformat() if item.fecha_inicio else '' }}" required></label>
+                <label><span>Fecha fin</span><input type="date" name="fecha_fin" value="{{ item.fecha_fin.isoformat() if item.fecha_fin else '' }}"></label>
+                <label class="checkbox-inline"><input type="checkbox" name="es_trabajo_actual" value="true"{% if item.es_trabajo_actual %} checked{% endif %}><span>Trabajo actual</span></label>
+            </div>
+            <label><span>Funciones</span><textarea name="funciones" rows="4">{{ item.funciones or '' }}</textarea></label>
+            <label><span>Logros</span><textarea name="logros" rows="4">{{ item.logros or '' }}</textarea></label>
+            <div class="detail-actions"><button type="submit">Guardar cambios</button></div>
+        </form>
+        <form method="post" action="/app/profile/experiences/{{ item.id }}/delete" hx-post="/app/profile/experiences/{{ item.id }}/delete" hx-target="#profile-shell" hx-swap="innerHTML">
+            <button type="submit" class="danger-action">Eliminar</button>
+        </form>
+    </div>
+</details>
diff --git a/app/interfaces/web/templates/profile/_experiences.html b/app/interfaces/web/templates/profile/_experiences.html
new file mode 100644
index 0000000..b8c44ba
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_experiences.html
@@ -0,0 +1,33 @@
+<section class="panel">
+    <div class="section-title"><div><h2>Experiencia</h2><p>Registra y actualiza tu trayectoria laboral actual.</p></div><span class="soft-badge">{{ experiences|length }} registradas</span></div>
+    <details class="section-disclosure" {% if not experiences %}open{% endif %}>
+        <summary>Agregar experiencia</summary>
+        <form class="stack-form compact-form section-form" method="post" action="/app/profile/experiences" hx-post="/app/profile/experiences" hx-target="#profile-shell" hx-swap="innerHTML">
+        <div class="grid-two">
+            <label><span>Cargo</span><input type="text" name="cargo" placeholder="Ej. Data Analyst" required></label>
+            <label><span>Empresa</span><input type="text" name="empresa" placeholder="Ej. Bancolombia" required></label>
+        </div>
+        <div class="grid-two">
+            <label><span>Ciudad</span><input type="text" name="ciudad" placeholder="Ej. Medellin"></label>
+            <label><span>Descripcion empresa</span><input type="text" name="descripcion_empresa" placeholder="Ej. Fintech, 500+ empleados"></label>
+        </div>
+        <div class="grid-three">
+            <label><span>Fecha inicio</span><input type="date" name="fecha_inicio" required></label>
+            <label><span>Fecha fin</span><input type="date" name="fecha_fin"></label>
+            <label class="checkbox-inline"><input type="checkbox" name="es_trabajo_actual" value="true"><span>Trabajo actual</span></label>
+        </div>
+        <label><span>Funciones</span><textarea name="funciones" rows="4"></textarea></label>
+        <label><span>Logros</span><textarea name="logros" rows="4"></textarea></label>
+        <button type="submit">Agregar experiencia</button>
+        </form>
+    </details>
+    {% if experiences %}
+        <div class="record-list">
+            {% for item in experiences %}
+                {% include "profile/_experience_record.html" %}
+            {% endfor %}
+        </div>
+    {% else %}
+        <div class="empty-panel"><h3>Sin experiencia registrada</h3><p>Aun no hay experiencias cargadas en el perfil.</p></div>
+    {% endif %}
+</section>
diff --git a/app/interfaces/web/templates/profile/_project_record.html b/app/interfaces/web/templates/profile/_project_record.html
new file mode 100644
index 0000000..f257c7e
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_project_record.html
@@ -0,0 +1,32 @@
+<details class="record-card record-disclosure">
+    <summary class="record-summary">
+        <div class="record-header">
+            <div><h3>{{ item.nombre }}</h3><p>{{ item.empresa or 'Proyecto personal' }}</p></div>
+            {% if item.stack %}<span class="soft-badge">{{ item.stack }}</span>{% endif %}
+        </div>
+    </summary>
+    <div class="disclosure-body">
+        <form class="stack-form compact-form" method="post" action="/app/profile/projects/{{ item.id }}/update" hx-post="/app/profile/projects/{{ item.id }}/update" hx-target="#profile-shell" hx-swap="innerHTML">
+            <div class="grid-two">
+                <label><span>Nombre</span><input type="text" name="nombre" value="{{ item.nombre }}" required></label>
+                <label><span>Empresa</span><input type="text" name="empresa" value="{{ item.empresa or '' }}"></label>
+            </div>
+            <div class="grid-two">
+                <label><span>Ciudad</span><input type="text" name="ciudad" value="{{ item.ciudad or '' }}"></label>
+                <label><span>Stack</span><input type="text" name="stack" value="{{ item.stack or '' }}"></label>
+            </div>
+            <div class="grid-three">
+                <label><span>Fecha inicio</span><input type="date" name="fecha_inicio" value="{{ item.fecha_inicio.isoformat() if item.fecha_inicio else '' }}" required></label>
+                <label><span>Fecha fin</span><input type="date" name="fecha_fin" value="{{ item.fecha_fin.isoformat() if item.fecha_fin else '' }}"></label>
+                <label class="checkbox-inline"><input type="checkbox" name="es_proyecto_actual" value="true"{% if item.es_proyecto_actual %} checked{% endif %}><span>En curso</span></label>
+            </div>
+            <label><span>URL repositorio</span><input type="url" name="url_repositorio" value="{{ item.url_repositorio or '' }}"></label>
+            <label><span>Descripcion</span><textarea name="funciones" rows="4">{{ item.funciones or '' }}</textarea></label>
+            <label><span>Logros / impacto</span><textarea name="logros" rows="4">{{ item.logros or '' }}</textarea></label>
+            <div class="detail-actions"><button type="submit">Guardar cambios</button></div>
+        </form>
+        <form method="post" action="/app/profile/projects/{{ item.id }}/delete" hx-post="/app/profile/projects/{{ item.id }}/delete" hx-target="#profile-shell" hx-swap="innerHTML">
+            <button type="submit" class="danger-action">Eliminar</button>
+        </form>
+    </div>
+</details>
diff --git a/app/interfaces/web/templates/profile/_projects.html b/app/interfaces/web/templates/profile/_projects.html
new file mode 100644
index 0000000..fb572dc
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_projects.html
@@ -0,0 +1,34 @@
+<section class="panel">
+    <div class="section-title"><div><h2>Proyectos</h2><p>Proyectos que respaldan tu experiencia tecnica.</p></div><span class="soft-badge">{{ projects|length }} registrados</span></div>
+    <details class="section-disclosure" {% if not projects %}open{% endif %}>
+        <summary>Agregar proyecto</summary>
+        <form class="stack-form compact-form section-form" method="post" action="/app/profile/projects" hx-post="/app/profile/projects" hx-target="#profile-shell" hx-swap="innerHTML">
+        <div class="grid-two">
+            <label><span>Nombre</span><input type="text" name="nombre" placeholder="Ej. Dashboard de ventas" required></label>
+            <label><span>Empresa</span><input type="text" name="empresa" placeholder="Opcional"></label>
+        </div>
+        <div class="grid-two">
+            <label><span>Ciudad</span><input type="text" name="ciudad" placeholder="Ej. Bogota"></label>
+            <label><span>Stack</span><input type="text" name="stack" placeholder="Python, SQL, Power BI"></label>
+        </div>
+        <div class="grid-three">
+            <label><span>Fecha inicio</span><input type="date" name="fecha_inicio" required></label>
+            <label><span>Fecha fin</span><input type="date" name="fecha_fin"></label>
+            <label class="checkbox-inline"><input type="checkbox" name="es_proyecto_actual" value="true"><span>En curso</span></label>
+        </div>
+        <label><span>URL repositorio</span><input type="url" name="url_repositorio"></label>
+        <label><span>Descripcion</span><textarea name="funciones" rows="4"></textarea></label>
+        <label><span>Logros / impacto</span><textarea name="logros" rows="4"></textarea></label>
+        <button type="submit">Agregar proyecto</button>
+        </form>
+    </details>
+    {% if projects %}
+        <div class="record-list">
+            {% for item in projects %}
+                {% include "profile/_project_record.html" %}
+            {% endfor %}
+        </div>
+    {% else %}
+        <div class="empty-panel"><h3>Sin proyectos registrados</h3><p>No hay proyectos cargados todavia.</p></div>
+    {% endif %}
+</section>
diff --git a/app/interfaces/web/templates/profile/_shell.html b/app/interfaces/web/templates/profile/_shell.html
index 63400a1..98f509e 100644
--- a/app/interfaces/web/templates/profile/_shell.html
+++ b/app/interfaces/web/templates/profile/_shell.html
@@ -15,135 +15,9 @@
 </section>
 
 <section class="profile-sections-grid">
-    <section class="panel">
-        <div class="section-title"><div><h2>Experiencia</h2><p>Registra y actualiza tu trayectoria laboral actual.</p></div><span class="soft-badge">{{ experiences|length }} registradas</span></div>
-        <details class="section-disclosure" {% if not experiences %}open{% endif %}>
-            <summary>Agregar experiencia</summary>
-            <form class="stack-form compact-form section-form" method="post" action="/app/profile/experiences" hx-post="/app/profile/experiences" hx-target="#profile-shell" hx-swap="innerHTML">
-            <div class="grid-two">
-                <label><span>Cargo</span><input type="text" name="cargo" placeholder="Ej. Data Analyst" required></label>
-                <label><span>Empresa</span><input type="text" name="empresa" placeholder="Ej. Bancolombia" required></label>
-            </div>
-            <div class="grid-two">
-                <label><span>Ciudad</span><input type="text" name="ciudad" placeholder="Ej. Medellin"></label>
-                <label><span>Descripcion empresa</span><input type="text" name="descripcion_empresa" placeholder="Ej. Fintech, 500+ empleados"></label>
-            </div>
-            <div class="grid-three">
-                <label><span>Fecha inicio</span><input type="date" name="fecha_inicio" required></label>
-                <label><span>Fecha fin</span><input type="date" name="fecha_fin"></label>
-                <label class="checkbox-inline"><input type="checkbox" name="es_trabajo_actual" value="true"><span>Trabajo actual</span></label>
-            </div>
-            <label><span>Funciones</span><textarea name="funciones" rows="4"></textarea></label>
-            <label><span>Logros</span><textarea name="logros" rows="4"></textarea></label>
-            <button type="submit">Agregar experiencia</button>
-            </form>
-        </details>
-        {% if experiences %}
-            <div class="record-list">
-                {% for item in experiences %}
-                    <details class="record-card record-disclosure">
-                        <summary class="record-summary">
-                            <div class="record-header">
-                                <div><h3>{{ item.cargo }} · {{ item.empresa }}</h3><p>{{ item.ciudad or '-' }}</p></div>
-                                <span class="soft-badge">{{ item.fecha_inicio.strftime("%m/%Y") if item.fecha_inicio else "-" }} - {% if item.es_trabajo_actual %}Actual{% elif item.fecha_fin %}{{ item.fecha_fin.strftime("%m/%Y") }}{% else %}-{% endif %}</span>
-                            </div>
-                        </summary>
-                        <div class="disclosure-body">
-                            <form class="stack-form compact-form" method="post" action="/app/profile/experiences/{{ item.id }}/update" hx-post="/app/profile/experiences/{{ item.id }}/update" hx-target="#profile-shell" hx-swap="innerHTML">
-                                <div class="grid-two">
-                                    <label><span>Cargo</span><input type="text" name="cargo" value="{{ item.cargo }}" required></label>
-                                    <label><span>Empresa</span><input type="text" name="empresa" value="{{ item.empresa }}" required></label>
-                                </div>
-                                <div class="grid-two">
-                                    <label><span>Ciudad</span><input type="text" name="ciudad" value="{{ item.ciudad or '' }}"></label>
-                                    <label><span>Descripcion empresa</span><input type="text" name="descripcion_empresa" value="{{ item.descripcion_empresa or '' }}"></label>
-                                </div>
-                                <div class="grid-three">
-                                    <label><span>Fecha inicio</span><input type="date" name="fecha_inicio" value="{{ item.fecha_inicio.isoformat() if item.fecha_inicio else '' }}" required></label>
-                                    <label><span>Fecha fin</span><input type="date" name="fecha_fin" value="{{ item.fecha_fin.isoformat() if item.fecha_fin else '' }}"></label>
-                                    <label class="checkbox-inline"><input type="checkbox" name="es_trabajo_actual" value="true"{% if item.es_trabajo_actual %} checked{% endif %}><span>Trabajo actual</span></label>
-                                </div>
-                                <label><span>Funciones</span><textarea name="funciones" rows="4">{{ item.funciones or '' }}</textarea></label>
-                                <label><span>Logros</span><textarea name="logros" rows="4">{{ item.logros or '' }}</textarea></label>
-                                <div class="detail-actions"><button type="submit">Guardar cambios</button></div>
-                            </form>
-                            <form method="post" action="/app/profile/experiences/{{ item.id }}/delete" hx-post="/app/profile/experiences/{{ item.id }}/delete" hx-target="#profile-shell" hx-swap="innerHTML">
-                                <button type="submit" class="danger-action">Eliminar</button>
-                            </form>
-                        </div>
-                    </details>
-                {% endfor %}
-            </div>
-        {% else %}
-            <div class="empty-panel"><h3>Sin experiencia registrada</h3><p>Aun no hay experiencias cargadas en el perfil.</p></div>
-        {% endif %}
-    </section>
+    {% include "profile/_experiences.html" %}
 
-    <section class="panel">
-        <div class="section-title"><div><h2>Proyectos</h2><p>Proyectos que respaldan tu experiencia tecnica.</p></div><span class="soft-badge">{{ projects|length }} registrados</span></div>
-        <details class="section-disclosure" {% if not projects %}open{% endif %}>
-            <summary>Agregar proyecto</summary>
-            <form class="stack-form compact-form section-form" method="post" action="/app/profile/projects" hx-post="/app/profile/projects" hx-target="#profile-shell" hx-swap="innerHTML">
-            <div class="grid-two">
-                <label><span>Nombre</span><input type="text" name="nombre" placeholder="Ej. Dashboard de ventas" required></label>
-                <label><span>Empresa</span><input type="text" name="empresa" placeholder="Opcional"></label>
-            </div>
-            <div class="grid-two">
-                <label><span>Ciudad</span><input type="text" name="ciudad" placeholder="Ej. Bogota"></label>
-                <label><span>Stack</span><input type="text" name="stack" placeholder="Python, SQL, Power BI"></label>
-            </div>
-            <div class="grid-three">
-                <label><span>Fecha inicio</span><input type="date" name="fecha_inicio" required></label>
-                <label><span>Fecha fin</span><input type="date" name="fecha_fin"></label>
-                <label class="checkbox-inline"><input type="checkbox" name="es_proyecto_actual" value="true"><span>En curso</span></label>
-            </div>
-            <label><span>URL repositorio</span><input type="url" name="url_repositorio"></label>
-            <label><span>Descripcion</span><textarea name="funciones" rows="4"></textarea></label>
-            <label><span>Logros / impacto</span><textarea name="logros" rows="4"></textarea></label>
-            <button type="submit">Agregar proyecto</button>
-            </form>
-        </details>
-        {% if projects %}
-            <div class="record-list">
-                {% for item in projects %}
-                    <details class="record-card record-disclosure">
-                        <summary class="record-summary">
-                            <div class="record-header">
-                                <div><h3>{{ item.nombre }}</h3><p>{{ item.empresa or 'Proyecto personal' }}</p></div>
-                                {% if item.stack %}<span class="soft-badge">{{ item.stack }}</span>{% endif %}
-                            </div>
-                        </summary>
-                        <div class="disclosure-body">
-                            <form class="stack-form compact-form" method="post" action="/app/profile/projects/{{ item.id }}/update" hx-post="/app/profile/projects/{{ item.id }}/update" hx-target="#profile-shell" hx-swap="innerHTML">
-                                <div class="grid-two">
-                                    <label><span>Nombre</span><input type="text" name="nombre" value="{{ item.nombre }}" required></label>
-                                    <label><span>Empresa</span><input type="text" name="empresa" value="{{ item.empresa or '' }}"></label>
-                                </div>
-                                <div class="grid-two">
-                                    <label><span>Ciudad</span><input type="text" name="ciudad" value="{{ item.ciudad or '' }}"></label>
-                                    <label><span>Stack</span><input type="text" name="stack" value="{{ item.stack or '' }}"></label>
-                                </div>
-                                <div class="grid-three">
-                                    <label><span>Fecha inicio</span><input type="date" name="fecha_inicio" value="{{ item.fecha_inicio.isoformat() if item.fecha_inicio else '' }}" required></label>
-                                    <label><span>Fecha fin</span><input type="date" name="fecha_fin" value="{{ item.fecha_fin.isoformat() if item.fecha_fin else '' }}"></label>
-                                    <label class="checkbox-inline"><input type="checkbox" name="es_proyecto_actual" value="true"{% if item.es_proyecto_actual %} checked{% endif %}><span>En curso</span></label>
-                                </div>
-                                <label><span>URL repositorio</span><input type="url" name="url_repositorio" value="{{ item.url_repositorio or '' }}"></label>
-                                <label><span>Descripcion</span><textarea name="funciones" rows="4">{{ item.funciones or '' }}</textarea></label>
-                                <label><span>Logros / impacto</span><textarea name="logros" rows="4">{{ item.logros or '' }}</textarea></label>
-                                <div class="detail-actions"><button type="submit">Guardar cambios</button></div>
-                            </form>
-                            <form method="post" action="/app/profile/projects/{{ item.id }}/delete" hx-post="/app/profile/projects/{{ item.id }}/delete" hx-target="#profile-shell" hx-swap="innerHTML">
-                                <button type="submit" class="danger-action">Eliminar</button>
-                            </form>
-                        </div>
-                    </details>
-                {% endfor %}
-            </div>
-        {% else %}
-            <div class="empty-panel"><h3>Sin proyectos registrados</h3><p>No hay proyectos cargados todavia.</p></div>
-        {% endif %}
-    </section>
+    {% include "profile/_projects.html" %}
 </section>
 
 {% include "profile/_formation_shell.html" %}
diff --git a/tests/test_web_profile.py b/tests/test_web_profile.py
index 83995cd..e9c2ed1 100644
--- a/tests/test_web_profile.py
+++ b/tests/test_web_profile.py
@@ -2,6 +2,7 @@
 
 from __future__ import annotations
 
+from datetime import date
 import unittest
 from unittest.mock import patch
 
@@ -234,6 +235,61 @@ def test_profile_shell_partial_keeps_formation_sections(self, mock_repository):
         self.assertIn('action="/app/profile/courses"', response.text)
         self.assertIn('action="/app/profile/certifications"', response.text)
 
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_profile_shell_partial_renders_experience_and_project_records(self, mock_repository):
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = []
+        mock_repository.get_experiences.return_value = [
+            {
+                "id": 10,
+                "cargo": "Data Analyst",
+                "empresa": "Acme",
+                "ciudad": "Bogota",
+                "descripcion_empresa": "Retail",
+                "fecha_inicio": date(2023, 1, 1),
+                "fecha_fin": date(2024, 2, 1),
+                "es_trabajo_actual": False,
+                "funciones": "Analisis",
+                "logros": "Ahorro",
+            }
+        ]
+        mock_repository.get_projects.return_value = [
+            {
+                "id": 20,
+                "nombre": "Dashboard",
+                "empresa": "Acme",
+                "ciudad": "Bogota",
+                "fecha_inicio": date(2024, 1, 1),
+                "fecha_fin": None,
+                "es_proyecto_actual": True,
+                "stack": "Python, SQL",
+                "funciones": "Construccion",
+                "logros": "Visibilidad",
+                "url_repositorio": "https://example.com/repo",
+            }
+        ]
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.get("/app/profile/shell")
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn("Experiencia", response.text)
+        self.assertIn("Data Analyst · Acme", response.text)
+        self.assertIn('action="/app/profile/experiences/10/update"', response.text)
+        self.assertIn('action="/app/profile/experiences/10/delete"', response.text)
+        self.assertIn("Proyectos", response.text)
+        self.assertIn("Dashboard", response.text)
+        self.assertIn('action="/app/profile/projects/20/update"', response.text)
+        self.assertIn('action="/app/profile/projects/20/delete"', response.text)
+        self.assertIn('hx-target="#profile-shell"', response.text)
+
     @patch("app.interfaces.web.routes.profile.profile_repository")
     def test_profile_formation_partial_renders_isolated_formation_shell(self, mock_repository):
         mock_repository.get_active_profile.return_value = {

From fcef7a7abf941c847e8ddcea940a42f357009e38 Mon Sep 17 00:00:00 2001
From: JoseMelNet <josemelnet@gmail.com>
Date: Sat, 23 May 2026 15:53:25 -0500
Subject: [PATCH 12/13] Isolate profile projects HTMX section

---
 app/interfaces/web/routes/profile.py          |  25 ++-
 .../templates/profile/_project_record.html    |   4 +-
 .../web/templates/profile/_projects.html      |   2 +-
 .../templates/profile/_projects_fragment.html |   4 +
 .../templates/profile/_projects_shell.html    |  11 ++
 .../web/templates/profile/_shell.html         |   2 +-
 tests/test_web_profile.py                     | 153 ++++++++++++++++++
 7 files changed, 194 insertions(+), 7 deletions(-)
 create mode 100644 app/interfaces/web/templates/profile/_projects_fragment.html
 create mode 100644 app/interfaces/web/templates/profile/_projects_shell.html

diff --git a/app/interfaces/web/routes/profile.py b/app/interfaces/web/routes/profile.py
index 8a51bfd..762db25 100644
--- a/app/interfaces/web/routes/profile.py
+++ b/app/interfaces/web/routes/profile.py
@@ -251,6 +251,20 @@ def _render_profile_formation_shell(request: Request, flash: str = "", include_o
     )
 
 
+def _render_profile_projects_shell(request: Request, flash: str = "", include_oob: bool = False):
+    context = _build_profile_context(flash=flash)
+    template_name = "profile/_projects_fragment.html" if include_oob else "profile/_projects_shell.html"
+    return templates.TemplateResponse(
+        request=request,
+        name=template_name,
+        context={
+            "request": request,
+            **context,
+            "projects_flash_message": context["flash_message"] if flash else None,
+        },
+    )
+
+
 @router.get("/app/profile")
 def profile_index(request: Request, flash: str | None = None):
     context = _build_profile_context(flash=flash)
@@ -287,6 +301,11 @@ def profile_formation_partial(request: Request, flash: str | None = None):
     return _render_profile_formation_shell(request, flash or "")
 
 
+@router.get("/app/profile/projects", response_class=HTMLResponse)
+def profile_projects_partial(request: Request, flash: str | None = None):
+    return _render_profile_projects_shell(request, flash or "")
+
+
 @router.post("/app/profile/save")
 def save_profile(
     request: Request,
@@ -472,7 +491,7 @@ def add_project(
         )
         flash = "project_saved" if result["success"] else "profile_error"
     if request.headers.get("HX-Request") == "true":
-        return _render_profile_shell(request, flash)
+        return _render_profile_projects_shell(request, flash, include_oob=True)
     return RedirectResponse(url=f"/app/profile?flash={flash}", status_code=303)
 
 
@@ -508,7 +527,7 @@ def update_project(
     )
     flash = "project_saved" if result["success"] else "profile_error"
     if request.headers.get("HX-Request") == "true":
-        return _render_profile_shell(request, flash)
+        return _render_profile_projects_shell(request, flash, include_oob=True)
     return RedirectResponse(url=f"/app/profile?flash={flash}", status_code=303)
 
 
@@ -517,7 +536,7 @@ def delete_project(request: Request, project_id: int):
     result = profile_repository.delete_project(project_id)
     flash = "project_deleted" if result["success"] else "profile_error"
     if request.headers.get("HX-Request") == "true":
-        return _render_profile_shell(request, flash)
+        return _render_profile_projects_shell(request, flash, include_oob=True)
     return RedirectResponse(url=f"/app/profile?flash={flash}", status_code=303)
 
 
diff --git a/app/interfaces/web/templates/profile/_project_record.html b/app/interfaces/web/templates/profile/_project_record.html
index f257c7e..25ef504 100644
--- a/app/interfaces/web/templates/profile/_project_record.html
+++ b/app/interfaces/web/templates/profile/_project_record.html
@@ -6,7 +6,7 @@
         </div>
     </summary>
     <div class="disclosure-body">
-        <form class="stack-form compact-form" method="post" action="/app/profile/projects/{{ item.id }}/update" hx-post="/app/profile/projects/{{ item.id }}/update" hx-target="#profile-shell" hx-swap="innerHTML">
+        <form class="stack-form compact-form" method="post" action="/app/profile/projects/{{ item.id }}/update" hx-post="/app/profile/projects/{{ item.id }}/update" hx-target="#profile-projects-shell" hx-swap="outerHTML">
             <div class="grid-two">
                 <label><span>Nombre</span><input type="text" name="nombre" value="{{ item.nombre }}" required></label>
                 <label><span>Empresa</span><input type="text" name="empresa" value="{{ item.empresa or '' }}"></label>
@@ -25,7 +25,7 @@
             <label><span>Logros / impacto</span><textarea name="logros" rows="4">{{ item.logros or '' }}</textarea></label>
             <div class="detail-actions"><button type="submit">Guardar cambios</button></div>
         </form>
-        <form method="post" action="/app/profile/projects/{{ item.id }}/delete" hx-post="/app/profile/projects/{{ item.id }}/delete" hx-target="#profile-shell" hx-swap="innerHTML">
+        <form method="post" action="/app/profile/projects/{{ item.id }}/delete" hx-post="/app/profile/projects/{{ item.id }}/delete" hx-target="#profile-projects-shell" hx-swap="outerHTML">
             <button type="submit" class="danger-action">Eliminar</button>
         </form>
     </div>
diff --git a/app/interfaces/web/templates/profile/_projects.html b/app/interfaces/web/templates/profile/_projects.html
index fb572dc..078344a 100644
--- a/app/interfaces/web/templates/profile/_projects.html
+++ b/app/interfaces/web/templates/profile/_projects.html
@@ -2,7 +2,7 @@
     <div class="section-title"><div><h2>Proyectos</h2><p>Proyectos que respaldan tu experiencia tecnica.</p></div><span class="soft-badge">{{ projects|length }} registrados</span></div>
     <details class="section-disclosure" {% if not projects %}open{% endif %}>
         <summary>Agregar proyecto</summary>
-        <form class="stack-form compact-form section-form" method="post" action="/app/profile/projects" hx-post="/app/profile/projects" hx-target="#profile-shell" hx-swap="innerHTML">
+        <form class="stack-form compact-form section-form" method="post" action="/app/profile/projects" hx-post="/app/profile/projects" hx-target="#profile-projects-shell" hx-swap="outerHTML">
         <div class="grid-two">
             <label><span>Nombre</span><input type="text" name="nombre" placeholder="Ej. Dashboard de ventas" required></label>
             <label><span>Empresa</span><input type="text" name="empresa" placeholder="Opcional"></label>
diff --git a/app/interfaces/web/templates/profile/_projects_fragment.html b/app/interfaces/web/templates/profile/_projects_fragment.html
new file mode 100644
index 0000000..74e0541
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_projects_fragment.html
@@ -0,0 +1,4 @@
+{% set skills_shell_oob = true %}
+{% include "profile/_skills_shell.html" %}
+
+{% include "profile/_projects_shell.html" %}
diff --git a/app/interfaces/web/templates/profile/_projects_shell.html b/app/interfaces/web/templates/profile/_projects_shell.html
new file mode 100644
index 0000000..fa78023
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_projects_shell.html
@@ -0,0 +1,11 @@
+<section id="profile-projects-shell">
+    {% if projects_flash_message %}
+        {% set flash_tone = projects_flash_message[0] %}
+        {% set flash_text = projects_flash_message[1] %}
+        {% include "components/_flash.html" %}
+    {% endif %}
+
+    <section class="profile-sections-grid">
+        {% include "profile/_projects.html" %}
+    </section>
+</section>
diff --git a/app/interfaces/web/templates/profile/_shell.html b/app/interfaces/web/templates/profile/_shell.html
index 98f509e..7c5e5e7 100644
--- a/app/interfaces/web/templates/profile/_shell.html
+++ b/app/interfaces/web/templates/profile/_shell.html
@@ -17,7 +17,7 @@
 <section class="profile-sections-grid">
     {% include "profile/_experiences.html" %}
 
-    {% include "profile/_projects.html" %}
+    {% include "profile/_projects_shell.html" %}
 </section>
 
 {% include "profile/_formation_shell.html" %}
diff --git a/tests/test_web_profile.py b/tests/test_web_profile.py
index e9c2ed1..f108f7b 100644
--- a/tests/test_web_profile.py
+++ b/tests/test_web_profile.py
@@ -315,6 +315,159 @@ def test_profile_formation_partial_renders_isolated_formation_shell(self, mock_r
         self.assertNotIn('id="profile-skills-shell"', response.text)
         self.assertNotIn('id="profile-basics-shell"', response.text)
 
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_profile_projects_partial_renders_isolated_projects_shell(self, mock_repository):
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = []
+        mock_repository.get_experiences.return_value = []
+        mock_repository.get_projects.return_value = []
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.get("/app/profile/projects")
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('id="profile-projects-shell"', response.text)
+        self.assertIn("Proyectos", response.text)
+        self.assertNotIn('id="profile-skills-shell"', response.text)
+        self.assertNotIn('id="profile-basics-shell"', response.text)
+        self.assertNotIn('id="profile-cv-preview"', response.text)
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_add_project_hx_returns_isolated_projects_fragment(self, mock_repository):
+        mock_repository.add_project.return_value = {"success": True}
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = []
+        mock_repository.get_experiences.return_value = []
+        mock_repository.get_projects.return_value = [
+            {
+                "id": 4,
+                "nombre": "Dashboard",
+                "empresa": "Acme",
+                "ciudad": "Bogota",
+                "fecha_inicio": date(2024, 1, 1),
+                "fecha_fin": None,
+                "es_proyecto_actual": True,
+                "stack": "Python, SQL",
+                "funciones": "Construccion",
+                "logros": "Visibilidad",
+                "url_repositorio": "https://example.com/repo",
+            }
+        ]
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.post(
+            "/app/profile/projects",
+            data={
+                "nombre": "Dashboard",
+                "empresa": "Acme",
+                "ciudad": "Bogota",
+                "fecha_inicio": "2024-01-01",
+                "stack": "Python, SQL",
+            },
+            headers={"HX-Request": "true"},
+        )
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('id="profile-projects-shell"', response.text)
+        self.assertIn("El proyecto fue guardado.", response.text)
+        self.assertIn("Dashboard", response.text)
+        self.assertIn('id="profile-skills-shell"', response.text)
+        self.assertIn('hx-swap-oob="outerHTML"', response.text)
+        self.assertNotIn('id="profile-cv-preview"', response.text)
+        self.assertNotIn('action="/app/profile/save"', response.text)
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_update_project_hx_returns_isolated_projects_fragment(self, mock_repository):
+        mock_repository.update_project.return_value = {"success": True}
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = []
+        mock_repository.get_experiences.return_value = []
+        mock_repository.get_projects.return_value = [
+            {
+                "id": 4,
+                "nombre": "Dashboard V2",
+                "empresa": "Acme",
+                "ciudad": "Bogota",
+                "fecha_inicio": date(2024, 1, 1),
+                "fecha_fin": None,
+                "es_proyecto_actual": True,
+                "stack": "Python, SQL",
+                "funciones": "Construccion",
+                "logros": "Visibilidad",
+                "url_repositorio": "https://example.com/repo",
+            }
+        ]
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.post(
+            "/app/profile/projects/4/update",
+            data={
+                "nombre": "Dashboard V2",
+                "empresa": "Acme",
+                "ciudad": "Bogota",
+                "fecha_inicio": "2024-01-01",
+                "es_proyecto_actual": "true",
+                "stack": "Python, SQL",
+            },
+            headers={"HX-Request": "true"},
+        )
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('id="profile-projects-shell"', response.text)
+        self.assertIn("El proyecto fue guardado.", response.text)
+        self.assertIn("Dashboard V2", response.text)
+        self.assertIn('id="profile-skills-shell"', response.text)
+        self.assertNotIn('id="profile-cv-preview"', response.text)
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_delete_project_hx_returns_isolated_projects_fragment(self, mock_repository):
+        mock_repository.delete_project.return_value = {"success": True}
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = []
+        mock_repository.get_experiences.return_value = []
+        mock_repository.get_projects.return_value = []
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.post(
+            "/app/profile/projects/4/delete",
+            headers={"HX-Request": "true"},
+        )
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('id="profile-projects-shell"', response.text)
+        self.assertIn("El proyecto fue eliminado.", response.text)
+        self.assertIn("Sin proyectos registrados", response.text)
+        self.assertIn('id="profile-skills-shell"', response.text)
+        self.assertNotIn('id="profile-cv-preview"', response.text)
+
     @patch("app.interfaces.web.routes.profile.profile_repository")
     def test_add_education_hx_returns_isolated_formation_fragment(self, mock_repository):
         mock_repository.add_education.return_value = {"success": True}

From 617e78a5eb139d0e329bff53b98786fd63cbb526 Mon Sep 17 00:00:00 2001
From: JoseMelNet <josemelnet@gmail.com>
Date: Sat, 23 May 2026 16:04:08 -0500
Subject: [PATCH 13/13] Isolate profile experiences HTMX section

---
 app/interfaces/web/routes/profile.py          |  25 ++-
 .../templates/profile/_experience_record.html |   4 +-
 .../web/templates/profile/_experiences.html   |   2 +-
 .../profile/_experiences_fragment.html        |  11 ++
 .../templates/profile/_experiences_shell.html |  11 ++
 .../web/templates/profile/_shell.html         |   2 +-
 tests/test_web_profile.py                     | 159 +++++++++++++++++-
 7 files changed, 206 insertions(+), 8 deletions(-)
 create mode 100644 app/interfaces/web/templates/profile/_experiences_fragment.html
 create mode 100644 app/interfaces/web/templates/profile/_experiences_shell.html

diff --git a/app/interfaces/web/routes/profile.py b/app/interfaces/web/routes/profile.py
index 762db25..0462ed4 100644
--- a/app/interfaces/web/routes/profile.py
+++ b/app/interfaces/web/routes/profile.py
@@ -265,6 +265,20 @@ def _render_profile_projects_shell(request: Request, flash: str = "", include_oo
     )
 
 
+def _render_profile_experiences_shell(request: Request, flash: str = "", include_oob: bool = False):
+    context = _build_profile_context(flash=flash)
+    template_name = "profile/_experiences_fragment.html" if include_oob else "profile/_experiences_shell.html"
+    return templates.TemplateResponse(
+        request=request,
+        name=template_name,
+        context={
+            "request": request,
+            **context,
+            "experiences_flash_message": context["flash_message"] if flash else None,
+        },
+    )
+
+
 @router.get("/app/profile")
 def profile_index(request: Request, flash: str | None = None):
     context = _build_profile_context(flash=flash)
@@ -306,6 +320,11 @@ def profile_projects_partial(request: Request, flash: str | None = None):
     return _render_profile_projects_shell(request, flash or "")
 
 
+@router.get("/app/profile/experiences", response_class=HTMLResponse)
+def profile_experiences_partial(request: Request, flash: str | None = None):
+    return _render_profile_experiences_shell(request, flash or "")
+
+
 @router.post("/app/profile/save")
 def save_profile(
     request: Request,
@@ -409,7 +428,7 @@ def add_experience(
         )
         flash = "experience_saved" if result["success"] else "profile_error"
     if request.headers.get("HX-Request") == "true":
-        return _render_profile_shell(request, flash)
+        return _render_profile_experiences_shell(request, flash, include_oob=True)
     return RedirectResponse(url=f"/app/profile?flash={flash}", status_code=303)
 
 
@@ -443,7 +462,7 @@ def update_experience(
     )
     flash = "experience_saved" if result["success"] else "profile_error"
     if request.headers.get("HX-Request") == "true":
-        return _render_profile_shell(request, flash)
+        return _render_profile_experiences_shell(request, flash, include_oob=True)
     return RedirectResponse(url=f"/app/profile?flash={flash}", status_code=303)
 
 
@@ -452,7 +471,7 @@ def delete_experience(request: Request, experience_id: int):
     result = profile_repository.delete_experience(experience_id)
     flash = "experience_deleted" if result["success"] else "profile_error"
     if request.headers.get("HX-Request") == "true":
-        return _render_profile_shell(request, flash)
+        return _render_profile_experiences_shell(request, flash, include_oob=True)
     return RedirectResponse(url=f"/app/profile?flash={flash}", status_code=303)
 
 
diff --git a/app/interfaces/web/templates/profile/_experience_record.html b/app/interfaces/web/templates/profile/_experience_record.html
index e21eb02..af63a23 100644
--- a/app/interfaces/web/templates/profile/_experience_record.html
+++ b/app/interfaces/web/templates/profile/_experience_record.html
@@ -6,7 +6,7 @@
         </div>
     </summary>
     <div class="disclosure-body">
-        <form class="stack-form compact-form" method="post" action="/app/profile/experiences/{{ item.id }}/update" hx-post="/app/profile/experiences/{{ item.id }}/update" hx-target="#profile-shell" hx-swap="innerHTML">
+        <form class="stack-form compact-form" method="post" action="/app/profile/experiences/{{ item.id }}/update" hx-post="/app/profile/experiences/{{ item.id }}/update" hx-target="#profile-experiences-shell" hx-swap="outerHTML">
             <div class="grid-two">
                 <label><span>Cargo</span><input type="text" name="cargo" value="{{ item.cargo }}" required></label>
                 <label><span>Empresa</span><input type="text" name="empresa" value="{{ item.empresa }}" required></label>
@@ -24,7 +24,7 @@
             <label><span>Logros</span><textarea name="logros" rows="4">{{ item.logros or '' }}</textarea></label>
             <div class="detail-actions"><button type="submit">Guardar cambios</button></div>
         </form>
-        <form method="post" action="/app/profile/experiences/{{ item.id }}/delete" hx-post="/app/profile/experiences/{{ item.id }}/delete" hx-target="#profile-shell" hx-swap="innerHTML">
+        <form method="post" action="/app/profile/experiences/{{ item.id }}/delete" hx-post="/app/profile/experiences/{{ item.id }}/delete" hx-target="#profile-experiences-shell" hx-swap="outerHTML">
             <button type="submit" class="danger-action">Eliminar</button>
         </form>
     </div>
diff --git a/app/interfaces/web/templates/profile/_experiences.html b/app/interfaces/web/templates/profile/_experiences.html
index b8c44ba..bd8e653 100644
--- a/app/interfaces/web/templates/profile/_experiences.html
+++ b/app/interfaces/web/templates/profile/_experiences.html
@@ -2,7 +2,7 @@
     <div class="section-title"><div><h2>Experiencia</h2><p>Registra y actualiza tu trayectoria laboral actual.</p></div><span class="soft-badge">{{ experiences|length }} registradas</span></div>
     <details class="section-disclosure" {% if not experiences %}open{% endif %}>
         <summary>Agregar experiencia</summary>
-        <form class="stack-form compact-form section-form" method="post" action="/app/profile/experiences" hx-post="/app/profile/experiences" hx-target="#profile-shell" hx-swap="innerHTML">
+        <form class="stack-form compact-form section-form" method="post" action="/app/profile/experiences" hx-post="/app/profile/experiences" hx-target="#profile-experiences-shell" hx-swap="outerHTML">
         <div class="grid-two">
             <label><span>Cargo</span><input type="text" name="cargo" placeholder="Ej. Data Analyst" required></label>
             <label><span>Empresa</span><input type="text" name="empresa" placeholder="Ej. Bancolombia" required></label>
diff --git a/app/interfaces/web/templates/profile/_experiences_fragment.html b/app/interfaces/web/templates/profile/_experiences_fragment.html
new file mode 100644
index 0000000..c7ca43f
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_experiences_fragment.html
@@ -0,0 +1,11 @@
+<div id="profile-overview" hx-swap-oob="innerHTML">
+    {% include "profile/_overview.html" %}
+</div>
+
+{% set skills_shell_oob = true %}
+{% include "profile/_skills_shell.html" %}
+
+{% set cv_preview_oob = true %}
+{% include "profile/_cv_preview.html" %}
+
+{% include "profile/_experiences_shell.html" %}
diff --git a/app/interfaces/web/templates/profile/_experiences_shell.html b/app/interfaces/web/templates/profile/_experiences_shell.html
new file mode 100644
index 0000000..cd25238
--- /dev/null
+++ b/app/interfaces/web/templates/profile/_experiences_shell.html
@@ -0,0 +1,11 @@
+<section id="profile-experiences-shell">
+    {% if experiences_flash_message %}
+        {% set flash_tone = experiences_flash_message[0] %}
+        {% set flash_text = experiences_flash_message[1] %}
+        {% include "components/_flash.html" %}
+    {% endif %}
+
+    <section class="profile-sections-grid">
+        {% include "profile/_experiences.html" %}
+    </section>
+</section>
diff --git a/app/interfaces/web/templates/profile/_shell.html b/app/interfaces/web/templates/profile/_shell.html
index 7c5e5e7..044c2a8 100644
--- a/app/interfaces/web/templates/profile/_shell.html
+++ b/app/interfaces/web/templates/profile/_shell.html
@@ -15,7 +15,7 @@
 </section>
 
 <section class="profile-sections-grid">
-    {% include "profile/_experiences.html" %}
+    {% include "profile/_experiences_shell.html" %}
 
     {% include "profile/_projects_shell.html" %}
 </section>
diff --git a/tests/test_web_profile.py b/tests/test_web_profile.py
index f108f7b..bb5b2eb 100644
--- a/tests/test_web_profile.py
+++ b/tests/test_web_profile.py
@@ -284,11 +284,12 @@ def test_profile_shell_partial_renders_experience_and_project_records(self, mock
         self.assertIn("Data Analyst · Acme", response.text)
         self.assertIn('action="/app/profile/experiences/10/update"', response.text)
         self.assertIn('action="/app/profile/experiences/10/delete"', response.text)
+        self.assertIn('id="profile-experiences-shell"', response.text)
         self.assertIn("Proyectos", response.text)
         self.assertIn("Dashboard", response.text)
         self.assertIn('action="/app/profile/projects/20/update"', response.text)
         self.assertIn('action="/app/profile/projects/20/delete"', response.text)
-        self.assertIn('hx-target="#profile-shell"', response.text)
+        self.assertIn('id="profile-projects-shell"', response.text)
 
     @patch("app.interfaces.web.routes.profile.profile_repository")
     def test_profile_formation_partial_renders_isolated_formation_shell(self, mock_repository):
@@ -339,6 +340,30 @@ def test_profile_projects_partial_renders_isolated_projects_shell(self, mock_rep
         self.assertNotIn('id="profile-basics-shell"', response.text)
         self.assertNotIn('id="profile-cv-preview"', response.text)
 
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_profile_experiences_partial_renders_isolated_experiences_shell(self, mock_repository):
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = []
+        mock_repository.get_experiences.return_value = []
+        mock_repository.get_projects.return_value = []
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.get("/app/profile/experiences")
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('id="profile-experiences-shell"', response.text)
+        self.assertIn("Experiencia", response.text)
+        self.assertNotIn('id="profile-skills-shell"', response.text)
+        self.assertNotIn('id="profile-basics-shell"', response.text)
+        self.assertNotIn('id="profile-projects-shell"', response.text)
+
     @patch("app.interfaces.web.routes.profile.profile_repository")
     def test_add_project_hx_returns_isolated_projects_fragment(self, mock_repository):
         mock_repository.add_project.return_value = {"success": True}
@@ -440,6 +465,138 @@ def test_update_project_hx_returns_isolated_projects_fragment(self, mock_reposit
         self.assertIn('id="profile-skills-shell"', response.text)
         self.assertNotIn('id="profile-cv-preview"', response.text)
 
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_add_experience_hx_returns_isolated_experiences_fragment(self, mock_repository):
+        mock_repository.add_experience.return_value = {"success": True}
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = []
+        mock_repository.get_experiences.return_value = [
+            {
+                "id": 6,
+                "cargo": "Data Analyst",
+                "empresa": "Acme",
+                "ciudad": "Bogota",
+                "descripcion_empresa": "Retail",
+                "fecha_inicio": date(2024, 1, 1),
+                "fecha_fin": None,
+                "es_trabajo_actual": True,
+                "funciones": "Analisis",
+                "logros": "Impacto",
+            }
+        ]
+        mock_repository.get_projects.return_value = []
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.post(
+            "/app/profile/experiences",
+            data={
+                "cargo": "Data Analyst",
+                "empresa": "Acme",
+                "ciudad": "Bogota",
+                "fecha_inicio": "2024-01-01",
+                "es_trabajo_actual": "true",
+            },
+            headers={"HX-Request": "true"},
+        )
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('id="profile-experiences-shell"', response.text)
+        self.assertIn("La experiencia fue guardada.", response.text)
+        self.assertIn("Data Analyst · Acme", response.text)
+        self.assertIn('id="profile-overview"', response.text)
+        self.assertIn('id="profile-skills-shell"', response.text)
+        self.assertIn('id="profile-cv-preview"', response.text)
+        self.assertIn('hx-swap-oob="innerHTML"', response.text)
+        self.assertIn('hx-swap-oob="outerHTML"', response.text)
+        self.assertNotIn('id="profile-projects-shell"', response.text)
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_update_experience_hx_returns_isolated_experiences_fragment(self, mock_repository):
+        mock_repository.update_experience.return_value = {"success": True}
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = []
+        mock_repository.get_experiences.return_value = [
+            {
+                "id": 6,
+                "cargo": "Senior Data Analyst",
+                "empresa": "Acme",
+                "ciudad": "Bogota",
+                "descripcion_empresa": "Retail",
+                "fecha_inicio": date(2024, 1, 1),
+                "fecha_fin": None,
+                "es_trabajo_actual": True,
+                "funciones": "Analisis",
+                "logros": "Impacto",
+            }
+        ]
+        mock_repository.get_projects.return_value = []
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.post(
+            "/app/profile/experiences/6/update",
+            data={
+                "cargo": "Senior Data Analyst",
+                "empresa": "Acme",
+                "ciudad": "Bogota",
+                "fecha_inicio": "2024-01-01",
+                "es_trabajo_actual": "true",
+            },
+            headers={"HX-Request": "true"},
+        )
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('id="profile-experiences-shell"', response.text)
+        self.assertIn("La experiencia fue guardada.", response.text)
+        self.assertIn("Senior Data Analyst · Acme", response.text)
+        self.assertIn('id="profile-overview"', response.text)
+        self.assertIn('id="profile-skills-shell"', response.text)
+        self.assertIn('id="profile-cv-preview"', response.text)
+        self.assertNotIn('id="profile-projects-shell"', response.text)
+
+    @patch("app.interfaces.web.routes.profile.profile_repository")
+    def test_delete_experience_hx_returns_isolated_experiences_fragment(self, mock_repository):
+        mock_repository.delete_experience.return_value = {"success": True}
+        mock_repository.get_active_profile.return_value = {
+            "id": 1,
+            "nombre": "Jose",
+            "titulo_profesional": "Data Analyst",
+            "modalidades_aceptadas": "Remoto,Hibrido",
+        }
+        mock_repository.get_skills.return_value = []
+        mock_repository.get_experiences.return_value = []
+        mock_repository.get_projects.return_value = []
+        mock_repository.get_education.return_value = []
+        mock_repository.get_courses.return_value = []
+        mock_repository.get_certifications.return_value = []
+
+        response = self.client.post(
+            "/app/profile/experiences/6/delete",
+            headers={"HX-Request": "true"},
+        )
+
+        self.assertEqual(response.status_code, 200)
+        self.assertIn('id="profile-experiences-shell"', response.text)
+        self.assertIn("La experiencia fue eliminada.", response.text)
+        self.assertIn("Sin experiencia registrada", response.text)
+        self.assertIn('id="profile-overview"', response.text)
+        self.assertIn('id="profile-skills-shell"', response.text)
+        self.assertIn('id="profile-cv-preview"', response.text)
+        self.assertNotIn('id="profile-projects-shell"', response.text)
+
     @patch("app.interfaces.web.routes.profile.profile_repository")
     def test_delete_project_hx_returns_isolated_projects_fragment(self, mock_repository):
         mock_repository.delete_project.return_value = {"success": True}