PROMPT.md-based skill injection, scroll-on-image-load fix, skill availability UI

- SkillService: read PROMPT.md instead of SKILL.md for system prompt injection
- SkillInfo: add HasPromptMd field, skills without PROMPT.md are not injectable
- Agent form: disable checkbox + warning for skills missing PROMPT.md
- Thumbnail size: 320px (was 300px)
- Chat: _scrollOnImages() re-scrolls after lazy-loaded images finish loading
- CSS: skill-unavailable/warning styling, adjusted thumb dimensions

wwwroot/css/chat.css

@@ -627,17 +627,13 @@
 
 .krea-thumb {
   display: block;
-  max-width: 300px;
-  max-height: 200px;
+  max-width: 320px !important;
+  max-height: 240px;
   object-fit: contain;
 }
 
 /* Krea Image Modal */
 
-.krea-overlay {
-  backdrop-filter: blur(4px);
-}
-
 .krea-modal {
   max-width: 90vw;
   max-height: 90vh;

wwwroot/css/form.css

@@ -180,6 +180,21 @@
   border-radius: var(--border-radius);
 }
 
+.skill-unavailable {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.skill-unavailable:hover {
+  border-color: var(--f2-border);
+}
+
+.skill-warning {
+  color: var(--dangerous);
+  font-size: var(--font-size-sm, 0.8em);
+  margin-left: auto;
+}
+
 .danger-btn {
   color: var(--dangerous);
   border-color: var(--dangerous);

wwwroot/js/pages/agent-page.js

@@ -185,14 +185,17 @@ function renderSkillCheckboxes(container, allSkills, assignedSlugs) {
   }
   for (const skill of allSkills) {
     const checked = assignedSlugs.includes(skill.slug) ? 'checked' : '';
+    const disabled = !skill.hasPromptMd ? 'disabled' : '';
     const version = skill.version ? ` <span class="skill-version">v${skill.version}</span>` : '';
     const desc = skill.description ? `<span class="skill-desc">${skill.description}</span>` : '';
+    const warning = !skill.hasPromptMd ? '<span class="skill-warning">⚠ PROMPT.md fehlt – Skill nicht verwendbar</span>' : '';
     const row = document.createElement('label');
-    row.className = 'skill-item';
+    row.className = 'skill-item' + (!skill.hasPromptMd ? ' skill-unavailable' : '');
     row.innerHTML = `
-      <input type="checkbox" value="${skill.slug}" ${checked}>
+      <input type="checkbox" value="${skill.slug}" ${checked} ${disabled}>
       <span class="skill-name">${skill.name}${version}</span>
       ${desc}
+      ${warning}
     `;
     container.appendChild(row);
   }

wwwroot/js/ui.js

@@ -79,6 +79,16 @@ function scrollDown() {
   });
 }
 
+function _scrollOnImages(container) {
+  var imgs = container.querySelectorAll('img');
+  for (var i = 0; i < imgs.length; i++) {
+    if (!imgs[i].complete) {
+      imgs[i].addEventListener('load', scrollDown);
+      imgs[i].addEventListener('error', scrollDown);
+    }
+  }
+}
+
 function esc(s) {
   const d = document.createElement('div');
   d.textContent = s;
@@ -234,6 +244,7 @@ function addAssistantBubble(text, timestamp = '', messageId = null, isMarked = f
   if (messageId) div.dataset.messageId = messageId;
   div.innerHTML = renderMarkdown(text);
   wrapKreaGalleries(div);
+  _scrollOnImages(div);
   _addReplyButton(div);
   _addMarkButton(div, messageId, isMarked);
   chatEl().appendChild(div);
@@ -299,6 +310,7 @@ function endStreamBubble() {
     else {
       _streamDiv.innerHTML = renderMarkdown(_streamText);
       wrapKreaGalleries(_streamDiv);
+      _scrollOnImages(_streamDiv);
     }
   }
   _streamDiv = null;