@meiyukichan/dsh-sandore 0.1.2-rc.1 → 0.1.2-rc.2

package/lib/client/AddNodeDialog.d.ts

@@ -1,18 +1,14 @@
 import type { TranslateNS } from '@deepseek-ai/dsh-client-ui-slots';
-/** 目标节点种类。 */
-export type AddNodeKind = 'stage' | 'step';
 /** 新建/绑定的选择结果。 */
 export type AddNodeChoice = 'blank' | 'library';
 /** AddNodeDialog 接收的 props。 */
 export interface AddNodeDialogProps {
     /** 类型化翻译函数（sandore 命名空间）。 */
     t: TranslateNS<'sandore'>;
-    /** 目标节点种类。 */
-    kind: AddNodeKind;
     /** 关闭弹窗。 */
     onClose(): void;
     /** 确认（blank = 新建空白，library = 从库绑定）。 */
     onConfirm(choice: AddNodeChoice): void;
 }
-/** 渲染添加节点弹窗（新建空白 / 从库绑定 二选一）。 */
-export declare function AddNodeDialog({ t, kind, onClose, onConfirm }: AddNodeDialogProps): import("react").JSX.Element;
+/** 渲染「添加 Stage」弹窗（新建空白 / 从库绑定 二选一）。 */
+export declare function AddNodeDialog({ t, onClose, onConfirm }: AddNodeDialogProps): import("react").JSX.Element;

package/lib/client/AddNodeDialog.js

@@ -1,16 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
- * AddNodeDialog：「+ 添加 Stage / + 添加 Step」弹窗（三级分离 plan §6.4）。
+ * AddNodeDialog：「+ 添加 Stage」弹窗（plan §6.4）。
  *
  * 两个来源选项：新建空白（现状行为）/ 从库绑定（打开 LibraryPickerModal 选择）。
- * Step 新建空白沿用现状默认（Shell 命令，类型在详情面板切换），不做重复的类型选择。
+ * Step 已无来源选择（Step 库并入 Microflow 库），故「+ 添加 Step」直接新建空白，
+ * 本弹窗只剩 Stage 一种目标。
  * @module @deepseek-ai/dsh-client-ui-sandore/src/client/AddNodeDialog
  */
 import { useState } from 'react';
 import { Button, Modal } from '@deepseek-ai/dsh-client-ui-primitives';
 import css from './DagEditor.module.css';
-/** 渲染添加节点弹窗（新建空白 / 从库绑定 二选一）。 */
-export function AddNodeDialog({ t, kind, onClose, onConfirm }) {
+/** 渲染「添加 Stage」弹窗（新建空白 / 从库绑定 二选一）。 */
+export function AddNodeDialog({ t, onClose, onConfirm }) {
     const [choice, setChoice] = useState('blank');
-    return (_jsx(Modal, { open: true, onClose: onClose, title: kind === 'stage' ? t('add.stage.title') : t('add.step.title'), closeLabel: t('add.create.cancel'), footer: (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, children: t('add.create.cancel') }), _jsx(Button, { variant: "primary", size: "sm", onClick: () => { onConfirm(choice); }, children: t('add.create.submit') })] })), children: _jsxs("div", { className: css.addNodeDialog, children: [_jsxs("label", { className: css.addNodeOption, children: [_jsx("input", { type: "radio", name: "sandore-add-node-choice", checked: choice === 'blank', onChange: () => { setChoice('blank'); } }), _jsxs("span", { className: css.addNodeOptionBody, children: [_jsx("span", { className: css.addNodeOptionTitle, children: t('add.create.blank') }), kind === 'step' && _jsx("span", { className: css.addNodeOptionHint, children: t('add.create.stepBlank.hint') })] })] }), _jsxs("label", { className: css.addNodeOption, children: [_jsx("input", { type: "radio", name: "sandore-add-node-choice", checked: choice === 'library', onChange: () => { setChoice('library'); } }), _jsx("span", { className: css.addNodeOptionBody, children: _jsx("span", { className: css.addNodeOptionTitle, children: t('add.create.fromLibrary') }) })] })] }) }));
+    return (_jsx(Modal, { open: true, onClose: onClose, title: t('add.microflow.title'), closeLabel: t('cancel'), footer: (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, children: t('cancel') }), _jsx(Button, { variant: "primary", size: "sm", onClick: () => { onConfirm(choice); }, children: t('ok') })] })), children: _jsxs("div", { className: css.addNodeDialog, children: [_jsxs("label", { className: css.addNodeOption, children: [_jsx("input", { type: "radio", name: "sandore-add-node-choice", checked: choice === 'blank', onChange: () => { setChoice('blank'); } }), _jsx("span", { className: css.addNodeOptionBody, children: _jsx("span", { className: css.addNodeOptionTitle, children: t('add.create.blank') }) })] }), _jsxs("label", { className: css.addNodeOption, children: [_jsx("input", { type: "radio", name: "sandore-add-node-choice", checked: choice === 'library', onChange: () => { setChoice('library'); } }), _jsx("span", { className: css.addNodeOptionBody, children: _jsx("span", { className: css.addNodeOptionTitle, children: t('add.create.fromLibrary') }) })] })] }) }));
 }

