Dashboard: added section displaying memories, show path to mode/context on hover

[ci skip]

src/serena/dashboard.py

@@ -49,6 +49,7 @@ class ResponseConfigOverview(BaseModel):
     available_tools: list[dict[str, str | bool]]
     available_modes: list[dict[str, str | bool]]
     available_contexts: list[dict[str, str | bool]]
+    available_memories: list[str] | None
 
 
 class SerenaDashboardAPI:
@@ -162,11 +163,12 @@ class SerenaDashboardAPI:
         context_info = {
             "name": context.name,
             "description": context.description,
+            "path": SerenaAgentContext.get_path(context.name),
         }
 
         # Get active modes
         modes = self._agent.get_active_modes()
-        modes_info = [{"name": mode.name, "description": mode.description} for mode in modes]
+        modes_info = [{"name": mode.name, "description": mode.description, "path": SerenaAgentMode.get_path(mode.name)} for mode in modes]
         active_mode_names = [mode.name for mode in modes]
 
         # Get active tools
@@ -203,6 +205,7 @@ class SerenaDashboardAPI:
                 {
                     "name": mode_name,
                     "is_active": mode_name in active_mode_names,
+                    "path": SerenaAgentMode.get_path(mode_name),
                 }
             )
 
@@ -214,6 +217,7 @@ class SerenaDashboardAPI:
                 {
                     "name": context_name,
                     "is_active": context_name == context.name,
+                    "path": SerenaAgentContext.get_path(context_name),
                 }
             )
 
@@ -223,6 +227,11 @@ class SerenaDashboardAPI:
             full_stats = self._tool_usage_stats.get_tool_stats_dict()
             tool_stats_summary = {name: {"num_calls": stats["num_times_called"]} for name, stats in full_stats.items()}
 
+        # Get available memories if ReadMemoryTool is active
+        available_memories = None
+        if self._agent.tool_is_active("read_memory") and project is not None:
+            available_memories = project.memories_manager.list_memories()
+
         return ResponseConfigOverview(
             active_project=project_info,
             context=context_info,
@@ -233,6 +242,7 @@ class SerenaDashboardAPI:
             available_tools=available_tools,
             available_modes=available_modes,
             available_contexts=available_contexts,
+            available_memories=available_memories,
         )
 
     def _shutdown(self) -> None:

src/serena/resources/dashboard/dashboard.js

@@ -210,9 +210,11 @@ class Dashboard {
     }
 
     displayConfig(config) {
-        // Check if tools section is currently expanded
-        const $existingContent = $('#tools-content');
-        const wasExpanded = $existingContent.is(':visible');
+        // Check if tools and memories sections are currently expanded
+        const $existingToolsContent = $('#tools-content');
+        const $existingMemoriesContent = $('#memories-content');
+        const wasToolsExpanded = $existingToolsContent.is(':visible');
+        const wasMemoriesExpanded = $existingMemoriesContent.is(':visible');
 
         let html = '<div class="config-grid">';
 
@@ -225,17 +227,16 @@ class Dashboard {
 
         // Context info
         html += '<div class="config-label">Context:</div>';
-        html += '<div class="config-value">' + config.context.name + '</div>';
+        html += '<div class="config-value"><span title="' + config.context.path + '">' + config.context.name + '</span></div>';
 
         // Modes info
         html += '<div class="config-label">Active Modes:</div>';
         html += '<div class="config-value">';
         if (config.modes.length > 0) {
-            html += '<ul class="config-list">';
-            config.modes.forEach(function(mode) {
-                html += '<li>' + mode.name + '</li>';
+            const modeSpans = config.modes.map(function(mode) {
+                return '<span title="' + mode.path + '">' + mode.name + '</span>';
             });
-            html += '</ul>';
+            html += modeSpans.join(', ');
         } else {
             html += 'None';
         }
@@ -247,15 +248,30 @@ class Dashboard {
         html += '<div style="margin-top: 20px;">';
         html += '<h3 class="collapsible-header" id="tools-header" style="font-size: 16px; margin: 0;">';
         html += '<span>Active Tools (' + config.active_tools.length + ')</span>';
-        html += '<span class="toggle-icon' + (wasExpanded ? ' expanded' : '') + '">▼</span>';
+        html += '<span class="toggle-icon' + (wasToolsExpanded ? ' expanded' : '') + '">▼</span>';
         html += '</h3>';
-        html += '<div class="collapsible-content tools-grid" id="tools-content" style="' + (wasExpanded ? '' : 'display:none;') + ' margin-top: 10px;">';
+        html += '<div class="collapsible-content tools-grid" id="tools-content" style="' + (wasToolsExpanded ? '' : 'display:none;') + ' margin-top: 10px;">';
         config.active_tools.forEach(function(tool) {
             html += '<div class="tool-item" title="' + tool + '">' + tool + '</div>';
         });
         html += '</div>';
         html += '</div>';
 
+        // Available memories - collapsible (only show if memories exist)
+        if (config.available_memories && config.available_memories.length > 0) {
+            html += '<div style="margin-top: 20px;">';
+            html += '<h3 class="collapsible-header" id="memories-header" style="font-size: 16px; margin: 0;">';
+            html += '<span>Available Memories (' + config.available_memories.length + ')</span>';
+            html += '<span class="toggle-icon' + (wasMemoriesExpanded ? ' expanded' : '') + '">▼</span>';
+            html += '</h3>';
+            html += '<div class="collapsible-content tools-grid" id="memories-content" style="' + (wasMemoriesExpanded ? '' : 'display:none;') + ' margin-top: 10px;">';
+            config.available_memories.forEach(function(memory) {
+                html += '<div class="tool-item" title="' + memory + '">' + memory + '</div>';
+            });
+            html += '</div>';
+            html += '</div>';
+        }
+
         this.$configDisplay.html(html);
 
         // Re-attach collapsible handler for the newly created tools header
@@ -267,6 +283,16 @@ class Dashboard {
             $content.slideToggle(300);
             $icon.toggleClass('expanded');
         });
+
+        // Re-attach collapsible handler for the newly created memories header
+        $('#memories-header').click(function() {
+            const $header = $(this);
+            const $content = $('#memories-content');
+            const $icon = $header.find('.toggle-icon');
+
+            $content.slideToggle(300);
+            $icon.toggleClass('expanded');
+        });
     }
 
     displayBasicStats(stats) {
@@ -340,7 +366,7 @@ class Dashboard {
         let html = '';
         modes.forEach(function(mode) {
             const activeClass = mode.is_active ? ' active' : '';
-            html += '<div class="info-item' + activeClass + '" title="' + mode.name + '">' + mode.name + '</div>';
+            html += '<div class="info-item' + activeClass + '" title="' + mode.path + '">' + mode.name + '</div>';
         });
 
         this.$availableModesDisplay.html(html);
@@ -355,7 +381,7 @@ class Dashboard {
         let html = '';
         contexts.forEach(function(context) {
             const activeClass = context.is_active ? ' active' : '';
-            html += '<div class="info-item' + activeClass + '" title="' + context.name + '">' + context.name + '</div>';
+            html += '<div class="info-item' + activeClass + '" title="' + context.path + '">' + context.name + '</div>';
         });
 
         this.$availableContextsDisplay.html(html);