Lhy723/dsh-agent-canvas 预览 preview

Lhy723/dsh-agent-canvas

Plugin插件 Native原生 ⭐ 3 Subagents & Orchestration子代理与编排

DSH Web 的代理 / 子代理 / 工作流画布标签页

Project Overview项目介绍

This is a native DSH plugin, built exclusively for the DSH Web platform to add a new customizable conversation view tab. It registers as a conversation.view plugin that sits after the default Conversation and Trajectory tabs in the DSH Web interface. Once installed from npm or local source, you can open the new Agent Canvas tab to get a global, graphical overview of how your current active DSH session splits tasks, schedules subagents, and executes tools. The plugin automatically adapts to whatever light or dark theme you have enabled in your DSH Web user profile.

The canvas uses a force-directed graph layout that automatically repels unconnected nodes and pulls connected nodes closer together for visual readability. You can drag individual nodes to custom reposition them, pan the entire canvas by dragging the background, and zoom in or out with your mouse wheel. Workflows are automatically grouped by their phase, creating a clear hierarchical structure from main agent to workflow to phase to subagent. Different types of nodes use distinct styling: card-based nodes for workflows, phases, and subagents, while the main agent and tools use simpler default round nodes.

To install the plugin to your DSH web profile, you can run npm install dsh-agent-canvas then add it with the DSH CLI command dsh plugin --profile web add ./node_modules/dsh-agent-canvas. If you are installing from local source or a downloaded tarball, you can run the same command with the path to the local directory or packed .tgz file instead. Before you first open the Agent Canvas tab, you need to confirm that all subagent and workflow related tools are enabled in your DSH profile patch, otherwise the canvas will not show any nodes. The plugin is released under the MIT license, and requires npm and a TypeScript toolchain to build from source code.

dsh-agent-canvas 是专为 DSH Web 开发的原生对话视图插件,它可以将 DSH 运行会话中的代理、子代理、工作流、阶段和工具调用关系转换为一张可交互、实时更新的关系画布。安装完成后,它会在 DSH Web 默认的“对话”“轨迹”标签页后新增“Agent 画布”标签页,自动适配 DSH 的浅色和深色主题。

核心功能包括力导向图自动布局、实时数据同步、工作流按阶段分组、卡片式节点分类展示,支持拖动节点、拖动画布、滚轮缩放画布大小,还可以在右上角设置面板实时调节力导向各项参数,参数会自动持久化到 localStorage 中,刷新页面后用户自定义设置不会丢失。

插件需要安装到 DSH web 配置文件中,可以通过 npm 安装、本地源码打包安装或 tarball 安装三种方式完成。使用前需要确保 DSH 配置中已经启用了 subagent 和 workflow 相关工具,否则画布无法正确显示节点和关系信息,构建开发需要依赖 npm 和 TypeScript 工具链。

Pre-install check安装前体检Compatibility · Security兼容性 · 安全性 2 warnings2 项注意
  • No license declared - all rights reserved by default; ask the author before commercial use or redistribution未声明开源许可证 —— 默认「保留所有权利」,商用或再分发前先问作者
  • Only 3 stars - very few users, little community feedback星标只有 3,几乎没人在用,遇到问题缺少社区反馈
DSH walks through these 9 checksDSH 会逐条核对这 9 项

Compatibility兼容性

  • DSH, Node, OS and profile requirementsDSH 版本 / Node 版本 / 操作系统 / profile 是否满足要求
  • External dependencies and runtimes (Electron / Python / Docker, ...)外部依赖与运行时(Electron / Python / Docker 等)是否齐备
  • Conflicts with installed plugins: command names, skill / tool names, ports, duplicate MCP registration与已装插件是否冲突:命令名、skill / tool 重名、端口占用、重复 MCP 注册

Security安全性

  • Repo matches the facts registered here; archived or abandoned?仓库是否与页面登记一致,是否归档或长期停更
  • Safety of preinstall / install / postinstall and install.sh / setup.ps1preinstall / install / postinstall 与 install.sh、setup.ps1 是否安全
  • curl|bash, download-then-execute, obfuscation, unrelated domains → stop immediatelycurl|bash、下载即执行、混淆代码、无关域名 → 立刻停止
  • Typosquatting or unmaintained packages among the new dependencies新增依赖里有没有 typosquatting 或无人维护的包
  • Requested permissions vs. what the feature actually needs申请了哪些权限、是否超出功能所需(filesystem / network / shell / clipboard)
  • Any sudo / admin requirement, plus uninstall and rollback是否要求 sudo / 管理员权限,以及卸载与回滚方式

