feat: align status bar with control bar (#1235)

frontend/src/components/AgentControlBar.tsx

@@ -1,15 +1,15 @@
-import React, { useEffect } from "react";
 import { Button, ButtonGroup, Tooltip } from "@nextui-org/react";
+import React, { useEffect } from "react";
 import { useSelector } from "react-redux";
+import ArrowIcon from "../assets/arrow";
 import PauseIcon from "../assets/pause";
 import PlayIcon from "../assets/play";
-import AgentTaskAction from "../types/AgentTaskAction";
 import { changeTaskState } from "../services/agentStateService";
-import store, { RootState } from "../store";
-import AgentTaskState from "../types/AgentTaskState";
-import ArrowIcon from "../assets/arrow";
 import { clearMsgs } from "../services/session";
 import { clearMessages } from "../state/chatSlice";
+import store, { RootState } from "../store";
+import AgentTaskAction from "../types/AgentTaskAction";
+import AgentTaskState from "../types/AgentTaskState";
 
 const TaskStateActionMap = {
   [AgentTaskAction.START]: AgentTaskState.RUNNING,
@@ -105,47 +105,45 @@ function AgentControlBar() {
   }, [curTaskState]);
 
   return (
-    <div className="ml-5 mt-3">
-      <ButtonGroup size="sm" variant="ghost">
+    <ButtonGroup size="sm" variant="ghost">
+      <ActionButton
+        isLoading={false}
+        isDisabled={isLoading}
+        content="Restart a new agent task"
+        action={AgentTaskAction.STOP}
+        handleAction={handleAction}
+      >
+        <ArrowIcon />
+      </ActionButton>
+
+      {curTaskState === AgentTaskState.PAUSED ? (
         <ActionButton
-          isLoading={false}
-          isDisabled={isLoading}
-          content="Restart a new agent task"
-          action={AgentTaskAction.STOP}
+          isLoading={isLoading}
+          isDisabled={
+            isLoading ||
+            IgnoreTaskStateMap[AgentTaskAction.RESUME].includes(curTaskState)
+          }
+          content="Resume the agent task"
+          action={AgentTaskAction.RESUME}
           handleAction={handleAction}
         >
-          <ArrowIcon />
+          <PlayIcon />
         </ActionButton>
-
-        {curTaskState === AgentTaskState.PAUSED ? (
-          <ActionButton
-            isLoading={isLoading}
-            isDisabled={
-              isLoading ||
-              IgnoreTaskStateMap[AgentTaskAction.RESUME].includes(curTaskState)
-            }
-            content="Resume the agent task"
-            action={AgentTaskAction.RESUME}
-            handleAction={handleAction}
-          >
-            <PlayIcon />
-          </ActionButton>
-        ) : (
-          <ActionButton
-            isLoading={isLoading}
-            isDisabled={
-              isLoading ||
-              IgnoreTaskStateMap[AgentTaskAction.PAUSE].includes(curTaskState)
-            }
-            content="Pause the agent task"
-            action={AgentTaskAction.PAUSE}
-            handleAction={handleAction}
-          >
-            <PauseIcon />
-          </ActionButton>
-        )}
-      </ButtonGroup>
-    </div>
+      ) : (
+        <ActionButton
+          isLoading={isLoading}
+          isDisabled={
+            isLoading ||
+            IgnoreTaskStateMap[AgentTaskAction.PAUSE].includes(curTaskState)
+          }
+          content="Pause the agent task"
+          action={AgentTaskAction.PAUSE}
+          handleAction={handleAction}
+        >
+          <PauseIcon />
+        </ActionButton>
+      )}
+    </ButtonGroup>
   );
 }
 

frontend/src/components/AgentStatusBar.tsx

@@ -41,11 +41,11 @@ function AgentStatusBar() {
   // - Agent is ready
   // - Agent is not available
   return (
-    <div className="flex items-center space-x-3 ml-6">
+    <div className="flex items-center">
       {initialized ? (
         <>
           <div
-            className={`w-3 h-3 rounded-full animate-pulse ${AgentStatusMap[curTaskState].indicator}`}
+            className={`w-3 h-3 mr-2 rounded-full animate-pulse ${AgentStatusMap[curTaskState].indicator}`}
           />
           <span className="text-sm text-stone-400">
             {AgentStatusMap[curTaskState].message}
@@ -53,7 +53,7 @@ function AgentStatusBar() {
         </>
       ) : (
         <>
-          <div className="w-3 h-3 bg-orange-800 rounded-full animate-pulse" />
+          <div className="w-3 h-3 mr-3 bg-orange-800 rounded-full animate-pulse" />
           <span className="text-sm text-stone-400">
             {t(I18nKey.CHAT_INTERFACE$INITIALZING_AGENT_LOADING_MESSAGE)}
           </span>

frontend/src/components/ChatInterface.tsx

@@ -11,9 +11,9 @@ import {
 } from "../services/chatService";
 import { Message } from "../state/chatSlice";
 import { RootState } from "../store";
+import AgentControlBar from "./AgentControlBar";
 import AgentStatusBar from "./AgentStatusBar";
 import ChatInput from "./ChatInput";
-import AgentControlBar from "./AgentControlBar";
 
 interface IChatBubbleProps {
   msg: Message;
@@ -124,8 +124,10 @@ function ChatInterface(): JSX.Element {
         Chat
       </div>
       <MessageList />
-      <AgentStatusBar />
-      <AgentControlBar />
+      <div className="flex justify-between items-center px-4">
+        <AgentControlBar />
+        <AgentStatusBar />
+      </div>
       <ChatInput disabled={!initialized} onSendMessage={sendChatMessage} />
     </div>
   );