image response prompt, image view scroll
frdel committed
Feb 2, 2026 at 20:19 UTC
3adec910c0808d6362f904f6ec962ff91b615991
3 files changed
+37
-1
agents/agent0/prompts/agent.system.tool.response.md
+2
-1
@@ -8,10 +8,11 @@ use emojis as icons improve readability
8
prefer using tables
9
focus nice structured output key selling point
10
output full file paths not only names to be clickable
11
-images shown with 
11
+images shown with  show images when possible when relevant also output full path
12
all math and variables wrap with latex notation delimiters <latex>x = ...</latex>, use only single line latex do formatting in markdown instead
13
speech: text and lists are spoken, tables and code blocks not, therefore use tables for files and technicals, use text and lists for plain english, do not include technical details in lists
14
15
+
16
usage:
17
~~~json
18
{
webui/components/modals/image-viewer/image-viewer-store.js
+34
@@ -209,6 +209,40 @@ const model = {
209
this.updateImageTransform();
210
},
211
212
+ onWheel(event) {
213
+ // Trackpad scrolling on macOS reports both deltaX and deltaY.
214
+ // Prevent the modal/page from scrolling and instead pan the image.
215
+ if (!event) return;
216
+
217
+ // Avoid fighting with an active drag.
218
+ if (this.isDragging) {
219
+ event.preventDefault();
220
+ return;
221
+ }
222
+
223
+ // If image isn't ready, ignore.
224
+ if (!this.currentImageUrl || !this.naturalWidth || !this.naturalHeight) return;
225
+
226
+ event.preventDefault();
227
+
228
+ // deltaMode: 0=pixels, 1=lines, 2=pages
229
+ // Convert non-pixel deltas to an approximate pixel value.
230
+ let dx = event.deltaX || 0;
231
+ let dy = event.deltaY || 0;
232
+ if (event.deltaMode === 1) {
233
+ dx *= 16;
234
+ dy *= 16;
235
+ } else if (event.deltaMode === 2) {
236
+ dx *= 800;
237
+ dy *= 800;
238
+ }
239
+
240
+ // Pan in the direction of scrolling.
241
+ this.panX -= dx;
242
+ this.panY -= dy;
243
+ this.updateImageTransform();
244
+ },
245
+
246
endDrag() {
247
if (!this.isDragging) return;
248
this.isDragging = false;
webui/components/modals/image-viewer/image-viewer.html
+1
@@ -16,6 +16,7 @@
16
<div class="image-canvas"
17
@pointerdown="$store.imageViewer.startDrag($event)"
18
@pointermove="$store.imageViewer.onDrag($event)"
19
+ @wheel="$store.imageViewer.onWheel($event)"
20
@pointerup="$store.imageViewer.endDrag()"
21
@pointercancel="$store.imageViewer.endDrag()">
22
<img