dsh-claude-design 0.0.0-stage → 2.4.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jim Liu 宝玉
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,41 @@
-# Temporary Holding Version
+# dsh-claude-design
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness) plugin that adds the **claude-design** skill from
+[baoyu-design](https://github.com/JimLiu/baoyu-design): the agent writes editable design canvases (artboards side by
+side) as files in your workspace and opens them in a local canvas editor, where you can retype copy and adjust each
+artboard's tweaks.
+
+## Install
+
+In the DeepSeek Harness desktop app: **Plugins** → **Add plugin** → enter `dsh-claude-design` in **Package name or
+address** → **Install**, and turn the plugin on. From the command line, for a CLI profile such as `web`:
+
+```sh
+dsh plugin --profile web add dsh-claude-design
+```
+
+Then quit and reopen the app, start a new session, and ask for a design, or type `/claude-design`. A workspace that has
+its own `claude-design` skill (in `.agents/skills/` or `.dsh/skills/`) uses that copy instead of this plugin's.
+
+To update, uninstall the plugin, install it again, and quit and reopen the app. For a day after a release the app's
+package manager (pnpm) still picks the previous version; to get the new one sooner, enter the name with the version,
+such as `dsh-claude-design@2.4.0`.
+
+## What is inside
+
+- `skills/claude-design/`: the skill as baoyu-design publishes it (`SKILL.md`, `artifact-type/reference/`, and the
+  prebuilt `scripts/`: the editor page, `artifact.mjs`, and its server).
+- `lib/index.js`: the plugin. It registers the skill with the Harness skill registry and, when the skill loads, tells
+  the agent which Node executable runs `scripts/artifact.mjs`: the Host's own Node, the Node runtime the desktop app
+  ships, or `node` on PATH. Set `node` in the `claude-design` row's config to choose another. Whenever the agent opens
+  the editor, the plugin also waits for comments, so a comment's **Send to agent** box is there: send one and the agent
+  wakes up, changes the artboard, and replies in the comment.
+- `lib/client.js`: the part that runs in the app's window. It shows a comment sent to the agent as a card in the chat;
+  **View thread** on the card opens it in the editor.
+- `cordis.patch.yml`: the bundle layer that mounts the plugin row.
+
+The editor server listens on 127.0.0.1 only and reads and writes only the canvas's folder.
+
+## License
+
+MIT. The editor's third-party licenses are in `skills/claude-design/scripts/editor/third-party-licenses.txt`.

package/cordis.patch.yml

@@ -0,0 +1,7 @@
+# dsh-claude-design bundle patch: installing the package (the Plugins page, or
+# `dsh plugin --profile <name> add <spec>`) adds it to the profile's bundles,
+# and this layer mounts its one plugin row, which registers the claude-design
+# skill with the profile's skill registry.
+- insert:
+    - id: claude-design
+      name: dsh-claude-design

package/docs/DETAIL.md

@@ -0,0 +1,26 @@
+# Claude Design
+
+Adds the **claude-design** skill to DeepSeek Harness. Ask for a design ("three landing-page directions for our app")
+and the agent writes it as files in your workspace: a folder with `project/canvas.json` and one `.dc.html` file per
+artboard. It then starts a local canvas editor and gives you its link.
+
+## Using it
+
+- Ask for a design in plain words, or type `/claude-design` to call the skill by name.
+- Open the link the agent gives you. In the desktop app it opens in the right sidebar's Browser, beside the
+  conversation (Settings → General → Open chat links in: **In-App Sidebar**, the default).
+- In the editor you see the artboards side by side, retype copy and adjust each artboard's tweaks. Your edits are
+  saved back into the same files, and the agent's changes show up in the page as it writes them.
+- Comment on anything on an artboard (Comment, or C). Tick **Send to agent** and the agent picks it up at once, even
+  when the conversation is idle: it changes the artboard and replies in the comment. The comment also shows in the chat
+  as a card; **View thread** on the card opens it in the editor. The box is there while comments can reach the agent,
+  which starts each time it gives you the link. After restarting the app, ask the agent to open the design again to
+  bring it back.
+- To change a design later, ask the agent to revise the folder that holds its `project/canvas.json`.
+- A workspace that has its own `claude-design` skill (in `.agents/skills/` or `.dsh/skills/`) uses that copy instead
+  of this plugin's.
+
+## What runs where
+
+The editor is a small server on 127.0.0.1 that the skill's script starts in the background, one per design. It reads
+and writes only that design's folder. The desktop app's own Node runtime runs it; nothing else is installed.

