figmar/apes-sidebar
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

docs(readme): sync EN with uploaded screenshots, normalize image sizes, add Side Chat badge

Browse Source 
- Mirror the zh feature tour (user-uploaded CDN images) into
  README_EN.md: real screenshots for explorer/editor, markdown,
  image, terminal, git, browser, tasks, side chat, settings, mobile;
  drop manual-shot placeholders (git-diff, bottom-panel) and the
  CodeMirror subsection (folded into the explorer section)
- Normalize image display size to width=880 (mobile 360) across both
  languages; remove the stale 'placeholders to come' note
- Add the missing Side Chat badge to the hero feature-chip row
  (zh + en)
- Mirror user's trim: 'Office' removed from the features bullet
  (Office preview is an ecosystem plugin), Git panel ecosystem
  sentence dropped
This commit is contained in:
Menghuan1918
2026-08-22 02:03:25 +08:00
parent 55ad7eec8d
commit 646c91cf70
2 changed files with 32 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+15 -29
View File
@@ -11,7 +11,7 @@
<a href="https://dshfind.com/zh/plugins/omdsh-dev/DSH-better-sidebar?ref=badge"><img alt="dshfind" src="https://dshfind.com/api/badge/omdsh-dev/DSH-better-sidebar?lang=zh" /></a><br /><br />
<a href="https://www.npmjs.com/package/@deepseek-ai/dsh?activeTab=versions"><img alt="支持的 DSH 版本：0.1.0-rc.8 · 0.1.1-rc.1 · 0.1.1-rc.2" src="https://img.shields.io/badge/DSH-0.1.0--rc.8_%C2%B7_0.1.1--rc.1_%C2%B7_0.1.1--rc.2-4d6bfe" /></a>
<a href="https://github.com/topics/dsh-better-sidebar"><img alt="插件生态：GitHub topic dsh-better-sidebar" src="https://img.shields.io/badge/%E6%8F%92%E4%BB%B6%E7%94%9F%E6%80%81-topic%20dsh--better--sidebar-4d6bfe" /></a><br /><br />
<img alt="文件管理" src="https://img.shields.io/badge/-文件管理-4d6bfe" /> <img alt="编辑预览" src="https://img.shields.io/badge/-编辑预览-4d6bfe" /> <img alt="内嵌浏览器" src="https://img.shields.io/badge/-内嵌浏览器-4d6bfe" /> <img alt="真实终端" src="https://img.shields.io/badge/-真实终端-4d6bfe" /> <img alt="Git 面板" src="https://img.shields.io/badge/-Git%20面板-4d6bfe" /> <img alt="后台任务" src="https://img.shields.io/badge/-后台任务-4d6bfe" /> <img alt="插件接入" src="https://img.shields.io/badge/-插件接入-4d6bfe" /><br /><br />
<img alt="文件管理" src="https://img.shields.io/badge/-文件管理-4d6bfe" /> <img alt="编辑预览" src="https://img.shields.io/badge/-编辑预览-4d6bfe" /> <img alt="内嵌浏览器" src="https://img.shields.io/badge/-内嵌浏览器-4d6bfe" /> <img alt="真实终端" src="https://img.shields.io/badge/-真实终端-4d6bfe" /> <img alt="Git 面板" src="https://img.shields.io/badge/-Git%20面板-4d6bfe" /> <img alt="后台任务" src="https://img.shields.io/badge/-后台任务-4d6bfe" /> <img alt="侧边对话" src="https://img.shields.io/badge/-侧边对话-4d6bfe" /> <img alt="插件接入" src="https://img.shields.io/badge/-插件接入-4d6bfe" /><br /><br />
<b>右侧栏 + 底部面板双工作台</b>，并把 <code>ctx.betterSidebar</code> 服务开放给所有插件——<br />
通过 <code>registerTab</code> / <code>registerFileViewer</code> 注册新的侧边栏页面与文件预览器。
</div>
@@ -149,83 +149,69 @@ dsh registry enable dsh-external/dsh-better-sidebar
## 🖼️ 特性巡礼
> 以下截图均为真实界面实拍（暗色主题）。占位图会陆续补齐。
> 以下均为真实界面实拍。
### 🗂️ 文件工作台：资源管理器
支持两种格式的资源管理器：内嵌在文件预览中/独立显示文件树
懒加载目录树、软链接按目标类型展示（目录软链接可展开、失效链接标红）、全局文件名搜索、上传文件/文件夹与拖放上传、右键菜单（在新 Tab 打开 / 在侧边打开 / 复制路径）、悬浮 `@文件` 一键引用进输入框。
<img width="2906" height="1790" alt="image" src="https://github.com/user-attachments/assets/a410bfd2-a8ba-43e6-873e-22417756e94d" />
<img width="1812" height="1186" alt="image" src="https://github.com/user-attachments/assets/b44b488e-568c-4ee0-b96c-e9c906598a77" />
支持两种格式的资源管理器：内嵌在文件预览中 / 独立显示文件树。懒加载目录树、软链接按目标类型展示（目录软链接可展开、失效链接标红）、全局文件名搜索、上传文件/文件夹与拖放上传、右键菜单（在新 Tab 打开 / 在侧边打开 / 复制路径）、悬浮 `@文件` 一键引用进输入框。
<div align="center"><img width="880" alt="文件资源管理器" src="https://github.com/user-attachments/assets/a410bfd2-a8ba-43e6-873e-22417756e94d" /></div>
<div align="center"><img width="880" alt="CodeMirror 代码编辑器" src="https://github.com/user-attachments/assets/b44b488e-568c-4ee0-b96c-e9c906598a77" /></div>
### 📝 Markdown · 图片 · PDF 内联预览
Markdown 预览支持 **Mermaid 图表**（`securityLevel: 'strict'` 安全渲染 + 二次清洗；点击图表弹窗放大、滚轮缩放、拖拽平移）；图片 / PDF 走媒体路由内联展示；Office 三件套由生态插件补齐。
<div align="center">
<img width="2898" height="1788" alt="image" src="https://github.com/user-attachments/assets/fe0e5182-55bb-45cc-b98b-a2877c2bdd38" />
</div>
<div align="center">
<img width="2904" height="1796" alt="image" src="https://github.com/user-attachments/assets/f9a58c30-5b7a-48b5-9e22-37d7e071f593" />
</div>
<div align="center"><img width="880" alt="Markdown + Mermaid 预览" src="https://github.com/user-attachments/assets/fe0e5182-55bb-45cc-b98b-a2877c2bdd38" /></div>
<div align="center"><img width="880" alt="图片内联预览" src="https://github.com/user-attachments/assets/f9a58c30-5b7a-48b5-9e22-37d7e071f593" /></div>
### 💻 真实终端
xterm.js + node-pty 真实 shell（不是模拟器）：断线重连 transcript 回放、shell / shellArgs 可配置（设置页或 `cordis.patch.yml`）、可选为模型注入 `terminal_*` 工具（agent 可直接开终端跑命令）。
<img width="2902" height="1798" alt="image" src="https://github.com/user-attachments/assets/0dad6ad3-ff3f-4b5a-86d2-f832ce65323e" />
<div align="center"><img width="880" alt="真实终端" src="https://github.com/user-attachments/assets/0dad6ad3-ff3f-4b5a-86d2-f832ce65323e" /></div>
### 🌿 Git 面板
暂存 / 取消暂存 / 提交（`Ctrl+Enter`）/ 还原，历史列表；点击改动文件打开 **VSCode 式 diff tab**（红绿行级对比）。
<img width="2910" height="1794" alt="image" src="https://github.com/user-attachments/assets/e7fc1220-305f-4bca-8583-e77ab4f4fa78" />
<div align="center"><img width="880" alt="Git 面板" src="https://github.com/user-attachments/assets/e7fc1220-305f-4bca-8583-e77ab4f4fa78" /></div>
### 🌐 内嵌浏览器
多开网页 tab：后退 / 前进 / 刷新 / 地址栏；内容运行在**不透明源沙箱 iframe**（界面实时显示沙箱状态，可按页面临时解锁）；聊天里的外链点击可被接管到侧边栏打开（按协议分流，可配）。
<img width="2900" height="1792" alt="image" src="https://github.com/user-attachments/assets/9bc6b65a-64fc-4942-a685-76e391e55606" />
<div align="center"><img width="880" alt="内嵌浏览器" src="https://github.com/user-attachments/assets/9bc6b65a-64fc-4942-a685-76e391e55606" /></div>
### 🧩 任务页：子代理拓扑 + 后台任务
子代理树实时拓扑（运行状态、批量实时预览）+ 后台任务清单（退出码 / 实时输出 / 强制终止）；新子代理 / 新任务可自动展开侧边栏（可关）。
<img width="2902" height="1792" alt="image" src="https://github.com/user-attachments/assets/dcd8ed2f-59fa-405b-937b-2d250f5034dd" />
<div align="center"><img width="880" alt="任务页：子代理拓扑" src="https://github.com/user-attachments/assets/dcd8ed2f-59fa-405b-937b-2d250f5034dd" /></div>
### 💬 侧边对话(beta)
Codex 风格侧边线程：**每个对话一个独立 Tab**；线程继承主会话完整上下文（含进行中回合，以 interrupted 诚实冻结）独立运行，不污染主会话；可持续追问、重启冷恢复；一键「保存为新会话」提升为顶层会话。
<img width="2898" height="1798" alt="image" src="https://github.com/user-attachments/assets/3a338c36-f5de-4000-95f3-4b1cd04f60fc" />
<div align="center"><img width="880" alt="侧边对话(beta)" src="https://github.com/user-attachments/assets/3a338c36-f5de-4000-95f3-4b1cd04f60fc" /></div>
### 🪟 双工作台：右侧栏 + 底部面板 + 分栏
右侧栏与底部面板可同时展开；拖 Tab 到分栏边缘**拆分**、拖到中间**合并**（可跨面板）；面板宽高左缘/上缘拖拽调节；移动端自动合并为全宽抽屉。
<img alt="dsh-better-sidebar 工作台截图" src="https://github.com/user-attachments/assets/dfdb875e-a1a8-4d4b-8340-353736b1708f" />
<div align="center"><img width="880" alt="双工作台（右侧栏 + 底部面板）" src="https://github.com/user-attachments/assets/dfdb875e-a1a8-4d4b-8340-353736b1708f" /></div>
### ⚙️ 声明式设置
设置页「侧边卡片」分区：每个 tab / 预览器一张小卡片，独立开关（高亮启用态 + 品牌开关滑块）；二级设置经卡片底部「功能设置」条弹窗（开关 / 文本 / 数字 / 下拉）；插件自有设置持久化在 `pluginSettings`。
<img width="1580" height="1516" alt="image" src="https://github.com/user-attachments/assets/0800ca64-621e-48da-b7df-aecfddc3ec29" />
<div align="center"><img width="880" alt="声明式设置：侧边卡片" src="https://github.com/user-attachments/assets/0800ca64-621e-48da-b7df-aecfddc3ec29" /></div>
### 📱 移动端
窄屏（<768px）自动切换为全宽抽屉：底栏 tab 一次性并入右侧栏，触屏拖拽可调。
<div align="center">
<img width="1884" height="1686" alt="image" src="https://github.com/user-attachments/assets/a82ba78a-f4cf-4d85-80e8-050a05beb144" />
</div>
<div align="center"><img width="360" alt="移动端全宽抽屉" src="https://github.com/user-attachments/assets/a82ba78a-f4cf-4d85-80e8-050a05beb144" /></div>
## 🌐 插件生态
README_EN.md
+17 -79
View File
@@ -11,7 +11,7 @@
<a href="https://dshfind.com/en/plugins/omdsh-dev/DSH-better-sidebar?ref=badge"><img alt="dshfind" src="https://dshfind.com/api/badge/omdsh-dev/DSH-better-sidebar?lang=en" /></a><br /><br />
<a href="https://www.npmjs.com/package/@deepseek-ai/dsh?activeTab=versions"><img alt="Supported DSH versions: 0.1.0-rc.8 · 0.1.1-rc.1 · 0.1.1-rc.2" src="https://img.shields.io/badge/DSH-0.1.0--rc.8_%C2%B7_0.1.1--rc.1_%C2%B7_0.1.1--rc.2-4d6bfe" /></a>
<a href="https://github.com/topics/dsh-better-sidebar"><img alt="Plugin ecosystem: GitHub topic dsh-better-sidebar" src="https://img.shields.io/badge/plugin%20ecosystem-topic%20dsh--better--sidebar-4d6bfe" /></a><br /><br />
<img alt="File management" src="https://img.shields.io/badge/-File%20management-4d6bfe" /> <img alt="Edit &amp; preview" src="https://img.shields.io/badge/-Edit%20%26%20preview-4d6bfe" /> <img alt="Embedded browser" src="https://img.shields.io/badge/-Embedded%20browser-4d6bfe" /> <img alt="Real terminal" src="https://img.shields.io/badge/-Real%20terminal-4d6bfe" /> <img alt="Git panel" src="https://img.shields.io/badge/-Git%20panel-4d6bfe" /> <img alt="Background tasks" src="https://img.shields.io/badge/-Background%20tasks-4d6bfe" /> <img alt="Plugin integration" src="https://img.shields.io/badge/-Plugin%20integration-4d6bfe" /><br /><br />
<img alt="File management" src="https://img.shields.io/badge/-File%20management-4d6bfe" /> <img alt="Edit &amp; preview" src="https://img.shields.io/badge/-Edit%20%26%20preview-4d6bfe" /> <img alt="Embedded browser" src="https://img.shields.io/badge/-Embedded%20browser-4d6bfe" /> <img alt="Real terminal" src="https://img.shields.io/badge/-Real%20terminal-4d6bfe" /> <img alt="Git panel" src="https://img.shields.io/badge/-Git%20panel-4d6bfe" /> <img alt="Background tasks" src="https://img.shields.io/badge/-Background%20tasks-4d6bfe" /> <img alt="Side Chat" src="https://img.shields.io/badge/-Side%20Chat-4d6bfe" /> <img alt="Plugin integration" src="https://img.shields.io/badge/-Plugin%20integration-4d6bfe" /><br /><br />
<b>A dual workbench (right sidebar + bottom panel)</b> that opens its <code>ctx.betterSidebar</code> service to every plugin —<br />
register new sidebar pages and file viewers via <code>registerTab</code> / <code>registerFileViewer</code>.
</div>
@@ -40,7 +40,7 @@
## ✨ Features
- **🗂️ File Workbench**: file explorer (lazy-loading tree; symlinks show their target kind — directory links expand, dangling links flagged) + CodeMirror editor; inline preview for images / Markdown (incl. Mermaid diagrams, strict-mode safe rendering + click-to-zoom) / HTML / PDF / Office
- **🗂️ File Workbench**: file explorer (lazy-loading tree; symlinks show their target kind — directory links expand, dangling links flagged) + CodeMirror editor; inline preview for images / Markdown (incl. Mermaid diagrams, strict-mode safe rendering + click-to-zoom) / HTML / PDF
- **🌐 Embedded Browser**: multiple web tabs with back / forward / refresh; content runs in a sandboxed iframe; external links are routed by protocol by default — HTTP opens in the sidebar, HTTPS goes to the system browser (both adjustable in settings)
- **💻 Real Terminal**: xterm.js + node-pty real shell, reconnect with transcript replay; optionally injects `terminal_*` tools for the model
- **🌿 Git Panel**: real diff + VSCode-style diff tabs, history, right-click to stage / commit / revert
@@ -149,131 +149,69 @@ Update: `git pull && pnpm install && pnpm build` → `node scripts/package-regis
## 🖼️ Feature Tour
> All screenshots below are taken from the real UI (dark theme). Placeholder slots will be filled in over time.
> Below are real UI screenshots.
### 🗂️ File Workbench: Explorer
Lazy-loading directory tree, symlinks classified by target kind (directory links expand, dangling links flagged), global filename search, file/folder upload buttons plus drag-drop upload, context menu (open in new tab / open to the side / copy paths), and a hover `@file` button that references a file straight into the composer.
Two explorer modes: embedded in the file preview / standalone file tree. Lazy-loading directory tree, symlinks classified by target kind (directory links expand, dangling links flagged), global filename search, file/folder upload buttons plus drag-drop upload, context menu (open in new tab / open to the side / copy paths), and a hover `@file` button that references a file straight into the composer.
<!-- 📸 Image slot (upload pending): file explorer — the Files window showing the full directory tree (.git / assets / data / docs / src with file icons).
Ready-to-upload file: ~/Desktop/dsh-readme-images/workbench-explorer.webp (original png/01-explorer.png)
After uploading on github.com, replace the src below with the returned user-attachments URL and uncomment:
<div align="center"><img width="880" alt="File explorer" src="PASTE_user-attachments_URL_here" /></div>
-->
### ✍️ CodeMirror Editor
Open per path (new tab) or switch in place (opt-in merged mode), preview / edit / save in one window, syntax highlighting for 20+ languages, `Ctrl/Cmd+S` to save.
<!-- 📸 Image slot (upload pending): code editor — app.ts open with syntax highlighting, path-input header and a multi-tab strip.
Ready-to-upload file: ~/Desktop/dsh-readme-images/editor.webp (original png/02-editor.png)
<div align="center"><img width="880" alt="CodeMirror editor" src="PASTE_user-attachments_URL_here" /></div>
-->
<div align="center"><img width="880" alt="File explorer" src="https://github.com/user-attachments/assets/a410bfd2-a8ba-43e6-873e-22417756e94d" /></div>
<div align="center"><img width="880" alt="CodeMirror editor" src="https://github.com/user-attachments/assets/b44b488e-568c-4ee0-b96c-e9c906598a77" /></div>
### 📝 Inline Preview: Markdown · Images · PDF
The Markdown preview renders **Mermaid diagrams** (strict-mode safe rendering + a second sanitize pass; click a diagram for a zoom modal with wheel-zoom and drag-pan); images / PDFs display inline via the media route; the Office suite is covered by an ecosystem plugin.
<div align="center">
<!-- 📸 Image slot (upload pending): Markdown preview — architecture.md in preview mode with a rendered Mermaid flowchart + the Preview/Edit toggle.
Ready-to-upload file: ~/Desktop/dsh-readme-images/markdown-mermaid.webp (original png/03-markdown.png)
<img width="880" alt="Markdown + Mermaid preview" src="PASTE_user-attachments_URL_here" />
-->
</div>
<div align="center">
<!-- 📸 Image slot (upload pending): image preview — logo.png rendered inline in a file window.
Ready-to-upload file: ~/Desktop/dsh-readme-images/image-preview.webp (original png/04-image.png)
<img width="880" alt="Inline image preview" src="PASTE_user-attachments_URL_here" />
-->
</div>
<div align="center"><img width="880" alt="Markdown + Mermaid preview" src="https://github.com/user-attachments/assets/fe0e5182-55bb-45cc-b98b-a2877c2bdd38" /></div>
<div align="center"><img width="880" alt="Inline image preview" src="https://github.com/user-attachments/assets/f9a58c30-5b7a-48b5-9e22-37d7e071f593" /></div>
### 💻 Real Terminal
xterm.js + node-pty real shell (not an emulator): transcript replay on reconnect, configurable shell / shellArgs (settings page or `cordis.patch.yml`), and optional `terminal_*` model tools so the agent can open terminals and run commands itself.
<!-- 📸 Image slot (upload pending): real terminal — a terminal tab showing git log --graph and ls output.
Ready-to-upload file: ~/Desktop/dsh-readme-images/terminal.webp (original png/05-terminal.png)
⚠️ Note: this shot's prompt contains the local username/hostname (menghuan / MenghuandeMacBook-Pro); if that bothers you, run `export PS1='$ '` before the demo commands and retake.
<div align="center"><img width="880" alt="Real terminal" src="PASTE_user-attachments_URL_here" /></div>
-->
<div align="center"><img width="880" alt="Real terminal" src="https://github.com/user-attachments/assets/0dad6ad3-ff3f-4b5a-86d2-f832ce65323e" /></div>
### 🌿 Git Panel
Stage / unstage / commit (`Ctrl+Enter`) / revert, plus a history list; clicking a changed file opens a **VSCode-style diff tab** (line-level red/green). push / pull / fetch are covered by the ecosystem plugins [dsh-git-remotes](https://github.com/yq04/dsh-git-remotes) and [dsh-git-forge](https://github.com/thirsty5034/dsh-git-forge).
Stage / unstage / commit (`Ctrl+Enter`) / revert, plus a history list; clicking a changed file opens a **VSCode-style diff tab** (line-level red/green).
<!-- 📸 Image slot (upload pending): Git panel — STAGED/UNSTAGED groups + commit box + HISTORY list.
Ready-to-upload file: ~/Desktop/dsh-readme-images/git-panel.webp (original png/06-git.png)
⚠️ Note: the HISTORY rows show the local git global identity (Menghuan1918) as commit author.
<div align="center"><img width="880" alt="Git panel" src="PASTE_user-attachments_URL_here" /></div>
-->
<!-- 📸 Image slot (manual shot needed): VSCode-style diff tab — click a changed file (e.g. src/app.ts) in the Git panel to open the diff tab with line-level red/green diff.
Suggested name: git-diff; 1600×1000 @2x, dark theme.
<div align="center"><img width="880" alt="VSCode-style diff tab" src="PASTE_user-attachments_URL_here" /></div>
-->
<div align="center"><img width="880" alt="Git panel" src="https://github.com/user-attachments/assets/e7fc1220-305f-4bca-8583-e77ab4f4fa78" /></div>
### 🌐 Embedded Browser
Multiple web tabs with back / forward / reload / address bar; content runs in an **opaque-origin sandboxed iframe** (live sandbox status in the UI, per-page temporary unlock available); external-link clicks in the chat can be taken over into the sidebar (protocol-based routing, configurable).
<!-- 📸 Image slot (upload pending): embedded browser — a web tab showing a docs site; note the "Sandbox mode: on" safety bar at the top.
Ready-to-upload file: ~/Desktop/dsh-readme-images/browser.webp (original png/08-browser.png)
<div align="center"><img width="880" alt="Embedded browser" src="PASTE_user-attachments_URL_here" /></div>
-->
<div align="center"><img width="880" alt="Embedded browser" src="https://github.com/user-attachments/assets/9bc6b65a-64fc-4942-a685-76e391e55606" /></div>
### 🧩 Tasks: Agent Topology + Background Jobs
Live subagent-tree topology (run states, batched live previews) plus the background-jobs list (exit codes / live output / force-kill); new subagents / jobs can auto-expand the sidebar (configurable).
<!-- 📸 Image slot (upload pending): tasks page — the subagent topology (Main agent node).
Ready-to-upload file: ~/Desktop/dsh-readme-images/tasks.webp (original png/tasks-src.png)
💡 An even better shot: a real session with several running subagents; the current one shows the idle topology.
<div align="center"><img width="880" alt="Tasks: subagent topology" src="PASTE_user-attachments_URL_here" /></div>
-->
<div align="center"><img width="880" alt="Tasks: subagent topology" src="https://github.com/user-attachments/assets/dcd8ed2f-59fa-405b-937b-2d250f5034dd" /></div>
### 💬 Side Chat (beta)
Codex-style side threads: **one independent tab per conversation**; the thread inherits the parent's full context (including the in-progress turn, honestly frozen as "interrupted") and runs independently without polluting the main session; follow-ups survive restarts; one click promotes the thread to a top-level session.
<!-- 📸 Image slot (manual shot needed): Side Chat (beta) — open via the + menu → Side Chat (beta); show the thread composer and the header thread menu; ideally with one or two messages exchanged.
Suggested name: sidechat; 1600×1000 @2x, dark theme.
<div align="center"><img width="880" alt="Side Chat (beta)" src="PASTE_user-attachments_URL_here" /></div>
-->
<div align="center"><img width="880" alt="Side Chat (beta)" src="https://github.com/user-attachments/assets/3a338c36-f5de-4000-95f3-4b1cd04f60fc" /></div>
### 🪟 Dual Workbench: Sidebar + Bottom Panel + Split Panes
The right sidebar and the bottom panel can stay open together; drag a tab to a pane edge to **split**, to the middle to **merge** (works across panels); panel width/height drag from the left/top edge; on mobile everything merges into a full-width drawer.
<!-- 📸 Image slot (upload pending): split panes — the widened right panel split into two panes (left: file tree; right: editor).
Ready-to-upload file: ~/Desktop/dsh-readme-images/split-panes.webp (original png/10-split.png)
<div align="center"><img width="880" alt="Split-pane workbench" src="PASTE_user-attachments_URL_here" /></div>
-->
<!-- 📸 Image slot (manual shot needed): bottom panel — expand the bottom panel with a terminal (or any tab) open, showing the "right sidebar + bottom panel" dual workbench in one frame.
Suggested name: bottom-panel; 1600×1000 @2x, dark theme.
<div align="center"><img width="880" alt="Bottom panel" src="PASTE_user-attachments_URL_here" /></div>
-->
<div align="center"><img width="880" alt="Dual workbench (right sidebar + bottom panel)" src="https://github.com/user-attachments/assets/dfdb875e-a1a8-4d4b-8340-353736b1708f" /></div>
### ⚙️ Declarative Settings
The "Side card" section in DSH settings: one small card per tab / viewer with an independent toggle (highlighted enabled state + brand switch); secondary settings open from the "Feature settings" strip at the card bottom (switch / text / number / select rows); plugin-owned settings persist under `pluginSettings`.
<!-- 📸 Image slot (manual shot needed): the Side card settings section — DSH Settings → Side card, showing the tab/viewer card grid, the "Feature settings" strips and the version badge.
Suggested name: settings-cards; 1600×1000 @2x, dark theme.
<div align="center"><img width="880" alt="Declarative settings: side cards" src="PASTE_user-attachments_URL_here" /></div>
-->
<div align="center"><img width="880" alt="Declarative settings: side cards" src="https://github.com/user-attachments/assets/0800ca64-621e-48da-b7df-aecfddc3ec29" /></div>
### 📱 Mobile
On narrow screens (<768px) the panels become a full-width drawer: bottom-panel tabs merge into the sidebar once, with touch-friendly dragging.
<div align="center">
<!-- 📸 Image slot (upload pending): mobile drawer — the sidebar as a full-width drawer showing the file tree at a 430px viewport.
Ready-to-upload file: ~/Desktop/dsh-readme-images/mobile.webp (original png/14-mobile.png)
<img width="360" alt="Mobile full-width drawer" src="PASTE_user-attachments_URL_here" />
-->
</div>
<div align="center"><img width="360" alt="Mobile full-width drawer" src="https://github.com/user-attachments/assets/a82ba78a-f4cf-4d85-80e8-050a05beb144" /></div>
## 🌐 Plugin Ecosystem