Live preview tab for DSH — embed any dev server in an iframe with transparent SPA proxying.
Install
# from GitHub (first run asks for allowBuilds approval — follow the hint, retry)
dsh plugin --profile web add github:RaulLazaro/dsh-preview-plugin
Any plugin you install runs third-party code with your own permissions — it can read your files, use your credentials, and reach the network, and tool approvals don’t sandbox it. GitHub-sourced plugins also run build scripts at install time — pnpm blocks those until you allow them, so an install can stop with ERR_PNPM_GIT_DEP_PREPARE_NOT_ALLOWED or ERR_PNPM_IGNORED_BUILDS; dsh prints the exact key to add under allowBuilds in your profile’s pnpm-workspace.yaml, and the install works on the next run. Allowing a build is a trust decision: only install sources you trust, and pin a commit (github:owner/repo#sha).
README
Live preview tab for DeepSeek Harness — embed any dev server in an iframe with transparent SPA proxying.
Features
- Path-based SPA proxy:
/preview/:port/*rewrites all routes so the embedded app works as if served from the DSH host <base>+ fetch/XHR interception: Injects a<base href>tag and interceptsfetch()andXMLHttpRequest.open()for full SPA + backend support- Global or per-session ports: Set a port globally or per conversation session via the API
- Auto-sync: The preview tab polls the host for agent-set port changes
- Sandboxed iframe:
allow-scripts allow-same-origin allow-forms allow-popupsfor secure embedding
Installation
1. Add as a dependency
In your DSH web profile's package.json:
{
"dependencies": {
"dsh-preview-plugin": "file:~/workspace/dsh-preview-plugin"
}
}
2. Register the plugin
In your profile's cordis.patch.yml:
- insert:
- id: dsh-preview
name: 'dsh-preview-plugin'
3. Restart DSH
dsh web
Usage
- Start your dev server on the VPS (e.g.
npm run dev -- --host 0.0.0.0 --port 3000) - Open the Preview tab in DSH Web GUI
- Enter the port number (e.g.
3000) and click Go - The iframe will load the app through the transparent proxy
API
The plugin exposes a port management API:
| Method | Endpoint | Description |
|---|---|---|
GET |
/api/preview-port |
Get the current global port |
GET |
/api/preview-port?sessionId=<id> |
Get port for a session (falls back to global) |
POST |
/api/preview-port |
Set global port ({ "port": 3000 }) |
POST |
/api/preview-port?sessionId=<id> |
Set port for a session |
How It Works
- The host registers two routes on the DSH web server:
/api/preview-port— port management/preview/:port/*— transparent proxy
- When a request hits
/preview/:port/path, it fetcheshttp://127.0.0.1:port/path - For HTML responses, it injects a
<base href="/preview/:port/">and a script that rewritesfetch()andXMLHttpRequest.open()URLs - For non-HTML responses (JS, CSS, images, etc.), it streams the response directly
Security Notes
- The proxy only targets
127.0.0.1— no external SSRF possible - The iframe is sandboxed with
allow-scripts allow-same-origin allow-forms allow-popups - Port validation enforces 1–5 digit numbers only
- CORS headers are set for local development convenience
License
MIT
Links
More in this category
zhu1090093659/dsh-web#packages/dsh-task-board★ 6815
Task board for the dsh web GUI: a sidebar multi-column kanban whose cards run in real DSH agent sessions and can also be scheduled with cron expressions, executed host-side even with the browser closed.
zhu1090093659/dsh-web#packages/dsh-web-all★ 6815
Plugin and skin collection for the DSH Web UI: task board, Git graph, right-side panel, remote mobile UI, pet, live token stats, and a skin center.
omdsh-dev/DSH-better-sidebar★ 3318
Full sidebar workbench with file rendering and editing, terminal, Git, and subagents; third-party plugins can register new tabs.
ccch1mneyyy/dsh-TUI★ 2823
Claude Code-style full-screen terminal UI: pixel-whale header, live status line, and streaming thought expansion.
MeteorNOX/DeepSeek-Balance-Whale-Widget★ 1695
A fixed-corner whale widget showing DeepSeek balance, today usage, per-turn cost and random talk lines, with sound effects and a menu.
Devin-AXIS/deepseek-design#deepseek-idesign★ 720
Visual design studio for websites, app prototypes, posters, cards, reports, and magazines, with templates, direct element editing, selection-aware AI draft handoff, and export.
Community comments
Comments are public GitHub Discussions. Loading them connects to GitHub and Giscus; a GitHub account is required to post.