Merge branch 'release/v3.1.23-beta'

config/static-manifest/manifest.json

@@ -2,5 +2,5 @@
   "dist/chat-client.js": "dist/chat-client.f7134231.js",
   "dist/chat-client.css": "dist/chat-client.99e10656.css",
   "dist/main.js": "dist/main.6a617099.js",
-  "dist/main.css": "dist/main.06893f70.css"
+  "dist/main.css": "dist/main.7182aac3.css"
 }

eveai_app/static/assets/css/eveai-content-viewer.css

@@ -0,0 +1,30 @@
+/* Content Viewer specific styles */
+
+/* Ensure markdown text aligns left by default */
+#content-document-viewer .markdown-body,
+.markdown-body {
+  text-align: left;
+}
+
+/* Make the viewer pane scrollable with a responsive max height */
+#content-document-viewer {
+  max-height: 60vh;
+  overflow: auto;
+}
+
+/* Optional readability improvements */
+#content-document-viewer .markdown-body {
+  line-height: 1.6;
+}
+#content-document-viewer .markdown-body pre,
+#content-document-viewer .markdown-body code {
+  white-space: pre-wrap;
+}
+
+/* Keep the viewer header visible while scrolling */
+#content-viewer-section .card-header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--bs-body-bg, #fff);
+}

eveai_app/static/assets/css/eveai.css

@@ -313,5 +313,21 @@ input[type="radio"] {
     text-align: center !important;
 }
 
+/* Custom badge background colors for type badges (agent/task/tool) */
+.bg-purple {
+    background-color: #6f42c1 !important; /* Bootstrap purple */
+    color: #fff !important;
+}
+
+.bg-orange {
+    background-color: #fd7e14 !important; /* Bootstrap orange */
+    color: #fff !important;
+}
+
+.bg-teal {
+    background-color: #20c997 !important; /* Bootstrap teal */
+    color: #fff !important;
+}
+
 
 

eveai_app/static/assets/css/nucleo-icons.css

