fix(frontend): show stop action button for running or starting conversations (#12215)

frontend/__tests__/components/features/conversation-panel/conversation-card.test.tsx

@@ -14,6 +14,8 @@ import { renderWithProviders } from "test-utils";
 import { formatTimeDelta } from "#/utils/format-time-delta";
 import { ConversationCard } from "#/components/features/conversation-panel/conversation-card/conversation-card";
 import { clickOnEditButton } from "./utils";
+import { ConversationCardActions } from "#/components/features/conversation-panel/conversation-card/conversation-card-actions";
+import { ConversationStatus } from "#/types/conversation-status";
 
 // We'll use the actual i18next implementation but override the translation function
 
@@ -431,4 +433,34 @@ describe("ConversationCard", () => {
 
     expect(screen.queryByTestId("ellipsis-button")).not.toBeInTheDocument();
   });
+
+  const statusTable: [ConversationStatus, boolean][] = [
+    ["RUNNING", true],
+    ["STARTING", true],
+    ["STOPPED", false],
+    ["ARCHIVED", false],
+    ["ERROR", false],
+  ];
+
+  it.each(statusTable)(
+    "should toggle stop button visibility correctly for status",
+    (status, shouldShow) => {
+      renderWithProviders(
+        <ConversationCardActions
+          contextMenuOpen={true}
+          onContextMenuToggle={vi.fn()}
+          onStop={vi.fn()}
+          conversationStatus={status}
+        />,
+      );
+
+      const stopButton = screen.queryByTestId("stop-button");
+
+      if (shouldShow) {
+        expect(stopButton).toBeInTheDocument();
+      } else {
+        expect(stopButton).not.toBeInTheDocument();
+      }
+    },
+  );
 });

frontend/src/components/features/conversation-panel/conversation-card/conversation-card-actions.tsx

@@ -59,7 +59,12 @@ export function ConversationCardActions({
         <ConversationCardContextMenu
           onClose={() => onContextMenuToggle(false)}
           onDelete={onDelete}
-          onStop={conversationStatus !== "STOPPED" ? onStop : undefined}
+          onStop={
+            conversationStatus === "RUNNING" ||
+            conversationStatus === "STARTING"
+              ? onStop
+              : undefined
+          }
           onEdit={onEdit}
           onDownloadViaVSCode={
             conversationId && showOptions ? onDownloadViaVSCode : undefined