package/docs/DETAIL.zh.md

@@ -0,0 +1,16 @@
+# Claude 设计稿
+
+给 DeepSeek Harness 加上 **claude-design** 技能。让 Agent 做一份设计（"给我们的 App 出三个落地页方向"），它会在工作区里把设计写成文件：一个文件夹，里面是 `project/canvas.json` 和每个画板一个 `.dc.html` 文件。写完它会启动本地画布编辑器，把链接给你。
+
+## 怎么用
+
+- 直接用自然语言要设计稿，或者输入 `/claude-design` 点名调用这个技能。
+- 打开 Agent 给的链接。桌面版里它会在右侧栏的浏览器里打开，和对话并排（设置 → 通用 → 聊天链接打开方式：**应用内侧栏**，默认就是这个）。
+- 编辑器里各个画板并排摆着，可以改文字、调每个画板的可调参数。你的修改会存回同一批文件；Agent 写的改动也会实时出现在页面上。
+- 在画板上可以给任何元素加评论（点评论按钮或按 C）。勾上 **Send to agent** 发出去，Agent 会马上接手，对话空闲时也一样：它改好那个画板，再在评论里回复你。评论也会以卡片的形式出现在对话里，点卡片上的 **View thread**（中文界面是「查看评论」）会在编辑器里打开这条评论。这个勾选框只在评论能发给 Agent 时出现；Agent 每次给你编辑器链接时都会开始等评论。重启应用后，让 Agent 再打开一次这份设计稿就能恢复。
+- 以后要改，让 Agent 修改那个装着 `project/canvas.json` 的文件夹即可。
+- 如果工作区自己带了 `claude-design` 技能（在 `.agents/skills/` 或 `.dsh/skills/` 里），这个工作区会用它自己那份，而不是插件里的。
+
+## 运行方式
+
+编辑器是技能脚本在后台启动的一个本地服务（127.0.0.1），一份设计稿一个，只读写这份设计稿自己的文件夹。用的是桌面版自带的 Node，不需要另外安装任何东西。

package/icon.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
+  <rect width="64" height="64" rx="14" fill="#D97757"/>
+  <rect x="9" y="17" width="20" height="30" rx="3" fill="#FFF7F2"/>
+  <rect x="35" y="17" width="20" height="30" rx="3" fill="#FFF7F2"/>
+  <rect x="13" y="22" width="12" height="9" rx="1.5" fill="#E9B8A3"/>
+  <rect x="13" y="35" width="10" height="2.5" rx="1.25" fill="#D97757"/>
+  <rect x="13" y="40" width="7" height="2.5" rx="1.25" fill="#E9B8A3"/>
+  <rect x="39" y="22" width="12" height="2.5" rx="1.25" fill="#D97757"/>
+  <rect x="39" y="27" width="9" height="2.5" rx="1.25" fill="#E9B8A3"/>
+  <rect x="39" y="34" width="12" height="9" rx="1.5" fill="#E9B8A3"/>
+</svg>

package/lib/client.js

