feat(frontend): implement new task tracker interface (#11692)

2025-12-26 05:48:36 +08:00 · 2025-11-12 22:59:45 +07:00 · 2025-11-12 22:59:45 +07:00 · 8e75f25108
commit 8e75f25108
parent 73fe865c7e
17 changed files with 249 additions and 127 deletions
--- a/frontend/tests/components/features/chat/task-tracking-observation-content.test.tsx
+++ b/frontend/tests/components/features/chat/task-tracking-observation-content.test.tsx
@ -8,10 +8,11 @@ vi.mock("react-i18next", () => ({
  useTranslation: () => ({
    t: (key: string) => {
      const translations: Record<string, string> = {
-        "TASK_TRACKING_OBSERVATION$TASK_LIST": "Task List",
-        "TASK_TRACKING_OBSERVATION$TASK_ID": "ID",
-        "TASK_TRACKING_OBSERVATION$TASK_NOTES": "Notes",
-        "TASK_TRACKING_OBSERVATION$RESULT": "Result",
+        TASK_TRACKING_OBSERVATION$TASK_LIST: "Task List",
+        TASK_TRACKING_OBSERVATION$TASK_ID: "ID",
+        TASK_TRACKING_OBSERVATION$TASK_NOTES: "Notes",
+        TASK_TRACKING_OBSERVATION$RESULT: "Result",
+        COMMON$TASKS: "Tasks",
      };
      return translations[key] || key;
    },
@ -61,19 +62,26 @@ describe("TaskTrackingObservationContent", () => {
  it("renders task list when command is 'plan' and tasks exist", () => {
    render(<TaskTrackingObservationContent event={mockEvent} />);

-    expect(screen.getByText("Task List (3 items)")).toBeInTheDocument();
+    expect(screen.getByText("Tasks")).toBeInTheDocument();
    expect(screen.getByText("Implement feature A")).toBeInTheDocument();
    expect(screen.getByText("Fix bug B")).toBeInTheDocument();
    expect(screen.getByText("Deploy to production")).toBeInTheDocument();
  });

  it("displays correct status icons and badges", () => {
-    render(<TaskTrackingObservationContent event={mockEvent} />);
+    const { container } = render(
+      <TaskTrackingObservationContent event={mockEvent} />,
+    );

-    // Check for status text (the icons are emojis)
-    expect(screen.getByText("todo")).toBeInTheDocument();
-    expect(screen.getByText("in progress")).toBeInTheDocument();
-    expect(screen.getByText("done")).toBeInTheDocument();
+    // Status is represented by icons, not text. Verify task items are rendered with their titles
+    // which indicates the status icons are present (status affects icon rendering)
+    expect(screen.getByText("Implement feature A")).toBeInTheDocument();
+    expect(screen.getByText("Fix bug B")).toBeInTheDocument();
+    expect(screen.getByText("Deploy to production")).toBeInTheDocument();
+
+    // Verify task items are present (they contain the status icons)
+    const taskItems = container.querySelectorAll('[data-name="item"]');
+    expect(taskItems).toHaveLength(3);
  });

  it("displays task IDs and notes", () => {
@ -84,14 +92,9 @@ describe("TaskTrackingObservationContent", () => {
    expect(screen.getByText("ID: task-3")).toBeInTheDocument();

    expect(screen.getByText("Notes: This is a test task")).toBeInTheDocument();
-    expect(screen.getByText("Notes: Completed successfully")).toBeInTheDocument();
-  });
-
-  it("renders result section when content exists", () => {
-    render(<TaskTrackingObservationContent event={mockEvent} />);
-
-    expect(screen.getByText("Result")).toBeInTheDocument();
-    expect(screen.getByText("Task tracking operation completed successfully")).toBeInTheDocument();
+    expect(
+      screen.getByText("Notes: Completed successfully"),
+    ).toBeInTheDocument();
  });

  it("does not render task list when command is not 'plan'", () => {
@ -105,7 +108,7 @@ describe("TaskTrackingObservationContent", () => {

    render(<TaskTrackingObservationContent event={eventWithoutPlan} />);

-    expect(screen.queryByText("Task List")).not.toBeInTheDocument();
+    expect(screen.queryByText("Tasks")).not.toBeInTheDocument();
  });

  it("does not render task list when task list is empty", () => {
@ -119,17 +122,6 @@ describe("TaskTrackingObservationContent", () => {

    render(<TaskTrackingObservationContent event={eventWithEmptyTasks} />);

-    expect(screen.queryByText("Task List")).not.toBeInTheDocument();
-  });
-
-  it("does not render result section when content is empty", () => {
-    const eventWithoutContent = {
-      ...mockEvent,
-      content: "",
-    };
-
-    render(<TaskTrackingObservationContent event={eventWithoutContent} />);
-
-    expect(screen.queryByText("Result")).not.toBeInTheDocument();
+    expect(screen.queryByText("Tasks")).not.toBeInTheDocument();
  });
 });
--- a/frontend/src/components/features/chat/event-message-components/task-tracking-event-message.tsx
+++ b/frontend/src/components/features/chat/event-message-components/task-tracking-event-message.tsx
@ -1,11 +1,7 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
 import { OpenHandsObservation } from "#/types/core/observations";
 import { isTaskTrackingObservation } from "#/types/core/guards";
-import { GenericEventMessage } from "../generic-event-message";
 import { TaskTrackingObservationContent } from "../task-tracking-observation-content";
 import { ConfirmationButtons } from "#/components/shared/buttons/confirmation-buttons";
-import { getObservationResult } from "../event-content-helpers/get-observation-result";

 interface TaskTrackingEventMessageProps {
  event: OpenHandsObservation;
@ -16,34 +12,13 @@ export function TaskTrackingEventMessage({
  event,
  shouldShowConfirmationButtons,
 }: TaskTrackingEventMessageProps) {
-  const { t } = useTranslation();
-
  if (!isTaskTrackingObservation(event)) {
    return null;
  }

-  const { command } = event.extras;
-  let title: React.ReactNode;
-  let initiallyExpanded = false;
-
-  // Determine title and expansion state based on command
-  if (command === "plan") {
-    title = t("OBSERVATION_MESSAGE$TASK_TRACKING_PLAN");
-    initiallyExpanded = true;
-  } else {
-    // command === "view"
-    title = t("OBSERVATION_MESSAGE$TASK_TRACKING_VIEW");
-    initiallyExpanded = false;
-  }
-
  return (
    <div>
-      <GenericEventMessage
-        title={title}
-        details={<TaskTrackingObservationContent event={event} />}
-        success={getObservationResult(event)}
-        initiallyExpanded={initiallyExpanded}
-      />
+      <TaskTrackingObservationContent event={event} />
      {shouldShowConfirmationButtons && <ConfirmationButtons />}
    </div>
  );
--- a/frontend/src/components/features/chat/task-tracking-observation-content.tsx
+++ b/frontend/src/components/features/chat/task-tracking-observation-content.tsx
@ -1,6 +1,5 @@
 import { TaskTrackingObservation } from "#/types/core/observations";
 import { TaskListSection } from "./task-tracking/task-list-section";
-import { ResultSection } from "./task-tracking/result-section";

 interface TaskTrackingObservationContentProps {
  event: TaskTrackingObservation;
@ -16,11 +15,6 @@ export function TaskTrackingObservationContent({
    <div className="flex flex-col gap-4">
      {/* Task List section - only show for 'plan' command */}
      {shouldShowTaskList && <TaskListSection taskList={taskList} />}
-
-      {/* Result message - only show if there's meaningful content */}
-      {event.content && event.content.trim() && (
-        <ResultSection content={event.content} />
-      )}
    </div>
  );
 }
--- a/frontend/src/components/features/chat/task-tracking/result-section.tsx
+++ b/frontend/src/components/features/chat/task-tracking/result-section.tsx
@ -1,21 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Typography } from "#/ui/typography";
-
-interface ResultSectionProps {
-  content: string;
-}
-
-export function ResultSection({ content }: ResultSectionProps) {
-  const { t } = useTranslation();
-
-  return (
-    <div className="flex flex-col gap-2">
-      <div className="flex items-center justify-between">
-        <Typography.H3>{t("TASK_TRACKING_OBSERVATION$RESULT")}</Typography.H3>
-      </div>
-      <div className="p-3 bg-gray-900 rounded-md overflow-auto text-gray-300 shadow-inner">
-        <pre className="whitespace-pre-wrap text-sm">{content.trim()}</pre>
-      </div>
-    </div>
-  );
-}
--- a/frontend/src/components/features/chat/task-tracking/task-item.tsx
+++ b/frontend/src/components/features/chat/task-tracking/task-item.tsx
@ -1,7 +1,11 @@
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
+import CircleIcon from "#/icons/u-circle.svg?react";
+import CheckCircleIcon from "#/icons/u-check-circle.svg?react";
+import LoadingIcon from "#/icons/loading.svg?react";
+import { I18nKey } from "#/i18n/declaration";
+import { cn } from "#/utils/utils";
 import { Typography } from "#/ui/typography";
-import { StatusIcon } from "./status-icon";
-import { StatusBadge } from "./status-badge";

 interface TaskItemProps {
  task: {
@ -10,33 +14,47 @@ interface TaskItemProps {
    status: "todo" | "in_progress" | "done";
    notes?: string;
  };
-  index: number;
 }

-export function TaskItem({ task, index }: TaskItemProps) {
+export function TaskItem({ task }: TaskItemProps) {
  const { t } = useTranslation();

+  const icon = useMemo(() => {
+    switch (task.status) {
+      case "todo":
+        return <CircleIcon className="w-4 h-4 text-[#ffffff]" />;
+      case "in_progress":
+        return <LoadingIcon className="w-4 h-4 text-[#ffffff]" />;
+      case "done":
+        return <CheckCircleIcon className="w-4 h-4 text-[#A3A3A3]" />;
+      default:
+        return <CircleIcon className="w-4 h-4 text-[#ffffff]" />;
+    }
+  }, [task.status]);
+
+  const isDoneStatus = task.status === "done";
+
  return (
-    <div className="border-l-2 border-gray-600 pl-3">
-      <div className="flex items-start gap-2">
-        <StatusIcon status={task.status} />
-        <div className="flex-1">
-          <div className="flex items-center gap-2 mb-1">
-            <Typography.Text className="text-sm text-gray-400">
-              {index + 1}.
-            </Typography.Text>
-            <StatusBadge status={task.status} />
-          </div>
-          <h4 className="font-medium text-white mb-1">{task.title}</h4>
-          <Typography.Text className="text-xs text-gray-400 mb-1">
-            {t("TASK_TRACKING_OBSERVATION$TASK_ID")}: {task.id}
-          </Typography.Text>
-          {task.notes && (
-            <Typography.Text className="text-sm text-gray-300 italic">
-              {t("TASK_TRACKING_OBSERVATION$TASK_NOTES")}: {task.notes}
-            </Typography.Text>
+    <div
+      className="flex gap-[14px] items-center px-4 py-2 w-full"
+      data-name="item"
+    >
+      <div className="shrink-0">{icon}</div>
+      <div className="flex flex-col items-start justify-center leading-[20px] text-nowrap whitespace-pre font-normal">
+        <Typography.Text
+          className={cn(
+            "text-[12px] text-white",
+            isDoneStatus && "text-[#A3A3A3]",
          )}
-        </div>
+        >
+          {task.title}
+        </Typography.Text>
+        <Typography.Text className="text-[10px] text-[#A3A3A3] font-normal">
+          {t(I18nKey.TASK_TRACKING_OBSERVATION$TASK_ID)}: {task.id}
+        </Typography.Text>
+        <Typography.Text className="text-[10px] text-[#A3A3A3]">
+          {t(I18nKey.TASK_TRACKING_OBSERVATION$TASK_NOTES)}: {task.notes}
+        </Typography.Text>
      </div>
    </div>
  );
--- a/frontend/src/components/features/chat/task-tracking/task-list-section.tsx
+++ b/frontend/src/components/features/chat/task-tracking/task-list-section.tsx
@ -1,5 +1,7 @@
 import { useTranslation } from "react-i18next";
 import { TaskItem } from "./task-item";
+import LessonPlanIcon from "#/icons/lesson-plan.svg?react";
+import { I18nKey } from "#/i18n/declaration";
 import { Typography } from "#/ui/typography";

 interface TaskListSectionProps {
@ -15,19 +17,20 @@ export function TaskListSection({ taskList }: TaskListSectionProps) {
  const { t } = useTranslation();

  return (
-    <div className="flex flex-col gap-2">
-      <div className="flex items-center justify-between">
-        <Typography.H3>
-          {t("TASK_TRACKING_OBSERVATION$TASK_LIST")} ({taskList.length}{" "}
-          {taskList.length === 1 ? "item" : "items"})
-        </Typography.H3>
+    <div className="flex flex-col overflow-clip bg-[#25272d] border border-[#525252] rounded-[12px] w-full">
+      {/* Header Tabs */}
+      <div className="flex gap-1 items-center border-b border-[#525252] h-[41px] px-2 shrink-0">
+        <LessonPlanIcon className="shrink-0 w-4.5 h-4.5 text-[#9299aa]" />
+        <Typography.Text className="text-[11px] text-nowrap text-white tracking-[0.11px] font-medium leading-[16px] whitespace-pre">
+          {t(I18nKey.COMMON$TASKS)}
+        </Typography.Text>
      </div>
-      <div className="p-3 bg-gray-900 rounded-md overflow-auto text-gray-300 max-h-[400px] shadow-inner">
-        <div className="space-y-3">
-          {taskList.map((task, index) => (
-            <TaskItem key={task.id} task={task} index={index} />
-          ))}
-        </div>
+
+      {/* Task Items */}
+      <div>
+        {taskList.map((task) => (
+          <TaskItem key={task.id} task={task} />
+        ))}
      </div>
    </div>
  );
--- a/frontend/src/components/v1/chat/event-content-helpers/get-event-content.tsx
+++ b/frontend/src/components/v1/chat/event-content-helpers/get-event-content.tsx
@ -1,10 +1,13 @@
 import { Trans } from "react-i18next";
-import { OpenHandsEvent } from "#/types/v1/core";
+import React from "react";
+import { OpenHandsEvent, ObservationEvent } from "#/types/v1/core";
 import { isActionEvent, isObservationEvent } from "#/types/v1/type-guards";
 import { MonoComponent } from "../../../features/chat/mono-component";
 import { PathComponent } from "../../../features/chat/path-component";
 import { getActionContent } from "./get-action-content";
 import { getObservationContent } from "./get-observation-content";
+import { TaskTrackingObservationContent } from "../task-tracking/task-tracking-observation-content";
+import { TaskTrackerObservation } from "#/types/v1/core/base/observation";
 import i18n from "#/i18n";

 const trimText = (text: string, maxLength: number): string => {
@ -158,14 +161,24 @@ const getObservationEventTitle = (event: OpenHandsEvent): React.ReactNode => {

 export const getEventContent = (event: OpenHandsEvent) => {
  let title: React.ReactNode = "";
-  let details: string = "";
+  let details: string | React.ReactNode = "";

  if (isActionEvent(event)) {
    title = getActionEventTitle(event);
    details = getActionContent(event);
  } else if (isObservationEvent(event)) {
    title = getObservationEventTitle(event);
-    details = getObservationContent(event);
+
+    // For TaskTrackerObservation, use React component instead of markdown
+    if (event.observation.kind === "TaskTrackerObservation") {
+      details = (
+        <TaskTrackingObservationContent
+          event={event as ObservationEvent<TaskTrackerObservation>}
+        />
+      );
+    } else {
+      details = getObservationContent(event);
+    }
  }

  return {
--- a/frontend/src/components/v1/chat/event-message-components/finish-event-message.tsx
+++ b/frontend/src/components/v1/chat/event-message-components/finish-event-message.tsx
@ -27,13 +27,16 @@ export function FinishEventMessage({
  microagentPRUrl,
  actions,
 }: FinishEventMessageProps) {
+  const eventContent = getEventContent(event);
+  // For FinishAction, details is always a string (getActionContent returns string)
+  const message =
+    typeof eventContent.details === "string"
+      ? eventContent.details
+      : String(eventContent.details);
+
  return (
    <>
-      <ChatMessage
-        type="agent"
-        message={getEventContent(event).details}
-        actions={actions}
-      />
+      <ChatMessage type="agent" message={message} actions={actions} />
      <MicroagentStatusWrapper
        microagentStatus={microagentStatus}
        microagentConversationId={microagentConversationId}
--- a/frontend/src/components/v1/chat/event-message-components/generic-event-message-wrapper.tsx
+++ b/frontend/src/components/v1/chat/event-message-components/generic-event-message-wrapper.tsx
@ -16,6 +16,13 @@ export function GenericEventMessageWrapper({
 }: GenericEventMessageWrapperProps) {
  const { title, details } = getEventContent(event);

+  if (
+    isObservationEvent(event) &&
+    event.observation.kind === "TaskTrackerObservation"
+  ) {
+    return <div>{details}</div>;
+  }
+
  return (
    <div>
      <GenericEventMessage
--- a/frontend/src/components/v1/chat/task-tracking/task-item.tsx
+++ b/frontend/src/components/v1/chat/task-tracking/task-item.tsx
@ -0,0 +1,56 @@
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { TaskItem as TaskItemType } from "#/types/v1/core/base/common";
+import CircleIcon from "#/icons/u-circle.svg?react";
+import CheckCircleIcon from "#/icons/u-check-circle.svg?react";
+import LoadingIcon from "#/icons/loading.svg?react";
+import { cn } from "#/utils/utils";
+import { Typography } from "#/ui/typography";
+import { I18nKey } from "#/i18n/declaration";
+
+interface TaskItemProps {
+  task: TaskItemType;
+}
+
+export function TaskItem({ task }: TaskItemProps) {
+  const { t } = useTranslation();
+
+  const icon = useMemo(() => {
+    switch (task.status) {
+      case "todo":
+        return <CircleIcon className="w-4 h-4 text-[#ffffff]" />;
+      case "in_progress":
+        return (
+          <LoadingIcon className="w-4 h-4 text-[#ffffff]" strokeWidth={0.5} />
+        );
+      case "done":
+        return <CheckCircleIcon className="w-4 h-4 text-[#A3A3A3]" />;
+      default:
+        return <CircleIcon className="w-4 h-4 text-[#ffffff]" />;
+    }
+  }, [task.status]);
+
+  const isDoneStatus = task.status === "done";
+
+  return (
+    <div
+      className="flex gap-[14px] items-center px-4 py-2 w-full"
+      data-name="item"
+    >
+      <div className="shrink-0">{icon}</div>
+      <div className="flex flex-col items-start justify-center leading-[20px] text-nowrap whitespace-pre font-normal">
+        <Typography.Text
+          className={cn(
+            "text-[12px] text-white",
+            isDoneStatus && "text-[#A3A3A3]",
+          )}
+        >
+          {task.title}
+        </Typography.Text>
+        <Typography.Text className="text-[10px] text-[#A3A3A3]">
+          {t(I18nKey.TASK_TRACKING_OBSERVATION$TASK_NOTES)}: {task.notes}
+        </Typography.Text>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/components/v1/chat/task-tracking/task-list-section.tsx
+++ b/frontend/src/components/v1/chat/task-tracking/task-list-section.tsx
@ -0,0 +1,33 @@
+import { useTranslation } from "react-i18next";
+import { TaskItem } from "./task-item";
+import LessonPlanIcon from "#/icons/lesson-plan.svg?react";
+import { TaskItem as TaskItemType } from "#/types/v1/core/base/common";
+import { I18nKey } from "#/i18n/declaration";
+import { Typography } from "#/ui/typography";
+
+interface TaskListSectionProps {
+  taskList: TaskItemType[];
+}
+
+export function TaskListSection({ taskList }: TaskListSectionProps) {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex flex-col overflow-clip bg-[#25272d] border border-[#525252] rounded-[12px] w-full">
+      {/* Header Tabs */}
+      <div className="flex gap-1 items-center border-b border-[#525252] h-[41px] px-2 shrink-0">
+        <LessonPlanIcon className="shrink-0 w-4.5 h-4.5 text-[#9299aa]" />
+        <Typography.Text className="text-[11px] text-nowrap text-white tracking-[0.11px] font-medium leading-[16px] whitespace-pre">
+          {t(I18nKey.COMMON$TASKS)}
+        </Typography.Text>
+      </div>
+
+      {/* Task Items */}
+      <div>
+        {taskList.map((task, index) => (
+          <TaskItem key={`task-${index}`} task={task} />
+        ))}
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/components/v1/chat/task-tracking/task-tracking-observation-content.tsx
+++ b/frontend/src/components/v1/chat/task-tracking/task-tracking-observation-content.tsx
@ -0,0 +1,23 @@
+import React from "react";
+import { ObservationEvent } from "#/types/v1/core";
+import { TaskTrackerObservation } from "#/types/v1/core/base/observation";
+import { TaskListSection } from "./task-list-section";
+
+interface TaskTrackingObservationContentProps {
+  event: ObservationEvent<TaskTrackerObservation>;
+}
+
+export function TaskTrackingObservationContent({
+  event,
+}: TaskTrackingObservationContentProps): React.ReactNode {
+  const { observation } = event;
+  const { command, task_list: taskList } = observation;
+  const shouldShowTaskList = command === "plan" && taskList.length > 0;
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* Task List section - only show for 'plan' command */}
+      {shouldShowTaskList && <TaskListSection taskList={taskList} />}
+    </div>
+  );
+}
--- a/frontend/src/i18n/declaration.ts
+++ b/frontend/src/i18n/declaration.ts
@ -937,6 +937,7 @@ export enum I18nKey {
  AGENT_STATUS$WAITING_FOR_USER_CONFIRMATION = "AGENT_STATUS$WAITING_FOR_USER_CONFIRMATION",
  COMMON$MORE_OPTIONS = "COMMON$MORE_OPTIONS",
  COMMON$CREATE_A_PLAN = "COMMON$CREATE_A_PLAN",
+  COMMON$TASKS = "COMMON$TASKS",
  COMMON$PLAN_MD = "COMMON$PLAN_MD",
  COMMON$READ_MORE = "COMMON$READ_MORE",
  COMMON$BUILD = "COMMON$BUILD",
--- a/frontend/src/i18n/translation.json
+++ b/frontend/src/i18n/translation.json
@ -14991,6 +14991,22 @@
    "de": "Einen Plan erstellen",
    "uk": "Створити план"
  },
+  "COMMON$TASKS": {
+    "en": "Tasks",
+    "ja": "タスク",
+    "zh-CN": "任务",
+    "zh-TW": "任務",
+    "ko-KR": "작업",
+    "no": "Oppgaver",
+    "it": "Attività",
+    "pt": "Tarefas",
+    "es": "Tareas",
+    "ar": "مهام",
+    "fr": "Tâches",
+    "tr": "Görevler",
+    "de": "Aufgaben",
+    "uk": "Завдання"
+  },
  "COMMON$PLAN_MD": {
    "en": "Plan.md",
    "ja": "Plan.md",
--- a/frontend/src/icons/loading.svg
+++ b/frontend/src/icons/loading.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="7" viewBox="0 0 16 7" fill="none">
+  <path d="M7.50684 0.25C9.24918 0.25 10.9332 0.87774 12.251 2.01758C13.5688 3.15746 14.4327 4.73379 14.6836 6.45801L14.7256 6.74316H13.2129L13.1777 6.53516C12.9499 5.19635 12.2554 3.98161 11.2178 3.10547C10.1799 2.22925 8.86511 1.74805 7.50684 1.74805C6.14866 1.74811 4.83466 2.22931 3.79688 3.10547C2.75913 3.98161 2.06476 5.19628 1.83691 6.53516L1.80078 6.74316H0.289063L0.331055 6.45801C0.581982 4.73389 1.44504 3.15745 2.7627 2.01758C4.08041 0.877757 5.76455 0.250069 7.50684 0.25Z" fill="currentColor" stroke="currentColor" stroke-width="0.5"/>
+</svg>
--- a/frontend/src/icons/u-check-circle.svg
+++ b/frontend/src/icons/u-check-circle.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M14.72 8.79L10.43 13.09L8.78 11.44C8.69036 11.3353 8.58004 11.2503 8.45597 11.1903C8.33191 11.1303 8.19678 11.0965 8.05906 11.0912C7.92134 11.0859 7.78401 11.1091 7.65568 11.1594C7.52736 11.2096 7.41081 11.2859 7.31335 11.3833C7.2159 11.4808 7.13964 11.5974 7.08937 11.7257C7.03909 11.854 7.01589 11.9913 7.02121 12.1291C7.02653 12.2668 7.06026 12.4019 7.12028 12.526C7.1803 12.65 7.26532 12.7604 7.37 12.85L9.72 15.21C9.81344 15.3027 9.92426 15.376 10.0461 15.4258C10.1679 15.4755 10.2984 15.5008 10.43 15.5C10.6923 15.4989 10.9437 15.3947 11.13 15.21L16.13 10.21C16.2237 10.117 16.2981 10.0064 16.3489 9.88458C16.3997 9.76272 16.4258 9.63201 16.4258 9.5C16.4258 9.36799 16.3997 9.23728 16.3489 9.11542C16.2981 8.99356 16.2237 8.88296 16.13 8.79C15.9426 8.60375 15.6892 8.49921 15.425 8.49921C15.1608 8.49921 14.9074 8.60375 14.72 8.79ZM12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21447 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C20 14.1217 19.1572 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20Z" fill="currentColor"/>
+</svg>
--- a/frontend/src/icons/u-circle.svg
+++ b/frontend/src/icons/u-circle.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21447 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C20 14.1217 19.1572 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20Z" fill="currentColor"/>
+</svg>