dsh-web-preview-float

When you are pairing with a model inside the DSH Web UI, the most disruptive step is always switching to a browser tab to see the rendered result. During those tens of seconds you wait for a response, you probably want to check whether the layout holds or the colour change looks right. dsh-web-preview-float exists to eliminate that context switch. It drops a live preview and a code reader right into your work surface, giving you a Google AI Studio-like edit-and-see-it-happen loop without ever leaving the chat.

Once installed, two independent floating panels appear in your browser. The preview panel talks straight to the project dev server and auto-detects the port from package.json scripts (Vite 5173, Next/CRA 3000, Astro 4321), with a manual URL override when needed. It ships with common aspect-ratio presets (16:9, 4:3, 3:2, 21:9, phone portrait) and one-click resolution shortcuts (1920x1080, 1366x768, 390x844). The code panel mirrors a VS Code-style layout: file tree sidebar, tabbed editor with line numbers, and a status bar. Click Edit to switch to write mode, press Ctrl+S to save (logged as a web-preview/code-edit session event in DSH), or cancel to keep the draft. Both panels are freely draggable, resizable, can be locked to aspect ratio, and minimised to a capsule you can still drag.

This fits well if you build front-end or full-stack projects inside the DSH Web UI and want to verify rendering the instant the AI emits a diff. It also suits anyone tired of the type, switch browser, refresh, switch back cycle. The plugin relies solely on official DSH extension points (ctx.webServer, ctx.fs, ctx.sandboxPolicy) plus a self-contained DOM portal, so it installs as a standalone add-on without touching the core.