@@ -0,0 +1,597 @@
+/*--------------------------------
+
+hermes-dashboard-icons Web Font - built using nucleoapp.com
+License - nucleoapp.com/license/
+
+-------------------------------- */
+@font-face {
+  font-family: 'NucleoIcons';
+  src: url('../fonts/nucleo-icons.eot');
+  src: url('../fonts/nucleo-icons.eot') format('embedded-opentype'), url('../fonts/nucleo-icons.woff2') format('woff2'), url('../fonts/nucleo-icons.woff') format('woff'), url('../fonts/nucleo-icons.ttf') format('truetype'), url('../fonts/nucleo-icons.svg') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+/*------------------------
+    base class definition
+-------------------------*/
+.ni {
+  display: inline-block;
+  font: normal normal normal 14px/1 NucleoIcons;
+  font-size: inherit;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/*------------------------
+  change icon size
+-------------------------*/
+.ni-lg {
+  font-size: 1.33333333em;
+  line-height: 0.75em;
+  vertical-align: -15%;
+}
+
+.ni-2x {
+  font-size: 2em;
+}
+
+.ni-3x {
+  font-size: 3em;
+}
+
+.ni-4x {
+  font-size: 4em;
+}
+
+.ni-5x {
+  font-size: 5em;
+}
+
+/*----------------------------------
+  add a square/circle background
+-----------------------------------*/
+.ni.square,
+.ni.circle {
+  padding: 0.33333333em;
+  vertical-align: -16%;
+  background-color: #eee;
+}
+
+.ni.circle {
+  border-radius: 50%;
+}
+
+/*------------------------
+  list icons
+-------------------------*/
+.ni-ul {
+  padding-left: 0;
+  margin-left: 2.14285714em;
+  list-style-type: none;
+}
+
+.ni-ul>li {
+  position: relative;
+}
+
+.ni-ul>li>.ni {
+  position: absolute;
+  left: -1.57142857em;
+  top: 0.14285714em;
+  text-align: center;
+}
+
+.ni-ul>li>.ni.lg {
+  top: 0;
+  left: -1.35714286em;
+}
+
+.ni-ul>li>.ni.circle,
+.ni-ul>li>.ni.square {
+  top: -0.19047619em;
+  left: -1.9047619em;
+}
+
+/*------------------------
+  spinning icons
+-------------------------*/
+.ni.spin {
+  -webkit-animation: nc-spin 2s infinite linear;
+  -moz-animation: nc-spin 2s infinite linear;
+  animation: nc-spin 2s infinite linear;
+}
+
+@-webkit-keyframes nc-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@-moz-keyframes nc-spin {
+  0% {
+    -moz-transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(360deg);
+  }
+}
+
+@keyframes nc-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+/*------------------------
+  rotated/flipped icons
+-------------------------*/
+.ni.rotate-90 {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+
+.ni.rotate-180 {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+  -webkit-transform: rotate(180deg);
+  -moz-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  -o-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+
+.ni.rotate-270 {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+  -webkit-transform: rotate(270deg);
+  -moz-transform: rotate(270deg);
+  -ms-transform: rotate(270deg);
+  -o-transform: rotate(270deg);
+  transform: rotate(270deg);
+}
+
+.ni.flip-y {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
+  -webkit-transform: scale(-1, 1);
+  -moz-transform: scale(-1, 1);
+  -ms-transform: scale(-1, 1);
+  -o-transform: scale(-1, 1);
+  transform: scale(-1, 1);
+}
+
+.ni.flip-x {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+  -webkit-transform: scale(1, -1);
+  -moz-transform: scale(1, -1);
+  -ms-transform: scale(1, -1);
+  -o-transform: scale(1, -1);
+  transform: scale(1, -1);
+}
+
+/*------------------------
+    font icons
+-------------------------*/
+
+.ni-active-40::before {
+  content: "\ea02";
+}
+
+.ni-air-baloon::before {
+  content: "\ea03";
+}
+
+.ni-album-2::before {
+  content: "\ea04";
+}
+
+.ni-align-center::before {
+  content: "\ea05";
+}
+
+.ni-align-left-2::before {
+  content: "\ea06";
+}
+
+.ni-ambulance::before {
+  content: "\ea07";
+}
+
+.ni-app::before {
+  content: "\ea08";
+}
+
+.ni-archive-2::before {
+  content: "\ea09";
+}
+
+.ni-atom::before {
+  content: "\ea0a";
+}
+
+.ni-badge::before {
+  content: "\ea0b";
+}
+
+.ni-bag-17::before {
+  content: "\ea0c";
+}
+
+.ni-basket::before {
+  content: "\ea0d";
+}
+
+.ni-bell-55::before {
+  content: "\ea0e";
+}
+
+.ni-bold-down::before {
+  content: "\ea0f";
+}
+
+.ni-bold-left::before {
+  content: "\ea10";
+}
+
+.ni-bold-right::before {
+  content: "\ea11";
+}
+
+.ni-bold-up::before {
+  content: "\ea12";
+}
+
+.ni-bold::before {
+  content: "\ea13";
+}
+
+.ni-book-bookmark::before {
+  content: "\ea14";
+}
+
+.ni-books::before {
+  content: "\ea15";
+}
+
+.ni-box-2::before {
+  content: "\ea16";
+}
+
+.ni-briefcase-24::before {
+  content: "\ea17";
+}
+
+.ni-building::before {
+  content: "\ea18";
+}
+
+.ni-bulb-61::before {
+  content: "\ea19";
+}
+
+.ni-bullet-list-67::before {
+  content: "\ea1a";
+}
+
+.ni-bus-front-12::before {
+  content: "\ea1b";
+}
+
+.ni-button-pause::before {
+  content: "\ea1c";
+}
+
+.ni-button-play::before {
+  content: "\ea1d";
+}
+
+.ni-button-power::before {
+  content: "\ea1e";
+}
+
+.ni-calendar-grid-58::before {
+  content: "\ea1f";
+}
+
+.ni-camera-compact::before {
+  content: "\ea20";
+}
+
+.ni-caps-small::before {
+  content: "\ea21";
+}
+
+.ni-cart::before {
+  content: "\ea22";
+}
+
+.ni-chart-bar-32::before {
+  content: "\ea23";
+}
+
+.ni-chart-pie-35::before {
+  content: "\ea24";
+}
+
+.ni-chat-round::before {
+  content: "\ea25";
+}
+
+.ni-check-bold::before {
+  content: "\ea26";
+}
+
+.ni-circle-08::before {
+  content: "\ea27";
+}
+
+.ni-cloud-download-95::before {
+  content: "\ea28";
+}
+
+.ni-cloud-upload-96::before {
+  content: "\ea29";
+}
+
+.ni-compass-04::before {
+  content: "\ea2a";
+}
+
+.ni-controller::before {
+  content: "\ea2b";
+}
+
+.ni-credit-card::before {
+  content: "\ea2c";
+}
+
+.ni-curved-next::before {
+  content: "\ea2d";
+}
+
+.ni-delivery-fast::before {
+  content: "\ea2e";
+}
+
+.ni-diamond::before {
+  content: "\ea2f";
+}
+
+.ni-email-83::before {
+  content: "\ea30";
+}
+
+.ni-fat-add::before {
+  content: "\ea31";
+}
+
+.ni-fat-delete::before {
+  content: "\ea32";
+}
+
+.ni-fat-remove::before {
+  content: "\ea33";
+}
+
+.ni-favourite-28::before {
+  content: "\ea34";
+}
+
+.ni-folder-17::before {
+  content: "\ea35";
+}
+
+.ni-glasses-2::before {
+  content: "\ea36";
+}
+
+.ni-hat-3::before {
+  content: "\ea37";
+}
+
+.ni-headphones::before {
+  content: "\ea38";
+}
+
+.ni-html5::before {
+  content: "\ea39";
+}
+
+.ni-istanbul::before {
+  content: "\ea3a";
+}
+
+.ni-key-25::before {
+  content: "\ea3b";
+}
+
+.ni-laptop::before {
+  content: "\ea3c";
+}
+
+.ni-like-2::before {
+  content: "\ea3d";
+}
+
+.ni-lock-circle-open::before {
+  content: "\ea3e";
+}
+
+.ni-map-big::before {
+  content: "\ea3f";
+}
+
+.ni-mobile-button::before {
+  content: "\ea40";
+}
+
+.ni-money-coins::before {
+  content: "\ea41";
+}
+
+.ni-note-03::before {
+  content: "\ea42";
+}
+
+.ni-notification-70::before {
+  content: "\ea43";
+}
+
+.ni-palette::before {
+  content: "\ea44";
+}
+
+.ni-paper-diploma::before {
+  content: "\ea45";
+}
+
+.ni-pin-3::before {
+  content: "\ea46";
+}
+
+.ni-planet::before {
+  content: "\ea47";
+}
+
+.ni-ruler-pencil::before {
+  content: "\ea48";
+}
+
+.ni-satisfied::before {
+  content: "\ea49";
+}
+
+.ni-scissors::before {
+  content: "\ea4a";
+}
+
+.ni-send::before {
+  content: "\ea4b";
+}
+
+.ni-settings-gear-65::before {
+  content: "\ea4c";
+}
+
+.ni-settings::before {
+  content: "\ea4d";
+}
+
+.ni-single-02::before {
+  content: "\ea4e";
+}
+
+.ni-single-copy-04::before {
+  content: "\ea4f";
+}
+
+.ni-sound-wave::before {
+  content: "\ea50";
+}
+
+.ni-spaceship::before {
+  content: "\ea51";
+}
+
+.ni-square-pin::before {
+  content: "\ea52";
+}
+
+.ni-support-16::before {
+  content: "\ea53";
+}
+
+.ni-tablet-button::before {
+  content: "\ea54";
+}
+
+.ni-tag::before {
+  content: "\ea55";
+}
+
+.ni-tie-bow::before {
+  content: "\ea56";
+}
+
+.ni-time-alarm::before {
+  content: "\ea57";
+}
+
+.ni-trophy::before {
+  content: "\ea58";
+}
+
+.ni-tv-2::before {
+  content: "\ea59";
+}
+
+.ni-umbrella-13::before {
+  content: "\ea5a";
+}
+
+.ni-user-run::before {
+  content: "\ea5b";
+}
+
+.ni-vector::before {
+  content: "\ea5c";
+}
+
+.ni-watch-time::before {
+  content: "\ea5d";
+}
+
+.ni-world::before {
+  content: "\ea5e";
+}
+
+.ni-zoom-split-in::before {
+  content: "\ea5f";
+}
+
+.ni-collection::before {
+  content: "\ea60";
+}
+
+.ni-image::before {
+  content: "\ea61";
+}
+
+.ni-shop::before {
+  content: "\ea62";
+}
+
+.ni-ungroup::before {
+  content: "\ea63";
+}
+
+.ni-world-2::before {
+  content: "\ea64";
+}
+
+.ni-ui-04::before {
+  content: "\ea65";
+}
+
+
+/* all icon font classes list here */

eveai_app/static/assets/css/nucleo-svg.css

@@ -0,0 +1,135 @@
+/* Generated using nucleoapp.com */
+/* --------------------------------
+
+Icon colors
+
+-------------------------------- */
+
+.icon {
+  display: inline-block;
+  /* icon primary color */
+  color: #111111;
+  height: 1em;
+  width: 1em;
+}
+
+.icon use {
+  /* icon secondary color - fill */
+  fill: #7ea6f6;
+}
+
+.icon.icon-outline use {
+  /* icon secondary color - stroke */
+  stroke: #7ea6f6;
+}
+
+/* --------------------------------
+
+Change icon size
+
+-------------------------------- */
+
+.icon-xs {
+  height: 0.5em;
+  width: 0.5em;
+}
+
+.icon-sm {
+  height: 0.8em;
+  width: 0.8em;
+}
+
+.icon-lg {
+  height: 1.6em;
+  width: 1.6em;
+}
+
+.icon-xl {
+  height: 2em;
+  width: 2em;
+}
+
+/* -------------------------------- 
+
+Align icon and text 
+
+-------------------------------- */
+
+.icon-text-aligner {
+  /* add this class to parent element that contains icon + text */
+  display: flex;
+  align-items: center;
+}
+
+.icon-text-aligner .icon {
+  color: inherit;
+  margin-right: 0.4em;
+}
+
+.icon-text-aligner .icon use {
+  color: inherit;
+  fill: currentColor;
+}
+
+.icon-text-aligner .icon.icon-outline use {
+  stroke: currentColor;
+}
+
+/* -------------------------------- 
+
+Icon reset values - used to enable color customizations
+
+-------------------------------- */
+
+.icon {
+  fill: currentColor;
+  stroke: none;
+}
+
+.icon.icon-outline {
+  fill: none;
+  stroke: currentColor;
+}
+
+.icon use {
+  stroke: none;
+}
+
+.icon.icon-outline use {
+  fill: none;
+}
+
+/* -------------------------------- 
+
+Stroke effects - Nucleo outline icons
+
+- 16px icons -> up to 1px stroke (16px outline icons do not support stroke changes)
+- 24px, 32px icons -> up to 2px stroke
+- 48px, 64px icons -> up to 4px stroke
+
+-------------------------------- */
+
+.icon-outline.icon-stroke-1 {
+  stroke-width: 1px;
+}
+
+.icon-outline.icon-stroke-2 {
+  stroke-width: 2px;
+}
+
+.icon-outline.icon-stroke-3 {
+  stroke-width: 3px;
+}
+
+.icon-outline.icon-stroke-4 {
+  stroke-width: 4px;
+}
+
+.icon-outline.icon-stroke-1 use,
+.icon-outline.icon-stroke-3 use {
+  -webkit-transform: translateX(0.5px) translateY(0.5px);
+  -moz-transform: translateX(0.5px) translateY(0.5px);
+  -ms-transform: translateX(0.5px) translateY(0.5px);
+  -o-transform: translateX(0.5px) translateY(0.5px);
+  transform: translateX(0.5px) translateY(0.5px);
+}

eveai_app/templates/eveai_list_view.html

@@ -363,50 +363,67 @@ document.addEventListener('DOMContentLoaded', function() {
                 return;
             }
 
-            // Zoek buttons in de volledige formulier context (niet alleen de container)
+            // Zoek buttons zo dicht mogelijk bij de tabel met gegeven containerId
-            const form = document.getElementById(`${containerId}-form`) || document.querySelector('form');
+            // 1. Probeer eerst een expliciet formulier met id="<table_id>-form"
-            const buttons = form ? form.querySelectorAll('button[onclick*="handleListViewAction"]') :
+            let scopeEl = document.getElementById(`${containerId}-form`);
-                           document.querySelectorAll('button[onclick*="handleListViewAction"]');
+
+            // 2. Zo niet, gebruik de dichtstbijzijnde .container rond de tabel zelf
+            if (!scopeEl) {
+                const tableEl = document.getElementById(containerId);
+                if (tableEl) {
+                    scopeEl = tableEl.closest('.container') || tableEl.parentElement;
+                }
+            }
+
+            // 3. Als er nog steeds geen scope is, val dan terug op de hele document-body
+            const buttons = (scopeEl || document.body)
+                .querySelectorAll('button[onclick*="handleListViewAction"]');
 
             console.log(`Updating buttons voor ${containerId}, ${buttons.length} buttons gevonden, selectedRow:`, instance.selectedRow);
 
             buttons.forEach(button => {
                 // Parse the onclick attribute to get the action value and requiresSelection parameter
-                const onclickAttr = button.getAttribute('onclick');
+                const onclickAttr = button.getAttribute('onclick') || '';
-                const match = onclickAttr.match(/handleListViewAction\('([^']+)',\s*(true|false)\)/i);
+                console.log('ListView _updateActionButtons: inspect button onclickAttr =', onclickAttr);
-                if (match) {
-                    const actionValue = match[1];
-                    const requiresSelection = match[2].toLowerCase() === 'true';
 
-                    // Direct toepassen van requiresSelection-check
+                // Robuustere regex: sta spaties toe en zowel enkele als dubbele quotes
-                    if (requiresSelection) {
+                const match = onclickAttr.match(/handleListViewAction\s*\(\s*['"]([^'"\\]+)['"]\s*,\s*(true|false)/i);
-                        // Controleer of er een geselecteerde rij is
+                if (!match) {
-                        const isDisabled = !instance.selectedRow;
+                    console.warn('ListView _updateActionButtons: geen match gevonden voor handleListViewAction-pattern op deze button');
-                        button.disabled = isDisabled;
+                    return;
+                }
 
-                        // Voeg/verwijder disabled class voor styling
+                const actionValue = match[1];
-                        if (isDisabled) {
+                const requiresSelection = match[2].toLowerCase() === 'true';
-                            button.classList.add('disabled');
-                        } else {
-                            button.classList.remove('disabled');
-                        }
 
-                        console.log(`Button ${actionValue} updated: disabled=${isDisabled}`);
+                // Direct toepassen van requiresSelection-check
+                if (requiresSelection) {
+                    // Controleer of er een geselecteerde rij is
+                    const isDisabled = !instance.selectedRow;
+                    button.disabled = isDisabled;
+
+                    // Voeg/verwijder disabled class voor styling
+                    if (isDisabled) {
+                        button.classList.add('disabled');
+                    } else {
+                        button.classList.remove('disabled');
                     }
 
-                    // Backup check op basis van actions in config (voor achterwaartse compatibiliteit)
+                    console.log(`Button ${actionValue} updated: disabled=${isDisabled}`);
-                    const action = instance.config.actions.find(a => a.value === actionValue);
+                }
-                    if (action && action.requiresSelection === true && !requiresSelection) {
-                        // Ook controleren op basis van action config
-                        const isDisabled = !instance.selectedRow;
-                        button.disabled = isDisabled;
 
-                        // Voeg/verwijder disabled class voor styling
+                // Backup check op basis van actions in config (voor achterwaartse compatibiliteit)
-                        if (isDisabled) {
+                const action = instance.config.actions.find(a => a.value === actionValue);
-                            button.classList.add('disabled');
+                if (action && action.requiresSelection === true && !requiresSelection) {
-                        } else {
+                    // Ook controleren op basis van action config
-                            button.classList.remove('disabled');
+                    const isDisabled = !instance.selectedRow;
-                        }
+                    button.disabled = isDisabled;
+
+                    // Voeg/verwijder disabled class voor styling
+                    if (isDisabled) {
+                        button.classList.add('disabled');
+                    } else {
+                        button.classList.remove('disabled');
                     }
                 }
             });

eveai_app/templates/interaction/edit_specialist.html

@@ -4,7 +4,7 @@
 {% block title %}Edit Specialist{% endblock %}
 
 {% block content_title %}Edit Specialist{% endblock %}
-{% block content_description %}Edit a Specialist and its components{% endblock %}
+{% block content_description %}Edit a Specialist{% endblock %}
 
 {% block content %}
     <div class="container-fluid px-0">
@@ -31,11 +31,6 @@
                                             Configuration
                                         </a>
                                     </li>
-                                    <li class="nav-item">
-                                        <a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#components-tab" role="tab">
-                                            Components
-                                        </a>
-                                    </li>
                                 </ul>
                             </div>
 
@@ -48,17 +43,17 @@
                                     {% endfor %}
 
                                     <!-- Overview Section -->
-{#                                    <div class="row mb-4">#}
+                                    {#                                    <div class="row mb-4">#}
-{#                                        <div class="col-12">#}
+                                    {#                                        <div class="col-12">#}
-{#                                            <div class="card">#}
+                                    {#                                            <div class="card">#}
-{#                                                <div class="card-body">#}
+                                    {#                                                <div class="card-body">#}
-{#                                                    <div class="specialist-overview" id="specialist-svg">#}
+                                    {#                                                    <div class="specialist-overview" id="specialist-svg">#}
-{#                                                        <img src="{{ svg_path }}" alt="Specialist Overview" class="w-100">#}
+                                    {#                                                        <img src="{{ svg_path }}" alt="Specialist Overview" class="w-100">#}
-{#                                                    </div>#}
+                                    {#                                                    </div>#}
-{#                                                </div>#}
+                                    {#                                                </div>#}
-{#                                            </div>#}
+                                    {#                                            </div>#}
-{#                                        </div>#}
+                                    {#                                        </div>#}
-{#                                    </div>#}
+                                    {#                                    </div>#}
                                 </div>
 
                                 <!-- Configuration Tab -->
@@ -72,29 +67,6 @@
                                         {% endfor %}
                                     {% endfor %}
                                 </div>
-
-                                <!-- Components Tab (Unified list view) -->
-                                <div class="tab-pane fade" id="components-tab" role="tabpanel">
-                                    <div class="card">
-                                        <div class="card-body">
-                                            <div class="container">
-                                                <input type="hidden" id="{{ components_table_id }}-selected-row" name="selected_row" value="">
-                                                <input type="hidden" id="{{ components_table_id }}-action" name="action" value="">
-                                                <div id="{{ components_table_id }}" class="tabulator-list-view"></div>
-                                                <div class="row mt-3">
-                                                    <div class="col-12">
-                                                        <button type="button"
-                                                                data-table-id="{{ components_table_id }}"
-                                                                onclick="handleListViewAction('edit_component', true, event)"
-                                                                class="btn btn-primary requires-selection" disabled>
-                                                            Edit
-                                                        </button>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
                             </div>
                         </div>
                     </div>
@@ -105,299 +77,8 @@
         </div>
     </div>
 
-    <!-- Component Editor Modal (intentionally placed outside the main form to avoid nested forms) -->
-    <div class="modal fade" id="componentModal" tabindex="-1" aria-hidden="true">
-      <div class="modal-dialog modal-lg modal-dialog-scrollable">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title" id="componentModalLabel">Edit Component</h5>
-            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-          </div>
-          <div class="modal-body" id="componentModalBody">
-            <!-- Partial form will be injected here -->
-          </div>
-        </div>
-      </div>
-    </div>
 {% endblock %}
 
 {% block scripts %}
 {{ super() }}
-<script src="{{ url_for('static', filename='assets/js/eveai-list-view.js') }}"></script>
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    const componentModalEl = document.getElementById('componentModal');
-    const componentModalBody = document.getElementById('componentModalBody');
-    const componentModalLabel = document.getElementById('componentModalLabel');
-    let componentModal;
-
-    // Initialize the combined components list using EveAI.ListView
-    function initComponentsList() {
-        function tryInit() {
-            if (window.EveAI && window.EveAI.ListView && typeof window.EveAI.ListView.initialize === 'function') {
-                const cfg = {
-                    data: {{ components_data | tojson }},
-                    columns: {{ components_columns | tojson }},
-                    initialSort: {{ components_initial_sort | tojson }},
-                    index: {{ components_index | tojson }},
-                    actions: {{ components_actions | tojson }},
-                    tableHeight: {{ components_table_height|default(600) }},
-                    selectable: true
-                };
-                // Resolve string formatters (e.g., 'typeBadge') to functions before initializing Tabulator
-                if (window.EveAI && window.EveAI.ListView && window.EveAI.ListView.formatters && Array.isArray(cfg.columns)) {
-                    cfg.columns = cfg.columns.map(col => {
-                        if (typeof col.formatter === 'string' && window.EveAI.ListView.formatters[col.formatter]) {
-                            return { ...col, formatter: window.EveAI.ListView.formatters[col.formatter] };
-                        }
-                        return col;
-                    });
-                }
-                const table = window.EveAI.ListView.initialize('{{ components_table_id }}', cfg);
-                // Expose for quick debugging
-                window.__componentsTable = table;
-
-                // Fallback: ensure instance registry is populated even if the module didn't store it yet
-                window.EveAI.ListView.instances = window.EveAI.ListView.instances || {};
-                if (!window.EveAI.ListView.instances['{{ components_table_id }}'] && table) {
-                    window.EveAI.ListView.instances['{{ components_table_id }}'] = {
-                        table: table,
-                        config: cfg,
-                        selectedRow: null
-                    };
-                }
-                // Ensure single-click selects exactly one row (defensive)
-                if (table && typeof table.on === 'function') {
-                    try {
-                        table.on('rowClick', function(e, row){ row.getTable().deselectRow(); row.select(); });
-                        table.on('cellClick', function(e, cell){ const r = cell.getRow(); r.getTable().deselectRow(); r.select(); });
-                        table.on('rowSelectionChanged', function(data, rows){
-                            const inst = window.EveAI.ListView.instances['{{ components_table_id }}'];
-                            if (inst) { inst.selectedRow = rows.length ? rows[0].getData() : null; }
-                            if (typeof window.EveAI.ListView.updateActionButtons === 'function') {
-                                window.EveAI.ListView.updateActionButtons('{{ components_table_id }}');
-                            }
-                        });
-                    } catch (err) { console.warn('Could not attach selection handlers:', err); }
-                }
-
-                // Register embedded action handler for this table
-                window.EveAI.ListView.embeddedHandlers = window.EveAI.ListView.embeddedHandlers || {};
-                window.EveAI.ListView.embeddedHandlers['{{ components_table_id }}'] = function(action, row, tableId){
-                    if (action !== 'edit_component' || !row) return;
-                    const id = row.id;
-                    const type = row.type_name; // 'agent' | 'task' | 'tool'
-
-                    // Build edit URL from server-side templates with placeholder 0
-                    const editUrls = {
-                        agent: "{{ prefixed_url_for('interaction_bp.edit_agent', agent_id=0) }}",
-                        task:  "{{ prefixed_url_for('interaction_bp.edit_task',  task_id=0) }}",
-                        tool:  "{{ prefixed_url_for('interaction_bp.edit_tool',  tool_id=0) }}",
-                    };
-                    const url = (editUrls[type] || '').replace('/0', `/${id}`);
-                    fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
-                      .then(resp => { if (!resp.ok) throw new Error(`HTTP ${resp.status}`); return resp.text(); })
-                      .then(html => {
-                          componentModalBody.innerHTML = html;
-                          componentModalLabel.textContent = `Edit ${type.charAt(0).toUpperCase()+type.slice(1)}`;
-                          componentModalEl.dataset.componentType = type;
-                          componentModalEl.dataset.componentId = id;
-
-                          // Helper to open modal once Bootstrap is available
-                          function openModal() {
-                              try {
-                                  if (!componentModal) componentModal = new bootstrap.Modal(componentModalEl);
-                                  componentModal.show();
-                              } catch (e) {
-                                  console.error('Failed to open Bootstrap modal:', e);
-                                  alert('Kan de editor niet openen (Bootstrap modal ontbreekt).');
-                              }
-                          }
-
-                          if (window.bootstrap && typeof bootstrap.Modal === 'function') {
-                              openModal();
-                          } else {
-                              // Fallback: laad Bootstrap bundle dynamisch en open daarna
-                              const script = document.createElement('script');
-                              script.src = 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js';
-                              script.onload = () => openModal();
-                              script.onerror = () => {
-                                  console.error('Kon Bootstrap bundle niet laden');
-                                  alert('Kan de editor niet openen omdat Bootstrap JS ontbreekt.');
-                              };
-                              document.head.appendChild(script);
-                          }
-                      })
-                      .catch(err => {
-                          console.error('Error loading editor:', err);
-                          alert('Error loading editor. Please try again.');
-                      });
-                };
-            } else {
-                setTimeout(tryInit, 100);
-            }
-        }
-        tryInit();
-    }
-
-    initComponentsList();
-
-    // Note: we removed the modal footer submit button. The partial provides its own buttons.
-    // Submissions are intercepted via the submit listener on componentModalBody below.
-
-    // Refresh the components list data after a successful save
-    function refreshComponentsData() {
-        const url = "{{ prefixed_url_for('interaction_bp.specialist_components_data', specialist_id=specialist_id) }}";
-        fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' }})
-          .then(resp => resp.json())
-          .then(payload => {
-              const instance = window.EveAI.ListView.instances['{{ components_table_id }}'];
-              if (instance && instance.table && Array.isArray(payload.data)) {
-                  instance.table.setData(payload.data);
-              }
-          })
-          .catch(err => console.error('Failed to refresh components data', err));
-    }
-
-    // Intercept native form submit events within the modal (handles Enter key too)
-    componentModalBody.addEventListener('submit', function(e) {
-        const formEl = e.target.closest('#componentEditForm');
-        if (!formEl) return; // Not our form
-        e.preventDefault();
-
-        const formData = new FormData(formEl);
-
-        const componentType = componentModalEl.dataset.componentType;
-        const componentId = componentModalEl.dataset.componentId;
-
-        // Build robust, prefix-aware absolute save URL from server-side templates
-        const saveUrls = {
-            agent: "{{ prefixed_url_for('interaction_bp.save_agent', agent_id=0) }}",
-            task:  "{{ prefixed_url_for('interaction_bp.save_task',  task_id=0) }}",
-            tool:  "{{ prefixed_url_for('interaction_bp.save_tool',  tool_id=0) }}",
-        };
-        const urlTemplate = saveUrls[componentType];
-        const saveUrl = urlTemplate.replace('/0', `/${componentId}`);
-
-        fetch(saveUrl, {
-            method: 'POST',
-            body: formData,
-            headers: { 'X-Requested-With': 'XMLHttpRequest' }
-        })
-        .then(async resp => {
-            const ct = resp.headers.get('Content-Type') || '';
-            if (resp.ok) {
-                // Expect JSON success
-                let data = null;
-                try { data = await resp.json(); } catch (_) {}
-                if (data && data.success) {
-                    componentModal.hide();
-                    refreshComponentsData();
-                    return;
-                }
-                throw new Error(data && data.message ? data.message : 'Save failed');
-            }
-            // For validation errors (400), server returns HTML partial -> replace modal body
-            if (resp.status === 400 && ct.includes('text/html')) {
-                const html = await resp.text();
-                componentModalBody.innerHTML = html;
-                return;
-            }
-            // Other errors
-            let message = 'Save failed';
-            if (ct.includes('application/json')) {
-                try {
-                    const data = await resp.json();
-                    if (data && data.message) message = data.message;
-                } catch (_) {}
-            }
-            throw new Error(message + ` (HTTP ${resp.status})`);
-        })
-        .catch(err => {
-            console.error('Error saving component:', err);
-            alert(err.message || 'Error saving component');
-        });
-    });
-});
-</script>
-
-<style>
-.tab-pane .card {
-    margin-bottom: 1rem;
-}
-
-.nav-link.component-agent,
-.nav-link.component-task,
-.nav-link.component-tool {
-    color: white !important;
-}
-
-/* Add new CSS for normal tabs */
-.nav-link {
-    color: #344767 !important;  /* Default dark color */
-}
-
-/* Style for active tabs */
-.nav-link.active {
-    background-color: #5e72e4 !important;  /* Primary blue color */
-    color: white !important;
-    font-weight: 600;
-    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
-}
-
-/* Style for disabled tabs */
-.nav-link.disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-}
-
-.component-agent {
-    background-color: #9c27b0 !important;  /* Purple */
-    color: white !important;
-}
-
-.component-task {
-    background-color: #ff9800 !important;  /* Orange */
-    color: white !important;
-}
-
-.component-tool {
-    background-color: #009688 !important;  /* Teal */
-    color: white !important;
-}
-
-/* Lighter background versions for the tab content */
-.tab-pane.component-agent-bg {
-    background-color: rgba(156, 39, 176, 0.2);  /* Light purple */
-}
-
-.tab-pane.component-task-bg {
-    background-color: rgba(255, 152, 0, 0.2);   /* Light orange */
-}
-
-.tab-pane.component-tool-bg {
-    background-color: rgba(0, 150, 136, 0.2);   /* Light teal */
-}
-
-/* Add some padding to the tab content */
-.tab-pane {
-    padding: 15px;
-    border-radius: 0.5rem;
-}
-.specialist-overview {
-    width: 100%;
-    height: auto;
-    min-height: 200px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.specialist-overview svg {
-    width: 100%;
-    height: auto;
-    max-height: 400px; /* Adjust as needed */
-}
-</style>
 {% endblock %}

eveai_app/templates/interaction/tune_specialist.html

@@ -0,0 +1,257 @@
+{% extends 'base.html' %}
+{% from "macros.html" import render_field, render_selectable_table %}
+
+{% block title %}Tune Specialist{% endblock %}
+
+{% block content_title %}Tune Specialist{% endblock %}
+{% block content_description %}Edit agents, tasks and tools for specialist <b>{{ specialist.name }}</b> (ID: {{ specialist.id }}) <br>
+    ({{ specialist.type }} - {{ specialist.type_version }}){% endblock %}
+
+{% block content %}
+    <div class="container-fluid px-0">
+        <div class="row">
+            <div class="col-12">
+                <div class="d-flex justify-content-between align-items-center mt-3 mb-3">
+                    <div>
+                        <a href="{{ prefixed_url_for('interaction_bp.specialists', for_redirect=True) }}" class="btn btn-outline-secondary btn-sm">Back to Specialists</a>
+                        <a href="{{ prefixed_url_for('interaction_bp.edit_specialist', specialist_id=specialist.id, for_redirect=True) }}" class="btn btn-outline-primary btn-sm">Edit Specialist Metadata</a>
+                    </div>
+                </div>
+
+                <div class="card">
+                    <div class="card-body">
+                        <h6 class="card-title mb-3">Components</h6>
+                        {# Gebruik de generieke EveAI list view template zodat we dezelfde
+                           Tabulator + EveAI.ListView infrastructuur hergebruiken als elders.
+                           We mappen hier de component-variabelen naar de namen die
+                           eveai_list_view.html verwacht. #}
+                        {% with
+                            title=components_title,
+                            description=components_description,
+                            data=components_data,
+                            columns=components_columns,
+                            actions=components_actions,
+                            initial_sort=components_initial_sort,
+                            table_id=components_table_id,
+                            table_height=components_table_height
+                        %}
+                            {% include 'eveai_list_view.html' %}
+                        {% endwith %}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Component Editor Modal (intentionally placed outside the main content to avoid nested forms) -->
+    <div class="modal fade" id="componentModal" tabindex="-1" aria-hidden="true">
+      <div class="modal-dialog modal-lg modal-dialog-scrollable">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="componentModalLabel">Edit Component</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body" id="componentModalBody">
+            <!-- Partial form will be injected here -->
+          </div>
+        </div>
+      </div>
+    </div>
+{% endblock %}
+
+{% block scripts %}
+{{ super() }}
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const componentModalEl = document.getElementById('componentModal');
+    const componentModalBody = document.getElementById('componentModalBody');
+    const componentModalLabel = document.getElementById('componentModalLabel');
+    let componentModal;
+
+    const tableId = '{{ components_table_id }}';
+
+    // Initialiseer de specialist components tabel via de generieke EveAI.ListView
+    function initializeComponentsTable(retriesLeft = 50) {
+        if (!window.EveAI || !window.EveAI.ListView || !window.EveAI.ListView.initialize) {
+            if (retriesLeft <= 0) {
+                console.error('EveAI.ListView.initialize niet beschikbaar voor components tabel');
+                return;
+            }
+            return setTimeout(() => initializeComponentsTable(retriesLeft - 1), 100);
+        }
+
+        // Bouw dezelfde configuratie op als in list_view.html, maar dan voor de components
+        const tableConfig = {
+            data: {{ components_data | tojson }},
+            columns: {{ components_columns | tojson }},
+            initialSort: {{ components_initial_sort | tojson }},
+            actions: {{ components_actions | tojson }},
+            tableHeight: {{ components_table_height|default(600) }},
+            selectable: true
+        };
+
+        const tabulatorTable = window.EveAI.ListView.initialize(tableId, tableConfig);
+        if (!tabulatorTable) {
+            console.error('Kon de Tabulator tabel voor specialist components niet initialiseren');
+            return;
+        }
+
+        console.log('Specialist components Tabulator tabel succesvol geïnitialiseerd');
+    }
+
+    // Registreer de pagina-specifieke embedded handler voor de actie 'edit_component'
+    function registerEmbeddedHandler(retriesLeft = 50) {
+        if (!window.EveAI || !window.EveAI.ListView || !window.EveAI.ListView.instances) {
+            if (retriesLeft <= 0) {
+                console.error('EveAI.ListView.instances niet beschikbaar voor components tabel');
+                return;
+            }
+            return setTimeout(() => registerEmbeddedHandler(retriesLeft - 1), 100);
+        }
+
+        const instances = window.EveAI.ListView.instances;
+        if (!instances[tableId] || !instances[tableId].table) {
+            if (retriesLeft <= 0) {
+                console.error(`Geen EveAI.ListView instance gevonden voor tabel ${tableId}`);
+                return;
+            }
+            return setTimeout(() => registerEmbeddedHandler(retriesLeft - 1), 100);
+        }
+
+        window.EveAI.ListView.embeddedHandlers = window.EveAI.ListView.embeddedHandlers || {};
+
+        window.EveAI.ListView.embeddedHandlers[tableId] = function(action, row, tId) {
+            if (action !== 'edit_component' || !row) return;
+            const id = row.id;
+            const type = row.type_name; // 'agent' | 'task' | 'tool'
+
+            // Build edit URL from server-side templates with placeholder 0
+            const editUrls = {
+                agent: "{{ prefixed_url_for('interaction_bp.edit_agent', agent_id=0) }}",
+                task:  "{{ prefixed_url_for('interaction_bp.edit_task',  task_id=0) }}",
+                tool:  "{{ prefixed_url_for('interaction_bp.edit_tool',  tool_id=0) }}",
+            };
+            const url = (editUrls[type] || '').replace('/0', `/${id}`);
+            fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
+              .then(resp => { if (!resp.ok) throw new Error(`HTTP ${resp.status}`); return resp.text(); })
+              .then(html => {
+                  componentModalBody.innerHTML = html;
+                  componentModalLabel.textContent = `Edit ${type.charAt(0).toUpperCase()+type.slice(1)}`;
+                  componentModalEl.dataset.componentType = type;
+                  componentModalEl.dataset.componentId = id;
+
+                  // Helper om modal te openen zodra Bootstrap beschikbaar is
+                  function openModal() {
+                      try {
+                          if (!componentModal) componentModal = new bootstrap.Modal(componentModalEl);
+                          componentModal.show();
+                      } catch (e) {
+                          console.error('Failed to open Bootstrap modal:', e);
+                          alert('Kan de editor niet openen (Bootstrap modal ontbreekt).');
+                      }
+                  }
+
+                  if (window.bootstrap && typeof bootstrap.Modal === 'function') {
+                      openModal();
+                  } else {
+                      // Fallback: laad Bootstrap bundle dynamisch en open daarna
+                      const script = document.createElement('script');
+                      script.src = 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js';
+                      script.onload = () => openModal();
+                      script.onerror = () => {
+                          console.error('Kon Bootstrap bundle niet laden');
+                          alert('Kan de editor niet openen omdat Bootstrap JS ontbreekt.');
+                      };
+                      document.head.appendChild(script);
+                  }
+              })
+              .catch(err => {
+                  console.error('Error loading editor:', err);
+                  alert('Error loading editor. Please try again.');
+              });
+        };
+    }
+
+    // Eerst de tabel initialiseren, daarna de embedded handler registreren
+    initializeComponentsTable();
+    registerEmbeddedHandler();
+
+    // Refresh de components list data na een succesvolle save
+    function refreshComponentsData() {
+        const url = "{{ prefixed_url_for('interaction_bp.specialist_components_data', specialist_id=specialist_id) }}";
+        fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' }})
+          .then(resp => resp.json())
+          .then(payload => {
+              if (!window.EveAI || !window.EveAI.ListView || !window.EveAI.ListView.instances) return;
+              const instance = window.EveAI.ListView.instances[tableId];
+              if (instance && instance.table && Array.isArray(payload.data)) {
+                  instance.table.setData(payload.data);
+              }
+          })
+          .catch(err => console.error('Failed to refresh components data', err));
+    }
+
+    // Intercepteer form submits binnen de modal (ook Enter-key)
+    componentModalBody.addEventListener('submit', function(e) {
+        const formEl = e.target.closest('#componentEditForm');
+        if (!formEl) return; // Niet ons form
+        e.preventDefault();
+
+        const formData = new FormData(formEl);
+
+        const componentType = componentModalEl.dataset.componentType;
+        const componentId = componentModalEl.dataset.componentId;
+
+        // Bouw prefix-bewuste absolute save URL op basis van server-side templates
+        const saveUrls = {
+            agent: "{{ prefixed_url_for('interaction_bp.save_agent', agent_id=0) }}",
+            task:  "{{ prefixed_url_for('interaction_bp.save_task',  task_id=0) }}",
+            tool:  "{{ prefixed_url_for('interaction_bp.save_tool',  tool_id=0) }}",
+        };
+        const urlTemplate = saveUrls[componentType];
+        const saveUrl = urlTemplate.replace('/0', `/${componentId}`);
+
+        fetch(saveUrl, {
+            method: 'POST',
+            body: formData,
+            headers: { 'X-Requested-With': 'XMLHttpRequest' }
+        })
+        .then(async resp => {
+            const ct = resp.headers.get('Content-Type') || '';
+            if (resp.ok) {
+                // Verwacht JSON succes
+                let data = null;
+                try { data = await resp.json(); } catch (_) {}
+                if (data && data.success) {
+                    if (componentModal) {
+                        componentModal.hide();
+                    }
+                    refreshComponentsData();
+                    return;
+                }
+                throw new Error(data && data.message ? data.message : 'Save failed');
+            }
+            // Validatiefouten (400) → server stuurt HTML partial terug
+            if (resp.status === 400 && ct.includes('text/html')) {
+                const html = await resp.text();
+                componentModalBody.innerHTML = html;
+                return;
+            }
+            // Andere fouten
+            let message = 'Save failed';
+            if (ct.includes('application/json')) {
+                try {
+                    const data = await resp.json();
+                    if (data && data.message) message = data.message;
+                } catch (_) {}
+            }
+            throw new Error(message + ` (HTTP ${resp.status})`);
+        })
+        .catch(err => {
+            console.error('Error saving component:', err);
+            alert(err.message || 'Error saving component');
+        });
+    });
+});
+</script>
+{% endblock %}

eveai_app/views/document_views.py

@@ -119,7 +119,7 @@ def edit_catalog(catalog_id):
     catalog = Catalog.query.get_or_404(catalog_id)
     tenant_id = session.get('tenant').get('id')
 
-    form = EditCatalogForm(request.form, obj=catalog)
+    form = EditCatalogForm(obj=catalog)
     full_config = cache_manager.catalogs_config_cache.get_config(catalog.type)
     if request.method == 'POST' and form.validate_on_submit():
         form.populate_obj(catalog)
@@ -190,7 +190,7 @@ def edit_processor(processor_id):
         processor.catalog = None
 
     # Create form instance with the processor
-    form = EditProcessorForm(request.form, obj=processor)
+    form = EditProcessorForm(obj=processor)
 
     full_config = cache_manager.processors_config_cache.get_config(processor.type)
     form.add_dynamic_fields("configuration", full_config, processor.configuration)
@@ -290,7 +290,7 @@ def edit_retriever(retriever_id):
     retriever = Retriever.query.get_or_404(retriever_id)
 
     # Create form instance with the retriever
-    form = EditRetrieverForm(request.form, obj=retriever)
+    form = EditRetrieverForm(obj=retriever)
 
     retriever_config = cache_manager.retrievers_config_cache.get_config(retriever.type, retriever.type_version)
     form.add_dynamic_fields("configuration", retriever_config, retriever.configuration)
@@ -575,7 +575,7 @@ def edit_document(document_id):
 @roles_accepted('Super User', 'Partner Admin', 'Tenant Admin')
 def edit_document_version(document_version_id):
     doc_vers = DocumentVersion.query.get_or_404(document_version_id)
-    form = EditDocumentVersionForm(request.form, obj=doc_vers)
+    form = EditDocumentVersionForm(obj=doc_vers)
 
     doc_vers = DocumentVersion.query.get_or_404(document_version_id)
     catalog_id = doc_vers.document.catalog_id

eveai_app/views/interaction_forms.py

@@ -165,8 +165,8 @@ class EditEveAIAgentForm(BaseEditComponentForm):
 
 
 class EditEveAITaskForm(BaseEditComponentForm):
-    task_description = StringField('Task Description', validators=[Optional()])
+    task_description = TextAreaField('Task Description', validators=[Optional()])
-    expected_outcome = StringField('Expected Outcome', validators=[Optional()])
+    expected_outcome = TextAreaField('Expected Outcome', validators=[Optional()])
 
 
 class EditEveAIToolForm(BaseEditComponentForm):

eveai_app/views/interaction_views.py

@@ -199,7 +199,7 @@ def specialist():
 @roles_accepted('Super User', 'Partner Admin', 'Tenant Admin')
 def edit_specialist(specialist_id):
     specialist = Specialist.query.get_or_404(specialist_id)
-    form = EditSpecialistForm(request.form, obj=specialist)
+    form = EditSpecialistForm(obj=specialist)
 
     specialist_config = cache_manager.specialists_config_cache.get_config(specialist.type, specialist.type_version)
     form.add_dynamic_fields("configuration", specialist_config, specialist.configuration)
@@ -282,26 +282,44 @@ def edit_specialist(specialist_id):
     else:
         form_validation_failed(request, form)
 
-    # Build combined components list view config for embedding
-    from eveai_app.views.list_views.interaction_list_views import get_specialist_components_list_view
-    components_config = get_specialist_components_list_view(specialist)
-
     return render_template('interaction/edit_specialist.html',
                            form=form,
                            specialist_id=specialist_id,
-                           components_title=components_config.get('title'),
-                           components_data=components_config.get('data'),
-                           components_columns=components_config.get('columns'),
-                           components_actions=components_config.get('actions'),
-                           components_initial_sort=components_config.get('initial_sort'),
-                           components_table_id=components_config.get('table_id'),
-                           components_table_height=components_config.get('table_height'),
-                           components_description=components_config.get('description'),
-                           components_index=components_config.get('index'),
                            prefixed_url_for=prefixed_url_for,
                            svg_path=svg_path, )
 
 
+@interaction_bp.route('/tune_specialist/<int:specialist_id>', methods=['GET'])
+@roles_accepted('Super User', 'Partner Admin', 'Tenant Admin')
+def tune_specialist(specialist_id):
+    """Standalone tuning view voor het beheren van agents, tasks en tools van een specialist.
+
+    Deze view biedt dezelfde component-editor functionaliteit die voorheen in de
+    Components-tab van ``edit_specialist`` zat, maar dan als aparte pagina.
+    """
+    specialist = Specialist.query.get_or_404(specialist_id)
+
+    # Gebruikt dezelfde gecombineerde componenten-configuratie als de voormalige tab
+    from eveai_app.views.list_views.interaction_list_views import get_specialist_components_list_view
+    components_config = get_specialist_components_list_view(specialist)
+
+    return render_template(
+        'interaction/tune_specialist.html',
+        specialist=specialist,
+        specialist_id=specialist_id,
+        components_title=components_config.get('title'),
+        components_data=components_config.get('data'),
+        components_columns=components_config.get('columns'),
+        components_actions=components_config.get('actions'),
+        components_initial_sort=components_config.get('initial_sort'),
+        components_table_id=components_config.get('table_id'),
+        components_table_height=components_config.get('table_height'),
+        components_description=components_config.get('description'),
+        components_index=components_config.get('index'),
+        prefixed_url_for=prefixed_url_for,
+    )
+
+
 @interaction_bp.route('/specialists', methods=['GET', 'POST'])
 @roles_accepted('Super User', 'Partner Admin', 'Tenant Admin')
 def specialists():
@@ -323,6 +341,8 @@ def handle_specialist_selection():
 
     if action == "edit_specialist":
         return redirect(prefixed_url_for('interaction_bp.edit_specialist', specialist_id=specialist_id, for_redirect=True))
+    elif action == "tune_specialist":
+        return redirect(prefixed_url_for('interaction_bp.tune_specialist', specialist_id=specialist_id, for_redirect=True))
     elif action == "execute_specialist":
         return redirect(prefixed_url_for('interaction_bp.execute_specialist', specialist_id=specialist_id, for_redirect=True))
 
@@ -431,7 +451,7 @@ def edit_task(task_id):
 def save_task(task_id):
     task = EveAITask.query.get_or_404(task_id) if task_id else EveAITask()
     tenant_id = session.get('tenant').get('id')
-    form = EditEveAITaskForm(formdata=request.form, obj=task)  # Bind explicit formdata
+    form = EditEveAITaskForm(obj=task)  # Bind explicit formdata
 
     if form.validate_on_submit():
         try:
@@ -705,7 +725,7 @@ def specialist_magic_link():
 def edit_specialist_magic_link(specialist_magic_link_id):
     specialist_ml = SpecialistMagicLink.query.get_or_404(specialist_magic_link_id)
     # We need to pass along the extra kwarg specialist_id, as this id is required to initialize the form
-    form = EditSpecialistMagicLinkForm(request.form, obj=specialist_ml, specialist_id=specialist_ml.specialist_id)
+    form = EditSpecialistMagicLinkForm(obj=specialist_ml, specialist_id=specialist_ml.specialist_id)
 
     # Find the Specialist type and type_version to enable to retrieve the arguments
     specialist = Specialist.query.get_or_404(specialist_ml.specialist_id)

eveai_app/views/list_views/interaction_list_views.py

@@ -38,6 +38,7 @@ def get_specialists_list_view():
     # Action definitions
     actions = [
         {'value': 'edit_specialist', 'text': 'Edit Specialist', 'class': 'btn-primary', 'requiresSelection': True},
+        {'value': 'tune_specialist', 'text': 'Tune Specialist', 'class': 'btn-secondary', 'requiresSelection': True},
         {'value': 'execute_specialist', 'text': 'Execute Specialist', 'class': 'btn-primary', 'requiresSelection': True},
         {'value': 'create_specialist', 'text': 'Register Specialist', 'class': 'btn-success', 'position': 'right', 'requiresSelection': False}
     ]

eveai_app/views/partner_views.py

@@ -145,7 +145,7 @@ def edit_partner_service(partner_service_id):
     partner_service = PartnerService.query.get_or_404(partner_service_id)
     partner_id = session['partner']['id']
 
-    form = EditPartnerServiceForm(request.form, obj=partner_service)
+    form = EditPartnerServiceForm(obj=partner_service)
     partner_service_config = cache_manager.partner_services_config_cache.get_config(partner_service.type,
                                                                                     partner_service.type_version)
     form.add_dynamic_fields("configuration", partner_service_config, partner_service.configuration)

eveai_app/views/user_views.py

@@ -262,6 +262,25 @@ def user():
     return render_template('user/user.html', form=form)
 
 
+def _populate_user_from_form(form: EditUserForm, user: User) -> None:
+    """Vul het User-object met veilige velden uit het formulier.
+
+    Let op:
+    - Relaties zoals ``roles`` worden hier bewust NIET gezet.
+    - Systeemvelden / read-only velden (tenant_id, confirmed_at, login_count, ...)
+      laten we hier ongemoeid.
+    """
+
+    # Basisgegevens
+    user.first_name = form.first_name.data
+    user.last_name = form.last_name.data
+    user.valid_to = form.valid_to.data
+
+    # Contact-flags
+    user.is_primary_contact = form.is_primary_contact.data
+    user.is_financial_contact = form.is_financial_contact.data
+
+
 @user_bp.route('/user/<int:user_id>', methods=['GET', 'POST'])
 @roles_accepted('Super User', 'Tenant Admin', 'Partner Admin')
 def edit_user(user_id):
@@ -269,10 +288,8 @@ def edit_user(user_id):
     form = EditUserForm(obj=user)
 
     if form.validate_on_submit():
-        # Populate the user with form data
+        # Vul het user-object met veilige velden uit het formulier
-        user.first_name = form.first_name.data
+        _populate_user_from_form(form, user)
-        user.last_name = form.last_name.data
-        user.valid_to = form.valid_to.data
         user.updated_at = dt.now(tz.utc)
 
         # Update roles
@@ -622,7 +639,7 @@ def edit_tenant_make(tenant_make_id):
     tenant_make = TenantMake.query.get_or_404(tenant_make_id)
 
     # Create form instance with the tenant make
-    form = EditTenantMakeForm(request.form, obj=tenant_make)
+    form = EditTenantMakeForm(obj=tenant_make)
 
     # Initialiseer de allowed_languages selectie met huidige waarden
     if request.method == 'GET':
@@ -756,7 +773,7 @@ def edit_consent_version(consent_version_id):
     cv = ConsentVersion.query.get_or_404(consent_version_id)
 
     # Create form instance with the tenant make
-    form = EditConsentVersionForm(request.form, obj=cv)
+    form = EditConsentVersionForm(obj=cv)
 
     if form.validate_on_submit():
         # Update basic fields