fix(expert): dismiss pending tool-approval cards when a new message is sent (#7663)

## Description

Fixes #7662.

When the Expert deferred a tool call for approval, sending a new message instead of clicking Allow or Deny left the approval card active, with its buttons still live and the card looking pending. The backend already abandons the deferred tool calls and addresses the new message, but the frontend never dismissed the stale card.

## Changes

- `handleQuery` now cancels the open approval batch when a new message is sent, so pending cards are dismissed instead of lingering.
- `cancelPendingToolApprovals` takes an outcome status: a new message marks unanswered cards as `cancelled` (matching how the agent self-heals those calls), while chat stop and Start Over keep the existing `denied` outcome.
- `ToolApprovalCard` renders a `Cancelled` outcome label.

Co-authored-by: andypalmi <andrea@flowfuse.com>

Author: andypalmi

frontend/src/components/expert/components/messages/components/resources/ToolApprovalCard.vue

@@ -67,7 +67,7 @@ export default {
         },
         status: {
             type: String,
-            // 'pending' | 'approved' | 'always-allowed' | 'denied' | 'always-denied'
+            // 'pending' | 'approved' | 'always-allowed' | 'denied' | 'always-denied' | 'cancelled'
             default: 'pending'
         },
         disabled: {
@@ -100,7 +100,8 @@ export default {
                 approved: 'Allowed',
                 'always-allowed': 'Allowed for this chat',
                 denied: 'Denied',
-                'always-denied': 'Denied for this chat'
+                'always-denied': 'Denied for this chat',
+                cancelled: 'Cancelled'
             }[this.effectiveStatus] || (this.effectiveStatus === 'pending' ? '' : 'Denied')
         },
         hasParams () {

frontend/src/stores/product-expert.js

@@ -212,6 +212,10 @@ export const useProductExpertStore = defineStore('product-expert', {
                 agentStore.sessionExpiredShown = false
             }
 
+            // A new message supersedes any pending approval cards; the agent cancels the
+            // abandoned tool calls next turn, so dismiss the cards now.
+            this.cancelPendingToolApprovals('cancelled')
+
             // Add user message
             this.addUserMessage(query)
 
@@ -564,16 +568,15 @@ export const useProductExpertStore = defineStore('product-expert', {
                 agentStore.abortController = null
             }
         },
-        // Abandon the open approval batch (chat stop / Start Over). The agent already left
-        // memory when it deferred, so there is nothing to unblock — just mark any unanswered
-        // card denied so it stops looking pending, and drop the batch (#421). If the user
-        // later sends a new message the agent self-heals the abandoned tool calls.
-        cancelPendingToolApprovals () {
+        // Abandon the open approval batch (chat stop / Start Over / new message): mark any
+        // unanswered card with the given outcome so it stops looking pending, and drop the
+        // batch. A new message passes 'cancelled'; stop/Start Over keep 'denied'.
+        cancelPendingToolApprovals (status = 'denied') {
             const batch = this._approvalBatch
             if (!batch) return
             const permStore = useProductAssistantStore()
             for (const id of Object.keys(batch.toolKeys)) {
-                if (!(id in batch.decisions)) permStore.setToolApprovalStatus(id, 'denied')
+                if (!(id in batch.decisions)) permStore.setToolApprovalStatus(id, status)
             }
             this._approvalBatch = null
         },