From 8905dd2040a2c6b727eefbb62becb1930b79ed7f Mon Sep 17 00:00:00 2001
From: Henrik Jess Nielsen <lrihni@egmont.com>
Date: Sat, 9 May 2026 17:13:10 +0200
Subject: [PATCH] fix(ui): handle available_agents/available_skills response
 keys and nested agent/skill content

- Use r.available_agents and r.available_skills field names from MCP proxy
- Fix extractContent to unwrap agents[0].content / skills[0].content
- Fix Alpine x-for key to include item.name for agents/skills
- Fix selected state comparison to handle name-keyed items
---
 app/templates/dashboard.html | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
index 098e159..9ae7162 100644
--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -363,10 +363,10 @@
     <!-- List -->
     <div class="w-72 border-r border-gray-800 overflow-y-auto p-2 space-y-1 shrink-0">
       <div class="text-xs text-gray-600 px-2 py-1" x-text="filteredItems.length+' items'"></div>
-      <template x-for="item in filteredItems" :key="item.id||item.storage_filename||item.title">
+      <template x-for="item in filteredItems" :key="item.id||item.storage_filename||item.name||item.title">
         <button @click="select(item)"
           class="w-full text-left px-3 py-2 rounded-lg transition-colors text-sm"
-          :class="selectedItem?.id===item.id||selectedItem?.storage_filename===item.storage_filename?'bg-indigo-600/20 border border-indigo-500/40 text-white':'hover:bg-gray-900 text-gray-300 border border-transparent'">
+          :class="(selectedItem?.id&&selectedItem?.id===item.id)||(selectedItem?.storage_filename&&selectedItem?.storage_filename===item.storage_filename)||(selectedItem?.name&&selectedItem?.name===item.name)?'bg-indigo-600/20 border border-indigo-500/40 text-white':'hover:bg-gray-900 text-gray-300 border border-transparent'">
           <div class="font-medium truncate text-sm" x-text="item.title||item.name||item.storage_filename"></div>
           <template x-if="item.category||item.entity_type">
             <div class="text-xs text-gray-600 mt-0.5" x-text="item.category||item.entity_type"></div>
@@ -618,18 +618,16 @@ function knowledgeTab() {
           memories: '/api/v1/memories',
         }[this.subTab];
         const r = await fetch(url).then(r=>r.json());
-        this.items = r.entries||r.adrs||r.memories||r.agents||r.skills||r.howtos||
-                     (r.agents_list ? Object.entries(r.agents_list||{}).map(([n,c])=>({name:n,content:c})) : null)||
-                     this.flattenAgents(r)||[];
+        this.items = r.entries||r.adrs||r.memories||r.files||
+                     r.available_agents||r.available_skills||
+                     r.agents||r.skills||r.howtos||
+                     this.flattenFilesOrHowtos(r)||[];
       } catch(e) { this.items = []; }
       this.loading = false;
       this.filterList();
     },
-    flattenAgents(r) {
-      // agents/skills return nested structure
-      if(r.agents) return Array.isArray(r.agents) ? r.agents : Object.entries(r.agents).map(([k,v])=>({name:k,...(typeof v==='string'?{content:v}:v)}));
-      if(r.skills) return Array.isArray(r.skills) ? r.skills : Object.entries(r.skills).map(([k,v])=>({name:k,...(typeof v==='string'?{content:v}:v)}));
-      if(r.files) return r.files;
+    flattenFilesOrHowtos(r) {
+      if(r.files && Array.isArray(r.files)) return r.files;
       return null;
     },
     filterList() {
@@ -662,6 +660,9 @@ function knowledgeTab() {
       // If it's JSON, pull out content field
       try {
         const j = JSON.parse(raw);
+        // agents/skills return {agents:[{content:...}]} or {skills:[{content:...}]}
+        if(j.agents && j.agents[0]) return j.agents[0].content||JSON.stringify(j,null,2);
+        if(j.skills && j.skills[0]) return j.skills[0].content||JSON.stringify(j,null,2);
         return j.content||j.raw||j.definition||JSON.stringify(j,null,2);
       } catch { return raw; }
     }