feat(ui): dynamic processing timer + total completion time on plan finalize

[Tejasri-Microsoft]

This pull request introduces a user-friendly processing status indicator for plan execution, providing real-time feedback and elapsed time to users while their plan is being processed. The main changes include a reusable ProcessingStatusIndicator component, logic to track and display elapsed time, and dynamic status messages that adapt as processing progresses.

User interface improvements:

• Added a new ProcessingStatusIndicator component to display a spinner, status message, and elapsed time during plan processing (src/App/src/components/common/ProcessingStatusIndicator.tsx).
• Updated the plan execution UI to use the new status indicator, replacing the previous static message with a dynamic component (src/App/src/components/content/streaming/StreamingPlanState.tsx).
• Enhanced the plan chat and page components to pass elapsed time and status message props to the indicator, ensuring accurate and timely updates (src/App/src/components/content/PlanChat.tsx, src/App/src/pages/PlanPage.tsx). [1] [2] [3] [4]

Elapsed time tracking and messaging:

• Implemented logic to track the elapsed time of plan processing and reset it appropriately on completion or failure (src/App/src/hooks/usePlanWebSocket.tsx, src/App/src/pages/PlanPage.tsx). [1] [2] [3] [4] [5]
• Added dynamic status messages that change based on how long processing has been running, giving users more context about the current step (src/App/src/pages/PlanPage.tsx). [1] [2]

Other improvements:

• Appended the total completion time to the final agent message for transparency (src/App/src/hooks/usePlanWebSocket.tsx).
• Performed minor refactoring and import clean-up to support these changes. [1] [2] [3]

These changes collectively improve the user experience by making plan execution progress more visible and informative.## Purpose

• ...

Does this introduce a breaking change?

• Yes
• No

How to Test

• Get the code

git clone [repo-address]
cd [repo-name]
git checkout [branch-name]
npm install

• Test the code

What to Check

Verify that the following are valid

• ...

Other Information

[Copilot is generating a summary...]

[Copilot]

Pull request overview

This PR improves plan-execution UX by adding a reusable processing status indicator that shows dynamic “what’s happening” messages and elapsed time during execution, and by appending total completion time to the final agent result.

Changes:

• Added a reusable ProcessingStatusIndicator component to display a spinner, status message, and elapsed time.
• Implemented elapsed-time tracking during plan execution and wired it through PlanPage → PlanChat → StreamingPlanState.
• Appended a formatted “Total completion time” line to the final result message in the WebSocket flow.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/App/src/pages/PlanPage.tsx	Adds elapsed-time state/timer and dynamic status message generation; passes props down to chat UI.
src/App/src/hooks/usePlanWebSocket.tsx	Tracks processing start time and appends total completion time; adjusts spinner/reset behaviors.
src/App/src/components/content/streaming/StreamingPlanState.tsx	Replaces static execution message UI with the new reusable status indicator component.
src/App/src/components/content/PlanChat.tsx	Threads elapsed seconds + status message props into the execution-message renderer.
src/App/src/components/common/ProcessingStatusIndicator.tsx	New component that renders spinner + message + optional formatted elapsed time.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.