fix: truncate webfetch content to fit context

Modules/Notifications/Sidebar/Chat/ChatContent.qml

@@ -161,7 +161,7 @@ Item {
 				scrollAnim.start();
 			}
 
-			cacheBuffer: Math.max(height * 2, 0)
+			cacheBuffer: Math.max(height * 20, 0)
 			clip: true
 			fadeAmount: 0.05
 			fadeThreshold: Tokens.padding.medium

Modules/Notifications/Sidebar/Chat/ChatList.qml

@@ -16,6 +16,7 @@ Item {
 	property bool highlight: false
 	property bool slim: false
 
+	signal requestExpand
 	signal deleteChatRequest(content: ChatSession)
 	signal loadChatRequest(content: ChatSession, index: int)
 	signal newChatRequest
@@ -112,8 +113,15 @@ Item {
 		radius: modelLayer.pressed ? Tokens.rounding.small : modelName.implicitHeight / 2
 
 		function prettyModelName(): string {
+			if (modelsList.count < 1)
+				return qsTr("No models found");
+
 			const pathList = Chat.model.split("\/");
 			const name = pathList[pathList.length - 1];
+
+			if (!name)
+				return qsTr("No model selected");
+
 			return name;
 		}
 
@@ -133,6 +141,7 @@ Item {
 			implicitHeight: fabRoot.implicitHeight
 
 			CustomText {
+				id: label
 				text: modelsContainer.prettyModelName()
 				color: Colors.palette.m3onSurfaceVariant
 				anchors.left: parent.left
@@ -148,10 +157,13 @@ Item {
 				text: modelsContainer.expanded ? "unfold_less" : "unfold_more"
 				animate: true
 				font.pointSize: Tokens.font.size.large
+				visible: modelsList.count > 0
 			}
 
 			StateLayer {
 				id: modelLayer
+				enabled: modelsList.count > 0
+
 				onClicked: {
 					ChatState.fabExpanded = false;
 					modelsContainer.expanded = !modelsContainer.expanded;
@@ -248,16 +260,16 @@ Item {
 		anchors.margins: Tokens.padding.small
 		padding: 8
 		font.pointSize: Math.round(18 * 1.2)
-		icon: "add"
+		icon: root.slim ? "left_panel_open" : "add"
 		isRound: ChatState.fabExpanded
-		opacity: root.slim ? 0 : 1
-		visible: opacity > 0
-
-		Behavior on opacity {
-			Anim {
-				type: Anim.DefaultEffects
-			}
-		}
+		// opacity: root.slim ? 0 : 1
+		// visible: opacity > 0
+		//
+		// Behavior on opacity {
+		// 	Anim {
+		// 		type: Anim.DefaultEffects
+		// 	}
+		// }
 
 		label.transform: Rotation {
 			origin.y: fabRoot.label.height / 2
@@ -270,6 +282,11 @@ Item {
 		}
 
 		onClicked: {
+			if (root.slim && !ChatState.narrowSidebarExpanded) {
+				root.requestExpand();
+				return;
+			}
+
 			modelsContainer.expanded = false;
 			ChatState.fabExpanded = !ChatState.fabExpanded;
 		}

Modules/Notifications/Sidebar/Chat/ChatState.qml

@@ -14,6 +14,10 @@ Singleton {
 	property bool inChat: false
 	property bool fabExpanded: false
 	property bool isWindow: false
+	property bool isWide: false
+	property bool settledSlim: false
+	property bool settledWide: false
+	property bool narrowSidebarExpanded: false
 	property bool windowIsWide: false
 	property ShellScreen screen
 	property bool sidebarVisible: Visibilities.getForActive().sidebar

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

@@ -2,6 +2,7 @@ import QtQuick
 import QtQuick.Layouts
 import ZShell.Llm
 import ZShell.Config
+import qs.Modules.Notifications.Sidebar.Chat
 import qs.Components
 import qs.Services
 
@@ -16,32 +17,60 @@ Item {
 	required property ChatMessage message
 	required property ChatGeneration current
 
-	// Widest the bubble may grow to; assistant bubbles always use it so
-	// the markdown blocks have a deterministic width to wrap against.
 	readonly property real contentMaxWidth: width - Tokens.spacing.extraSmall - Tokens.spacing.extraLarge
 
 	signal edit(text: string)
 
-	implicitHeight: bubble.implicitHeight + actionsRow.implicitHeight + actionsRow.anchors.topMargin
+	implicitHeight: bubble.implicitHeight + (actionsRow.shouldBeActive ? actionsRow.implicitHeight + actionsRow.anchors.topMargin : 0)
 
 	CustomClippingRect {
 		id: bubble
 
+		property real liveTargetWidth: root.isUser ? Math.min(msgText.implicitWidth + Tokens.padding.medium * 2, root.contentMaxWidth) : root.contentMaxWidth
+		property real frozenWidth: 0.0
+		property bool layoutFrozen: false
+		property real layoutWidth: root.isUser ? Math.min(msgText.implicitWidth + Tokens.padding.medium * 2, root.contentMaxWidth) : root.contentMaxWidth
+
 		radius: Tokens.rounding.medium
 		color: root.isUser ? Colors.palette.m3primary : Colors.palette.m3surfaceContainer
-		implicitWidth: root.isUser ? Math.min(msgText.implicitWidth + Tokens.padding.medium * 2, root.contentMaxWidth) : root.contentMaxWidth
+		implicitWidth: layoutFrozen ? frozenWidth : layoutWidth
 		implicitHeight: root.isUser ? msgText.contentHeight + Tokens.padding.medium * 2 : blocks.implicitHeight + blocks.anchors.topMargin * 2
 		anchors.right: root.isUser ? parent.right : undefined
+		layer.enabled: false
+		layer.smooth: true
 
-		// Behavior on implicitHeight {
-		// 	enabled: !root.segment.running
-		//
-		// 	Anim {
-		// 		type: Anim.DefaultEffects
-		// 	}
-		// }
+		transform: Scale {
+			id: stretchScale
+			origin.x: root.isUser ? bubble.width : 0
+			xScale: bubble.layoutFrozen && bubble.frozenWidth > 0 ? bubble.liveTargetWidth / bubble.frozenWidth : 1.0
+		}
+
+		states: [
+			State {
+				name: "toSlim"
+				when: ChatState.isWindow && !ChatState.isWide && !ChatState.settledSlim
+
+				PropertyChanges {
+					bubble.layer.enabled: true
+					bubble.layoutFrozen: true
+				}
+			},
+			State {
+				name: "toWide"
+				when: ChatState.isWindow && ChatState.isWide && !ChatState.settledWide
+
+				PropertyChanges {
+					bubble.layer.enabled: true
+					bubble.layoutFrozen: true
+				}
+			}
+		]
+
+		onLayoutFrozenChanged: {
+			if (layoutFrozen)
+				frozenWidth = width;
+		}
 
-		// User messages stay a plain editable text field.
 		TextEditBase {
 			id: msgText
 

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

@@ -160,6 +160,7 @@ MouseArea {
 		anchors.top: parent.top
 		anchors.left: parent.left
 		anchors.right: parent.right
+		spacing: Tokens.spacing.medium
 
 		Repeater {
 			id: segmentRep
@@ -177,6 +178,7 @@ MouseArea {
 					delegate: ProcessBlock {
 						width: root.width
 						blocks: root.blocks
+						current: root.current
 
 						onExpandedChanged: root.handleReasoningToggle(expanded)
 					}

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

@@ -1,23 +1,39 @@
 import QtQuick
 import QtQuick.Layouts
+import ZShell.Blobs
 import ZShell.Config
+import ZShell.Components
 import ZShell.Llm
 import qs.Components
 import qs.Services
 
-CustomClippingRect {
+Item {
 	id: root
 
 	required property int index
 	required property var modelData
 	required property var blocks
 	readonly property var segments: modelData.segments
+	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))
 
-	implicitHeight: expanded ? expandedRect.implicitHeight + layout.implicitHeight + expandedRect.anchors.topMargin * 2 : layout.implicitHeight + Tokens.spacing.small
+	clip: true
+	implicitHeight: {
+		const expand = expandedRect.implicitHeight + layout.implicitHeight + expandedRect.anchors.topMargin;
+		const collapsed = layout.implicitHeight;
+		const approval = layout.implicitHeight + approvalPrompt.implicitHeight + approvalPrompt.anchors.topMargin;
+
+		if (expanded)
+			return expand;
+		else if (pendingApproval)
+			return approval;
+		else
+			return collapsed;
+	}
 
 	Behavior on implicitHeight {
 		Anim {
@@ -57,6 +73,7 @@ CustomClippingRect {
 				inactiveOnColor: hovered ? Colors.palette.m3onSurface : Colors.palette.m3outline
 				anchors.centerIn: parent
 				opacity: root.isActive ? 0 : 1
+				enabled: opacity > 0
 				rotation: root.expanded ? 180 : 0
 				type: IconButton.Text
 
@@ -77,6 +94,9 @@ CustomClippingRect {
 			Layout.leftMargin: Tokens.spacing.medium
 			text: {
 				if (root.isActive) {
+					if (root.pendingApproval)
+						return qsTr("Waiting for approval...");
+
 					if (root.lastSegment.type === LlmSegment.Type.ToolCall)
 						return qsTr("Using %1...").arg(root.lastSegment.name);
 					return qsTr("Thinking...");
@@ -90,6 +110,163 @@ CustomClippingRect {
 		}
 	}
 
+	Item {
+		id: approvalPrompt
+		anchors.top: layout.bottom
+		anchors.topMargin: Tokens.spacing.small
+		anchors.left: parent.left
+		anchors.right: parent.right
+		implicitHeight: approvalLayout.implicitHeight + approvalLayout.anchors.margins * 2
+		visible: root.pendingApproval
+
+		CustomRect {
+			id: approvalBg
+
+			anchors.fill: parent
+			radius: Tokens.rounding.medium
+			color: Colors.palette.m3surface
+			border.width: 1
+			border.color: Colors.palette.m3outlineVariant
+
+			ColumnLayout {
+				id: approvalLayout
+				anchors.fill: parent
+				anchors.margins: Tokens.padding.medium
+				spacing: Tokens.spacing.small
+
+				CustomText {
+					id: requestHeader
+					text: qsTr("Tool call request")
+					font.pointSize: Tokens.font.size.large
+					color: Colors.palette.m3onSurface
+				}
+
+				Item {
+					id: toolsBg
+
+					property bool open: false
+
+					implicitHeight: toolList.implicitHeight + toolList.anchors.margins * 2
+					Layout.fillWidth: true
+
+					BlobGroup {
+						id: blobGroup
+
+						color: toolsBg.open ? Colors.palette.m3surfaceContainerHighest : Colors.tPalette.m3primaryContainer
+
+						Behavior on color {
+							CAnim {}
+						}
+					}
+
+					Item {
+						id: toolWrapper
+
+						width: toolsBg.width
+						height: toolList.implicitHeight + toolList.anchors.margins * 2
+
+						BlobRect {
+							id: dialogBg
+
+							anchors.fill: parent
+							bottomLeftRadius: toolsBg.open ? Tokens.rounding.largeIncreased : Tokens.rounding.small
+							bottomRightRadius: toolsBg.open ? Tokens.rounding.largeIncreased : Tokens.rounding.small
+							topRightRadius: toolsBg.open ? Tokens.rounding.largeIncreased : Tokens.rounding.small
+							topLeftRadius: toolsBg.open ? Tokens.rounding.largeIncreased : Tokens.rounding.small
+							deformScale: 0
+							group: blobGroup
+							opacity: blobGroup.color.a * (root.enabled ? 1 : 0.5)
+						}
+
+						CustomRect {
+							id: toolBox
+
+							anchors.fill: parent
+							anchors.margins: Tokens.padding.medium
+
+							ColumnLayout {
+								id: toolList
+
+								Repeater {
+									model: root.current.pendingToolCalls ?? []
+									delegate: RowLayout {
+										id: toolText
+
+										required property LlmSegment modelData
+										required property int index
+
+										spacing: Tokens.spacing.medium
+
+										function toolTarget(seg: LlmSegment): string {
+											var a = null;
+											try {
+												a = JSON.parse(seg.arguments);
+											} catch (e) {}
+											if (a && typeof a === "object") {
+												const v = a.url ?? a.path;
+												if (v !== undefined && v !== null)
+													return String(v);
+											}
+											return String(seg.arguments);
+										}
+
+										CustomText {
+											color: Colors.palette.m3onPrimaryContainer
+											text: String(toolText.index + 1)
+											font.pointSize: Tokens.font.size.large
+										}
+
+										CustomText {
+											color: Colors.palette.m3onPrimaryContainer
+											text: qsTr("%1").arg(toolText.modelData.name)
+										}
+
+										MaterialIcon {
+											color: Colors.palette.m3onPrimaryContainer
+											text: "arrow_right_alt"
+										}
+
+										CustomText {
+											color: Colors.palette.m3onPrimaryContainer
+											text: qsTr("%1").arg(toolText.toolTarget(toolText.modelData))
+										}
+									}
+								}
+							}
+						}
+					}
+				}
+
+				ButtonRow {
+					Layout.alignment: Qt.AlignRight
+					spacing: Tokens.spacing.medium
+
+					IconTextButton {
+						icon: "check_circle"
+						text: qsTr("Allow")
+						horizontalPadding: Tokens.padding.large
+						verticalPadding: Tokens.padding.small
+						isRound: true
+						shapeMorph: true
+						onClicked: root.current.approveTools()
+					}
+
+					IconTextButton {
+						icon: "cancel"
+						text: qsTr("Deny")
+						isRound: true
+						shapeMorph: true
+						inactiveColor: Colors.palette.m3error
+						inactiveOnColor: Colors.palette.m3onError
+						horizontalPadding: Tokens.padding.large
+						verticalPadding: Tokens.padding.small
+						onClicked: root.current.denyTools()
+					}
+				}
+			}
+		}
+	}
+
 	CustomRect {
 		id: expandedRect
 
@@ -98,7 +275,6 @@ CustomClippingRect {
 		anchors.top: layout.bottom
 		anchors.bottom: parent.bottom
 		anchors.topMargin: Tokens.spacing.small
-		anchors.bottomMargin: Tokens.spacing.small
 		color: Colors.palette.m3surfaceContainerLow
 		implicitHeight: expandedContent.contentHeight + expandedContent.anchors.margins * 2
 		opacity: root.expanded ? 1 : 0
@@ -147,6 +323,49 @@ CustomClippingRect {
 				CustomText {
 					id: content
 
+					function toolTarget(seg: LlmSegment): string {
+						var a = null;
+						try {
+							a = JSON.parse(seg.arguments);
+						} catch (e) {}
+						if (a && typeof a === "object") {
+							const v = a.url ?? a.path;
+							if (v !== undefined && v !== null)
+								return String(v);
+						}
+						return String(seg.arguments);
+					}
+
+					function prettyTool(seg: LlmSegment): string {
+						if (seg.name === "webfetch") {
+							switch (seg.status) {
+							case LlmSegment.Status.Running:
+								return qsTr("Fetching");
+							case LlmSegment.Status.Pending:
+								return qsTr("Pending fetch");
+							case LlmSegment.Status.Success:
+								return qsTr("Fetched");
+							case LlmSegment.Status.Error:
+								return qsTr("Failed to fetch");
+							default:
+								return qsTr("Fetched website");
+							}
+						} else if (seg.name === "readfile") {
+							switch (seg.status) {
+							case LlmSegment.Status.Running:
+								return qsTr("Reading");
+							case LlmSegment.Status.Pending:
+								return qsTr("Pending read");
+							case LlmSegment.Status.Success:
+								return qsTr("Read");
+							case LlmSegment.Status.Error:
+								return qsTr("Failed to read");
+							default:
+								return qsTr("Read file");
+							}
+						}
+					}
+
 					anchors.left: parent.left
 					anchors.leftMargin: Tokens.padding.small
 					anchors.top: header.bottom
@@ -155,7 +374,7 @@ CustomClippingRect {
 					color: Colors.palette.m3outline
 					font.pointSize: Tokens.font.size.small
 					wrapMode: CustomText.WrapAtWordBoundaryOrAnywhere
-					text: segment.modelData.type === LlmSegment.Type.Reasoning ? segment.modelData.text : qsTr("Fetched %1").arg(JSON.parse(segment.modelData.arguments)?.url ?? "website")
+					text: segment.modelData.type === LlmSegment.Type.Reasoning ? segment.modelData.text : qsTr("%1 %2").arg(content.prettyTool(segment.modelData)).arg(content.toolTarget(segment.modelData))
 				}
 			}
 		}

Modules/Notifications/Sidebar/Chat/SidebarView.qml

@@ -36,6 +36,7 @@ Item {
 	}
 
 	BlobInvertedRect {
+		id: invertedRect
 		anchors.fill: parent
 		borderBottom: Tokens.padding.small
 		borderLeft: sidebar.implicitWidth + sidebar.anchors.margins + Tokens.spacing.medium
@@ -53,9 +54,10 @@ Item {
 		anchors.left: parent.left
 		anchors.bottom: parent.bottom
 		anchors.margins: Tokens.padding.medium
-		implicitWidth: root.isWide ? Config.sidebar.sizes.width : root.iconSize
+		implicitWidth: root.isWide || ChatState.narrowSidebarExpanded ? Config.sidebar.sizes.width : root.iconSize
 		highlight: true
-		slim: !root.isWide
+		slim: !root.isWide && !ChatState.narrowSidebarExpanded
+		z: 1
 
 		Behavior on implicitWidth {
 			Anim {
@@ -84,6 +86,36 @@ Item {
 			ChatState.currentIdx = 0;
 			ChatState.chatSession = data;
 		}
+
+		onRequestExpand: {
+			ChatState.narrowSidebarExpanded = true;
+		}
+	}
+
+	CustomClippingRect {
+		anchors.fill: parent
+		anchors.leftMargin: invertedRect.borderLeft
+		anchors.topMargin: invertedRect.borderTop
+		anchors.bottomMargin: invertedRect.borderBottom
+		anchors.rightMargin: invertedRect.borderRight
+		radius: invertedRect.radius
+
+		children: [contentArea, dim]
+	}
+
+	CustomRect {
+		id: dim
+		anchors.fill: parent
+
+		color: Colors.palette.m3shadow
+		opacity: ChatState.narrowSidebarExpanded && !root.isWide ? 0.3 : 0
+		z: 1
+
+		Behavior on opacity {
+			Anim {
+				type: Anim.DefaultEffects
+			}
+		}
 	}
 
 	Item {
@@ -91,12 +123,12 @@ Item {
 
 		property int leftMargin: sidebar.implicitWidth
 
-		z: 1
+		z: 0
 		anchors.top: parent.top
 		anchors.bottom: parent.bottom
-		anchors.margins: Tokens.padding.medium * 2
+		anchors.margins: Tokens.padding.medium
 		anchors.right: parent.right
-		implicitWidth: root.width - leftMargin - sidebar.anchors.margins - Tokens.spacing.medium * 2 - anchors.margins
+		implicitWidth: root.width - leftMargin - sidebar.anchors.margins - Tokens.spacing.medium * 2 - anchors.margins * 2
 
 		states: State {
 			name: "wide"
@@ -152,6 +184,27 @@ Item {
 				color: Colors.tPalette.m3onSurfaceVariant
 			}
 		}
+
+		MouseArea {
+			id: dimArea
+			anchors.fill: parent
+			preventStealing: true
+			enabled: !root.isWide && ChatState.narrowSidebarExpanded
+			cursorShape: undefined
+
+			onClicked: {
+				const x = mouseX;
+				const margin = root.width - contentArea.implicitWidth - contentArea.anchors.margins * 2;
+
+				if (x > invertedRect.borderLeft - margin)
+					ChatState.narrowSidebarExpanded = false;
+			}
+
+			HoverHandler {
+				cursorShape: dimArea.enabled ? Qt.ArrowCursor : undefined
+				enabled: dimArea.enabled
+			}
+		}
 	}
 
 	Binding {
@@ -160,6 +213,24 @@ Item {
 		value: root.showList
 	}
 
+	Binding {
+		target: ChatState
+		property: "isWide"
+		value: root.isWide
+	}
+
+	Binding {
+		target: ChatState
+		value: contentArea.leftMargin === root.iconSize
+		property: "settledSlim"
+	}
+
+	Binding {
+		target: ChatState
+		value: contentArea.leftMargin === sidebar.implicitWidth
+		property: "settledWide"
+	}
+
 	Component {
 		id: conversationView
 

Modules/Notifications/Sidebar/Utils/Cards/RecordingList.qml

@@ -110,7 +110,10 @@ ColumnLayout {
 
 				onClicked: {
 					root.visibilities.sidebar = false;
-					Quickshell.execDetached(["app2unit", "--", ...Config.general.apps.playback, recording.modelData.path]);
+					if (Config.launcher.uwsm)
+						Quickshell.execDetached(["app2unit", "--", ...Config.general.apps.playback, recording.modelData.path]);
+					else
+						Quickshell.execDetached([...Config.general.apps.playback, recording.modelData.path]);
 				}
 			}
 
@@ -120,7 +123,10 @@ ColumnLayout {
 
 				onClicked: {
 					root.visibilities.sidebar = false;
-					Quickshell.execDetached(["app2unit", "--", ...Config.general.apps.explorer, recording.modelData.path]);
+					if (Config.launcher.uwsm)
+						Quickshell.execDetached(["app2unit", "--", ...Config.general.apps.explorer, recording.modelData.path]);
+					else
+						Quickshell.execDetached([...Config.general.apps.explorer, recording.modelData.path]);
 				}
 			}
 		}
@@ -135,8 +141,7 @@ ColumnLayout {
 			}
 		}
 		Behavior on implicitHeight {
-			Anim {
-			}
+			Anim {}
 		}
 		model: FileSystemModel {
 			nameFilters: ["recording_*.mp4"]
@@ -162,8 +167,7 @@ ColumnLayout {
 			opacity: list.count === 0 ? 1 : 0
 
 			Behavior on opacity {
-				Anim {
-				}
+				Anim {}
 			}
 			sourceComponent: ColumnLayout {
 				spacing: Tokens.spacing.small
@@ -178,16 +182,13 @@ ColumnLayout {
 					text: "scan_delete"
 
 					Behavior on Layout.preferredHeight {
-						Anim {
-						}
+						Anim {}
 					}
 					Behavior on opacity {
-						Anim {
-						}
+						Anim {}
 					}
 					Behavior on scale {
-						Anim {
-						}
+						Anim {}
 					}
 				}
 
@@ -203,16 +204,13 @@ ColumnLayout {
 						text: "scan_delete"
 
 						Behavior on Layout.preferredWidth {
-							Anim {
-							}
+							Anim {}
 						}
 						Behavior on opacity {
-							Anim {
-							}
+							Anim {}
 						}
 						Behavior on scale {
-							Anim {
-							}
+							Anim {}
 						}
 					}