Modules/Notifications/Sidebar/Chat/ChatContent.qml

@@ -198,6 +198,7 @@ Item {
 			}
 			delegate: MessageDelegate {
 				rotation: 180
+				rootParent: list
 			}
 
 			displaced: Transition {

Modules/Notifications/Sidebar/Chat/Content/MessageDelegate.qml

@@ -14,6 +14,7 @@ MouseArea {
 	property ChatGeneration current: modelData.activeGeneration
 	required property int index
 	readonly property bool isUser: modelData.role === ChatMessage.Role.User
+	required property Item rootParent
 	required property ChatMessage modelData
 	property bool reasoningExpanded: false
 	readonly property var blocks: blockify(current.segments)
@@ -179,6 +180,7 @@ MouseArea {
 						width: root.width
 						blocks: root.blocks
 						current: root.current
+						rootParent: root.rootParent
 
 						onExpandedChanged: root.handleReasoningToggle(expanded)
 					}

Modules/Notifications/Sidebar/Chat/Content/ProcessBlock.qml

@@ -14,12 +14,13 @@ Item {
 	required property var modelData
 	required property var blocks
 	readonly property var segments: modelData.segments
+	required property Item rootParent
 	required property ChatGeneration current
 	readonly property bool isActive: index === blocks.length - 1
 	property bool expanded: false
 	readonly property LlmSegment lastSegment: root.segments[root.segments.length - 1]
 	readonly property real totalElapsedMs: root.segments.reduce((sum, s) => sum + (s.elapsedMs ?? 0), 0)
-	readonly property bool pendingApproval: current.toolApprovalPending && segments.filter(s => s.type === LlmSegment.Type.ToolCall).every(s => current.pendingToolCalls.includes(s))
+	readonly property bool pendingApproval: current.toolApprovalPending && segments.filter(s => s.type === LlmSegment.Type.ToolCall).some(s => current.pendingToolCalls.includes(s))
 
 	clip: true
 	implicitHeight: {
@@ -145,10 +146,21 @@ Item {
 					id: toolsBg
 
 					property bool open: false
+					property Item rootParent: root.rootParent
+					property int openHeight: toolsBg.rootParent.height - Tokens.padding.medium * 2
+					property int openWidth: toolsBg.rootParent.width - Tokens.padding.medium * 2
 
 					implicitHeight: toolList.implicitHeight + toolList.anchors.margins * 2
 					Layout.fillWidth: true
 
+					function reparentWrapper(): void {
+						const newParent = open ? rootParent : toolsBg;
+						const pos = toolsWrapper.mapToItem(newParent, 0, 0);
+						toolsWrapper.parent = newParent;
+						toolsWrapper.x = pos.x;
+						toolsWrapper.y = pos.y;
+					}
+
 					BlobGroup {
 						id: blobGroup
 
@@ -159,14 +171,87 @@ Item {
 						}
 					}
 
+					MouseArea {
+						id: backdrop
+
+						anchors.fill: parent
+						enabled: false
+						hoverEnabled: enabled
+						preventStealing: true
+						parent: toolsBg.open ? toolsBg.rootParent : toolsBg
+
+						onClicked: toolsBg.open = false
+					}
+
 					Item {
-						id: toolWrapper
+						id: toolsWrapper
 
 						width: toolsBg.width
 						height: toolList.implicitHeight + toolList.anchors.margins * 2
 
+						states: State {
+							name: "open"
+							when: toolsBg.open
+
+							PropertyChanges {
+								backdrop.enabled: true
+								toolsBackground.bottomLeftRadius: Tokens.rounding.largeIncreased
+								toolsBackground.bottomRightRadius: Tokens.rounding.largeIncreased
+								toolsBackground.topRightRadius: Tokens.rounding.largeIncreased
+								toolsBackground.topLeftRadius: Tokens.rounding.largeIncreased
+								// toolsContent.opacity: 1
+								toolsWrapper.height: toolsBg.openHeight
+								toolsWrapper.width: toolsBg.openWidth
+								toolsWrapper.x: (toolsBg.rootParent.width - toolsBg.openWidth) / 2
+								toolsWrapper.y: (toolsBg.rootParent.height - toolsBg.openHeight) / 2
+								elevation.opacity: 1
+								toolBox.opacity: 0
+							}
+						}
+						transitions: Transition {
+							id: dialogTransition
+
+							SequentialAnimation {
+								ScriptAction {
+									script: toolsBg.reparentWrapper()
+								}
+
+								Anim {
+									properties: "x,y"
+								}
+							}
+
+							PropertyAction {
+								property: "enabled"
+							}
+
+							Anim {
+								properties: "opacity,topLeftRadius,topRightRadius,bottomLeftRadius,bottomRightRadius"
+								type: Anim.DefaultEffects
+							}
+
+							Anim {
+								properties: "width,height"
+							}
+						}
+
+						Elevation {
+							id: elevation
+
+							anchors.fill: parent
+							bottomLeftRadius: toolsBackground.bottomLeftRadius
+							bottomRightRadius: toolsBackground.bottomRightRadius
+							level: 4
+							opacity: 0
+							radius: toolsBackground.radius
+
+							transform: Matrix4x4 {
+								matrix: toolsBackground.deformMatrix
+							}
+						}
+
 						BlobRect {
-							id: dialogBg
+							id: toolsBackground
 
 							anchors.fill: parent
 							bottomLeftRadius: toolsBg.open ? Tokens.rounding.largeIncreased : Tokens.rounding.small
@@ -180,12 +265,17 @@ Item {
 
 						CustomRect {
 							id: toolBox
-
 							anchors.fill: parent
-							anchors.margins: Tokens.padding.medium
+							radius: Tokens.rounding.small
+
+							StateLayer {
+								onClicked: toolsBg.open = true
+							}
 
 							ColumnLayout {
 								id: toolList
+								anchors.fill: parent
+								anchors.margins: Tokens.padding.medium
 
 								Repeater {
 									model: root.current.pendingToolCalls ?? []