Merge 2674226ce3 into a65a9f5549

common/util-common.ts

@@ -236,42 +236,63 @@ export function copyYAMLComments(doc : Document, src : Document) {
 
 /**
  * Copy yaml comments from srcItems to items
- * Typescript is super annoying here, so I have to use any here
- * TODO: Since comments are belong to the array index, the comments will be lost if the order of the items is changed or removed or added.
+ * Attempts to preserve comments by matching content rather than just array indices
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function copyYAMLCommentsItems(items : any, srcItems : any) {
+function copyYAMLCommentsItems(items: any, srcItems: any) {
     if (!items || !srcItems) {
         return;
     }
 
+    // First pass - try to match items by their content
     for (let i = 0; i < items.length; i++) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const item : any = items[i];
+        const item: any = items[i];
 
+        // Try to find matching source item by content
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const srcItem : any = srcItems[i];
+        const srcIndex = srcItems.findIndex((srcItem: any) =>
+            JSON.stringify(srcItem.value) === JSON.stringify(item.value) &&
+            JSON.stringify(srcItem.key) === JSON.stringify(item.key)
+        );
 
-        if (!srcItem) {
-            continue;
-        }
+        if (srcIndex !== -1) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const srcItem: any = srcItems[srcIndex];
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const nextSrcItem: any = srcItems[srcIndex + 1];
 
-        if (item.key && srcItem.key) {
-            item.key.comment = srcItem.key.comment;
-            item.key.commentBefore = srcItem.key.commentBefore;
-        }
+            if (item.key && srcItem.key) {
+                item.key.comment = srcItem.key.comment;
+                item.key.commentBefore = srcItem.key.commentBefore;
+            }
 
-        if (srcItem.comment) {
-            item.comment = srcItem.comment;
-        }
+            if (srcItem.comment) {
+                item.comment = srcItem.comment;
+            }
 
-        if (item.value && srcItem.value) {
-            if (typeof item.value === "object" && typeof srcItem.value === "object") {
-                item.value.comment = srcItem.value.comment;
-                item.value.commentBefore = srcItem.value.commentBefore;
+            // Handle comments between array items
+            if (nextSrcItem && nextSrcItem.commentBefore) {
+                if (items[i + 1]) {
+                    items[i + 1].commentBefore = nextSrcItem.commentBefore;
+                }
+            }
 
-                if (item.value.items && srcItem.value.items) {
-                    copyYAMLCommentsItems(item.value.items, srcItem.value.items);
+            // Handle trailing comments after array items
+            if (srcItem.value && srcItem.value.comment) {
+                if (item.value) {
+                    item.value.comment = srcItem.value.comment;
+                }
+            }
+
+            if (item.value && srcItem.value) {
+                if (typeof item.value === "object" && typeof srcItem.value === "object") {
+                    item.value.comment = srcItem.value.comment;
+                    item.value.commentBefore = srcItem.value.commentBefore;
+
+                    if (item.value.items && srcItem.value.items) {
+                        copyYAMLCommentsItems(item.value.items, srcItem.value.items);
+                    }
                 }
             }
         }

frontend/components.d.ts

@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     About: typeof import('./src/components/settings/About.vue')['default']
+    AgentStackList: typeof import('./src/components/AgentStackList.vue')['default']
     Appearance: typeof import('./src/components/settings/Appearance.vue')['default']
     ArrayInput: typeof import('./src/components/ArrayInput.vue')['default']
     ArraySelect: typeof import('./src/components/ArraySelect.vue')['default']

frontend/src/components/AgentStackList.vue

@@ -0,0 +1,46 @@
+<template>
+    <div class="wrapper">
+        <div class="group-header">
+            {{ agentName }}
+        </div>
+
+        <slot />
+    </div>
+
+    <hr>
+</template>
+
+<script setup lang="ts">
+interface AgentStackListProps {
+    agentName: string;
+}
+
+defineProps<AgentStackListProps>();
+</script>
+
+<style lang="scss" scoped>
+@import "../styles/vars.scss";
+
+.group-header {
+    border-bottom: 1px solid #dee2e6;
+    border-radius: 10px;
+    margin-bottom: 10px;
+    font-size: 1.25rem;
+    font-weight: 500;
+    padding: 10px;
+
+    .dark & {
+        background-color: darken($color: $dark-header-bg, $amount: 1.90);
+        border-bottom: 0;
+    }
+}
+
+@media (max-width: 770px) {
+    .group-header {
+        margin: -20px;
+        margin-bottom: 10px;
+        padding: 5px;
+    }
+}
+
+</style>

frontend/src/components/StackList.vue

@@ -42,7 +42,22 @@
                 </span>
             </div>
         </div>
-        <div ref="stackList" class="stack-list" :class="{ scrollbar: scrollbar }" :style="stackListStyle">
+
+        <div v-if="searchText === '' && $root.agentCount > 1" ref="stackList" :style="stackListStyle" class="stack-list">
+            <AgentStackList v-for="[agentName, stacks] in stackListByAgent" :agentName="agentName" :key="agentName">
+                <StackListItem
+                    v-for="(stack, index) in stacks"
+                    :key="index"
+                    :stack="stack"
+                    :isSelectMode="selectMode"
+                    :isSelected="isSelected"
+                    :select="select"
+                    :deselect="deselect"
+                />
+            </AgentStackList>
+        </div>
+
+        <div v-else ref="stackList" class="stack-list" :class="{ scrollbar: scrollbar }" :style="stackListStyle">
             <div v-if="Object.keys(sortedStackList).length === 0" class="text-center mt-3">
                 <router-link to="/compose">{{ $t("addFirstStackMsg") }}</router-link>
             </div>
@@ -189,7 +204,30 @@ export default {
 
             return result;
         },
+        /**
+         * Groups all stacks by it's agent
+         * @returns {Map<string, object} A map containing all agents with their stacks
+         */
+        stackListByAgent() {
+            const stacksByAgent = new Map();
+            const stacks = this.$root.completeStackList;
 
+            for (const key of Object.keys(stacks)) {
+                // Handle stacks with no suffix (from the current endpoint)
+                let [ stackName, agent ] = key.split("_");
+                const stackHasEndpoint = agent !== "";
+                agent = stackHasEndpoint ? agent : this.$t("currentEndpoint");
+
+                if (!stacksByAgent.has(agent)) {
+                    stacksByAgent.set(agent, []);
+                }
+
+                const stack = stacks[!stackHasEndpoint ? `${stackName}_` : `${stackName}_${agent}`];
+                stacksByAgent.get(agent).push(stack);
+            }
+
+            return stacksByAgent;
+        },
         isDarkTheme() {
             return document.body.classList.contains("dark");
         },

frontend/src/components/Terminal.vue

@@ -247,7 +247,6 @@ export default {
 <style scoped lang="scss">
 .main-terminal {
     height: 100%;
-    overflow-x: scroll;
 }
 </style>