chore(Microagent Management UI): Set up the feature flag for the Microagent Management page. (#9704)

2026-03-22 13:47:19 +08:00 · 2025-07-15 22:49:35 +07:00
parent 54986c9841
commit 17e9b0fd6a
12 changed files with 168 additions and 0 deletions
--- a/frontend/src/api/open-hands.types.ts
+++ b/frontend/src/api/open-hands.types.ts
@@ -53,6 +53,7 @@ export interface GetConfigResponse {
  FEATURE_FLAGS: {
    ENABLE_BILLING: boolean;
    HIDE_LLM_SETTINGS: boolean;
+    HIDE_MICROAGENT_MANAGEMENT?: boolean;
  };
 }

--- a/frontend/src/components/features/microagent-management/microagent-management-sidebar-header.tsx
+++ b/frontend/src/components/features/microagent-management/microagent-management-sidebar-header.tsx
@@ -0,0 +1,19 @@
+import { useTranslation } from "react-i18next";
+import { I18nKey } from "#/i18n/declaration";
+import QuestionCircleIcon from "#/icons/question-circle.svg?react";
+
+export function MicroagentManagementSidebarHeader() {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <h1 className="text-white text-[28px] font-bold">
+        {t(I18nKey.MICROAGENT_MANAGEMENT$DESCRIPTION)}
+      </h1>
+      <p className="text-white text-[14px] font-normal leading-[20px] pt-2">
+        {t(I18nKey.MICROAGENT_MANAGEMENT$USE_MICROAGENTS)}
+        <QuestionCircleIcon className="inline-block ml-1" />
+      </p>
+    </div>
+  );
+}
--- a/frontend/src/components/features/microagent-management/microagent-management-sidebar.tsx
+++ b/frontend/src/components/features/microagent-management/microagent-management-sidebar.tsx
@@ -0,0 +1,9 @@
+import { MicroagentManagementSidebarHeader } from "./microagent-management-sidebar-header";
+
+export function MicroagentManagementSidebar() {
+  return (
+    <div className="w-[418px] h-full border-r border-[#525252] bg-[#24272E] rounded-tl-lg rounded-bl-lg py-10 px-6">
+      <MicroagentManagementSidebarHeader />
+    </div>
+  );
+}
--- a/frontend/src/components/features/sidebar/sidebar.tsx
+++ b/frontend/src/components/features/sidebar/sidebar.tsx
@@ -14,6 +14,7 @@ import { ConversationPanelWrapper } from "../conversation-panel/conversation-pan
 import { useLogout } from "#/hooks/mutation/use-logout";
 import { useConfig } from "#/hooks/query/use-config";
 import { displayErrorToast } from "#/utils/custom-toast-handlers";
