feat: Support the “Learn something new” Button in Microagent Details View. (#9866)

2025-12-26 05:48:36 +08:00 · 2025-07-23 22:08:36 +07:00 · 2025-07-23 22:08:36 +07:00 · 8b59143174
commit 8b59143174
parent c7b8f5d0d1
16 changed files with 976 additions and 134 deletions
--- a/frontend/tests/components/features/microagent-management/microagent-management.test.tsx
+++ b/frontend/tests/components/features/microagent-management/microagent-management.test.tsx
--- a/frontend/src/components/features/microagent-management/microagent-management-accordion-title.tsx
+++ b/frontend/src/components/features/microagent-management/microagent-management-accordion-title.tsx
@ -1,6 +1,7 @@
 import { GitProviderIcon } from "#/components/shared/git-provider-icon";
 import { GitRepository } from "#/types/git";
 import { MicroagentManagementAddMicroagentButton } from "./microagent-management-add-microagent-button";
+import { TooltipButton } from "#/components/shared/buttons/tooltip-button";

 interface MicroagentManagementAccordionTitleProps {
  repository: GitRepository;
@ -13,12 +14,15 @@ export function MicroagentManagementAccordionTitle({
    <div className="flex items-center justify-between">
      <div className="flex items-center gap-2">
        <GitProviderIcon gitProvider={repository.git_provider} />
-        <div
-          className="text-white text-base font-normal truncate max-w-[150px]"
-          title={repository.full_name}
+        <TooltipButton
+          tooltip={repository.full_name}
+          ariaLabel={repository.full_name}
+          className="text-white text-base font-normal bg-transparent p-0 min-w-0 h-auto cursor-pointer truncate max-w-[232px]"
+          testId="repository-name-tooltip"
+          placement="bottom"
        >
-          {repository.full_name}
-        </div>
+          <span>{repository.full_name}</span>
+        </TooltipButton>
      </div>
      <MicroagentManagementAddMicroagentButton repository={repository} />
    </div>
--- a/frontend/src/components/features/microagent-management/microagent-management-add-microagent-button.tsx
+++ b/frontend/src/components/features/microagent-management/microagent-management-add-microagent-button.tsx
@ -7,6 +7,8 @@ import {
 } from "#/state/microagent-management-slice";
 import { RootState } from "#/store";
 import { GitRepository } from "#/types/git";
+import PlusIcon from "#/icons/plus.svg?react";
+import { TooltipButton } from "#/components/shared/buttons/tooltip-button";

 interface MicroagentManagementAddMicroagentButtonProps {
  repository: GitRepository;
@ -23,19 +25,23 @@ export function MicroagentManagementAddMicroagentButton({

  const dispatch = useDispatch();

-  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
    e.stopPropagation();
    dispatch(setAddMicroagentModalVisible(!addMicroagentModalVisible));
    dispatch(setSelectedRepository(repository));
  };

  return (
-    <button
-      type="button"
-      className="text-sm font-normal text-[#8480FF] cursor-pointer"
-      onClick={handleClick}
-    >
-      {t(I18nKey.COMMON$ADD_MICROAGENT)}
-    </button>
+    <div onClick={handleClick}>
+      <TooltipButton
+        tooltip={t(I18nKey.COMMON$ADD_MICROAGENT)}
+        ariaLabel={t(I18nKey.COMMON$ADD_MICROAGENT)}
+        className="p-0 min-w-0 h-6 w-6 flex items-center justify-center bg-transparent cursor-pointer"
+        testId="add-microagent-button"
+        placement="bottom"
+      >
+        <PlusIcon width={22} height={22} />
+      </TooltipButton>
+    </div>
  );
 }
--- a/frontend/src/components/features/microagent-management/microagent-management-content.tsx
+++ b/frontend/src/components/features/microagent-management/microagent-management-content.tsx
@ -2,9 +2,12 @@ import React, { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { MicroagentManagementSidebar } from "./microagent-management-sidebar";
 import { MicroagentManagementMain } from "./microagent-management-main";
-import { MicroagentManagementAddMicroagentModal } from "./microagent-management-add-microagent-modal";
+import { MicroagentManagementUpsertMicroagentModal } from "./microagent-management-upsert-microagent-modal";
 import { RootState } from "#/store";
-import { setAddMicroagentModalVisible } from "#/state/microagent-management-slice";
+import {
+  setAddMicroagentModalVisible,
+  setUpdateMicroagentModalVisible,
+} from "#/state/microagent-management-slice";
 import { useCreateConversationAndSubscribeMultiple } from "#/hooks/use-create-conversation-and-subscribe-multiple";
 import { MicroagentFormData } from "#/types/microagent-management";
 import { AgentState } from "#/types/agent-state";
@ -52,33 +55,56 @@ const getConversationInstructions = (

 - Step 1: Create a markdown file inside the .openhands/microagents folder with the name of the microagent (The microagent must be created in the .openhands/microagents folder and should be able to perform the described task when triggered).

- Step 2: Update the markdown file with the content below:
+- This is the instructions about what the microagent should do: ${formData.query}

 ${
-  formData.triggers &&
-  formData.triggers.length > 0 &&
-  `
---
-triggers:
-${formData.triggers.map((trigger: string) => `  - ${trigger}`).join("\n")}
---
+  formData.triggers && formData.triggers.length > 0
+    ? `
+- This is the triggers of the microagent: ${formData.triggers.join(", ")}
 `
+    : "- Please be noted that the microagent doesn't have any triggers."
 }

-${formData.query}
+- Step 2: Create a new branch for the repository ${repositoryName}, must avoid duplicated branches.

- Step 3: Create a new branch for the repository ${repositoryName}, must avoid duplicated branches.
+- Step 3: Please push the changes to your branch on ${getProviderName(gitProvider)} and create a ${pr}. Please create a meaningful branch name that describes the changes. If a ${pr} template exists in the repository, please follow it when creating the ${prShort} description.
+`;

- Step 4: Please push the changes to your branch on ${getProviderName(gitProvider)} and create a ${pr}. Please create a meaningful branch name that describes the changes. If a ${pr} template exists in the repository, please follow it when creating the ${prShort} description.
+const getUpdateConversationInstructions = (
+  repositoryName: string,
+  formData: MicroagentFormData,
+  pr: string,
+  prShort: string,
+  gitProvider: Provider,
+) => `Update the microagent for the repository ${repositoryName} by following the steps below:
+
+
+- Step 1: Update the microagent. This is the path of the microagent: ${formData.microagentPath} (The updated microagent must be in the .openhands/microagents folder and should be able to perform the described task when triggered).
+
+- This is the updated instructions about what the microagent should do: ${formData.query}
+
+${
+  formData.triggers && formData.triggers.length > 0
+    ? `
+- This is the triggers of the microagent: ${formData.triggers.join(", ")}
+`
+    : "- Please be noted that the microagent doesn't have any triggers."
+}
+
+- Step 2: Create a new branch for the repository ${repositoryName}, must avoid duplicated branches.
+
+- Step 3: Please push the changes to your branch on ${getProviderName(gitProvider)} and create a ${pr}. Please create a meaningful branch name that describes the changes. If a ${pr} template exists in the repository, please follow it when creating the ${prShort} description.
 `;

 export function MicroagentManagementContent() {
  // Responsive width state
  const [width, setWidth] = useState(window.innerWidth);

-  const { addMicroagentModalVisible, selectedRepository } = useSelector(
-    (state: RootState) => state.microagentManagement,
-  );
+  const {
+    addMicroagentModalVisible,
+    updateMicroagentModalVisible,
+    selectedRepository,
+  } = useSelector((state: RootState) => state.microagentManagement);

  const dispatch = useDispatch();

@ -96,8 +122,12 @@ export function MicroagentManagementContent() {
    };
  }, []);

-  const hideAddMicroagentModal = () => {
-    dispatch(setAddMicroagentModalVisible(false));
+  const hideUpsertMicroagentModal = (isUpdate: boolean = false) => {
+    if (isUpdate) {
+      dispatch(setUpdateMicroagentModalVisible(false));
+    } else {
+      dispatch(setAddMicroagentModalVisible(false));
+    }
  };

  // Reusable function to invalidate conversations list for a repository
@ -130,7 +160,10 @@ export function MicroagentManagementContent() {
    [invalidateConversationsList, selectedRepository],
  );

-  const handleCreateMicroagent = (formData: MicroagentFormData) => {
+  const handleUpsertMicroagent = (
+    formData: MicroagentFormData,
+    isUpdate: boolean = false,
+  ) => {
    if (!selectedRepository || typeof selectedRepository !== "object") {
      return;
    }
@ -145,14 +178,22 @@ export function MicroagentManagementContent() {
    const pr = getPR(isGitLab);
    const prShort = getPRShort(isGitLab);

-    // Create conversation instructions for microagent generation
-    const conversationInstructions = getConversationInstructions(
-      repositoryName,
-      formData,
-      pr,
-      prShort,
-      gitProvider,
-    );
+    // Create conversation instructions for microagent generation or update
+    const conversationInstructions = isUpdate
+      ? getUpdateConversationInstructions(
+          repositoryName,
+          formData,
+          pr,
+          prShort,
+          gitProvider,
+        )
+      : getConversationInstructions(
+          repositoryName,
+          formData,
+          pr,
+          prShort,
+          gitProvider,
+        );

    // Create the CreateMicroagent object
    const createMicroagent = {
@ -171,8 +212,6 @@ export function MicroagentManagementContent() {
      },
      createMicroagent,
      onSuccessCallback: () => {
-        hideAddMicroagentModal();
-
        // Invalidate conversations list to fetch the latest conversations for this repository
        invalidateConversationsList(repositoryName);

@ -183,7 +222,7 @@ export function MicroagentManagementContent() {
          queryKey: ["repository-microagents", owner, repo],
        });

-        hideAddMicroagentModal();
+        hideUpsertMicroagentModal(isUpdate);
      },
      onEventCallback: (event: unknown) => {
        // Handle conversation events for real-time status updates
@ -192,6 +231,22 @@ export function MicroagentManagementContent() {
    });
  };

+  const renderModals = () => {
+    if (addMicroagentModalVisible || updateMicroagentModalVisible) {
+      return (
+        <MicroagentManagementUpsertMicroagentModal
+          onConfirm={(formData) => handleUpsertMicroagent(formData, false)}
+          onCancel={() =>
+            hideUpsertMicroagentModal(updateMicroagentModalVisible)
+          }
+          isLoading={isPending}
+          isUpdate={updateMicroagentModalVisible}
+        />
+      );
+    }
+    return null;
+  };
+
  if (width < 1024) {
    return (
      <div className="w-full h-full flex flex-col gap-6">
@ -201,13 +256,7 @@ export function MicroagentManagementContent() {
        <div className="w-full rounded-lg border border-[#525252] bg-[#24272E] flex-1 min-h-[494px]">
          <MicroagentManagementMain />
        </div>
-        {addMicroagentModalVisible && (
-          <MicroagentManagementAddMicroagentModal
-            onConfirm={handleCreateMicroagent}
-            onCancel={hideAddMicroagentModal}
-            isLoading={isPending}
-          />
-        )}
+        {renderModals()}
      </div>
    );
  }
@ -218,13 +267,7 @@ export function MicroagentManagementContent() {
      <div className="flex-1">
        <MicroagentManagementMain />
      </div>
-      {addMicroagentModalVisible && (
-        <MicroagentManagementAddMicroagentModal
-          onConfirm={handleCreateMicroagent}
-          onCancel={hideAddMicroagentModal}
-          isLoading={isPending}
-        />
-      )}
+      {renderModals()}
    </div>
  );
 }
--- a/frontend/src/components/features/microagent-management/microagent-management-repo-microagents.tsx
+++ b/frontend/src/components/features/microagent-management/microagent-management-repo-microagents.tsx
@ -1,10 +1,10 @@
 import { useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
+import { Spinner } from "@heroui/react";
 import { MicroagentManagementMicroagentCard } from "./microagent-management-microagent-card";
 import { MicroagentManagementLearnThisRepo } from "./microagent-management-learn-this-repo";
 import { useRepositoryMicroagents } from "#/hooks/query/use-repository-microagents";
 import { useSearchConversations } from "#/hooks/query/use-search-conversations";
-import { LoadingSpinner } from "#/components/shared/loading-spinner";
 import { GitRepository } from "#/types/git";
 import { getGitProviderBaseUrl } from "#/utils/utils";
 import { RootState } from "#/store";
@ -34,13 +34,18 @@ export function MicroagentManagementRepoMicroagents({
    data: microagents,
    isLoading: isLoadingMicroagents,
    isError: isErrorMicroagents,
-  } = useRepositoryMicroagents(owner, repo);
+  } = useRepositoryMicroagents(owner, repo, true);

  const {
    data: conversations,
    isLoading: isLoadingConversations,
    isError: isErrorConversations,
-  } = useSearchConversations(repositoryName, "microagent_management", 1000);
+  } = useSearchConversations(
+    repositoryName,
+    "microagent_management",
+    1000,
+    true,
+  );

  useEffect(() => {
    const hasConversations = conversations && conversations.length > 0;
@ -72,7 +77,7 @@ export function MicroagentManagementRepoMicroagents({
  if (isLoading) {
    return (
      <div className="pb-4 flex justify-center">
-        <LoadingSpinner size="small" />
+        <Spinner size="sm" data-testid="loading-spinner" />
      </div>
    );
  }
--- a/frontend/src/components/features/microagent-management/microagent-management-repositories.tsx
+++ b/frontend/src/components/features/microagent-management/microagent-management-repositories.tsx
@ -98,7 +98,7 @@ export function MicroagentManagementRepositories({
        className="w-full px-0 gap-3"
        itemClasses={{
          base: "shadow-none bg-transparent border border-[#ffffff40] rounded-[6px] cursor-pointer",
-          trigger: "cursor-pointer",
+          trigger: "cursor-pointer gap-1",
        }}
        selectionMode="multiple"
      >
--- a/frontend/src/components/features/microagent-management/microagent-management-sidebar.tsx
+++ b/frontend/src/components/features/microagent-management/microagent-management-sidebar.tsx
@ -1,6 +1,7 @@
 import { useEffect } from "react";
 import { useDispatch } from "react-redux";
 import { useTranslation } from "react-i18next";
+import { Spinner } from "@heroui/react";
 import { MicroagentManagementSidebarHeader } from "./microagent-management-sidebar-header";
 import { MicroagentManagementSidebarTabs } from "./microagent-management-sidebar-tabs";
 import { useUserRepositories } from "#/hooks/query/use-user-repositories";
@ -10,7 +11,6 @@ import {
  setRepositories,
 } from "#/state/microagent-management-slice";
 import { GitRepository } from "#/types/git";
-import { LoadingSpinner } from "#/components/shared/loading-spinner";
 import { cn } from "#/utils/utils";

 interface MicroagentManagementSidebarProps {
@ -58,7 +58,7 @@ export function MicroagentManagementSidebar({
      <MicroagentManagementSidebarHeader />
      {isLoading ? (
        <div className="flex flex-col items-center justify-center gap-4 flex-1">
-          <LoadingSpinner size="small" />
+          <Spinner size="sm" />
          <span className="text-sm text-white">
            {t("HOME$LOADING_REPOSITORIES")}
          </span>
--- a/frontend/src/components/features/microagent-management/microagent-management-upsert-microagent-modal.tsx
+++ b/frontend/src/components/features/microagent-management/microagent-management-upsert-microagent-modal.tsx
@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
 import { FaCircleInfo } from "react-icons/fa6";
@ -19,17 +19,19 @@ import {
  BranchErrorState,
 } from "../home/repository-selection";

-interface MicroagentManagementAddMicroagentModalProps {
+interface MicroagentManagementUpsertMicroagentModalProps {
  onConfirm: (formData: MicroagentFormData) => void;
  onCancel: () => void;
  isLoading: boolean;
+  isUpdate?: boolean;
 }

-export function MicroagentManagementAddMicroagentModal({
+export function MicroagentManagementUpsertMicroagentModal({
  onConfirm,
  onCancel,
  isLoading = false,
-}: MicroagentManagementAddMicroagentModalProps) {
+  isUpdate = false,
+}: MicroagentManagementUpsertMicroagentModalProps) {
  const { t } = useTranslation();

  const [triggers, setTriggers] = useState<string[]>([]);
@ -40,9 +42,23 @@ export function MicroagentManagementAddMicroagentModal({
    (state: RootState) => state.microagentManagement,
  );

+  const { selectedMicroagentItem } = useSelector(
+    (state: RootState) => state.microagentManagement,
+  );
+
+  const { microagent } = selectedMicroagentItem ?? {};
+
  // Add a ref to track if the branch was manually cleared by the user
  const branchManuallyClearedRef = useRef<boolean>(false);

+  // Populate form fields with existing microagent data when updating
+  useEffect(() => {
+    if (isUpdate && microagent) {
+      setQuery(microagent.content);
+      setTriggers(microagent.triggers || []);
+    }
+  }, [isUpdate, microagent]);
+
  const {
    data: branches,
    isLoading: isLoadingBranches,
@ -75,9 +91,27 @@ export function MicroagentManagementAddMicroagentModal({
    }
  }, [branches, isLoadingBranches, selectedBranch]);

-  const modalTitle = selectedRepository
-    ? `${t(I18nKey.MICROAGENT_MANAGEMENT$ADD_A_MICROAGENT_TO)} ${(selectedRepository as GitRepository).full_name}`
-    : t(I18nKey.MICROAGENT_MANAGEMENT$ADD_A_MICROAGENT);
+  const modalTitle = useMemo(() => {
+    if (isUpdate) {
+      return t(I18nKey.MICROAGENT_MANAGEMENT$UPDATE_MICROAGENT);
+    }
+
+    if (selectedRepository) {
+      return `${t(I18nKey.MICROAGENT_MANAGEMENT$ADD_A_MICROAGENT_TO)} ${(selectedRepository as GitRepository).full_name}`;
+    }
+
+    return t(I18nKey.MICROAGENT_MANAGEMENT$ADD_A_MICROAGENT);
+  }, [isUpdate, selectedRepository, t]);
+
+  const modalDescription = useMemo(() => {
+    if (isUpdate) {
+      return t(
+        I18nKey.MICROAGENT_MANAGEMENT$UPDATE_MICROAGENT_MODAL_DESCRIPTION,
+      );
+    }
+
+    return t(I18nKey.MICROAGENT_MANAGEMENT$ADD_MICROAGENT_MODAL_DESCRIPTION);
+  }, [isUpdate, t]);

  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
@ -90,6 +124,7 @@ export function MicroagentManagementAddMicroagentModal({
      query: query.trim(),
      triggers,
      selectedBranch: selectedBranch?.name || "",
+      microagentPath: microagent?.path || "",
    });
  };

@ -102,6 +137,7 @@ export function MicroagentManagementAddMicroagentModal({
      query: query.trim(),
      triggers,
      selectedBranch: selectedBranch?.name || "",
+      microagentPath: microagent?.path || "",
    });
  };

@ -162,7 +198,7 @@ export function MicroagentManagementAddMicroagentModal({
  };

  return (
-    <ModalBackdrop>
+    <ModalBackdrop onClose={onCancel}>
      <ModalBody className="items-start rounded-[12px] p-6 min-w-[611px]">
        <div className="flex flex-col gap-2 w-full">
          <div className="flex justify-between items-center">
@ -181,7 +217,7 @@ export function MicroagentManagementAddMicroagentModal({
            </button>
          </div>
          <span className="text-white text-sm font-normal">
-            {t(I18nKey.MICROAGENT_MANAGEMENT$ADD_MICROAGENT_MODAL_DESCRIPTION)}
+            {modalDescription}
          </span>
        </div>
        <form
--- a/frontend/src/components/features/microagent-management/microagent-management-view-microagent-content.tsx
+++ b/frontend/src/components/features/microagent-management/microagent-management-view-microagent-content.tsx
@ -34,7 +34,7 @@ export function MicroagentManagementViewMicroagentContent() {
  ---

  triggers:
-  ${microagent.triggers.map((trigger) => `  - ${trigger}`).join("\n")}
+  ${microagent.triggers.map((trigger) => ` - ${trigger}`).join("\n")}

  ---
  `;
--- a/frontend/src/components/features/microagent-management/microagent-management-view-microagent-header.tsx
+++ b/frontend/src/components/features/microagent-management/microagent-management-view-microagent-header.tsx
@ -1,12 +1,14 @@
-import { useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
 import { useTranslation } from "react-i18next";
 import { RootState } from "#/store";
 import { BrandButton } from "../settings/brand-button";
 import { getProviderName, constructMicroagentUrl } from "#/utils/utils";
 import { I18nKey } from "#/i18n/declaration";
+import { setUpdateMicroagentModalVisible } from "#/state/microagent-management-slice";

 export function MicroagentManagementViewMicroagentHeader() {
  const { t } = useTranslation();
+  const dispatch = useDispatch();

  const { selectedMicroagentItem } = useSelector(
    (state: RootState) => state.microagentManagement,
@ -29,6 +31,10 @@ export function MicroagentManagementViewMicroagentHeader() {
    microagent.path,
  );

+  const handleLearnSomethingNew = () => {
+    dispatch(setUpdateMicroagentModalVisible(true));
+  };
+
  return (
    <div className="flex items-center justify-between pb-2">
      <span className="text-sm text-[#ffffff99]">
@ -48,11 +54,11 @@ export function MicroagentManagementViewMicroagentHeader() {
        <BrandButton
          type="button"
          variant="primary"
-          onClick={() => {}}
+          onClick={handleLearnSomethingNew}
          testId="learn-button"
          className="py-1 px-2"
        >
-          {t(I18nKey.COMMON$LEARN)}
+          {t(I18nKey.COMMON$LEARN_SOMETHING_NEW)}
        </BrandButton>
      </div>
    </div>
--- a/frontend/src/hooks/query/use-repository-microagents.ts
+++ b/frontend/src/hooks/query/use-repository-microagents.ts
@ -1,11 +1,15 @@
 import { useQuery } from "@tanstack/react-query";
 import OpenHands from "#/api/open-hands";

-export const useRepositoryMicroagents = (owner: string, repo: string) =>
+export const useRepositoryMicroagents = (
+  owner: string,
+  repo: string,
+  cacheDisabled: boolean = false,
+) =>
  useQuery({
    queryKey: ["repository", "microagents", owner, repo],
    queryFn: () => OpenHands.getRepositoryMicroagents(owner, repo),
    enabled: !!owner && !!repo,
-    staleTime: 1000 * 60 * 5, // 5 minutes
-    gcTime: 1000 * 60 * 15, // 15 minutes
+    staleTime: cacheDisabled ? 0 : 1000 * 60 * 5, // 5 minutes
+    gcTime: cacheDisabled ? 0 : 1000 * 60 * 15, // 15 minutes
  });
--- a/frontend/src/hooks/query/use-search-conversations.ts
+++ b/frontend/src/hooks/query/use-search-conversations.ts
@ -5,6 +5,7 @@ export const useSearchConversations = (
  selectedRepository?: string,
  conversationTrigger?: string,
  limit: number = 20,
+  cacheDisabled: boolean = false,
 ) =>
  useQuery({
    queryKey: [
@ -21,6 +22,6 @@ export const useSearchConversations = (
        limit,
      ),
    enabled: true, // Always enabled since parameters are optional
-    staleTime: 1000 * 60 * 5, // 5 minutes
-    gcTime: 1000 * 60 * 15, // 15 minutes
+    staleTime: cacheDisabled ? 0 : 1000 * 60 * 5, // 5 minutes
+    gcTime: cacheDisabled ? 0 : 1000 * 60 * 15, // 15 minutes
  });
--- a/frontend/src/i18n/declaration.ts
+++ b/frontend/src/i18n/declaration.ts
@ -699,6 +699,7 @@ export enum I18nKey {
  MICROAGENT_MANAGEMENT$OPENHANDS_CAN_LEARN_ABOUT_REPOSITORIES = "MICROAGENT_MANAGEMENT$OPENHANDS_CAN_LEARN_ABOUT_REPOSITORIES",
  MICROAGENT_MANAGEMENT$ADD_A_MICROAGENT_TO = "MICROAGENT_MANAGEMENT$ADD_A_MICROAGENT_TO",
  MICROAGENT_MANAGEMENT$ADD_A_MICROAGENT = "MICROAGENT_MANAGEMENT$ADD_A_MICROAGENT",
+  MICROAGENT_MANAGEMENT$UPDATE_MICROAGENT = "MICROAGENT_MANAGEMENT$UPDATE_MICROAGENT",
  MICROAGENT_MANAGEMENT$ADD_MICROAGENT_MODAL_DESCRIPTION = "MICROAGENT_MANAGEMENT$ADD_MICROAGENT_MODAL_DESCRIPTION",
  MICROAGENT_MANAGEMENT$WHAT_TO_DO = "MICROAGENT_MANAGEMENT$WHAT_TO_DO",
  MICROAGENT_MANAGEMENT$DESCRIBE_WHAT_TO_DO = "MICROAGENT_MANAGEMENT$DESCRIBE_WHAT_TO_DO",
@ -723,7 +724,9 @@ export enum I18nKey {
  COMMON$REVIEW_PR_IN = "COMMON$REVIEW_PR_IN",
  COMMON$EDIT_IN = "COMMON$EDIT_IN",
  COMMON$LEARN = "COMMON$LEARN",
+  COMMON$LEARN_SOMETHING_NEW = "COMMON$LEARN_SOMETHING_NEW",
  COMMON$STARTING = "COMMON$STARTING",
  MICROAGENT_MANAGEMENT$ERROR = "MICROAGENT_MANAGEMENT$ERROR",
  MICROAGENT_MANAGEMENT$CONVERSATION_STOPPED = "MICROAGENT_MANAGEMENT$CONVERSATION_STOPPED",
+  MICROAGENT_MANAGEMENT$UPDATE_MICROAGENT_MODAL_DESCRIPTION = "MICROAGENT_MANAGEMENT$UPDATE_MICROAGENT_MODAL_DESCRIPTION",
 }
--- a/frontend/src/i18n/translation.json
+++ b/frontend/src/i18n/translation.json
@ -11183,6 +11183,22 @@
        "de": "Microagent hinzufügen",
        "uk": "Додати мікроагента"
    },
+    "MICROAGENT_MANAGEMENT$UPDATE_MICROAGENT": {
+        "en": "Update microagent",
+        "ja": "マイクロエージェントを更新",
+        "zh-CN": "更新微代理",
+        "zh-TW": "更新微代理",
+        "ko-KR": "마이크로에이전트 업데이트",
+        "no": "Oppdater mikroagent",
+        "it": "Aggiorna microagent",
+        "pt": "Atualizar microagente",
+        "es": "Actualizar microagente",
+        "ar": "تحديث الوكيل الصغير",
+        "fr": "Mettre à jour le microagent",
+        "tr": "Mikro ajanı güncelle",
+        "de": "Microagent aktualisieren",
+        "uk": "Оновити мікроагента"
+    },
    "MICROAGENT_MANAGEMENT$ADD_MICROAGENT_MODAL_DESCRIPTION": {
        "en": "OpenHands will create a new microagent based on your instructions.",
        "ja": "OpenHandsはあなたの指示に基づいて新しいマイクロエージェントを作成します。",
@ -11567,6 +11583,22 @@
        "de": "Lernen",
        "uk": "Вчитися"
    },
+    "COMMON$LEARN_SOMETHING_NEW": {
+        "en": "Learn something new",
+        "ja": "新しいことを学ぶ",
+        "zh-CN": "学习新东西",
+        "zh-TW": "學習新東西",
+        "ko-KR": "새로운 것을 배우기",
+        "no": "Lær noe nytt",
+        "it": "Impara qualcosa di nuovo",
+        "pt": "Aprender algo novo",
+        "es": "Aprender algo nuevo",
+        "ar": "تعلم شيئًا جديدًا",
+        "fr": "Apprendre quelque chose de nouveau",
+        "tr": "Yeni bir şey öğren",
+        "de": "Etwas Neues lernen",
+        "uk": "Вивчити щось нове"
+    },
    "COMMON$STARTING": {
        "en": "Starting",
        "ja": "開始中",
@ -11614,5 +11646,21 @@
        "tr": "Konuşma durduruldu.",
        "de": "Das Gespräch wurde gestoppt.",
        "uk": "Розмову зупинено."
+    },
+    "MICROAGENT_MANAGEMENT$UPDATE_MICROAGENT_MODAL_DESCRIPTION": {
+        "en": "OpenHands will update the microagent based on your instructions.",
+        "ja": "OpenHandsはあなたの指示に基づいてマイクロエージェントを更新します。",
+        "zh-CN": "OpenHands 将根据您的指示更新微代理。",
+        "zh-TW": "OpenHands 將根據您的指示更新微代理。",
+        "ko-KR": "OpenHands가 귀하의 지시에 따라 마이크로에이전트를 업데이트합니다.",
+        "no": "OpenHands vil oppdatere mikroagenten basert på dine instruksjoner.",
+        "it": "OpenHands aggiornerà il microagent in base alle tue istruzioni.",
+        "pt": "O OpenHands atualizará o microagente com base nas suas instruções.",
+        "es": "OpenHands actualizará el microagente según tus instrucciones.",
+        "ar": "سيقوم OpenHands بتحديث الوكيل الصغير بناءً على تعليماتك.",
+        "fr": "OpenHands mettra à jour le microagent selon vos instructions.",
+        "tr": "OpenHands, talimatlarınıza göre mikro ajanı güncelleyecektir.",
+        "de": "OpenHands aktualisiert den Microagenten basierend auf Ihren Anweisungen.",
+        "uk": "OpenHands оновить мікроагента відповідно до ваших інструкцій."
    }
 }
--- a/frontend/src/state/microagent-management-slice.tsx
+++ b/frontend/src/state/microagent-management-slice.tsx
@ -6,6 +6,7 @@ export const microagentManagementSlice = createSlice({
  name: "microagentManagement",
  initialState: {
    addMicroagentModalVisible: false,
+    updateMicroagentModalVisible: false,
    selectedRepository: null as GitRepository | null,
    personalRepositories: [] as GitRepository[],
    organizationRepositories: [] as GitRepository[],
@ -16,6 +17,9 @@ export const microagentManagementSlice = createSlice({
    setAddMicroagentModalVisible: (state, action) => {
      state.addMicroagentModalVisible = action.payload;
    },
+    setUpdateMicroagentModalVisible: (state, action) => {
+      state.updateMicroagentModalVisible = action.payload;
+    },
    setSelectedRepository: (state, action) => {
      state.selectedRepository = action.payload;
    },
@ -36,6 +40,7 @@ export const microagentManagementSlice = createSlice({

 export const {
  setAddMicroagentModalVisible,
+  setUpdateMicroagentModalVisible,
  setSelectedRepository,
  setPersonalRepositories,
  setOrganizationRepositories,
--- a/frontend/src/types/microagent-management.tsx
+++ b/frontend/src/types/microagent-management.tsx
@ -23,4 +23,5 @@ export interface MicroagentFormData {
  query: string;
  triggers: string[];
  selectedBranch: string;
+  microagentPath: string;
 }