fix(agent-input): make native drag bounds zoom-aware

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: Test

packages/desktop/src/lib/acp/components/agent-input/state/__tests__/agent-input-state-drag-drop-listeners.vitest.ts

@@ -5,9 +5,30 @@ import type { SessionStore } from "../../../../store/session-store.svelte.js";
 
 const listenMock = vi.fn();
 const invokeMock = vi.fn();
+let zoomLevel = 0.8;
 
 let AgentInputState: typeof import("../agent-input-state.svelte.js").AgentInputState;
 
+interface DragPositionEvent {
+	payload: {
+		paths: string[];
+		position: {
+			x: number;
+			y: number;
+		};
+	};
+}
+
+function requireDragOverHandler(
+	handler: ((event: DragPositionEvent) => void) | null
+): (event: DragPositionEvent) => void {
+	if (handler === null) {
+		throw new Error("Expected tauri://drag-over listener to register");
+	}
+
+	return handler;
+}
+
 function createPendingPromise<T>() {
 	let resolveValue: ((value: T) => void) | null = null;
 	const promise = new Promise<T>((resolve) => {
@@ -34,13 +55,19 @@ describe("AgentInputState drag-drop listener lifecycle", () => {
 	beforeEach(async () => {
 		listenMock.mockReset();
 		invokeMock.mockReset();
+		zoomLevel = 0.8;
 
 		mock.module("@tauri-apps/api/core", () => ({
 			invoke: invokeMock,
 		}));
 		mock.module("@tauri-apps/api/event", () => ({
 			listen: listenMock,
 		}));
+		mock.module("$lib/services/zoom.svelte.js", () => ({
+			getZoomService: () => ({
+				zoomLevel,
+			}),
+		}));
 
 		({ AgentInputState } = await import("../agent-input-state.svelte.js"));
 	});
@@ -77,4 +104,90 @@ describe("AgentInputState drag-drop listener lifecycle", () => {
 		expect(unlistenDrop).toHaveBeenCalledTimes(1);
 		expect(unlistenLeave).toHaveBeenCalledTimes(1);
 	});
-});
+
+	it("does not highlight the composer for native drag positions outside its zoomed bounds", async () => {
+		let dragOverHandler: ((event: DragPositionEvent) => void) | null = null;
+
+		listenMock.mockImplementation((eventName: string, handler: ((event: DragPositionEvent) => void) | (() => void)) => {
+			if (eventName === "tauri://drag-over") {
+				dragOverHandler = handler as (event: DragPositionEvent) => void;
+			}
+
+			return Promise.resolve(() => {});
+		});
+
+		const state = new AgentInputState({} as SessionStore, {} as PanelStore);
+		state.containerRef = {
+			getBoundingClientRect: () => ({
+				x: 100,
+				y: 100,
+				width: 100,
+				height: 100,
+				top: 100,
+				right: 200,
+				bottom: 200,
+				left: 100,
+				toJSON: () => ({}),
+			}),
+		} as HTMLElement;
+
+		state.initialize();
+		await flushAsync();
+
+		expect(dragOverHandler).not.toBeNull();
+		const registeredDragOverHandler = requireDragOverHandler(dragOverHandler);
+
+		registeredDragOverHandler({
+			payload: {
+				paths: ["/tmp/image.png"],
+				position: { x: 170, y: 120 },
+			},
+		});
+
+		expect(state.isDragActive).toBe(true);
+		expect(state.isDragHovering).toBe(false);
+	});
+
+	it("does not highlight the composer for native drag positions just outside its bounds", async () => {
+		let dragOverHandler: ((event: DragPositionEvent) => void) | null = null;
+		zoomLevel = 1;
+
+		listenMock.mockImplementation((eventName: string, handler: ((event: DragPositionEvent) => void) | (() => void)) => {
+			if (eventName === "tauri://drag-over") {
+				dragOverHandler = handler as (event: DragPositionEvent) => void;
+			}
+
+			return Promise.resolve(() => {});
+		});
+
+		const state = new AgentInputState({} as SessionStore, {} as PanelStore);
+		state.containerRef = {
+			getBoundingClientRect: () => ({
+				x: 100,
+				y: 100,
+				width: 100,
+				height: 100,
+				top: 100,
+				right: 200,
+				bottom: 200,
+				left: 100,
+				toJSON: () => ({}),
+			}),
+		} as HTMLElement;
+
+		state.initialize();
+		await flushAsync();
+
+		expect(dragOverHandler).not.toBeNull();
+		const registeredDragOverHandler = requireDragOverHandler(dragOverHandler);
+
+		registeredDragOverHandler({
+			payload: {
+				paths: ["/tmp/image.png"],
+				position: { x: 201, y: 120 },
+			},
+		});
+
+		expect(state.isDragHovering).toBe(false);
+	});
+});

packages/desktop/src/lib/acp/components/agent-input/state/agent-input-state.svelte.ts

@@ -3,6 +3,7 @@ import { listen, type UnlistenFn } from "@tauri-apps/api/event";
 import { okAsync, Result, ResultAsync } from "neverthrow";
 import { SvelteMap } from "svelte/reactivity";
 
+import { getZoomService } from "$lib/services/zoom.svelte.js";
 import type { ProjectIndex } from "../../../../services/converted-session-types.js";
 import { LOGGER_IDS } from "../../../constants/logger-ids.js";
 import type { PanelStore } from "../../../store/panel-store.svelte.js";
@@ -256,18 +257,25 @@ export class AgentInputState {
 
 	/**
 	 * Checks if a position is within the container element's bounds.
-	 * Uses generous padding to handle any coordinate system offsets.
+	 * Native Tauri drag coordinates are reported in logical window pixels, so
+	 * the DOM rect must be scaled out of CSS pixels before hit-testing.
 	 */
 	private isPositionInBounds(position: { x: number; y: number }): boolean {
 		if (!this.containerRef) return false;
 		const rect = this.containerRef.getBoundingClientRect();
-		// Add padding to be more forgiving with coordinate mismatches
-		const padding = 50;
+		const zoomLevel = getZoomService().zoomLevel;
+		const normalizedZoomLevel =
+			Number.isFinite(zoomLevel) && zoomLevel > 0 ? zoomLevel : 1;
+		const left = rect.left * normalizedZoomLevel;
+		const right = rect.right * normalizedZoomLevel;
+		const top = rect.top * normalizedZoomLevel;
+		const bottom = rect.bottom * normalizedZoomLevel;
+
 		return (
-			position.x >= rect.left - padding &&
-			position.x <= rect.right + padding &&
-			position.y >= rect.top - padding &&
-			position.y <= rect.bottom + padding
+			position.x >= left &&
+			position.x <= right &&
+			position.y >= top &&
+			position.y <= bottom
 		);
 	}