dsh-image-preview

中文版

Image preview for the dsh session interface. When the agent runs the read_image tool, the result is rendered as a small thumbnail by default instead of raw JSON — click the thumbnail to view the full-size original in a lightbox styled exactly like dsh's built-in ImageLightbox.

Features

Lightbox controls

Compatibility

Built and verified against dsh 0.1.5-rc.2.

Why the low priority matters. dsh now ships its own read_image toolview. tool.call.toolview is a keyed slot, and its registry rejects a second registration for the same key at the same priority:

keyed slot "tool.call.toolview" already has an entry for key "read_image"
at priority 0 — register at a different priority to shadow it (lowest renders)

So this plugin registers at priority: -1 to take over the shipped row. Without that, apply() throws during client boot and not a single row renders — which is exactly what happened before this fix.

Preview

Thumbnails in the session — each read_image tool row renders a small thumbnail by default:

Full-size lightbox — click any thumbnail to open the original image. Supports ← → navigation across all images in the conversation (counter shows 3 / 4):

How it works

dsh-image-preview is a pure client-side plugin. It registers a keyed slot on tool.call.toolview with key read_image at priority: -1 and takes over rendering of the read_image tool row:

agent runs read_image
  └─ tool result content: [{ text envelope }, { type: "image", attachment }]
       └─ tool-call node → tool.call.toolview (key = read_image, priority -1 shadows the shipped row)
            └─ ReadImageRow: thumbnail + click to open the cross-row Lightbox

• sessionId and t are injected by the session-scoped slot's standard kit (dsh-client-ui-session / the locale seat).
• loadImage is the session-authorized loader dsh passes in the slot owner props (MessageImageLoader, i.e. uiConversation.imageUrl(sessionId, attachment), cached per session). The plugin never touches /api/session.attachment directly.
• Attachment metadata (attachmentId, mediaType, width, height) comes straight from the tool result block.
• The lightbox looks like dsh's built-in ImageLightbox (portal to body, backdrop mask, ESC/backdrop/close dismissal, focus restore) but adds cross-image navigation plus zoom / rotate / pan / download.
• Zoom and rotation are a single CSS transform on the <img> (no re-encoding); downloads hand the loader's blob: URL straight to <a download>, so no bytes are copied or re-fetched.
• The image registry is bucketed by sessionId, so two sessions open at once never cross-navigate into each other's images.

Installation

From GitHub (recommended)

Requires pnpm ≥ 9. Install into your web profile with the official plugin command:

dsh plugin --profile web add 'github:algerkong/dsh-image-preview'

or manually in ~/.dsh/profiles/web/package.json:

{
  "dependencies": {
    "@alger-ai/dsh-image-preview": "github:algerkong/dsh-image-preview"
  },
  "dsh": {
    "profile": {
      "bundles": [ "@alger-ai/dsh-image-preview" ]
    }
  }
}

Then run pnpm install in the profile and restart dsh web. Refresh the page afterwards.

Local development

Link the package directly:

cd ~/.dsh/profiles/web
pnpm add link:/path/to/dsh-image-preview

Add "@alger-ai/dsh-image-preview" to dsh.profile.bundles, restart dsh web, and refresh.

Usage

1. Start a session and let the agent call read_image on an image file.
2. The tool row shows a small thumbnail instead of raw JSON.
3. Click the thumbnail to inspect the full-size original in the lightbox.

Development

node verify.mjs   # self-check: bundle shape, slot-takeover contract, runtime render

verify.mjs checks three layers: the __ModuleLoader__.load registration shape, the keyed-slot takeover contract (it reproduces dsh's registry rule and fails if the plugin forgets priority: -1), and an actual render pass over the component (loadImage path, thumbnail, lightbox, Esc, multi-image grid and navigation, plus the zoom / rotate / download toolbar).

Files

dsh-image-preview/
├── package.json        # bundle metadata (dsh.bundle.patch / dsh.client platform=web)
├── cordis.patch.yml    # registers the client entry (id: ui-image-preview)
├── lib/
│   ├── index.js        # host-side entry (empty — browser-only plugin)
│   └── client.js       # browser: read_image toolview + thumbnail + lightbox
└── verify.mjs          # self-check script

License

MIT