Asaiuta/dsh-genui-enhanced

---

dsh-genui turns DeepSeek Harness (DSH) assistant replies into safe, fully interactive UI surfaces.

Ask “How are this month’s orders doing?”, and instead of plain text or raw code blocks, the response streams out an interactive sortable data table, audio/video players, draggable function plots, self-grading quizzes, or a persistent workspace dock — all embedded seamlessly within the conversation.

[!IMPORTANT] This repository is a fork of @changfenhuang/dsh-genui 0.14.0 (package name kept for drop-in compatibility), versioned 0.14.0-fork.3. Delta over upstream: the diagram engine is pele instead of mermaid (1.02 MB, −70% asset weight, live CSS-variable theming, mindmap/timeline whitelisted), plus capability additions — chart kind:"area", native date / datetime-local / time / number inputs with min/max/step, automatic table pagination (pageSize, row cap raised to 200), and upstream's Computed fields (input-driven local recalculation, ported from the 0.15.0 fix line). See FORK.md and the CHANGELOG for the full record. This fork is not published to npm — the Quick Start below separates the upstream npm install from building this fork from source.

---

🎬 Real Interface Showcase

[!NOTE] Real Interface Captures: All recordings and screenshots below are captured directly from real DSH interface rendering — no conceptual mockups or faked pre-renders. Demo media is inherited from the upstream repository: this fork carries the entire component surface shown here, with only the diagram engine swapped (pele instead of mermaid).

40-Second Walkthrough

Three Concrete Real Outputs

1. Monitoring Panel: Answer is the Dashboard	2. Function Plot: Drag to Redraw Instantly	3. Composable Hierarchy: Work Surface
Data Insights: Eyebrow stats, filterable/drill-down service table, grouped totals, and spark/ring cells directly live in the assistant reply.	Zero-Latency Exploration: plot draws mathematical curves; drag parameter sliders to re-calculate and redraw locally in real time.	Structured Hierarchy: Display quotes, stat cards, ring progress, and labeled chapter dividers composed declaratively by the model.

---

✨ Before vs. After

Scenario	Plain Text Response	With dsh-genui
Business Overview	“Revenue this month is ¥128,430 (+12.4% MoM); conversion rate is slightly dipping…”	One line of concise prose + 3 stat cards (revenue/orders/conversion), a trend chart, and a progress bar rendered right beside it.
Data Exploration	Type another prompt to ask the model to re-sort or filter.	Click table headers to sort numbers locally, or use the search box to filter rows in real time.
Parameter Tuning	Re-prompt the model and wait for another full generation.	Drag sliders to see curves update in sub-millisecond speed with animation preview.
Next Actions	Copy text and manually perform follow-up tasks elsewhere.	Click interactive action buttons (e.g. “Refresh”, “Switch View”) to trigger bidirectional model event loops.

---

🚀 Quick Start

1. Prerequisites

Ensure your environment meets the following requirements:

• DSH Version: ^0.2.0-rc.1 || ^0.2.1-rc.1 (verified against dsh-v0.2.0-rc.1 and dsh-v0.2.1-rc.2)
• pnpm on PATH: The dsh plugin CLI requires pnpm. If missing: run corepack enable or npm i -g pnpm, then open a new terminal and confirm pnpm -v prints a version number.

2. Install & Activate

Pick one path depending on what you want:

