# dsh-theme-cyberpunk

DeepSeek Harness（`dsh`）Web UI 向けのサイバーパンクテーマプラグイン：流れるRGBネオン、ダークなネオンシティ背景、カスタマイズ可能な背景ギャラリー、そして右上のドラッグ・折りたたみ可能なHUD（ワンクリックのテーマ切替＋ローカル音楽プレイヤー、プレイリストと再生状態を永続化）。

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

> DSHプラグインシステムの背景については、末尾の [DSHプラグインについて](#dshプラグインについて) を参照してください。

---

## 動作環境

- [Node.js](https://nodejs.org/) 22+（`dsh`自体の要件）
- [pnpm](https://pnpm.io/installation)（`dsh plugin`はpnpm経由でプラグインを管理）
- DeepSeek Harnessがインストール・初期化済み（`dsh web`が起動できること）

確認：

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

---

## インストール

### 方法1：`dsh plugin add`（推奨・自動有効化）

プラグインディレクトリ内で `.` を実行します（`dsh plugin`は`.`をカレントディレクトリに固定してpnpmへ転送します）：

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

Webプロファイルを再起動：

```sh
dsh web
```

ブラウザをリロードすれば完了です。

> 仕組み：`dsh plugin add`＝プロファイルディレクトリ内で`pnpm add`を実行し、`dsh.bundle`を宣言しているパッケージを`dsh.profile.bundles`へ自動登録して有効化します。本プラグインは`dsh.bundle`を宣言しているため、手動設定は不要です。

### 方法2：GitHubリポジトリからインストール

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

> あるいは本リポジトリをcloneし、リポジトリルートで `dsh plugin --profile web add .` を実行してください。

### 手動で有効化（補助）

`dsh plugin add`で自動有効化されなかった場合（pnpmで手動インストールした場合など）、`$DSH_HOME/profiles/web/cordis.patch.yml`に対応する`insert`行を追加します：

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

> 注意：`cordis.patch.yml`の最上位はYAML配列である必要があります。空ファイルやコメントのみのファイルはエラーになるため、すべて無効化する場合は`[]`と書きます。

---

## 機能

- **RGB演出**：回転するRGBカラーホイール＋ネオンブロブ＋細かいCRTスキャンライン＋ビネット。
- **背景ギャラリー**：ダークなネオンシティ画像を内蔵。ローカル画像を追加でき、選択は記憶されます。追加画像はギャラリーに入り、いつでも切替・削除できます。
- **ワンクリックテーマ切替**：`サイバー / デフォルト`ボタンでサイバーパンクとデフォルトUIを切替、設定は永続化。
- **ローカル音楽プレイヤー**：ローカル音声をプレイリストに追加。再生/一時停止、前へ/次へ、シャッフル、リピート（オフ/全曲/1曲）、シーク、音量に対応。**プレイリストと再生状態（曲・進捗・音量・シャッフル・リピート）はすべて永続化**され、リロード後は位置を復元します（自動再生はしません）。

---

## 使い方

リロード後、右上にカプセル型HUDが表示されます：

- `⋮` グリップ：HUDをドラッグ（位置を記憶）。
- `サイバー / デフォルト`：外観を切替。ドット点灯＝サイバーパンク有効。
- 音符アイコン：音楽プレイヤーを開閉。
- 画像アイコン：背景ギャラリーを開閉。
- `»`：音符ボタン1つに折りたたみ、クリックで再展開。

音楽プレイヤーパネル：

| 操作 | 説明 |
|---|---|
| `+ ローカル音声を追加` | ファイル選択（複数可：mp3 / flac / wav など） |
| プレイリストの曲をクリック | その曲を即再生 |
| `×`（曲の右） | プレイリストから削除（IndexedDBからも削除） |
| 交差矢印 | シャッフル切替（点灯＝有効） |
| 前へ / 次へ | 曲の切替 |
| 中央の丸ボタン | 再生 / 一時停止（グラデーションネオン） |
| リピート矢印 | リピートモード：オフ → 全曲 → 1曲（点灯＝有効） |
| シークバー / 音量バー | ドラッグでシーク / 音量調整 |

背景ギャラリーパネル：

| 操作 | 説明 |
|---|---|
| `デフォルト背景` | 内蔵ネオンシティ画像へ戻す |
| サムネイルをクリック | その背景へ切替（選択中はシアンの枠） |
| `×`（サムネイル右上） | ギャラリーから削除（現在の背景を削除すると自動でデフォルトへ） |
| `+ 背景を追加` | ローカル画像を選択（複数可、ギャラリーに追加し最後の1枚を即適用） |

---

## カスタマイズ

色とエフェクトはすべて [`lib/client.js`](./lib/client.js) にあります：

- `DARK` / `LIGHT` — `--dsw-*`トークン上書き値。
- `css`内の`--cbx-neon-*` — ネオン原色。
- `body[data-cbx-on][data-ds-dark-theme]` — 背景画像とマスク。
- `DARK["--dsw-alias-bg-base"]` のalpha — 背景画像の透け具合。

主な調整：

| 変更したい内容 | 変更箇所 |
|---|---|
| メインのネオン色 | `--cbx-neon-cyan` + `DARK["--dsw-alias-brand-primary"]` |
| RGB演出の強さ | `body[data-cbx-on]::before { opacity }`（デフォルト0.18） |
| カラーホイールの回転速度 | `@keyframes cbx-spin`の`16s` |
| 背景の透け具合 | `DARK["--dsw-alias-bg-base"]`のalpha |
| 背景画像の差し替え | `client.js`内のbase64`data:image/jpeg;base64,...`を置換 |
| スキャンラインの無効化 | `body[data-cbx-on]::after`ブロック全体を削除 |
| アニメーション無効化 | OSの「視差効果を減らす」が有効な場合に自動無効 |

---

## ディレクトリ構成

```
.
├── package.json           # dsh.bundle（自動有効化）+ dsh.client（ブラウザ側）
├── cordis.patch.yml       # 自己挿入パッチ
├── lib/
│   ├── index.js           # node側（空のapply）
│   └── client.js          # ブラウザ側：トークン + RGB演出 + 背景 + HUD
├── README.md              # このファイル（简体中文）
├── README.en.md           # English
├── README.ja.md           # 日本語
├── LICENSE                # MIT
└── .gitignore
```

---

## アンインストール

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

または`cordis.patch.yml`から対応する`insert`行を削除して再起動します。

---

## DSHプラグインについて

DeepSeek Harnessは**Cordis**プラグインフレームワークで組み立てられています。プロファイル（例：`web`）は「bundle層＋ユーザーpatch層」で構成されます：

- **bundle**：`dsh.bundle.patch`を宣言したパッケージ。その`cordis.patch.yml`がpatch層として適用され、構成へプラグイン項目を`insert`します。
- **clientプラグイン**：`dsh.client`を宣言したパッケージ。`exports["./client"]`がブラウザ側（`window.__ModuleLoader__.load`）で、`dsh-client-modules`がスキャンしてページへ注入します。
- **hostプラグイン**：`main`エントリがNode側です。

本プラグインは「自己挿入bundle」です：`dsh plugin add .`後は自動で有効化され、手動設定は不要です。

---

## ライセンス

[MIT](./LICENSE)