Merge branch 'sponsor-rotation'

scripts/demo_run_tools.py

@@ -9,19 +9,20 @@ from pprint import pprint
 from serena.agent import SerenaAgent
 from serena.config.serena_config import SerenaConfig
 from serena.constants import REPO_ROOT
-from serena.tools import FindFileTool, FindReferencingSymbolsTool, GetSymbolsOverviewTool, SearchForPatternTool
+from serena.tools import FindFileTool, FindReferencingSymbolsTool, GetSymbolsOverviewTool, SearchForPatternTool, JetBrainsFindSymbolTool
 
 if __name__ == "__main__":
-    agent = SerenaAgent(project=REPO_ROOT, serena_config=SerenaConfig(gui_log_window_enabled=False, web_dashboard=True))
+    agent = SerenaAgent(project=REPO_ROOT)
 
     # apply a tool
+    find_symbol_tool = agent.get_tool(JetBrainsFindSymbolTool)
     find_refs_tool = agent.get_tool(FindReferencingSymbolsTool)
     find_file_tool = agent.get_tool(FindFileTool)
     search_pattern_tool = agent.get_tool(SearchForPatternTool)
     overview_tool = agent.get_tool(GetSymbolsOverviewTool)
 
     result = agent.execute_task(
-        lambda: overview_tool.apply_ex(relative_file_path="src/solidlsp/ls.py"),
+        lambda: find_symbol_tool.apply("displayBasicStats"),
     )
     pprint(json.loads(result))
     # input("Press Enter to continue...")

src/serena/resources/dashboard/dashboard.css