package/lib/client/ArtifactContentView.d.ts

@@ -0,0 +1,18 @@
+import type { TranslateNS } from '@deepseek-ai/dsh-client-ui-slots';
+import { type ArtifactContent } from './artifact-content.ts';
+/** ArtifactContentView 接收的 props。 */
+export interface ArtifactContentViewProps {
+    /** 类型化翻译函数（sandore 命名空间）。 */
+    readonly t: TranslateNS<'sandore'>;
+    /** 视图模型（`artifactContentOf` 的产物）。 */
+    readonly content: ArtifactContent;
+    /**
+     * 渲染风格。
+     *
+     * `app`（缺省）用于应用内展示；`editor` 用于 C6 自注册 tab —— 它必须与 better-sidebar 自己的
+     * 编辑器 tab 的观感对齐（路径头 + 等宽只读原文），**不允许**把 `.md` 渲染成 Markdown 卡片。
+     */
+    readonly variant?: 'app' | 'editor' | undefined;
+}
+/** 渲染一份展示内容（三处调用点共用；`variant='editor'` 时改用编辑器观感）。 */
+export declare function ArtifactContentView({ t, content, variant }: ArtifactContentViewProps): import("react").JSX.Element;

package/lib/client/ArtifactContentView.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * ArtifactContentView：**应用内展示「产物 / Agent 输出」的唯一渲染组件**。
+ *
+ * ## 为什么只有一个组件
+ * 用户点击产物 / Agent 输出的地方有**三处**（RunView 右栏预览、工具行内嵌导航卡、step 面板
+ * 里的工具行 fileLink），而"打开通道不可见时"的兜底展示必须**三处一致**：同一个组件、
+ * 同一份文案（`locales/{zh,en}.ts` 的 `artifact.*`）、同一套锚点。否则就会出现
+ * "在这个位置点能看到内容、在那个位置点了没反应"的老问题。
+ *
+ * ## 四种呈现（由 `content.state` 决定，`artifact-content.ts` 是唯一判据）
+ * | state | 渲染 |
+ * |---|---|
+ * | `content` | 正文（`.md` 与 Agent 输出走 `MarkdownText`，其余等宽 `<pre>`，可横向滚动 + 折行） |
+ * | `notice` | 中性提示行（「该执行段没有输出文本」/「二进制文件（X），无法在此预览」） |
+ * | `error` | **`role="alert"` 的原因行**（带文件路径）+ 原始 message（有则显示）——L3 的落点 |
+ *
+ * ## 两种风格（`variant`，P14）
+ * - `app`（缺省）= 应用内展示（RunView 右栏 / 工具卡内联 / step 面板内联）：`.md` 走 Markdown；
+ * - `editor` = **向 better-sidebar 的编辑器 tab 对齐**（C6 自注册 tab 专用）：**永不渲染 Markdown**，
+ *   正文一律**等宽只读原文**（`white-space: pre` + 横向滚动），并以**路径头**取代 emoji 元信息行。
+ *   真机报障原文：「点击产物文件后……样式完全不对 ……里面是渲染过的 markdown」，而用户要的是
+ *   它那条 `editor` tab（路径输入 + CodeMirror 原文）。两者只能共用一个组件（同一份取数、同一套
+ *   锚点），差别只允许落在**渲染方式**上。
+ *
+ * ## 锚点（真机 / e2e 断言用）
+ * 根 `data-sandore-artifact-content`；状态与原因码 `data-artifact-state` / `data-artifact-reason`
+ * （e2e 用它区分"显示了内容"与"显示了原因"）；路径行 `data-artifact-path`；正文
+ * `data-artifact-text`；原因行 `data-artifact-notice`；截断提示 `data-artifact-truncated`；
+ * 风格 `data-artifact-variant`；编辑器风格的头行 `data-artifact-editor-head`。
+ * @module @deepseek-ai/dsh-client-ui-sandore/src/client/ArtifactContentView
+ */
+import { MarkdownText, Tooltip } from '@deepseek-ai/dsh-client-ui-primitives';
+import { formatBytesOf } from "./artifact-content.js";
+import { markdownLabels } from "./chat-utils/markdown-labels.js";
+import css from './artifact-content.module.css';
+/**
+ * 原因码 → 文案。
+ *
+ * 为什么用 `switch` 而不是把文案塞进视图模型：`t()` 的键是**字面量联合**（每个键的参数
+ * 形状由字典决定），动态键会丢掉这层类型检查；纯函数只给**原因码**（可单测），
+ * 文案的映射留在组件里并被 `noFallthroughCasesInSwitch` + 穷尽性检查看住。
+ * @param content - 视图模型。
+ * @param t - 翻译函数。
+ * @returns 提示行文案；`undefined` = 这一态不需要提示行。
+ */
+function noticeTextOf(content, t) {
+    /** 路径兜底：没有 path 时用展示名（提示行必须能指认"是哪个东西出问题了"）。 */
+    const path = content.path ?? content.name;
+    switch (content.reason) {
+        case 'empty-text':
+            return t('artifact.notice.emptyText');
+        case 'binary':
+            return content.size === undefined
+                ? t('artifact.notice.binaryNoSize')
+                : t('artifact.notice.binary', { size: formatBytesOf(content.size) });
+        case 'missing':
+            return t('artifact.error.missing', { path });
+        case 'directory':
+            return t('artifact.error.directory', { path });
+        case 'denied':
+            return t('artifact.error.denied', { path });
+        case 'empty-path':
+            return t('artifact.error.emptyPath');
+        case 'no-cwd':
+            return t('artifact.error.noCwd');
+        case 'write-failed':
+            return t('artifact.error.writeFailed', { message: content.message ?? '' });
+        case 'read-failed':
+            return t('artifact.error.readFailed', { message: content.message ?? '', path });
+        case 'open-failed':
+            return t('artifact.error.openFailed', { message: content.message ?? '', path });
+        case 'no-sidebar-session':
+            // better-sidebar 在场但**还没有活跃会话** ⇒ `openTab` 只会静默 return（没有可落地的面板）。
+            // 这条文案必须能指认"为什么看不到"，否则它就退化成"点了没反应"。
+            return t('artifact.error.noSidebarSession', { path });
+        case 'no-channel':
+        case 'outside-workspace':
+        case 'sandore-tab':
+            // 这三个只在"有正文"时才是正常路径（那时 state='content'，本函数的结果不被使用）；
+            // 落到这里说明**既没打开也没读到**（如内嵌读取通道未装配、自注册 tab 也没取到内容）
+            // ⇒ 必须给出可见原因。
+            return t('artifact.error.noChannel', { path });
+    }
+}
+/** 渲染一份展示内容（三处调用点共用；`variant='editor'` 时改用编辑器观感）。 */
+export function ArtifactContentView({ t, content, variant = 'app' }) {
+    const notice = content.state === 'content' ? undefined : noticeTextOf(content, t);
+    const alert = content.state === 'error';
+    /*
+     * `editor` 风格 = **只读原文**（用户点名的观感）：正文一律走等宽 `<pre>`，**绝不**走 Markdown。
+     * 判据只改这里的这一处（`artifact-content.ts` 的 `body` 仍是"这是什么文件"的唯一判据，
+     * 应用内展示继续按它分流），锚点与提示行逻辑两边共用。
+     */
+    const editor = variant === 'editor';
+    return (_jsxs("div", { className: css.root, "data-sandore-artifact-content": true, "data-artifact-variant": variant, "data-artifact-kind": content.kind, "data-artifact-state": content.state, "data-artifact-reason": content.reason, children: [editor ? (_jsxs("div", { className: css.editorHead, "data-artifact-editor-head": true, children: [_jsx(Tooltip, { label: content.path ?? content.name, side: "bottom", delayMs: 500, children: _jsx("span", { className: css.editorPath, "data-artifact-path": true, children: content.path ?? content.name }) }), content.size !== undefined && (_jsx("span", { className: css.editorSize, "data-artifact-size": true, children: formatBytesOf(content.size) }))] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: css.meta, "data-artifact-meta": true, children: [_jsxs("span", { children: [content.kind === 'result' ? '📝' : '📄', " ", content.kind === 'result' ? t('run.result') : t('run.artifact')] }), content.size !== undefined && (_jsx("span", { "data-artifact-size": true, children: formatBytesOf(content.size) }))] }), content.path !== undefined && (_jsx(Tooltip, { label: content.path, side: "bottom", delayMs: 500, children: _jsx("div", { className: css.path, "data-artifact-path": true, children: content.path }) }))] })), notice !== undefined && (_jsx("p", { className: alert ? css.error : css.notice, ...(alert ? { role: 'alert' } : {}), "data-artifact-notice": true, children: notice })), content.truncated === true && content.text !== undefined && (_jsx("p", { className: css.notice, "data-artifact-truncated": true, children: t('artifact.notice.truncated', {
+                    size: formatBytesOf(content.limit ?? content.text.length),
+                    total: formatBytesOf(content.size ?? content.text.length),
+                }) })), content.body === 'markdown' && !editor && content.text !== undefined && (_jsx("div", { className: css.text, "data-artifact-text": true, children: _jsx(MarkdownText, { text: content.text, labels: markdownLabels(t) }) })), (editor || content.body === 'text') && content.text !== undefined && (_jsx("pre", { className: editor ? css.editorPre : css.pre, "data-artifact-text": true, children: content.text }))] }));
+}

