commit

Author: Tejasri-Microsoft

src/App/src/components/common/ProcessingStatusIndicator.tsx

@@ -1,26 +1,17 @@
 import { Spinner } from '@fluentui/react-components';
+import { formatElapsedTime } from '@/utils';
 
 interface ProcessingStatusIndicatorProps {
     message: string;
     elapsedSeconds?: number;
 }
 
-const formatElapsedTime = (elapsedSeconds: number): string => {
-    if (elapsedSeconds < 60) {
-        return `${elapsedSeconds}s`;
-    }
-
-    const minutes = Math.floor(elapsedSeconds / 60);
-    const seconds = elapsedSeconds % 60;
-    return `${minutes}min ${seconds}sec`;
-};
-
 const ProcessingStatusIndicator = ({
     message,
     elapsedSeconds,
 }: ProcessingStatusIndicatorProps) => {
-    const showElapsedSuffix = Number.isFinite(elapsedSeconds) && (elapsedSeconds as number) > 0;
-    const elapsedSuffix = showElapsedSuffix ? ` (${formatElapsedTime(elapsedSeconds as number)})` : '';
+    const showElapsedSuffix = typeof elapsedSeconds === 'number' && elapsedSeconds > 0;
+    const elapsedSuffix = showElapsedSuffix ? ` (${formatElapsedTime(elapsedSeconds)})` : '';
 
     return (
         <div

src/App/src/hooks/usePlanWebSocket.tsx

@@ -46,6 +46,7 @@ import {
 } from '@/models';
 import { APIService } from '@/api/apiService';
 import { ToastIntent } from '@/components/toast/InlineToaster';
+import { formatElapsedTime } from '@/utils';
 
 const apiService = new APIService();
 
@@ -57,16 +58,6 @@ interface UsePlanWebSocketProps {
     showToast: (content: React.ReactNode, intent?: ToastIntent, options?: { dismissible?: boolean; timeoutMs?: number | null }) => number;
 }
 
-const formatElapsedTime = (elapsedSeconds: number): string => {
-    if (elapsedSeconds < 60) {
-        return `${elapsedSeconds}s`;
-    }
-
-    const minutes = Math.floor(elapsedSeconds / 60);
-    const seconds = elapsedSeconds % 60;
-    return `${minutes}min ${seconds}sec`;
-};
-
 /**
  * Creates an AgentMessageResponse and persists it, then optionally reloads the task list.
  */
@@ -115,8 +106,12 @@ export function usePlanWebSocket({
     const processingStartedAtRef = React.useRef<number | null>(null);
 
     useEffect(() => {
-        if (showProcessingPlanSpinner && processingStartedAtRef.current === null) {
-            processingStartedAtRef.current = Date.now();
+        if (showProcessingPlanSpinner) {
+            if (processingStartedAtRef.current === null) {
+                processingStartedAtRef.current = Date.now();
+            }
+        } else {
+            processingStartedAtRef.current = null;
         }
     }, [showProcessingPlanSpinner]);
 
@@ -282,7 +277,6 @@ export function usePlanWebSocket({
                 };
                 dispatch(addAgentMessage(errorAgent));
                 dispatch(planFailedFinal());
-                dispatch(setShowProcessingPlanSpinner(false));
                 processingStartedAtRef.current = null;
                 dispatch(setShowBufferingText(false));
                 dispatch(setSubmittingChatDisableInput(true));

src/App/src/utils/index.ts

@@ -8,7 +8,7 @@
  *  - agentIconUtils → agent-to-icon mapping
  */
 
-export { formatDate } from './utils';
+export { formatDate, formatElapsedTime } from './utils';
 export { getErrorMessage, getErrorStyle } from './errorUtils';
 export { formatErrorMessage, extractPlainAnswer, truncate } from './messageUtils';
 export {

src/App/src/utils/utils.tsx

@@ -67,4 +67,27 @@ export const formatDate = (
         });
 
     return formatted;
-}
+}
+
+/**
+ * Formats an elapsed-time duration in seconds for display in processing
+ * indicators and completion messages.
+ *
+ * Examples:
+ *  - 5  → "5s"
+ *  - 59 → "59s"
+ *  - 60 → "1min 0sec"
+ *  - 75 → "1min 15sec"
+ *
+ * @param elapsedSeconds Non-negative integer seconds elapsed.
+ * @returns Human-readable elapsed-time string.
+ */
+export const formatElapsedTime = (elapsedSeconds: number): string => {
+    if (elapsedSeconds < 60) {
+        return `${elapsedSeconds}s`;
+    }
+
+    const minutes = Math.floor(elapsedSeconds / 60);
+    const seconds = elapsedSeconds % 60;
+    return `${minutes}min ${seconds}sec`;
+};