# dsh-theme-cyberpunk

A cyberpunk theme plugin for the DeepSeek Harness (`dsh`) web UI: flowing RGB neon, a dark neon-city backdrop, a customizable background gallery, and a draggable, collapsible HUD (one-click theme toggle + a local music player with a persistent playlist and playback state).

[English](README.en.md) · [简体中文](README.md) · [日本語](README.ja.md)

> For background on the DSH plugin system, see [About DSH plugins](#about-dsh-plugins) at the bottom.

---

## Requirements

- [Node.js](https://nodejs.org/) 22+ (required by `dsh` itself)
- [pnpm](https://pnpm.io/installation) (`dsh plugin` manages plugins through pnpm)
- An installed and initialized DeepSeek Harness (`dsh web` must run)

Verify:

```sh
node -v     # v22.x
pnpm -v
dsh --help
```

---

## Installation

### Method 1: `dsh plugin add` (recommended, auto-activates)

From inside the plugin directory, run `.` (`dsh plugin` anchors `.` to the current directory and forwards it to pnpm):

```sh
dsh plugin --profile web add .
```

Then restart the web profile:

```sh
dsh web
```

Refresh the browser and you're done.

> How it works: `dsh plugin add` = running `pnpm add` inside the profile directory, then `dsh` auto-registers packages that declare `dsh.bundle` into `dsh.profile.bundles`, which activates them automatically — this plugin declares `dsh.bundle`, so no manual config is needed.

### Method 2: Install from the GitHub repo

```sh
dsh plugin --profile web add "github:dlpufan/dsh-theme-cyberpunk"
```

> Alternatively, clone this repo and run `dsh plugin --profile web add .` from the repo root.

### Manual activation (fallback)

If `dsh plugin add` didn't auto-activate (e.g. you installed manually with pnpm), add the matching `insert` lines to `$DSH_HOME/profiles/web/cordis.patch.yml`:

```yaml
- insert:
    - id: theme-cyberpunk
      name: dsh-theme-cyberpunk
```

> Note: the top level of `cordis.patch.yml` must be a YAML array; an empty file or a comment-only file errors out — write `[]` to disable everything.

---

## Features

- **RGB atmosphere**: rotating RGB color wheel + neon blobs + fine CRT scanlines + vignette.
- **Background gallery**: a built-in dark neon-city image; add local images and your selection is remembered — new images enter the gallery for switching/deleting anytime.
- **One-click theme toggle**: a `cyberpunk / default` button switches between the cyberpunk and default UI; the preference is persisted.
- **Local music player**: add local audio into a playlist; play/pause, previous/next, shuffle, repeat (off / all / one), seek and volume. **Playlist + playback state (track, progress, volume, shuffle, repeat) are all persisted** — it resumes position after refresh but does not autoplay.

---

## Usage

After refresh, a capsule HUD appears in the top-right corner:

- `⋮` grip: drag the HUD (position is remembered).
- `cyberpunk / default`: toggle the look; the lit dot means cyberpunk is on.
- music note icon: open/collapse the music player.
- image icon: open/collapse the background gallery.
- `»`: collapse the HUD to a single music button; click to expand again.

Music player panel:

| Action | Description |
|---|---|
| `+ add local audio` | Open the file picker; multi-select supported (mp3 / flac / wav, etc.) |
| Click a track in the playlist | Play that track immediately |
| `×` (right of a track) | Remove from playlist (also deleted from IndexedDB) |
| cross arrows | Toggle shuffle (lit = on) |
| previous / next | Switch tracks |
| center round button | Play / pause (gradient neon background) |
| repeat arrow | Repeat mode: off → all → one (lit = on) |
| seek bar / volume bar | Drag to seek / adjust volume |

Background gallery panel:

| Action | Description |
|---|---|
| `default background` | Switch back to the built-in neon-city image |
| click a thumbnail | Switch to that background (selected shows a cyan outline) |
| `×` (top-right of a thumbnail) | Delete from gallery (deleting the current one auto-switches to default) |
| `+ add background` | Choose local images (multi-select; added to the gallery and the last one is applied immediately) |

---

## Customization

All colors and effects live in [`lib/client.js`](./lib/client.js):

- `DARK` / `LIGHT` — `--dsw-*` token override values.
- `--cbx-neon-*` in `css` — the neon primary colors.
- `body[data-cbx-on][data-ds-dark-theme]` — the background image and mask.
- `DARK["--dsw-alias-bg-base"]` alpha — how much the background image shows through.

Common tweaks:

| Want to change | Where |
|---|---|
| main neon color | `--cbx-neon-cyan` + `DARK["--dsw-alias-brand-primary"]` |
| RGB atmosphere intensity | `body[data-cbx-on]::before { opacity }` (default 0.18) |
| color wheel speed | `@keyframes cbx-spin`'s `16s` |
| background transparency | `DARK["--dsw-alias-bg-base"]` alpha |
| swap background image | replace the base64 `data:image/jpeg;base64,...` in `client.js` |
| disable scanlines | delete the whole `body[data-cbx-on]::after` block |
| disable animations | automatically disabled when the OS "reduce motion" is on |

---

## Directory structure

```
.
├── package.json           # dsh.bundle (auto-activate) + dsh.client (browser half)
├── cordis.patch.yml       # self-inserting patch
├── lib/
│   ├── index.js           # node half (empty apply)
│   └── client.js          # browser half: tokens + RGB effects + background + HUD
├── README.md              # this file (简体中文)
├── README.en.md           # English
├── README.ja.md           # 日本語
├── LICENSE                # MIT
└── .gitignore
```

---

## Uninstall

```sh
dsh plugin --profile web remove dsh-theme-cyberpunk
```

Or remove the matching `insert` lines from `cordis.patch.yml`, then restart.

---

## About DSH plugins

DeepSeek Harness assembles itself with the **Cordis** plugin framework. A profile (such as `web`) is built from "bundle layers + user patch layers":

- **bundle**: a package declaring `dsh.bundle.patch`; its `cordis.patch.yml` is applied as a patch layer that `insert`s plugin entries into the composition.
- **client plugin**: a package declaring `dsh.client`; its `exports["./client"]` is the browser half (`window.__ModuleLoader__.load`), scanned and injected into the page by `dsh-client-modules`.
- **host plugin**: the `main` entry is the Node half.

This plugin is a "self-inserting bundle": after `dsh plugin add .`, it activates automatically — no manual config needed.

---

## License

[MIT](./LICENSE)