@@ -21,6 +21,11 @@ html {
     --log-warning: #FF8C00;
     --log-error: #FF0000;
     --stats-header: #f8f9fa;
+    --header-height: 150px;
+    --header-padding: 20px;
+    --header-gap-main: 25px;
+    --frame-padding: 25px;
+    --border-radius: 5px;
 }
 
 [data-theme="dark"] {
@@ -52,41 +57,71 @@ body {
     transition: background-color 0.3s ease, color 0.3s ease;
 }
 
+#frame {
+    max-width: 1600px;
+    margin: 0 auto;
+    padding: var(--frame-padding);
+    padding-top: 0;
+    min-width: 1280px;
+}
+
 .main {
-    padding: 20px;
+    padding-top: var(--header-gap-main);
 }
 
 .header {
     top: 0;
     left: 0;
     right: 0;
+    height: var(--header-height);
     background-color: var(--bg-secondary);
     border-bottom: 1px solid var(--border-color);
-    padding: 20px;
+    border-bottom-left-radius: var(--border-radius);
+    border-bottom-right-radius: var(--border-radius);
+    padding: var(--header-padding);
     display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: 20px;
     z-index: 1000;
     transition: background-color 0.3s ease, border-color 0.3s ease;
-    min-height: 70px;
+    min-height: 90px;
     box-shadow: var(--shadow);
+    max-width: 1600px;
+    margin: 0 auto;
+}
+
+.header-left {
+    display: flex;
+    gap: 30px;
 }
 
 .logo-container {
-    flex: 1;
+    order: 1;
+    flex-shrink: 0;
+}
+
+.header-sponsor {
+    position: relative;
+    top: 0;
+    left: 0;
+    order: 2;
+    max-height: var(--header-height);
 }
 
 .logo-container img {
-    max-width: 250px;
-    height: auto;
+    height: var(--header-height);
     display: block;
 }
 
 .header-nav {
     position: relative;
     display: flex;
-    align-items: center;
+    align-items: flex-end;
+    width: 200px;
+    height: 100%;
     gap: 10px;
+    flex-shrink: 0;
 }
 
 .menu-button {
@@ -109,7 +144,7 @@ body {
 
 .menu-dropdown {
     position: absolute;
-    top: 45px;
+    top: calc(var(--header-height) + 10px);
     right: 0;
     background-color: var(--bg-secondary);
     border: 1px solid var(--border-color);
@@ -143,8 +178,69 @@ body {
     margin: 5px 0;
 }
 
+.platinum-sponsor-slide {
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    height: 100%;
+    opacity: 0;
+    transition: opacity 0.5s ease-in-out;
+}
+
+.platinum-sponsor-slide.active {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.sponsor-image {
+    object-fit: contain;
+    border-radius: var(--border-radius);
+}
+
+.sponsor-border {
+    border: 1px solid var(--border-color);
+}
+
+.platinum-sponsor-slide .sponsor-image {
+    max-height: 100%;
+    object-fit: contain;
+}
+
+.gold-sponsors-section {
+    margin: 0 auto;
+    width: 100%;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+}
+
+.gold-banner {
+    position: relative;
+    width: 100%;
+    height: 60px;
+    overflow: hidden;
+}
+
+.gold-sponsor-slide {
+    position: absolute;
+    opacity: 0;
+    transition: opacity 0.5s ease-in-out;
+}
+
+.gold-sponsor-slide.active {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.gold-sponsor-slide .sponsor-image {
+    max-width: 100%;
+    object-fit: contain;
+}
+
 .page-view {
-    max-width: 1600px;
+    /*max-width: 1600px;*/
     margin: 0 auto;
 }
 
@@ -169,7 +265,7 @@ body {
 .projects-section {
     background-color: var(--bg-secondary);
     border: 1px solid var(--border-color);
-    border-radius: 5px;
+    border-radius: var(--border-radius);
     padding: 20px;
     margin-bottom: 20px;
     transition: background-color 0.3s ease, border-color 0.3s ease;
@@ -575,7 +671,7 @@ body {
     background-color: var(--bg-secondary);
     border: 1px solid var(--border-color);
     border-radius: 5px;
-    height: calc(100vh - 260px);
+    height: calc(100vh - var(--header-height) - 2 * var(--header-padding) - 3 * var(--header-gap-main));
     max-height: 700px;
     overflow-y: auto;
     overflow-x: auto;

src/serena/resources/dashboard/dashboard.js

@@ -40,6 +40,123 @@ class LogMessage {
     };
 }
 
+class SponsorRotation {
+    constructor() {
+        this.platinumIndex = 0;
+        this.goldIndex = 0;
+        this.platinumTimer = null;
+        this.goldTimer = null;
+        this.platinumInterval = 5000;
+        this.goldInterval = 5000;
+
+        this.init();
+    }
+
+    init() {
+        let self = this;
+        this.loadSponsors(function() {
+            self.startPlatinumRotation();
+            self.startGoldRotation();
+        });
+    }
+
+    loadSponsors(onSuccess) {
+        $.ajax({
+            url: 'https://oraios-software.de/serena-sponsors/manifest.php',
+            type: 'GET',
+            success: function (response) {
+                console.log('Sponsors loaded:', response);
+
+                function fillSponsors($container, sponsors, className) {
+                    $.each(sponsors, function (index, sponsor) {
+                        let $img = $('<img src="' + sponsor.image + '" alt="' + sponsor.alt + '" class="sponsor-image">');
+                        let $anchor = $('<a href="' + sponsor.link + '" target="_blank"></a>');
+                        $anchor.append($img);
+                        let $sponsor = $('<div class="' + className + '-slide" data-sponsor="' + (index + 1) + '"></div>');
+                        $sponsor.append($anchor);
+                        if (index === 0) {
+                            $sponsor.addClass('active');
+                        }
+                        if (sponsor.border) {
+                            $img.addClass('sponsor-border');
+                        }
+                        $container.append($sponsor);
+                    });
+                }
+
+                fillSponsors($('#gold-sponsors'), response.gold, 'gold-sponsor');
+                fillSponsors($('#platinum-sponsors'), response.platinum, 'platinum-sponsor');
+                onSuccess();
+            },
+            error: function (xhr, status, error) {
+                console.error('Error loading sponsors:', error);
+            }
+        });
+    }
+
+    startPlatinumRotation() {
+        const self = this;
+        this.platinumTimer = setInterval(() => {
+            self.rotatePlatinum('next');
+        }, this.platinumInterval);
+    }
+
+    startGoldRotation() {
+        const self = this;
+        this.goldTimer = setInterval(() => {
+            self.rotateGold('next');
+        }, this.goldInterval);
+    }
+
+    rotatePlatinum(direction) {
+        const $slides = $('.platinum-sponsor-slide');
+        const total = $slides.length;
+
+        if (total === 0) return;
+
+        // Remove active class from current slide
+        $slides.eq(this.platinumIndex).removeClass('active');
+
+        // Calculate next index
+        if (direction === 'next') {
+            this.platinumIndex = (this.platinumIndex + 1) % total;
+        } else {
+            this.platinumIndex = (this.platinumIndex - 1 + total) % total;
+        }
+
+        // Add active class to new slide
+        $slides.eq(this.platinumIndex).addClass('active');
+
+        // Reset timer
+        clearInterval(this.platinumTimer);
+        this.startPlatinumRotation();
+    }
+
+    rotateGold(direction) {
+        const $groups = $('.gold-sponsor-slide');
+        const total = $groups.length;
+
+        if (total === 0) return;
+
+        // Remove active class from current group
+        $groups.eq(this.goldIndex).removeClass('active');
+
+        // Calculate next index
+        if (direction === 'next') {
+            this.goldIndex = (this.goldIndex + 1) % total;
+        } else {
+            this.goldIndex = (this.goldIndex - 1 + total) % total;
+        }
+
+        // Add active class to new group
+        $groups.eq(this.goldIndex).addClass('active');
+
+        // Reset timer
+        clearInterval(this.goldTimer);
+        this.startGoldRotation();
+    }
+}
+
 class Dashboard {
     constructor() {
         let self = this;
@@ -243,6 +360,9 @@ class Dashboard {
         // Initialize theme
         this.initializeTheme();
 
+        // Initialize sponsor rotation
+        //this.sponsorRotation = new SponsorRotation();
+
         // Add ESC key handler for closing modals
         $(document).keydown(function (e) {
             if (e.key === 'Escape' || e.keyCode === 27) {
@@ -331,7 +451,9 @@ class Dashboard {
         console.log('Polling for config overview...');
         let self = this;
         $.ajax({
-            url: '/get_config_overview', type: 'GET', success: function (response) {
+            url: '/get_config_overview',
+            type: 'GET',
+            success: function (response) {
                 self.failureCount = 0;
 
                 // Check if the config data has actually changed

src/serena/resources/dashboard/index.html

@@ -16,13 +16,22 @@
 </head>
 
 <body>
+<div id="frame">
 <header class="header">
-    <div class="logo-container">
-        <img id="serena-logo" src="serena-logs.png" alt="Serena">
+    <div class="header-left">
+
+        <div class="logo-container">
+            <img id="serena-logo" src="serena-logs.png" alt="Serena">
+        </div>
+
+        <!-- Platinum Sponsors in Header -->
+        <div id="platinum-sponsors" class="header-sponsor">
+        </div>
     </div>
+
     <nav class="header-nav">
         <button id="theme-toggle" class="theme-toggle">
-            <span id="theme-icon">🌙</span>
+            <span id="theme-icon" style="height: 21px">🌙</span>
             <span id="theme-text">Dark</span>
         </button>
         <button id="menu-toggle" class="menu-button">
@@ -38,11 +47,14 @@
         </div>
     </nav>
 </header>
+
+
 <div class="main">
     <!-- Overview Page (Landing) -->
     <div id="page-overview" class="page-view">
         <div class="overview-container">
             <div class="overview-left">
+
                 <section class="config-section">
                     <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                         <h2 style="margin: 0;">Current Configuration</h2>
@@ -121,6 +133,10 @@
                         <div class="loading">Loading contexts...</div>
                     </div>
                 </section>
+
+                <!-- Gold Sponsors -->
+                <section id="gold-sponsors" class="gold-sponsors-section">
+                </section>
             </div>
         </div>
     </div>
@@ -319,6 +335,7 @@
         const dashboard = new Dashboard();
     });
 </script>
+</div> <!-- End of Frame -->
 </body>
 
 </html>