DSH Knowledge Cards

中文文档

Turn any conversation in your DeepSeek Harness Web GUI into clean, textured knowledge cards — concepts, flowcharts, comparisons, summaries and mind maps — generated by the agent, previewed in a tabbed gallery, and downloadable in multiple formats.

Features

• 🎴 One-click generation — a header button on every conversation opens the card dialog
• 🧠 Five card types — concept, flowchart (Mermaid), comparison, summary, mind map (Mermaid)
• 🗂 Tabbed gallery — cards grouped by type, each tab scrolls independently
• ⬇ Multi-format download — Markdown / HTML / JSON / TXT for every card, plus SVG for Mermaid diagrams; per-card format selection and batch "download all"
• 🔄 Background generation — close the dialog and generation continues; a badge and browser notification tell you when cards are ready
• 🌗 Dark mode — follows prefers-color-scheme
• 🌍 i18n — Simplified Chinese and English

Installation

From npm:

dsh plugin --profile web add @wangxueqi/dsh-client-ui-knowledge-cards

Or from GitHub (main branch):

dsh plugin --profile web add github:wangxueqi00/dsh-client-ui-knowledge-cards

Or pinned to a tag:

dsh plugin --profile web add github:wangxueqi00/dsh-client-ui-knowledge-cards#v0.1.0

Then restart:

dsh --profile web

The package declares dsh.bundle, so dsh plugin add activates it as a profile layer automatically — no manual config edits. Build artifacts (lib/) are committed to the repository, so GitHub installs need no build step.

Usage

1. Open any conversation and click the 🎴 知识卡片 / Cards button in the session header.
2. Select the conversation turns and card types you want, then click 生成卡片 / Generate.
3. The agent analyzes the selected turns and emits structured card data.
4. Preview the cards in the tabbed gallery (grouped by type), switch formats per card, and download individually or in batch.
5. You may close the dialog while generating — a badge on the button shows the card count when ready, and a browser notification fires on completion.

Card types

Type	Icon	Content	Best for
Concept	💡	Markdown headings + bullet lists	Definitions and explanations
Flowchart	🔀	Mermaid graph	Processes and decision flows
Comparison	⚖️	Markdown table	Side-by-side trade-offs
Summary	📋	Bullet list	Key takeaways
Mind map	🧠	Mermaid mindmap	Hierarchical concept maps

Download formats

Format	Concept / Comparison / Summary	Flowchart / Mind map
Markdown (.md)	✅	✅
HTML (standalone .html)	✅	✅ (Mermaid via CDN)
JSON (.json)	✅	✅
Plain text (.txt)	✅	✅
SVG (.svg)	—	✅

How it works

The plugin is a single-file browser bundle plus a small host layer:

• Host layer adds system-prompt guidance teaching the agent to emit ```card JSON blocks followed by a <!-- knowledge-cards-generated --> completion marker.
• Client layer registers a button into the conversation.session.header.actions slot. The button stays mounted and watches the conversation in the background; when the agent finishes, it parses the card blocks into a module-level store, so closing the dialog never loses state.
• Rendering uses Mermaid (inlined into the bundle) for diagrams and Markdown for the rest, with a low-saturation theme per card type.

Development

This repository is developed inside a DeepSeek Harness monorepo checkout: the build preset, tsconfig references, and platform module table live there. One physical tree, two views - clone it into the monorepo, or junction your clone onto it:

# inside your DSH checkout: this repo's clone IS the physical tree
git clone https://github.com/wangxueqi00/dsh-client-ui-knowledge-cards.git `
  packages/client/ui-knowledge-cards

# optional: keep a convenient view elsewhere
New-Item -ItemType Junction -Path <your-path> -Target <dsh-checkout>\packages\client\ui-knowledge-cards

# then at the monorepo root
pnpm install

Build (from either path - the script resolves the junction):

./scripts/build.ps1         # tsc -b + bundle
./scripts/build.ps1 -Watch  # tsc -b + watch
pnpm run bundle             # bundle alone also works from the repo path

The same package.json serves development and release alike: real version ranges (^0.1.1-rc.2) link to the workspace packages inside the monorepo (linkWorkspacePackages) and install cleanly from npm/git - no transformation between dev and release forms.

Repository layout

src/
├── index.ts               # host layer: system-prompt guidance
├── invariant.ts           # invariant companion
└── client/
    ├── index.ts           # plugin entry: apply(), slot registration
    ├── card-store.ts      # module-level card store (persists across dialog open/close)
    ├── card-generator.ts  # card types, themes, prompt builders
    ├── card-parser.ts     # parses ```card blocks from agent output
    ├── card-data-collector.ts
    ├── download.ts        # MD / HTML / JSON / TXT / SVG export
    ├── mermaid-renderer.ts
    ├── locales.ts         # zh / en dictionaries
    └── components/        # CardButton, CardDialog, CardGallery, CardView, MermaidDiagram

Publishing

The repo itself is the release vehicle - source, committed lib/ artifacts, and a release-ready package.json all in one place:

./scripts/build.ps1                     # 1. build (lib/ lands in the repo)
# 2. bump "version" in package.json
git add .
git commit -m "release: v0.x.y"
git tag v0.x.y
git push origin main --tags             # 3. GitHub release
pnpm publish --no-git-checks            # 4. npm release

lib/ must stay committed (check .gitignore): the artifacts are what makes dsh plugin add github:... work without a build step.

License

MIT