feat(ui): upgrade workspace image preview with anchored pan/zoom, rotation, file actions, metadata, and fullscreen

[Is14w]

Linked issue

Nan

Summary

The current workspace image preview provides only basic zoom and clockwise rotation controls. It does not provide the interaction model users normally expect from a desktop image viewer, especially when inspecting large images or images whose dimensions exceed the available preview area.

This PR turns the workspace image preview into a complete image viewing experience with predictable navigation, mouse interaction, keyboard shortcuts, file actions, and image information.

The implementation remains focused on the workspace image preview and does not change the behavior of text, Markdown, spreadsheet, document, audio, video, or PDF previews.

Change scope

• Modules:

  • agent-ui
  • agent-gui
  • agent-gateway/web
  • src-tauri if required for native save and clipboard support

• Main UI:

  • crates/agent-ui/src/components/workspace-editor/WorkspaceFilePreviewOverlay.tsx

• Host integration:

  • crates/agent-gui/src/agent-ui-adapters/workspacePreview.tsx
  • crates/agent-gateway/web/src/agent-ui-adapters/workspacePreview.tsx
  • Native Tauri commands under crates/agent-gui/src-tauri/src/commands/app/system.rs if required

User-visible changes

Image navigation and viewing

• Keep the existing previous-image and next-image controls.
• Preserve the current image counter.
• Reset the image view state when opening a different image, reloading the current image, or reopening the preview.
• Preserve the current image loading and transition behavior.
• Keep the image centered when it fits inside the viewport.
• Allow oversized images to be inspected without losing access to the image content.

Pan and drag interaction

• Add pointer-based dragging to pan an image after it has been zoomed in.
• Support mouse dragging and pointer events consistently.
• Prevent accidental text selection and native image dragging during a pan gesture.
• Use an appropriate cursor state:
  • grab when the image can be moved;
  • grabbing while dragging.
• Do not start a pan gesture when the user is interacting with toolbar controls or context-menu items.
• Keep the image within reasonable viewport bounds so that it cannot be dragged completely out of view.
• Preserve the current pan position while the pointer gesture is active.
• Recalculate valid pan bounds when the viewport size, image size, zoom level, or rotation changes.

Zoom behavior

• Keep the existing toolbar zoom controls.
• Keep the existing minimum and maximum zoom limits.
• Keep the reduced mouse-wheel zoom step introduced by the current branch.
• Make both zoom-in and zoom-out operations use the mouse position as the zoom anchor.
• Keep the point under the cursor in the same viewport position while zooming.
• Apply the same anchor behavior to toolbar zoom actions when a pointer position is available; otherwise zoom around the viewport center.
• Prevent zooming from producing an unexpectedly large jump.
• Preserve the current view as much as possible when the zoom level changes.
• Ensure zooming out does not leave the image offset from the expected center.
• Avoid conflicting native scrolling behavior while the image preview handles wheel zooming.

Rotation

• Keep clockwise 90-degree rotation.
• Add counter-clockwise 90-degree rotation.
• Normalize rotation to the four 90-degree orientations.
• Recalculate image bounds after every rotation.
• Keep the image usable and visible after rotating an oversized image.
• Provide accessible labels and localized tooltips for both rotation directions.

Reset view

• Add a reset-view action that restores:
  • the default zoom level;
  • zero rotation;
  • centered image position.
• Make reset-view available from the toolbar and the custom context menu.
• Reset the view automatically when switching to another image or reopening the preview.
• Keep reset-view disabled or visually inactive when the image is already in its default state, if that matches the existing toolbar conventions.

Full-screen viewing

• Add a full-screen action for the image preview.
• Full-screen the image preview area rather than the entire operating-system window.
• Keep the preview toolbar and image actions available while full-screen.
• Update the action label and icon when entering or leaving full-screen.
• Handle browsers or hosts where the Fullscreen API is unavailable or rejected.
• Exit full-screen cleanly when the preview is closed.
• Keep keyboard and pointer interaction working in full-screen mode.

Download and save