+import { MicroagentManagementButton } from "#/components/shared/buttons/microagent-management-button";

 export function Sidebar() {
  const location = useLocation();
@@ -36,6 +37,9 @@ export function Sidebar() {
  const shouldHideLlmSettings =
    config?.FEATURE_FLAGS.HIDE_LLM_SETTINGS && config?.APP_MODE === "saas";

+  const shouldHideMicroagentManagement =
+    config?.FEATURE_FLAGS.HIDE_MICROAGENT_MANAGEMENT;
+
  React.useEffect(() => {
    if (shouldHideLlmSettings) return;

@@ -79,6 +83,11 @@ export function Sidebar() {
              }
              disabled={settings?.EMAIL_VERIFIED === false}
            />
+            {!shouldHideMicroagentManagement && (
+              <MicroagentManagementButton
+                disabled={settings?.EMAIL_VERIFIED === false}
+              />
+            )}
          </div>

          <div className="flex flex-row md:flex-col md:items-center gap-[26px] md:mb-4">
--- a/frontend/src/components/shared/buttons/microagent-management-button.tsx
+++ b/frontend/src/components/shared/buttons/microagent-management-button.tsx
@@ -0,0 +1,28 @@
+import { useTranslation } from "react-i18next";
+import { I18nKey } from "#/i18n/declaration";
+import { TooltipButton } from "./tooltip-button";
+import UnionIcon from "#/icons/union.svg?react";
+
+interface MicroagentManagementButtonProps {
+  disabled?: boolean;
+}
+
+export function MicroagentManagementButton({
+  disabled = false,
+}: MicroagentManagementButtonProps) {
+  const { t } = useTranslation();
+
+  const microagentManagement = t(I18nKey.MICROAGENT_MANAGEMENT$TITLE);
+
+  return (
+    <TooltipButton
+      tooltip={microagentManagement}
+      ariaLabel={microagentManagement}
+      navLinkTo="/microagent-management"
+      testId="microagent-management-button"
+      disabled={disabled}
+    >
+      <UnionIcon />
+    </TooltipButton>
+  );
+}
--- a/frontend/src/i18n/declaration.ts
+++ b/frontend/src/i18n/declaration.ts
@@ -682,6 +682,9 @@ export enum I18nKey {
  COMMON$OPTIONAL = "COMMON$OPTIONAL",
  BROWSER$SERVER_MESSAGE = "BROWSER$SERVER_MESSAGE",
  API$NO_KEY_AVAILABLE = "API$NO_KEY_AVAILABLE",
+  MICROAGENT_MANAGEMENT$TITLE = "MICROAGENT_MANAGEMENT$TITLE",
+  MICROAGENT_MANAGEMENT$DESCRIPTION = "MICROAGENT_MANAGEMENT$DESCRIPTION",
+  MICROAGENT_MANAGEMENT$USE_MICROAGENTS = "MICROAGENT_MANAGEMENT$USE_MICROAGENTS",
  AUTH$BY_SIGNING_UP_YOU_AGREE_TO_OUR = "AUTH$BY_SIGNING_UP_YOU_AGREE_TO_OUR",
  COMMON$TERMS_OF_SERVICE = "COMMON$TERMS_OF_SERVICE",
  COMMON$AND = "COMMON$AND",
--- a/frontend/src/i18n/translation.json
+++ b/frontend/src/i18n/translation.json
@@ -10911,6 +10911,54 @@
        "de": "Kein API-Schlüssel verfügbar",
        "uk": "Немає доступного API-ключа"
    },
+    "MICROAGENT_MANAGEMENT$TITLE": {
+        "en": "Microagent Management",
+        "ja": "マイクロエージェント管理",
+        "zh-CN": "微代理管理",
+        "zh-TW": "微代理管理",
+        "ko-KR": "마이크로에이전트 관리",
+        "no": "Microagent-administrasjon",
+        "it": "Gestione Microagent",
+        "pt": "Gerenciamento de Microagente",
+        "es": "Gestión de microagentes",
+        "ar": "إدارة الميكرووكيل",
+        "fr": "Gestion des microagents",
+        "tr": "Mikroajan Yönetimi",
+        "de": "Microagent-Verwaltung",
+        "uk": "Управління мікроагентами"
+    },
+    "MICROAGENT_MANAGEMENT$DESCRIPTION": {
+        "en": "Manage Microagents",
+        "ja": "マイクロエージェントを管理する",
+        "zh-CN": "管理微代理",
+        "zh-TW": "管理微代理",
+        "ko-KR": "마이크로에이전트 관리",
+        "no": "Administrer mikroagenter",
+        "it": "Gestisci i Microagent",
+        "pt": "Gerenciar Microagentes",
+        "es": "Gestionar microagentes",
+        "ar": "إدارة الميكرووكلاء",
+        "fr": "Gérer les microagents",
+        "tr": "Mikro ajanları yönet",
+        "de": "Microagents verwalten",
+        "uk": "Керування мікроагентами"
+    },
+    "MICROAGENT_MANAGEMENT$USE_MICROAGENTS": {
+        "en": "Use microagents to customize the behavior of OpenHands, teach it about your repositories, and help it work faster.",
+        "ja": "マイクロエージェントを使ってOpenHandsの動作をカスタマイズし、リポジトリについて教え、より速く作業できるようにしましょう。",
+        "zh-CN": "使用微代理自定义OpenHands的行为，让其了解您的仓库，并帮助其更快地工作。",
+        "zh-TW": "使用微代理自訂 OpenHands 的行為，讓其了解您的倉庫，並幫助其更快地工作。",
+        "ko-KR": "마이크로에이전트를 사용하여 OpenHands의 동작을 사용자 정의하고, 저장소에 대해 학습시키며, 더 빠르게 작업할 수 있도록 도와주세요.",
+        "no": "Bruk mikroagenter for å tilpasse oppførselen til OpenHands, lære den om dine repositories, og hjelpe den å jobbe raskere.",
+        "it": "Usa i microagent per personalizzare il comportamento di OpenHands, insegnargli i tuoi repository e aiutarlo a lavorare più velocemente.",
+        "pt": "Use microagentes para personalizar o comportamento do OpenHands, ensiná-lo sobre seus repositórios e ajudá-lo a trabalhar mais rápido.",
+        "es": "Utiliza microagentes para personalizar el comportamiento de OpenHands, enseñarle sobre tus repositorios y ayudarle a trabajar más rápido.",
+        "ar": "استخدم الوكلاء المصغرين لتخصيص سلوك OpenHands، وتعليمه حول مستودعاتك، ومساعدته على العمل بشكل أسرع.",
+        "fr": "Utilisez des microagents pour personnaliser le comportement d'OpenHands, lui apprendre vos dépôts et l'aider à travailler plus rapidement.",
+        "tr": "OpenHands'in davranışını özelleştirmek, depolarınızı ona öğretmek ve daha hızlı çalışmasına yardımcı olmak için mikro ajanları kullanın.",
+        "de": "Verwenden Sie Microagents, um das Verhalten von OpenHands anzupassen, ihm Ihre Repositories beizubringen und ihm zu helfen, schneller zu arbeiten.",
+        "uk": "Використовуйте мікроагенти, щоб налаштувати поведінку OpenHands, навчити його про ваші репозиторії та допомогти йому працювати швидше."
+    },
    "AUTH$BY_SIGNING_UP_YOU_AGREE_TO_OUR": {
        "en": "By signing up, you agree to our",
        "ja": "サインアップすることで、あなたは当社の",
--- a/frontend/src/icons/question-circle.svg
+++ b/frontend/src/icons/question-circle.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8C15 11.866 11.866 15 8 15ZM8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z" fill="white"/>
+<path d="M5.25511 5.78615C5.24752 5.92237 5.3599 6.03271 5.49634 6.03271H6.32082C6.45889 6.03271 6.56868 5.92013 6.58723 5.78331C6.67618 5.12718 7.1265 4.64893 7.92922 4.64893C8.61477 4.64893 9.24318 4.9917 9.24318 5.81689C9.24318 6.45166 8.86867 6.74365 8.27834 7.18799C7.60549 7.67676 7.07229 8.24805 7.11037 9.1748L7.11334 9.39161C7.11521 9.52833 7.22658 9.63818 7.36332 9.63818H8.17434C8.31241 9.63818 8.42434 9.52625 8.42434 9.38818V9.28271C8.42434 8.56543 8.69729 8.35596 9.43361 7.79736C10.043 7.33398 10.6778 6.81982 10.6778 5.74072C10.6778 4.22998 9.40188 3.5 8.00539 3.5C6.73831 3.5 5.34964 4.09061 5.25511 5.78615ZM6.81203 11.5488C6.81203 12.082 7.23732 12.4756 7.82131 12.4756C8.43068 12.4756 8.84963 12.082 8.84963 11.5488C8.84963 10.9966 8.43068 10.6094 7.82131 10.6094C7.23732 10.6094 6.81203 10.9966 6.81203 11.5488Z" fill="white"/>
+</svg>
--- a/frontend/src/icons/union.svg
+++ b/frontend/src/icons/union.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="21" viewBox="0 0 24 21" fill="none">
+  <path d="M3 1.5C2.17157 1.5 1.5 2.17157 1.5 3V15C1.5 15.8284 2.17157 16.5 3 16.5H11.25C11.6642 16.5 12 16.8358 12 17.25C12 17.6642 11.6642 18 11.25 18H3C1.34315 18 0 16.6569 0 15V3C0 1.34315 1.34315 0 3 0H19.5C21.1569 0 22.5 1.34315 22.5 3V9C22.5 9.41421 22.1642 9.75 21.75 9.75C21.3358 9.75 21 9.41421 21 9V3C21 2.17157 20.3284 1.5 19.5 1.5H3Z" fill="currentColor"/>
+  <path d="M4.71967 4.71967C5.01256 4.42678 5.48744 4.42678 5.78033 4.71967L7.76517 6.7045C8.2045 7.14384 8.2045 7.85616 7.76517 8.2955L5.78033 10.2803C5.48744 10.5732 5.01256 10.5732 4.71967 10.2803C4.42678 9.98744 4.42678 9.51256 4.71967 9.21967L6.43934 7.5L4.71967 5.78033C4.42678 5.48744 4.42678 5.01256 4.71967 4.71967Z" fill="currentColor"/>
+  <path d="M8.25 10.5C8.25 10.0858 8.58579 9.75 9 9.75H12C12.4142 9.75 12.75 10.0858 12.75 10.5C12.75 10.9142 12.4142 11.25 12 11.25H9C8.58579 11.25 8.25 10.9142 8.25 10.5Z" fill="currentColor"/>
+  <path d="M24 15.75C24 18.6495 21.6495 21 18.75 21C15.8505 21 13.5 18.6495 13.5 15.75C13.5 12.8505 15.8505 10.5 18.75 10.5C21.6495 10.5 24 12.8505 24 15.75ZM18.75 12.75C18.3358 12.75 18 13.0858 18 13.5V15H16.5C16.0858 15 15.75 15.3358 15.75 15.75C15.75 16.1642 16.0858 16.5 16.5 16.5H18V18C18 18.4142 18.3358 18.75 18.75 18.75C19.1642 18.75 19.5 18.4142 19.5 18V16.5H21C21.4142 16.5 21.75 16.1642 21.75 15.75C21.75 15.3358 21.4142 15 21 15H19.5V13.5C19.5 13.0858 19.1642 12.75 18.75 12.75Z" fill="currentColor"/>
+</svg>
--- a/frontend/src/routes.ts
+++ b/frontend/src/routes.ts
@@ -27,5 +27,6 @@ export default [
      route("terminal", "routes/terminal-tab.tsx"),
      route("vscode", "routes/vscode-tab.tsx"),
    ]),
+    route("microagent-management", "routes/microagent-management.tsx"),
  ]),
 ] satisfies RouteConfig;
--- a/frontend/src/routes/microagent-management.tsx
+++ b/frontend/src/routes/microagent-management.tsx
@@ -0,0 +1,37 @@
+import { redirect } from "react-router";
+import { MicroagentManagementSidebar } from "#/components/features/microagent-management/microagent-management-sidebar";
+import { Route } from "./+types/settings";
+import { queryClient } from "#/query-client-config";
+import { GetConfigResponse } from "#/api/open-hands.types";
+import OpenHands from "#/api/open-hands";
+
+export const clientLoader = async ({ request }: Route.ClientLoaderArgs) => {
+  const url = new URL(request.url);
+  const { pathname } = url;
+
+  let config = queryClient.getQueryData<GetConfigResponse>(["config"]);
+  if (!config) {
+    config = await OpenHands.getConfig();
+    queryClient.setQueryData<GetConfigResponse>(["config"], config);
+  }
+
+  const shouldHideMicroagentManagement =
+    config?.FEATURE_FLAGS.HIDE_MICROAGENT_MANAGEMENT;
+
+  if (shouldHideMicroagentManagement && pathname === "/microagent-management") {
+    return redirect("/");
+  }
+
+  return null;
+};
+
+function MicroagentManagement() {
+  return (
+    <div className="w-full h-full flex rounded-lg border border-[#525252] bg-[#24272E]">
+      <MicroagentManagementSidebar />
+      <div className="flex-1" />
+    </div>
+  );
+}
+
+export default MicroagentManagement;
--- a/openhands/server/config/server_config.py
+++ b/openhands/server/config/server_config.py
@@ -12,6 +12,8 @@ class ServerConfig(ServerConfigInterface):
    github_client_id = os.environ.get('GITHUB_APP_CLIENT_ID', '')
    enable_billing = os.environ.get('ENABLE_BILLING', 'false') == 'true'
    hide_llm_settings = os.environ.get('HIDE_LLM_SETTINGS', 'false') == 'true'
+    # This config is used to hide the microagent management page from the users for now. We will remove this once we release the new microagent management page.
+    hide_microagent_management = True
    settings_store_class: str = (
        'openhands.storage.settings.file_settings_store.FileSettingsStore'
    )
@@ -42,6 +44,7 @@ class ServerConfig(ServerConfigInterface):
            'FEATURE_FLAGS': {
                'ENABLE_BILLING': self.enable_billing,
                'HIDE_LLM_SETTINGS': self.hide_llm_settings,
+                'HIDE_MICROAGENT_MANAGEMENT': self.hide_microagent_management,
            },
        }