@lucagiftzek/dsh-artifacts

uinpmMIT

An Artifacts tab in the DSH sidebar that lists the files an agent produced and previews them in place with live reload, plus artifact template tools for agents.

下载量 / Downloads
455

Install

dsh plugin --profile web add @lucagiftzek/dsh-artifacts

Sandbox test

This plugin has not been tested yet. Submit a test →

README

dsh-artifacts 2

![npm](https://www.npmjs.com/package/@lucagiftzek/dsh-artifacts)

An Artifacts tab that previews every file your agents make, with live reload, version history and templates.

Install from npm: dsh plugin --profile web add @lucagiftzek/dsh-artifacts, or from GitHub: dsh plugin --profile web add github:lucagiftzek/dsh-artifacts.

dsh plugin --profile web add dsh-better-sidebar   # the tab host, skip if installed
dsh plugin --profile web add @lucagiftzek/dsh-artifacts
# or from GitHub: dsh plugin --profile web add github:lucagiftzek/dsh-artifacts
# restart dsh web; the /report/ server module goes into your reverse proxy (see Install / operate)

<sub>Screenshot from a demo DSH instance with sample data.</sub>

Artifacts for the DeepSeek Harness web GUI: a sidebar tab, a server, a bridge and

a CLI that together turn ~/reports/ into a Claude/ChatGPT/Gemini-class artifact

system, with lower long-term token use, real web apps, two-way interaction with

the chat, version history, and image / speech / video generation.

agent ──write/edit .md, .html, app/──▶ ~/reports/ ──▶ artifact server (in your DSH reverse proxy)

▲ │ md→html, apps, media, _lib, bridge, API

│ artifact inbox / state ▼

└──── chat ◀── dsh.send / forms / pick-and-ask ── Artifacts sidebar tab (iframe)

What is in the box

Part · Path · Role

Sidebar tab · src/client.jsx → lib/client.js · list (This chat / All, search, kinds, Hidden) with thumbnails and a download icon per row, detail with Preview / Source / Changes, the media and file viewer page, downloads, version arrows + restore, pick-and-ask, "Fix with agent", public toggle, de-list, trash, inbox banner; chat links to ~/reports/* open here rendered

Server module · server/artifacts_server.py, files.py, viewer.py · imported by your DSH reverse proxy; owns /report/ and /report-public/: rendering, the enclosure page for media and files, downloads, Range, thumbnails, listing state

Indexer · server/indexer.py · niced child process: incremental transcript attribution + version snapshots

Bridge · server/bridge.js · injected into every served HTML page: window.dsh, Claude/OpenAI aliases, live reload

Media + AI · server/media.py · Mistral (Vibe subscription) chat + FLUX images, Voxtral TTS/STT, DashScope, local ComfyUI, Gemini video (opt-in)

Kit · contrib/artifact-kit · Markdown → themed HTML (kpi, charts, callouts, timeline, progress, columns, details, mermaid, math, actions, forms, media, figures, pull quotes, lead, footnotes; templates report, dashboard, plan, comparison, brief, article)

CLI · contrib/artifact · the agent interface: new, list, add, remove, relist, retitle, show, versions, diff, restore, inbox, state, state-set, public, media, libs, motion, export

Motion · contrib/motion.py + motion/ (npm: hyperframes) · animated explainers as code: artifact new X --type motion scaffolds X.html (player: scrubber, scene chips, timed change requests, export buttons, latest render) + X.motion/index.html (HyperFrames composition, one paused GSAP timeline); artifact motion check/snapshot/voice/export; renders locally or on a remote host over ssh+rsync (DSH_MOTION_REMOTE_HOSTS)

Templates · src/engine/*.ts → lib/engine/ + templates/ (scripts/sync-templates.sh) · reusable layouts, see [Templates](#templates): agent tools artifact_templates, artifact_template_info, artifact_from_template, artifact_template_save and the same in the CLI (JSON Schema validation, assets copied, lossless JSON output)

Agent tools + skill · lib/index.js → lib/tools.js, lib/listing.js (src/*.ts) · registered by the node half at start with guarded dynamic imports: the four template tools and artifact_list, artifact_add, artifact_remove, artifact_update; the packaged skill publish-artifact is registered with the host skill registry

Library shelf · vendor/ (scripts/vendor.sh) · React, ReactDOM, Babel, Recharts, Tailwind, preact-htm, Chart.js, d3, three, mermaid, KaTeX, lucide, marked, PapaParse, Leaflet, GSAP (+ plugins under gsap/), HyperFrames player/runtime at /report/_lib/

Skill · skills/publish-artifact/SKILL.md · how agents should use all of the above (registered automatically; a copy in ~/.dsh/skills wins)

Why v2 (what was broken in v1)

1. "This chat" was usually empty. Attribution rescanned a chat's transcripts on

every index request, keyed on the global file list (any new file anywhere forced

a 10-100 s rescan; the client waited 2 s), and it ignored tool/ptc-dispatch-start

rows whose arguments are objects, that is every write made from inside run_code.

v2 tails each zstd transcript frame by frame from a stored cursor (full backfill

of 892 MB: 75 s once; steady state: milliseconds) and also records explicit

claims from the CLI ($DSH_SESSION_ID). Index requests are ~30 ms with ETag/304.

2. The .md opened instead of the page. .md requested by a browser now renders

(?raw=1 or curl gets the source), md+html pairs are one artifact, /report/x.html

is rendered on the fly from x.md, and chat links to ~/reports/* open the

rendered artifact in the tab.

3. Kit pages did not adapt to text length. Long words, KPI values, table cells,

headings and TOC entries now wrap; widths adapt to the content (wide tables get a

wide page); chart label space is measured, long x labels rotate, labels with

commas parse, ticks are round numbers.

Token economics

  • Templates before everything: a known kind of deliverable is a JSON data file (a few

KB) filled into a finished layout, instead of a page written from scratch.

  • Markdown first (35-40 % fewer output tokens than hand-written HTML on a typical

report, far more with

…(truncated)

Rendered from the README published on npm. Formatted only, not edited.

Versions

Published on npm::3,最后更新 2026-11-02

Links

GitHub · Homepage · npm

Same category