• Add a download/save action for the currently loaded image.
• Preserve the original image bytes and MIME type.
• Use the native save-file dialog in the desktop GUI where supported.
• Use browser download behavior in WebUI as the fallback.
• Suggest the original image filename and extension.
• Do not modify the workspace file when saving a copy.
• Surface a localized error message when saving fails or is unavailable.

Clipboard actions

• Add an action to copy the original image to the system clipboard.
• Copy the original image bytes without applying the current preview zoom, pan, or rotation.
• Support native image clipboard integration in the desktop GUI where browser clipboard APIs are insufficient.
• Use the Web Clipboard API in WebUI when supported.
• Show a localized success or failure state for clipboard operations.
• Keep “copy image” separate from “copy image path”.

Copy image path

• Add an action to copy the active image path as text.
• Copy the path of the currently displayed image, not the initially opened image when navigating between images.
• Use the existing host clipboard abstraction where available.
• Provide a fallback error state when clipboard access is unavailable.

Image information

• Add an image information action or panel.
• Show the original image filename/path.
• Show MIME type or file format.
• Show file size.
• Show original pixel dimensions.
• Show the current rotation and zoom state where useful.
• Keep information readable for long paths and large files.
• Handle dimensions that cannot be decoded without breaking the preview.

Context menu

• Add a custom right-click context menu for the image preview.
• Include the relevant image actions:
  • zoom in;
  • zoom out;
  • reset view;
  • rotate clockwise;
  • rotate counter-clockwise;
  • copy image;
  • copy image path;
  • save/download;
  • view image information;
  • enter/exit full-screen.
• Disable actions that are not currently available.
• Position the menu within the viewport when the pointer is near an edge.
• Close the menu when clicking elsewhere, pressing Escape, changing images, or closing the preview.
• Prevent the browser's native context menu from appearing inside the image preview.
• Keep toolbar actions and context-menu actions connected to the same underlying handlers.

Keyboard interaction

• Add keyboard shortcuts for common image-viewer actions:
  • + / =: zoom in;
  • -: zoom out;
  • 0: reset view;
  • R: rotate clockwise;
  • Shift+R or L: rotate counter-clockwise;
  • F: enter or leave full-screen;
  • Escape: close the context menu or leave full-screen;
  • ArrowLeft / ArrowRight: navigate between images when focus is inside the image viewer.
• Do not intercept shortcuts while the user is typing in an input, textarea, or editable control.
• Keep the controls accessible through normal focus navigation.

Host behavior

• Keep shared image-viewer behavior in agent-ui.
• Expose only the capabilities that require host-specific behavior through the existing workspace preview adapter.
• Desktop GUI:
  • native save-file dialog where required;
  • native image clipboard support where required;
  • existing external-open behavior remains unchanged.
• WebUI:
  • browser download fallback;
  • Web Clipboard API fallback;
  • graceful degradation when browser permissions or APIs are unavailable.
• Do not make WebUI depend on Tauri-only APIs.

Screenshots / preview

Required before marking this PR ready for review.

Please attach a short recording or screenshots demonstrating:

1. Wheel zooming in and out with smaller increments.
2. Zooming around the mouse cursor.
3. Dragging a zoomed image.
4. Clockwise and counter-clockwise 90-degree rotation.
5. Resetting the image view.
6. Opening and using the custom context menu.
7. Copy image, copy path, and image information actions.
8. Save/download behavior.
9. Full-screen mode.
10. Switching between multiple images and confirming that view state resets correctly.

Suggested runtime preview:

• Open a large image whose dimensions exceed the preview viewport.
• Zoom in using the mouse wheel while pointing at a recognizable detail.
• Confirm that the detail remains under the pointer.
• Drag the image to inspect another area.
• Rotate it in both directions.
• Open the context menu and exercise the file actions.
• Switch to another image and confirm that zoom, rotation, and pan reset.

Verification

Checks to run:

pnpm --filter @liveagent/ui lint
pnpm --filter liveagent lint
pnpm --filter @liveagent/gateway-webui lint
pnpm --filter liveagent test:frontend
pnpm --filter @liveagent/gateway-webui test
git diff --check