Anything uncertain must be marked unknown with a note on how to confirm it. This site's signal screen is a static snapshot, not a security audit.拿不准的必须标「未知」并说明要我怎么确认。本站的信号筛查是静态快照,不能替代安全审计。

Or use CLI install (for developers)或使用命令行安装(适合开发者)

CLI Install命令行安装

dsh plugin --profile web add github:Lhy723/dsh-agent-canvas

把 Lhy723/dsh-agent-canvas 加入你的 DSH 配置(web profile)即可启用。

READMEREADME

DSH Agent Canvas promotional banner

dsh-agent-canvas

npm version npm downloads MIT license

把一个 DSH Web 会话里的 Agent、Subagent、Workflow、Phase 和工具调用,变成一张可交互、实时更新的关系画布。

它作为 conversation.view 插件注册在“对话”和“轨迹”之后:打开 Agent 画布 Tab,就能从全局视角观察一次运行如何拆分任务、调度子代理、执行工具,并在浅色 / 深色主题之间自动适配。

宣传图中的二次元角色依据项目提供的视觉参考重新创作,用作仓库的 GitHub Social Preview;界面截图为与当前组件行为一致的示例会话。

功能

  • 力导向图布局
    • 节点之间自动排斥,有连线的节点互相牵引。
    • 支持拖动节点、拖动画布、滚轮缩放。
  • 实时数据同步
    • 与对话记录同源:useSession / useSessions 读取会话快照和会话列表。
    • Subagent / Workflow / 工具调用状态变化时,画布自动更新。
  • Workflow 按 Phase 分组
    • 主 Agent → Workflow → Phase → Subagent,层级清晰。
  • 卡片式节点
    • Workflow / Phase / Subagent 使用白底圆角卡片。
    • 左侧彩色条区分类型,顶部状态点 + 类型徽标 + 名字,下方内容可滚动。
    • 工具和主 Agent 使用圆形节点。
  • 力导向参数实时调节
    • 右上角 ⚙ 设置面板,可实时调整:
      • 向心力
      • 节点排斥力
      • 连线吸引力
      • 连线自然距离
      • 阻尼
    • 参数自动持久化到 localStorage,刷新后保留。
  • 跟随 DSH 明暗模式
    • 自动监听 data-ds-dark-theme,画布和卡片在浅色/深色模式下自动适配。

功能速览

模块 你能看到什么 交互 / 行为
Agent & Subagent 根 Agent、直接子代理、运行状态和任务摘要 节点可拖动,状态变化会实时更新
Workflow & Phase Workflow → Phase → Subagent 的层级关系 Workflow 成员不会重复连回根 Agent,图更清晰
工具调用 运行中的工具,以及最近完成的工具结果 活动连线使用虚线,最近最多保留 12 个结果节点
力导向布局 向心力、排斥力、吸引力、自然距离、阻尼 右上角 ⚙ 面板实时调整,并持久化到 localStorage
画布操作 平移、缩放、视图重置 鼠标拖拽背景 / 节点,滚轮缩放或使用右侧按钮
主题适配 DSH Web 的浅色和深色模式 自动监听 data-ds-dark-theme

演示截图

浅色模式:从 Agent 看到完整协作树

Agent Canvas light mode overview

深色模式:打开力导向参数面板

Agent Canvas dark mode with settings

关系模型

画布使用和会话区相同的数据源,节点关系大致如下:

主 Agent
├── Workflow
│   └── Phase
│       └── Subagent
├── 直接 Subagent
└── Tool / Tool result

Showing the opening section of the README — the full document lives in the repository以上为 README 开头摘要,完整文档在仓库内 · View the full README on GitHub →在 GitHub 查看完整 README →

← 上一个 Prev dsh-tunnel-plugin 下一个 Next xiaoliuren →