conciliate merge from eunsoo

Author: Fr4nc3

src/frontend_react/src/components/content/HomeInput.tsx

@@ -28,7 +28,7 @@ const HomeInput: React.FC<HomeInputProps> = ({
     const [input, setInput] = useState("");
     const textareaRef = useRef<HTMLTextAreaElement>(null);
     const navigate = useNavigate();
-    const { showToast } = useInlineToaster();
+    const { showToast, dismissToast } = useInlineToaster();
 
     const resetTextarea = () => {
         setInput("");
@@ -46,7 +46,7 @@ const HomeInput: React.FC<HomeInputProps> = ({
     const handleSubmit = async () => {
         if (input.trim()) {
             setSubmitting(true);
-            showToast("Creating a plan", "progress");
+            let id = showToast("Creating a plan", "progress");
             try {
                 const response = await TaskService.submitInputTask(input.trim());
 
@@ -60,16 +60,21 @@ const HomeInput: React.FC<HomeInputProps> = ({
                 if (response.plan_id && response.plan_id !== null) {
                     // plan_id is valid (not null or undefined)
                     showToast("Plan created!", "success");
+                    dismissToast(id);
                     navigate(`/plan/${response.plan_id}`);
                 } else {
                     // plan_id is not valid, handle accordingly
                     console.log('Invalid plan:', response.status);
+
                     showToast("Failed to create plan", "error");
+                    dismissToast(id);
                 }
             } catch (error) {
                 console.error("Failed to create plan:", error);
+                dismissToast(id);
                 showToast("Something went wrong", "error");
             } finally {
+                setInput("");
                 setSubmitting(false);
             }
         }
@@ -144,3 +149,4 @@ const HomeInput: React.FC<HomeInputProps> = ({
 };
 
 export default HomeInput;
+

src/frontend_react/src/components/content/PlanPanelLeft.tsx

@@ -125,7 +125,7 @@ const PlanPanelLeft: React.FC<PlanPanelLefProps> = ({
 
           </div>
           <Body1Strong>New task</Body1Strong>
-          
+
         </div>
 
         <br />
@@ -138,13 +138,11 @@ const PlanPanelLeft: React.FC<PlanPanelLefProps> = ({
         />
 
         <PanelFooter>
-          {userInfo && (
-            <PanelUserCard
-              name={userInfo.user_first_last_name || ""}
-              alias={userInfo.user_email || ""}
-              size={32} // Default=32
-            />
-          )}
+          <PanelUserCard
+            name={userInfo ? userInfo.user_first_last_name : "Guess"}
+            alias={userInfo ? userInfo.user_email : ""}
+            size={32}
+          />
         </PanelFooter>
       </PanelLeft>
     </div>

src/frontend_react/src/components/content/PlanPanelRight.tsx

@@ -1,13 +1,8 @@
 import React from "react";
-
-import { Button } from "@fluentui/react-components";
-import { History20Filled, MoreHorizontalRegular, TaskListSquareLtr20Regular, TaskListSquareLtrFilled } from "@fluentui/react-icons";
 import PanelRight from "@/coral/components/Panels/PanelRight";
-import PanelRightToolbar from "@/coral/components/Panels/PanelRightToolbar";
 import TaskDetails from "./TaskDetails";
 import { TaskDetailsProps } from "@/models";
 
-
 const PlanPanelRight: React.FC<TaskDetailsProps> = ({
     planData,
     loading,

src/frontend_react/src/components/content/TaskDetails.tsx

@@ -154,11 +154,10 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
                 </div>
                 <div className="task-details-subtask-content">
                   <Body1
-                    className={`task-details-subtask-description ${
-                      step.human_approval_status === "rejected"
-                        ? "strikethrough"
-                        : ""
-                    }`}
+                    className={`task-details-subtask-description ${step.human_approval_status === "rejected"
+                      ? "strikethrough"
+                      : ""
+                      }`}
                   >
                     {description}{" "}
                     {functionOrDetails && (
@@ -171,7 +170,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
                         <div>
                           <Tooltip relationship="label" content="Approve">
                             <Button
-                       
+
                               icon={<Checkmark20Regular />}
                               appearance="subtle"
                               onClick={

src/frontend_react/src/components/content/TaskList.tsx

@@ -16,10 +16,6 @@ import CoralAccordionItem from "@/coral/components/CoralAccordion/CoralAccordion
 import CoralAccordionHeader from "@/coral/components/CoralAccordion/CoralAccordionHeader";
 import CoralAccordionPanel from "@/coral/components/CoralAccordion/CoralAccordionPanel";
 
-
-
-
-
 const TaskList: React.FC<TaskListProps> = ({
   inProgressTasks,
   completedTasks,
@@ -38,9 +34,9 @@ const TaskList: React.FC<TaskListProps> = ({
       >
         <div className="sideNavTick" />
         <div className="left">
-<div className="task-name-truncated" title={task.name}>
-  {task.name}
-</div>
+          <div className="task-name-truncated" title={task.name}>
+            {task.name}
+          </div>
 
 
           {task.date && (

src/frontend_react/src/pages/HomePage.tsx

@@ -54,7 +54,6 @@ const HomePage: React.FC = () => {
                     <Content>
                         <ContentToolbar
                             panelTitle={"Multi-Agent Planner"}
-                            // panelIcon={<Sparkle20Filled />}
                         ></ContentToolbar>
                         <HomeInput
                             onInputSubmit={handleNewTask}

src/frontend_react/src/pages/PlanPage.tsx

@@ -37,7 +37,7 @@ import InlineToaster, {
 } from "../components/toast/InlineToaster";
 import Octo from "../coral/imports/Octopus.png"; // 🐙 Animated PNG loader
 import PanelRightToggles from "@/coral/components/Header/PanelRightToggles";
-import {TaskListSquareLtr } from "@/coral/imports/bundleicons";
+import { TaskListSquareLtr } from "@/coral/imports/bundleicons";
 import LoadingMessage, { loadingMessages } from "@/coral/components/LoadingMessage";
 
 /**
@@ -47,7 +47,7 @@ import LoadingMessage, { loadingMessages } from "@/coral/components/LoadingMessa
 const PlanPage: React.FC = () => {
     const { planId } = useParams<{ planId: string }>();
     const navigate = useNavigate();
-    const { showToast,dismissToast } = useInlineToaster();
+    const { showToast, dismissToast } = useInlineToaster();
 
     const [input, setInput] = useState("");
     const [planData, setPlanData] = useState<ProcessedPlanData | any>(null);
@@ -110,17 +110,19 @@ const PlanPage: React.FC = () => {
             setInput("");
             if (!planData?.plan) return;
             setSubmitting(true);
-            showToast("Submitting clarification", "progress");
+            let id = showToast("Submitting clarification", "progress");
             try {
                 await PlanDataService.submitClarification(
                     planData.plan.id,
                     planData.plan.session_id,
                     chatInput
                 );
                 setInput("");
+                dismissToast(id);
                 showToast("Clarification submitted successfully", "success");
                 await loadPlanData(false);
             } catch (error) {
+                dismissToast(id);
                 showToast("Failed to submit clarification", "error");
                 console.error("Failed to submit clarification:", error);
             } finally {
@@ -148,7 +150,7 @@ const PlanPage: React.FC = () => {
                 }
                 await loadPlanData(false);
             } catch (error) {
-                 dismissToast(id);
+                dismissToast(id);
                 showToast(`Failed to ${approve ? "approve" : "reject"} step`, "error");
                 console.error(`Failed to ${approve ? "approve" : "reject"} step:`, error);
             } finally {
@@ -194,7 +196,7 @@ const PlanPage: React.FC = () => {
                         <>
                             <ContentToolbar
                                 panelTitle={planData?.plan?.initial_goal || "Plan Details"}
-                                // panelIcon={<ChatMultiple20Regular />}
+                            // panelIcon={<ChatMultiple20Regular />}
                             >
                                 <PanelRightToggles>
                                     <ToggleButton