DSH Chat Image Lightbox

English | 中文

---

English

A DeepSeek Harness plugin that displays images inline in the chat with a lightbox overlay — zoom, download (save-as dialog), and prev/next navigation.

Features

• Inline display: Images in AI responses render directly in the chat (via markdown ``)
• Click to zoom: Click any image to open a full-screen lightbox; click again to zoom back out
• Scroll to zoom & pan: When zoomed in, use the mouse wheel to zoom further and drag to pan around the image
• Download: Click the download button ⬇ to save the image (triggers browser save-as dialog for same-origin images; filename is sanitized and the extension is derived from the image type)
• Navigation: Left/right arrow buttons, keyboard arrows, or swipe left/right on touch devices to switch between multiple images
• Caption: The viewer shows the current image's filename/caption
• Accessible: The lightbox is a proper role="dialog" with aria-modal, button aria-labels, and focus management (focus returns to the trigger on close)
• Smooth: Adjacent images are prefetched so navigation feels instant
• Close: Click backdrop, press Escape, or click ✕ to close
• Auto-enhance: MutationObserver automatically enhances new images added to the chat

Installation

Method 1: npm (recommended)

dsh plugin --profile desktop add @loyalchiiina/dsh-chat-image-lightbox

Method 2: Manual

1. Copy the lib/ folder and cordis.patch.yml to your DSH profile's node_modules/@loyalchiiina/dsh-chat-image-lightbox/
2. Add @loyalchiiina/dsh-chat-image-lightbox to your profile's package.json → dsh.profile.bundles array
3. Restart DSH Desktop

Usage

1. Place images in ~/.dsh/uploads/ (or any directory served by your DSH instance)
2. In your AI response, use markdown image syntax:

3. The image will display inline with lightbox enhancement

Note: For the download button to trigger a save-as dialog, the image must be served from the same origin as your DSH instance (e.g., via the /images/ route). Cross-origin images will open in a new tab instead.

Keyboard & Mouse

Action	Input
Open lightbox	Click an image
Zoom in / out	Click image, or mouse wheel when zoomed
Pan	Drag the image while zoomed
Prev / next	← / → keys, on-screen arrows, or swipe
Close	Esc, click backdrop, or ✕

HTTP API

Endpoint	Method	Description
/images/<path>	GET	Serve an uploaded image (loopback-only, with extension/security guards)
/api/image-gallery/list	GET	List images under the gallery root; supports ?limit=N
/api/image-gallery/root	GET	Return the configured gallery root path

How It Works

Component	Description
Host (lib/index.js)	Registers /images/ file-serving route and /api/image-gallery/list + /api/image-gallery/root APIs on ctx.webServer
Client (lib/client.js)	Uses MutationObserver to watch for <img> elements in the chat, adds click handlers that open a lightbox overlay

Requirements

• DeepSeek Harness ≥ 2.0 (with webServer service)
• Node.js ≥ 22

License

MIT

---

中文

DeepSeek Harness 插件：在对话框中直接显示图片，支持放大、下载（弹出另存为）、左右切换。

功能

…