@@ -0,0 +1,241 @@
+// dsh-claude-design 2.4.0: built from baoyu-design.
+window.__ModuleLoader__.load({
+	id: "dsh-claude-design",
+	factory: (require) => {
+		var module = { exports: {} };
+		var exports = module.exports;
+		"use strict";
+		var __defProp = Object.defineProperty;
+		var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+		var __getOwnPropNames = Object.getOwnPropertyNames;
+		var __hasOwnProp = Object.prototype.hasOwnProperty;
+		var __export = (target, all) => {
+		  for (var name in all)
+		    __defProp(target, name, { get: all[name], enumerable: true });
+		};
+		var __copyProps = (to, from, except, desc) => {
+		  if (from && typeof from === "object" || typeof from === "function") {
+		    for (let key of __getOwnPropNames(from))
+		      if (!__hasOwnProp.call(to, key) && key !== except)
+		        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+		  }
+		  return to;
+		};
+		var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+		var client_exports = {};
+		__export(client_exports, {
+		  apply: () => apply,
+		  inject: () => inject
+		});
+		module.exports = __toCommonJS(client_exports);
+
+		var define_CLIENT_default = { plugin: "dsh-claude-design", key: "dsh-claude-design", simple: false };
+
+		var import_react = require("react");
+		var import_jsx_runtime = require("react/jsx-runtime");
+		var CLIENT = define_CLIENT_default;
+		var COMMENT_SOURCE = "baoyu-design-comment";
+		var KIND = `${CLIENT.key}:comment`;
+		var NS = CLIENT.key;
+		var zh = {
+		  "card.title": "已将对“{title}”的评论发给 Agent",
+		  "card.request": "已将“{title}”上的 {label} 发给 Agent",
+		  "card.view": "查看评论",
+		  "card.more": "显示位置",
+		  "card.less": "收起位置"
+		};
+		var en = {
+		  "card.title": "Comment on “{title}” sent to agent",
+		  "card.request": "{label} on “{title}” sent to agent",
+		  "card.view": "View thread",
+		  "card.more": "Show where",
+		  "card.less": "Hide where"
+		};
+		var str = (value) => typeof value === "string" ? value : "";
+		function ours(event) {
+		  if (event.type !== "user/message" || event.surfaceOp !== "append") return false;
+		  const source = event.data?.source;
+		  return source?.kind === COMMENT_SOURCE && source.plugin === CLIENT.plugin;
+		}
+		function cardData(event) {
+		  const source = event.data?.source ?? {};
+		  const threads = Array.isArray(source.threads) ? source.threads : [];
+		  const requests = Array.isArray(source.requests) ? source.requests : [];
+		  return {
+		    title: str(source.title),
+		    url: str(source.url),
+		    threads: threads.map((t) => ({ id: str(t.id), where: str(t.where), text: str(t.text) })).filter((t) => t.id),
+		    requests: requests.map((r) => ({ id: str(r.id), label: str(r.label), text: str(r.text) })).filter((r) => r.id && r.text),
+		    seq: event.seq
+		  };
+		}
+		var definition = {
+		  kind: KIND,
+		  target: "chat",
+		  match: (event) => (
+		    // Claimed: the built-in input-message Definition would draw it as a context row.
+		    ours(event) ? { id: String(event.data?.id), role: "start", exclusive: true } : null
+		  ),
+		  start: (_context, match) => cardData(match.event),
+		  update: (context) => context.state,
+		  buildViewNode: (context) => {
+		    if (context.state === void 0) return null;
+		    return {
+		      key: context.key,
+		      kind: KIND,
+		      id: context.id,
+		      target: "chat",
+		      anchorSeq: context.state.seq,
+		      location: context.start?.location ?? context.matches[0]?.location ?? { kind: "unresolved" },
+		      visibility: "visible",
+		      // A person's input, as a user message: it opens the agent's reply below it.
+		      groupTree: "input",
+		      data: context.state
+		    };
+		  }
+		};
+		var CSS = `
+		.bdc-row{display:flex;flex-direction:column;align-items:flex-end;gap:8px;width:100%}
+		.bdc-card{box-sizing:border-box;max-width:min(calc(var(--dsh-chat-content-width, 748px) * 0.702), 82%);min-width:min(320px, 82%);
+		  border:0.5px solid var(--dsw-alias-border-l1);border-radius:var(--dsw-radius-xl, 12px);background:var(--dsw-alias-markdown-code-block);
+		  color:var(--dsw-alias-label-primary);padding:10px 14px 12px;display:flex;flex-direction:column;gap:6px}
+		.bdc-head{display:flex;align-items:center;gap:6px;color:var(--dsw-alias-label-tertiary);font:var(--dsw-font-xxs-12, 12px/18px sans-serif)}
+		.bdc-head svg{flex:none}
+		.bdc-head-text{flex:1;min-width:0;display:flex;white-space:nowrap;overflow:hidden}
+		.bdc-head-text>span{flex:none}
+		.bdc-head-text>.bdc-head-title{flex:0 1 auto;min-width:1.5em;overflow:hidden;text-overflow:ellipsis}
+		.bdc-toggle{flex:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin:-2px -4px -2px 0;
+		  border:0;border-radius:var(--dsw-radius-sm, 6px);background:none;color:inherit;cursor:pointer;padding:0}
+		.bdc-toggle:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-secondary)}
+		.bdc-toggle svg{transition:transform .15s}
+		.bdc-toggle[aria-expanded=false] svg{transform:rotate(-90deg)}
+		.bdc-body{font-size:var(--dsh-content-font-size, 14px);line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
+		.bdc-meta{display:flex;flex-direction:column;gap:6px;padding-top:6px;border-top:0.5px solid var(--dsw-alias-border-l1)}
+		.bdc-where{color:var(--dsw-alias-label-tertiary);font:var(--dsw-font-xxs-12, 12px/18px sans-serif);overflow-wrap:anywhere}
+		.bdc-view{align-self:flex-start;display:inline-flex;align-items:center;gap:2px;height:24px;margin-left:-6px;padding:0 6px;border:0;
+		  border-radius:var(--dsw-radius-sm, 6px);background:none;color:var(--dsw-alias-label-secondary);font:var(--dsw-font-xxs-12, 12px/18px sans-serif);cursor:pointer}
+		.bdc-view:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}
+		.bdc-view:focus-visible,.bdc-toggle:focus-visible{outline:var(--dsw-focus-ring-width, 2px) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));outline-offset:1px}
+		@media (prefers-reduced-motion:reduce){.bdc-toggle svg{transition:none}}
+		`;
+		var iconStyle = { display: "block" };
+		var TITLE_MARK = "
";
+		function CommentIcon() {
+		  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", style: iconStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+		    "path",
+		    {
+		      d: "M3 3.5h10a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H8.2L5.4 13.8a.3.3 0 0 1-.5-.23V11.5H3a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1Z",
+		      stroke: "currentColor",
+		      strokeWidth: "1.2",
+		      strokeLinejoin: "round"
+		    }
+		  ) });
+		}
+		function RequestIcon() {
+		  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", style: iconStyle, children: [
+		    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "2", y: "4", width: "12", height: "7", rx: "2", stroke: "currentColor", strokeWidth: "1.2" }),
+		    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8.5 8.5 11 14l.9-2.1L14 11l-5.5-2.5Z", fill: "currentColor", stroke: "var(--dsw-alias-markdown-code-block, #fff)", strokeWidth: "0.8", strokeLinejoin: "round" })
+		  ] });
+		}
+		function ChevronDown() {
+		  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", style: iconStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 4.5 6 7.5l3-3", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round" }) });
+		}
+		function ChevronRight() {
+		  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", style: iconStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4.5 3 7.5 6l-3 3", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round" }) });
+		}
+		function Card({ title, thread, url, t, openThread }) {
+		  const [open, setOpen] = (0, import_react.useState)(true);
+		  const heading = t("card.title", { title });
+		  const meta = !CLIENT.simple && (thread.where || url);
+		  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bdc-card", "data-comment-id": thread.id, children: [
+		    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bdc-head", children: [
+		      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CommentIcon, {}),
+		      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Heading, { text: heading, title, parts: t("card.title", { title: TITLE_MARK }).split(TITLE_MARK) }),
+		      meta && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", className: "bdc-toggle", "aria-expanded": open, "aria-label": t(open ? "card.less" : "card.more"), onClick: () => setOpen(!open), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronDown, {}) })
+		    ] }),
+		    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bdc-body", children: thread.text }),
+		    meta && open && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bdc-meta", children: [
+		      thread.where && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bdc-where", children: thread.where }),
+		      url && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { type: "button", className: "bdc-view", onClick: () => openThread(url, thread.id), children: [
+		        t("card.view"),
+		        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronRight, {})
+		      ] })
+		    ] })
+		  ] });
+		}
+		function Heading({ text, title, parts }) {
+		  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "bdc-head-text", title: text, children: parts.length === 2 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+		    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: parts[0] }),
+		    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "bdc-head-title", children: title }),
+		    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: parts[1] })
+		  ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "bdc-head-title", children: text }) });
+		}
+		function RequestCardView({ title, request, t }) {
+		  const label = request.label || "Request";
+		  const heading = t("card.request", { title, label });
+		  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bdc-card", "data-request-id": request.id, children: [
+		    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bdc-head", children: [
+		      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RequestIcon, {}),
+		      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Heading, { text: heading, title, parts: t("card.request", { title: TITLE_MARK, label }).split(TITLE_MARK) })
+		    ] }),
+		    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bdc-body", children: request.text })
+		  ] });
+		}
+		function CommentCards({ node, t, openThread }) {
+		  const { title, url, threads, requests } = node.data;
+		  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bdc-row", children: [
+		    threads.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, { title, thread, url, t, openThread }, thread.id)),
+		    (requests ?? []).map((request) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RequestCardView, { title, request, t }, request.id))
+		  ] });
+		}
+		var inject = ["slots", "locale", "uiConversation"];
+		function threadUrl(url, id) {
+		  try {
+		    const at = new URL(url);
+		    at.searchParams.set("comment", id);
+		    return at.href;
+		  } catch {
+		    return url;
+		  }
+		}
+		function apply(ctx) {
+		  ctx.effect(() => {
+		    if (typeof document === "undefined") return () => {
+		    };
+		    const id = `${CLIENT.plugin}/comment-card.css`;
+		    if (document.querySelector(`style[data-plugin-css=${JSON.stringify(id)}]`)) return () => {
+		    };
+		    const tag = document.createElement("style");
+		    tag.dataset.plugin = CLIENT.plugin;
+		    tag.dataset.pluginCss = id;
+		    tag.textContent = CSS;
+		    document.head.appendChild(tag);
+		    return () => tag.remove();
+		  }, `${CLIENT.plugin}: comment card styles`);
+		  ctx.effect(() => ctx.locale.register(NS, { zh, en }), `${CLIENT.plugin}: dictionaries`);
+		  ctx.uiConversation.events.register(definition);
+		  ctx.slots.inject(
+		    "conversation.chat.node",
+		    () => ctx.slots.register(
+		      {
+		        name: "conversation.chat.node",
+		        key: KIND,
+		        locale: NS,
+		        inject: (sessionId) => ({
+		          openThread: (url, threadId) => {
+		            const target = threadUrl(url, threadId);
+		            const sidebar = ctx.get("sidebarRight");
+		            const tabs = ctx.get("sidebarRightTabs");
+		            if (sidebar && tabs?.get("browser") !== void 0) sidebar.openTabIn(sessionId, "browser", { params: { url: target } });
+		            else window.open(target, "_blank", "noopener,noreferrer");
+		          }
+		        })
+		      },
+		      CommentCards
+		    )
+		  );
+		}
+		return module.exports;
+	}
+});