Option A — Upstream package from npm (the stable marketplace version, without this fork's deltas — pele engine, area charts, table pagination, Computed fields, etc.):

# Public npm package (works without an npm account)
dsh plugin --profile web add @changfenhuang/dsh-genui

[!TIP] Adding only as a Node package? Run npm install @changfenhuang/dsh-genui. Note that npm install only adds the dependency and does not register the plugin with DSH; use the dsh plugin add command above for DSH integration.

Option B — This fork, built from source (this repository; not on npm — lib/ is not committed, so building is mandatory; details in FORK.md):

git clone https://github.com/Asaiuta/dsh-genui-enhanced.git
cd dsh-genui-enhanced
pnpm install                                # approve esbuild's build script when prompted

# Build gate (see FORK.md for pnpm 11 caveats)
./node_modules/.bin/tsc -p tsconfig.json    # type check — zero errors required
./node_modules/.bin/tsdown                  # emit lib/ (client.js, index.js, assets/*)

dsh plugin --profile web add link:$PWD

3. Verify in 60 Seconds

1. Restart the DSH web service and hard refresh your browser (Cmd + Shift + R or Ctrl + F5).
2. In a new conversation session, send:

   Use dsh-ui to draw a stats dashboard with a sortable service table.
   

3. Expected result: The reply renders an in-place interactive dashboard rather than a plain code block.
4. Console activation check: Open your browser Developer Tools Console and look for [genui] client active; fence-channel=dom.

---

[!WARNING]

⚠️ Installation Pitfalls to Avoid

1. Watch the Package Scope (Crucial): The package must be @changfenhuang/dsh-genui. npm hosts an unrelated, unscoped package named dsh-genui (a Vue/OpenTiny implementation by another maintainer); installing it will fail due to incompatible host peer dependencies.
2. Do Not Use link: on a Directory That Has Not Been Built: link: alone does not bundle or resolve peer assets (diagram engine, three.js, React). Run pnpm install plus the build gate first so lib/ exists, then link: works — that is exactly Option B above. Use npm (Option A) for the standard marketplace install.
3. Migrating from Legacy @omdsh-dev: If you installed from GitHub or the old org name before v0.9.2, clean up the stale key:

   dsh plugin --profile web remove @omdsh-dev/dsh-genui
   dsh plugin --profile web add @changfenhuang/dsh-genui
   

---

🧩 Capability Matrix

Every component and behavior is guarded by the strict dsh-ui specification. See SKILL.md for full JSON schema details.

dsh-genui Capabilities
├── 🌊 1. Streaming & Realtime Mounting
├── 🎨 2. 30+ Component Ecosystem
├── ⚡ 3. Local-First Responsiveness
├── 🔄 4. Bidirectional Action Event Loop
├── 📌 5. Persistent Session Workspace & Templates
└── 🛡️ 6. Sandboxing, Guards & Self-Healing

1. 🌊 Streaming & Realtime Mounting

• Answer-as-UI: Components stream into the conversation as tokens arrive, mounting incrementally without waiting for the full reply to finish.
• Graceful Fallback: If the plugin is absent or disabled, fences degrade cleanly to standard Markdown code blocks without breaking the chat history.

2. 🎨 30+ Component Ecosystem

• Display & Typography: Hero banner, Stat cards (stat with eyebrow labels, deltas, and sparklines), Tables, Timelines, Code Diffs, Step progress, File trees (interactive expand/collapse), Callouts, and Badges.
• Advanced Tables:
  • Click headers to sort locally (ascending / descending / reset) with smart parsing for numbers, currency, commas, percentages, and k/m/b units;
  • Columns support inline progress bars (bar), rings (ring), sparklines (spark), and badges;
  • One-click data export (Copy Markdown / CSV) and instant client-side text filtering (filter);
  • Automatic pagination (fork.2): tables beyond 15 rows paginate locally with a quiet pager; pageSize overrides the page size, while totals and export always cover the full data set.
• ECharts Integration (echart):
  • Preset Mode: Shorthand presets (bar, line, area, pie, scatter, radar, gauge, funnel, treemap, sankey, graph, heatmap, bigline, wordCloud) that adapt automatically to host light/dark themes;
  • Full Option Mode: Full native ECharts options for advanced features like DataZoom and VisualMap;
  • On-Demand Lazy Loading: The ~1 MB ECharts engine is loaded asynchronously only when an echart block is encountered.
• Mathematical Function Plots (plot):
  • Multi-series plotting with expressions (trig, log, exp, power);
  • Live Parameter Sliders: Drag sliders to redraw curves instantly at 60 FPS; supports auto-animation loops.
• Mermaid & 3D Visuals: Flowcharts, sequence diagrams, gantt, ER, git graphs, mindmaps, and timelines (12 whitelisted kinds) through the pele engine (fork: −70% asset weight vs mermaid, themes re-flow live on host theme switches), plus lightweight 3D models with on-demand asset loading.
• Native Media: Inline playback for accessible audio and video URLs, with poster images, aspect ratios, and controls.
• KaTeX Math Rendering: Inline math ($...$) and display blocks ($$...$$), supporting matrices and multi-line equations.

3. ⚡ Local-First Responsiveness

• Zero-Latency Interactions: State transitions that the frontend can handle alone (sorting, filtering, accordion toggling, slider redraws, tab switches) execute entirely client-side without round-trips to the model.
• Quizzes & Submission (quiz / submit):
  • Single quizzes evaluate instantly with explanations and retry options;
  • Multi-question assessments support batch grading and progress tracking with the groups schema.
• Durable Persistence: User inputs, form fields, and quiz states persist across page reloads via session fingerprints (LRU cache of 200 blocks).

4. 🔄 Bidirectional Action Event Loop

• Closed-Loop Interactions: Interactive elements equipped with an action payload package user events back to the model to trigger follow-up reasoning.
• Honest UI Guarantee: Buttons without an action render disabled to eliminate "dead clicks"; active buttons show immediate visual feedback upon trigger.
• Debounced Delivery: Discrete taps send immediately; continuous slider drags apply trailing-edge debounce to prevent message flooding.

5. 📌 Persistent Session Workspace & Templates

• Session Dock Panel: Open a persistent dock above the composer via /panel or panel: true; resize by dragging its border; append tabs incrementally with append: true.
• Template Center & Badges:
  • Templates: Browse 11 pre-built scenario templates directly from the dock to kickstart prompts;
  • Achievements: Unlock 12 built-in local exploration badges as you interact with various components.

6. 🛡️ Sandboxing, Guards & Self-Healing

• Security by Design: Strictly whitelisted JSON components; zero script injection or eval; strict prohibition of passwords or secret collection.
• Same-Turn Fence Steering: If a generated fence fails validation, diagnostic errors are fed back to the model within the same turn so it can self-correct (can be disabled via fenceFeedback: false).
• Resilient Fallbacks: Malformed nodes are safely discarded while siblings render normally (single node errors never crash the fence); Mermaid syntax glitches are automatically repaired.

---

💻 Quick Examples

Example 1: Executive KPI Dashboard

The model emits the following dsh-ui code block:

{
  "title": "Q3 2026 Executive Overview",
  "items": [
    {
      "type": "row",
      "items": [
        { "type": "stat", "label": "Total Revenue", "value": "¥128,430", "delta": "+12.4%", "spark": [40, 55, 60, 85, 120] },
        { "type": "stat", "label": "Completed Orders", "value": "1,024", "delta": "-3.1%", "spark": [90, 85, 80, 75, 70] },
        { "type": "progress", "label": "Quarterly Target", "value": 82, "variant": "ring" }
      ]
    }
  ]
}

Example 2: ECharts Revenue Trend

{
  "title": "Revenue Breakdown",
  "items": [
    {
      "type": "echart",
      "title": "Monthly Performance",
      "preset": "bar",
      "data": [
        { "label": "Jan", "value": 98 },
        { "label": "Feb", "value": 112 },
        { "label": "Mar", "value": 128 },
        { "label": "Apr", "value": 145 },
        { "label": "May", "value": 160 }
      ]
    }
  ]
}

For the comprehensive specification and full component catalog, refer to SKILL.md.

---

⚙️ Architecture & How It Works

sequenceDiagram
    autonumber
    actor User as User
    participant Host as DSH Host / LLM
    participant DOM as Conversation DOM
    participant GenUI as GenUI Client Renderer
    participant Assets as On-Demand Assets (ECharts/Three)

    User->>Host: Prompt (e.g. "Analyze recent order trends")
    Host-->>DOM: Streams Markdown prose & ```dsh-ui fence
    DOM->>GenUI: Detects fence and normalizes schema against whitelist
    alt Requires Heavy Engines
        GenUI->>Assets: Dynamically fetches engine bundles
        Assets-->>GenUI: Assets loaded
    end
    GenUI->>DOM: Mounts React component tree incrementally
    opt Client-Side Local Actions
        User->>GenUI: Sort table / Drag plot slider / Answer quiz
        GenUI-->>User: Instant sub-millisecond local update
    end
    opt Model Action Feedback
        User->>GenUI: Click interactive action button
        GenUI->>Host: Dispatches structured action payload
        Host-->>DOM: Model responds with next-step reasoning / updates panel
    end

Artifact Exporting

Completed GenUI blocks can be exported on demand:

• Standalone .html: Inlines the lightweight renderer, CSS styles, KaTeX fonts, and required chart engines so the interactive UI can be viewed and tested offline in any browser.
• .genui.json: Retains the normalized specification and durable interaction states for storage and portability.

---

🧑‍💻 Developer Guide

Local Development (Link Mode)

git clone https://github.com/Asaiuta/dsh-genui-enhanced.git
cd dsh-genui-enhanced
pnpm install                                # approve esbuild's build script when prompted

# Build and link into your DSH web profile
dsh plugin --profile web add link:$PWD

Useful Commands

pnpm install                                # devDeps; approve esbuild's build script
./node_modules/.bin/tsc -p tsconfig.json    # type gate — zero errors required
./node_modules/.bin/tsdown                  # emit lib/ (client.js, index.js, assets/*)
./node_modules/.bin/vitest run              # unit tests

The upstream npm-script entry points (pnpm run build / check, the scripts/*.mjs helpers and the E2E harness) are not part of this fork's npm-tarball snapshot. The three commands above are the fork's build gates; see FORK.md for pnpm 11 caveats (invoke the binaries directly rather than via pnpm exec/pnpm run).

Advanced Profile Configurations

To customize plugin behaviors, add configurations under cordis.patch.yml in your profile:

- id: genui
  name: '@changfenhuang/dsh-genui'
  config:
    renderUiTool: false   # Disable registering the render_ui tool card (fences and panel remain active)
    fenceFeedback: false  # Disable automatic same-turn steer correction on malformed fences

Embedding into Other Applications

You can import GenuiBlock, GenuiActionContext, and processGenuiSpec from @changfenhuang/dsh-genui/embed to embed the renderer into any React application supporting CSS Modules.

---

❓ FAQ & Troubleshooting

Q: Why are dsh-ui fences still showing up as raw code blocks?

1. Open your browser Developer Tools (F12) and inspect the Console.
2. Search for the log [genui] client active; fence-channel=dom:
   • If missing: The client bundle was not activated by the host. Verify that dsh plugin list shows the plugin as active, restart DSH web, and hard refresh your browser;
   • If present: Check whether the code block language identifier is strictly dsh-ui and that its body contains valid JSON.

Q: Error: "pnpm not found on PATH"?

DSH plugin management calls pnpm under the hood. Run corepack enable or npm i -g pnpm, then open a new terminal window before running dsh plugin add.

Q: npm install returns 404?

The package is public and requires no login. Verify the package name via npm view @changfenhuang/dsh-genui version. If a version was published very recently, allow a few moments for registry mirrors to synchronize.

Q: 3D scene, Mermaid, or ECharts does not render?

Heavier engines are lazy-loaded through plugin-provided static routes upon their first appearance. Hard refresh your browser (Cmd + Shift + R). If the issue persists, reinstall the package:

dsh plugin --profile web remove @changfenhuang/dsh-genui
dsh plugin --profile web add @changfenhuang/dsh-genui

(Note: these npm commands reinstall the upstream package. To refresh an install of this fork, rebuild from source and re-link instead — see Quick Start Option B.)

Q: The chat screen goes blank when rendering a fence?

This version strictly requires DSH ^0.2.0-rc.1 || ^0.2.1-rc.1. Older host versions lack necessary React slot/context capabilities; please upgrade DSH.

---

🗺️ Roadmap Evaluation (Inherited from Upstream)

Exploration Area	Decision	Rationale
Incremental Diff Patching	Declined	A fence costs only 200–800 tokens; resending is fast and safe. Teaching models a patch diff protocol introduces high friction and hallucination rates.
Granular Action Delivery	✅ Done	Discrete gestures send immediately; continuous slider drags apply trailing-edge debounce to keep chat context clean.
Cross-Session Replay Persistence	Declined	Resetting on replay is the more natural expectation when the model updates the UI; state is preserved seamlessly during streaming.
Separate Gallery / i18n Strings	Declined	The component gallery is covered by demo-prompts, gallery.ts, and README screenshots; the core bundle carries only 6 built-in UI strings.

---

🔗 Links & Community

• Upstream project: omdsh-dev/dsh-genui — component gallery, demos and release notes live there.
• Linux.do Community Discussion
• Visit the Live Product Site to explore more demos.

---

📄 License

This project is licensed under the MIT License, as is the upstream project. Third-party notices: THIRD_PARTY_NOTICES.md.