refactor(frontend): separate the microagents and conversations (microagent management) (#10596)

Co-authored-by: amanape <83104063+amanape@users.noreply.github.com>
Co-authored-by: openhands <openhands@all-hands.dev>

frontend/src/components/features/microagent-management/microagent-management-repo-microagents.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { Spinner } from "@heroui/react";
@@ -8,6 +9,8 @@ import { useSearchConversations } from "#/hooks/query/use-search-conversations";
 import { GitRepository } from "#/types/git";
 import { RootState } from "#/store";
 import { setSelectedMicroagentItem } from "#/state/microagent-management-slice";
+import { cn } from "#/utils/utils";
+import { I18nKey } from "#/i18n/declaration";
 
 interface MicroagentManagementRepoMicroagentsProps {
   repository: GitRepository;
@@ -22,6 +25,8 @@ export function MicroagentManagementRepoMicroagents({
 
   const dispatch = useDispatch();
 
+  const { t } = useTranslation();
+
   const { full_name: repositoryName } = repository;
 
   // Extract owner and repo from repositoryName (format: "owner/repo")
@@ -103,34 +108,47 @@ export function MicroagentManagementRepoMicroagents({
   const numberOfMicroagents = microagents?.length || 0;
   const numberOfConversations = conversations?.length || 0;
   const totalItems = numberOfMicroagents + numberOfConversations;
+  const hasMicroagents = numberOfMicroagents > 0;
+  const hasConversations = numberOfConversations > 0;
 
   return (
     <div>
       {totalItems === 0 && (
         <MicroagentManagementLearnThisRepo repository={repository} />
       )}
-
       {/* Render microagents */}
-      {numberOfMicroagents > 0 &&
-        microagents?.map((microagent) => (
-          <div key={microagent.name} className="pb-4 last:pb-0">
-            <MicroagentManagementMicroagentCard
-              microagent={microagent}
-              repository={repository}
-            />
-          </div>
-        ))}
+      {hasMicroagents && (
+        <div className="flex flex-col">
+          <span className="text-md text-white font-medium leading-5 mb-4">
+            {t(I18nKey.MICROAGENT_MANAGEMENT$EXISTING_MICROAGENTS)}
+          </span>
+          {microagents?.map((microagent) => (
+            <div key={microagent.name} className="pb-4 last:pb-0">
+              <MicroagentManagementMicroagentCard
+                microagent={microagent}
+                repository={repository}
+              />
+            </div>
+          ))}
+        </div>
+      )}
 
       {/* Render conversations */}
-      {numberOfConversations > 0 &&
-        conversations?.map((conversation) => (
-          <div key={conversation.conversation_id} className="pb-4 last:pb-0">
-            <MicroagentManagementMicroagentCard
-              conversation={conversation}
-              repository={repository}
-            />
-          </div>
-        ))}
+      {hasConversations && (
+        <div className={cn("flex flex-col", hasMicroagents && "mt-4")}>
+          <span className="text-md text-white font-medium leading-5 mb-4">
+            {t(I18nKey.MICROAGENT_MANAGEMENT$OPEN_MICROAGENT_PULL_REQUESTS)}
+          </span>
+          {conversations?.map((conversation) => (
+            <div key={conversation.conversation_id} className="pb-4 last:pb-0">
+              <MicroagentManagementMicroagentCard
+                conversation={conversation}
+                repository={repository}
+              />
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 }

frontend/src/i18n/declaration.ts

@@ -817,6 +817,8 @@ export enum I18nKey {
   MICROAGENT$STATUS_WAITING = "MICROAGENT$STATUS_WAITING",
   MICROAGENT$UNKNOWN_ERROR = "MICROAGENT$UNKNOWN_ERROR",
   MICROAGENT$CONVERSATION_STARTING = "MICROAGENT$CONVERSATION_STARTING",
+  MICROAGENT_MANAGEMENT$EXISTING_MICROAGENTS = "MICROAGENT_MANAGEMENT$EXISTING_MICROAGENTS",
+  MICROAGENT_MANAGEMENT$OPEN_MICROAGENT_PULL_REQUESTS = "MICROAGENT_MANAGEMENT$OPEN_MICROAGENT_PULL_REQUESTS",
   SETTINGS$SECURITY_ANALYZER_LLM_DEFAULT = "SETTINGS$SECURITY_ANALYZER_LLM_DEFAULT",
   SETTINGS$SECURITY_ANALYZER_NONE = "SETTINGS$SECURITY_ANALYZER_NONE",
   SETTINGS$SECURITY_ANALYZER_INVARIANT = "SETTINGS$SECURITY_ANALYZER_INVARIANT",

frontend/src/i18n/translation.json

@@ -13071,6 +13071,38 @@
     "de": "Gespräch wird gestartet...",
     "uk": "Розпочинається розмова..."
   },
+  "MICROAGENT_MANAGEMENT$EXISTING_MICROAGENTS": {
+    "en": "Existing Microagents",
+    "ja": "既存のマイクロエージェント",
+    "zh-CN": "现有微代理",
+    "zh-TW": "現有微代理",
+    "ko-KR": "기존 마이크로에이전트",
+    "no": "Eksisterende mikroagenter",
+    "it": "Microagent esistenti",
+    "pt": "Microagentes existentes",
+    "es": "Microagentes existentes",
+    "ar": "الوكلاء الدقيقون الحاليون",
+    "fr": "Microagents existants",
+    "tr": "Mevcut Mikroajanlar",
+    "de": "Vorhandene Mikroagenten",
+    "uk": "Існуючі мікроагенти"
+  },
+  "MICROAGENT_MANAGEMENT$OPEN_MICROAGENT_PULL_REQUESTS": {
+    "en": "Open Microagent Pull Requests",
+    "ja": "未解決のマイクロエージェントのプルリクエスト",
+    "zh-CN": "未合并的微代理拉取请求",
+    "zh-TW": "未合併的微代理拉取請求",
+    "ko-KR": "오픈된 마이크로에이전트 풀 리퀘스트",
+    "no": "Åpne mikroagent-pull requests",
+    "it": "Pull request di microagent aperte",
+    "pt": "Pull requests de microagentes abertas",
+    "es": "Pull requests de microagentes abiertas",
+    "ar": "طلبات السحب المفتوحة للوكلاء الدقيقين",
+    "fr": "Pull requests de microagents ouvertes",
+    "tr": "Açık Mikroajan Pull İstekleri",
+    "de": "Offene Microagent-Pull-Requests",
+    "uk": "Відкриті pull-запити мікроагентів"
+  },
   "SETTINGS$SECURITY_ANALYZER_LLM_DEFAULT": {
     "en": "LLM Analyzer (Default)",
     "ja": "LLMアナライザー（デフォルト）",