package/lib/client/DagEditor.d.ts

@@ -1,8 +1,33 @@
 import '@xyflow/react/dist/style.css';
 import './reactflow-theme.css';
 import type { TranslateNS } from '@deepseek-ai/dsh-client-ui-slots';
+import type { MicroflowDefinition, MicroflowRecord } from '@meiyukichan/dsh-sandore/schema';
 import { type SaveDefinition } from './sandore-save.ts';
 import type { WorkflowOverlayFace } from './workflow-face.ts';
+/**
+ * 「库条目模式」的 props（第 6 条：点微流程行 → 右侧渲染**子 DAG**，不再弹 YAML 弹窗）。
+ *
+ * 复用同一个 `DagEditor`/`DagCanvas` 切一个模式（方案 A），**否决**抽两套渲染：
+ * `DagCanvas`、`StepEditor`、`MicroflowDescriptionField`、`dagreLayout`、增删节点/连线、
+ * YAML 预览、Toast、Ctrl+S 全部复用。数据面**零新增 RPC**：
+ * `listMicroflows` → `getMicroflow(id)` → `upsertMicroflow(serializeMicroflowYaml(record))`。
+ */
+export interface DagEditorLibraryEntryProps {
+    /** 库条目 id（≡ microflow id，不变量 I7：`sourceLib.id === microflow.id`）。 */
+    readonly id: string;
+    /** 已拉取的库条目记录（含 `steps`）。 */
+    readonly record: MicroflowRecord;
+    /**
+     * 保存**这一条库条目**：实现方必须走 `face.upsertMicroflow(serializeMicroflowYaml(record))`。
+     *
+     * ⚠️ 这是「不把库条目写坏成工作流定义」三重防护的第 2 重：库模式**绝不**复用 `props.save`
+     * （`SaveDefinition` 的第一站是 `createDefinition`/`updateYaml`，会写 `definitions` 表）。
+     * 独立 prop ⇒ 想误接也得先**显式**把它接到工作流保存通道上，而那正是单测抛错桩要抓的。
+     */
+    save(record: MicroflowRecord): Promise<void>;
+    /** 次级入口：打开「编辑 YAML」弹窗（`LibraryEditModal` 的新触发点之一）。 */
+    onEditYaml(): void;
+}
 /** DagEditor 接收的最小业务 props：初始定义 + 保存回调 + face + locale。 */
 export interface DagEditorProps {
     /** 类型化的翻译函数（sandore 命名空间）。 */
@@ -17,6 +42,47 @@ export interface DagEditorProps {
     onSaved?: (id: string) => void;
     /** 业务 face（「▶ 测试运行」复用 NewInstanceDialog 选工作目录后启动实例，无 job 概念）。 */
     face: WorkflowOverlayFace;
+    /**
+     * **库条目模式**（第 6 条）：给定时本编辑器渲染**一条库条目**的子 DAG，而不是工作流 DAG。
+     * 省略 = 工作流模式（逐值不变）。
+     */
+    libraryEntry?: DagEditorLibraryEntryProps | undefined;
+    /**
+     * 该定义是否**只读**（overlay 拉取的只读集合命中它；新建未保存时恒 false）。
+     *
+     * 只读 = 模型不可编辑 **且** UI 不可编辑（§5.8）：这里让**保存按钮 `disabled`**，
+     * 详情面板出现开关与一行说明。**不做全表单只读**（成本高、且会挡住「复制内容到新建」的
+     * 正常用法）——画布与字段仍可编辑，保存会被 Host 以 `READONLY` 拒绝并把原因原样显示
+     * （Ctrl+S 走的就是这条：它不经按钮的 `disabled`，正好是「保存被拒并显示原因」）。
+     */
+    readonly?: boolean | undefined;
+    /**
+     * 只读开关写入（按 id 写入，成功后就地刷新宿主集合；失败原样抛出由面板显示原因）。
+     * 缺省 = 开关不可用（渲染为 disabled）——新建未保存的定义没有 id，也走这一支。
+     */
+    setReadonly?: ((id: string, readonly: boolean) => Promise<void>) | undefined;
 }
+/**
+ * microflow 详情里的**可选描述**输入（紧接名称行 / {@link LibSyncBar} 之后）。
+ *
+ * ## 为什么是 textarea 而不是单行 input
+ * 描述是"给人看的一段话"，与 step 的 promptText 同属大段文本 ⇒ 复用同一个
+ * `ImeSafeTextarea`（composition 守卫与 prompt 完全同一套，中文输入不会被打断）。
+ *
+ * ## 空值语义（用户要求的不变量，落点在纯函数里）
+ * 清空 ⇒ 走 {@link withMicroflowDescription} **移除 `description` 键**（不写空串）——
+ * 这样"本来没有描述的旧 yaml 打开-保存"不会凭空多出一个 `description: ''`。
+ *
+ * ## 为什么下面挂一句说明
+ * 描述是**定义侧内容**（`lib-sync.ts` 的 `microflowContent` 参与内容哈希）⇒ 改了它再保存，
+ * 六态徽标会从「已同步」变成「本地领先」（保存路径随后按既有语义自动回写库条目）。
+ * 这是**预期行为**，不写一句说明会被当成 bug 报上来。
+ */
+export declare function MicroflowDescriptionField({ microflow, onChange, t }: {
+    readonly microflow: MicroflowDefinition;
+    /** 提交变更后的整份 microflow 定义（宿主按 id 就地替换）。 */
+    readonly onChange: (next: MicroflowDefinition) => void;
+    readonly t: TranslateNS<'sandore'>;
+}): import("react").JSX.Element;
 /** 渲染 DagEditor（两层 DAG 画布 + 编辑侧栏 + YAML 预览）。 */
-export declare function DagEditor({ t, initialYaml, initialId, save, onSaved, face }: DagEditorProps): import("react").JSX.Element;
+export declare function DagEditor({ t, initialYaml, initialId, save, onSaved, face, libraryEntry, readonly, setReadonly }: DagEditorProps): import("react").JSX.Element;