@xiaoso/dsh-workflow-lite 0.0.0-stage → 0.1.0

package/lib/types/client/ui/LinkRow.d.ts

@@ -0,0 +1,31 @@
+/**
+ * dsh-workflow-lite — 连接清单的一行（模板的属性面板与实例的右栏共用）。
+ *
+ * 上面一行：方向箭头、对面那一步的图标与名字、回头线的环、条件小标，行尾可放一样东西
+ * （实例里是对面那一步的状态）；下面一行是这条线交了什么。整行点下去选中这条线。
+ *
+ * @module @xiaoso/dsh-workflow-lite/client/ui/LinkRow
+ */
+import type { WorkflowEdge, WorkflowNode } from '../../shared/types.ts';
+import type { T } from '../i18n.ts';
+/** 条件的小标（和画布上那条线同色）；`always` 时只有要求才画。 */
+export declare function WhenChip(props: {
+    t: T;
+    when: string | undefined;
+    always?: boolean;
+}): React.JSX.Element | null;
+export declare function LinkRow(props: {
+    t: T;
+    edge: WorkflowEdge;
+    direction: 'in' | 'out';
+    /** 对面那个节点（找不到时按 id 显示）。 */
+    other: WorkflowNode | undefined;
+    otherId: string;
+    back: boolean;
+    /** 这次走过没有（实例里）；不给 = 不表态。 */
+    taken?: boolean | undefined;
+    takenLabel?: string | undefined;
+    end?: React.ReactNode;
+    testId: string;
+    onPick(): void;
+}): React.JSX.Element;

package/lib/types/client/ui/Markdown.d.ts

@@ -0,0 +1,21 @@
+/**
+ * dsh-workflow-lite — 一个小而安全的 Markdown 渲染器（计划预览用）。
+ *
+ * 为什么不引库：模块加载器只认冻结的平台 externals，引进来的库要整个打进 bundle；而计划
+ * 只用到 Markdown 的一小块（标题、段落、粗体、行内代码、表格、列表、引用、代码块、分隔线）。
+ *
+ * **只产出 React 元素，从不拼 HTML 字符串**：提示词是用户写的任意文本，走 `innerHTML`
+ * 就是一个注入口。链接只认 http(s)。
+ *
+ * 换行按"一行就是一行"处理（GitHub 评论区那种），而不是 CommonMark 的"单个换行算空格"——
+ * 提示词与计划都是按行写的，把它们挤成一段反而难读。
+ *
+ * @module @xiaoso/dsh-workflow-lite/client/ui/Markdown
+ */
+import type { ReactNode } from 'react';
+/** 把一行文字渲染成行内元素（代码里的东西原样保留，不再往里解析）。 */
+export declare function renderInline(text: string, key?: string): ReactNode[];
+export declare function Markdown(props: {
+    text: string;
+    className?: string;
+}): React.JSX.Element;

package/lib/types/client/ui/NodeHeads.d.ts

@@ -0,0 +1,47 @@
+/**
+ * dsh-workflow-lite — 各种东西的右栏标题栏：步骤、资源、输入、连线、概览。
+ *
+ * 模板的属性面板、实例右栏的「运行」与「编辑」都用这几个，所以实例里两边切换时标题栏一点不动。
+ * 右边的 `extra` 放在关闭按钮左边（实例里是「运行 / 编辑」的切换）。
+ *
+ * @module @xiaoso/dsh-workflow-lite/client/ui/NodeHeads
+ */
+import type { GraphAnalysis } from '../../shared/graph.ts';
+import type { InputNode, ResourceNode, StepNode, WorkflowDocument, WorkflowEdge } from '../../shared/types.ts';
+import type { LocaleKey, T } from '../i18n.ts';
+import type { Edit } from '../model/editor.ts';
+import { type IconName } from './Icon.tsx';
+interface HeadProps {
+    t: T;
+    /** 关闭按钮左边的东西。 */
+    extra?: React.ReactNode;
+    onClose(): void;
+    closeTestId?: string;
+}
+export declare function StepHead(props: HeadProps & {
+    node: StepNode;
+    onEdit(edit: Edit): void;
+    onSeal(): void;
+}): React.JSX.Element;
+export declare function ResourceHead(props: HeadProps & {
+    node: ResourceNode;
+    onEdit(edit: Edit): void;
+    onSeal(): void;
+}): React.JSX.Element;
+export declare function InputHead(props: HeadProps & {
+    node: InputNode;
+}): React.JSX.Element;
+/** 线的标题与图标（右栏标题栏、顶栏「在看什么」用）。 */
+export declare function edgeHead(doc: WorkflowDocument, analysis: GraphAnalysis, edge: WorkflowEdge): {
+    icon: IconName;
+    title: LocaleKey;
+};
+export declare function EdgeHead(props: HeadProps & {
+    doc: WorkflowDocument;
+    analysis: GraphAnalysis;
+    edge: WorkflowEdge;
+}): React.JSX.Element;
+/** 概览的图标块（右栏标题栏与顶栏「在看什么」共用）。 */
+export declare function OverviewMark(): React.JSX.Element;
+export declare function OverviewHead(props: HeadProps): React.JSX.Element;
+export {};

package/lib/types/client/ui/NoteDrawer.d.ts

@@ -0,0 +1,21 @@
+/**
+ * dsh-workflow-lite — 查看框里的「说明」：标题行一个开关，点开从右边滑出一栏，盖在正文上面。
+ *
+ * 说明（产出文件的生成要求、步骤的描述）常常很长，放在正文上面会一直占着一大块，HTML 页面还会被挤出
+ * 两层滚动条；收在开关里，要看时再拉出来，正文不跟着重排。
+ *
+ * @module @xiaoso/dsh-workflow-lite/client/ui/NoteDrawer
+ */
+import type { T } from '../i18n.ts';
+/** 标题行里的开关。 */
+export declare function NoteToggle(props: {
+    t: T;
+    open: boolean;
+    onToggle(): void;
+}): React.JSX.Element;
+/** 滑出来的那一栏；Esc 先收起它，再按一次才关查看框。 */
+export declare function NoteDrawer(props: {
+    t: T;
+    text: string;
+    onClose(): void;
+}): React.JSX.Element;

package/lib/types/client/ui/OpenWith.d.ts

@@ -0,0 +1,21 @@
+/**
+ * dsh-workflow-lite — 「用其他程序打开」按钮。
+ *
+ * 点开列出系统里能打开这类文件的程序（默认的那个排第一并标出来），最后一项是在文件管理器里显示——
+ * 和 DSH 文档预览右上角那个按钮一样。宿主没有桌面能力（远程访问、没接上服务）或文件还不在时不出现。
+ *
+ * @module @xiaoso/dsh-workflow-lite/client/ui/OpenWith
+ */
+import type { Desktop } from '../app/desktop.ts';
+import type { T } from '../i18n.ts';
+export interface OpenWithProps {
+    t: T;
+    desktop: Desktop | undefined;
+    /** 文件的绝对路径；文件还不在时为 `null`（系统程序那一半不出现）。 */
+    path: string | null;
+    /** 只留图标（文件面板的标题行里用）；缺省是「图标 + 字 + 箭头」。 */
+    compact?: boolean;
+    /** 打开失败时告诉调用方（给人看的一句话）。 */
+    onError?: (text: string) => void;
+}
+export declare function OpenWith(props: OpenWithProps): React.JSX.Element | null;

package/lib/types/client/ui/Outputs.d.ts

@@ -0,0 +1,61 @@
+/**
+ * dsh-workflow-lite — 产出文件：面板里的清单，与编辑 / 查看单个文件的模态框。
+ *
+ * 清单只负责"一眼看全"：每个文件一行，路径 + 生成规则的头两行。要改哪一个就点它，
+ * 在模态框里有完整的空间写路径和规则——面板那一条窄栏里塞两个输入框加一个大文本框，
+ * 多来几个文件就挤成一团。模态框里的改动"完成"时才一次交出去（一次改动 = 一条撤销步），
+ * 交出去的永远是合法的值。
+ *
+ * 画布卡片上的产出浮窗、步骤面板、「我的步骤」编辑器、内置步骤的只读详情，都走这里。
+ *
+ * @module @xiaoso/dsh-workflow-lite/client/ui/Outputs
+ */
+import type { NodeData, OutputSpec } from '../../shared/types.ts';
+import type { T } from '../i18n.ts';
+/** 要从外面（画布卡片的浮窗）打开哪一项：`seq` 每次请求都变，同一项点两次也能再开。 */
+export interface OutputRequest {
+    index: number | 'new';
+    seq: number;
+}
+/**
+ * 产出：不声明 / 写入文件 / 不产出；「写入文件」下面是文件清单。
+ * 步骤面板与「我的步骤」编辑器共用它。
+ */
+export declare function OutputField(props: {
+    t: T;
+    value: NodeData['output'];
+    /** 切到「写入文件」或新加一项时预填的文件名。 */
+    suggest: string;
+    /** 这些产出属于谁（模态框的副标题）。 */
+    owner: string;
+    /** 工作流设置里的产出根目录：编辑框里据此预览最终写到哪。 */
+    root?: string | undefined;
+    onChange(value: NodeData['output']): void;
+    request?: OutputRequest | null;
+    onRequestDone?: () => void;
+}): React.JSX.Element;
+/** 只读地列出产出：点一个文件，在模态框里看它的完整生成规则。 */
+export declare function OutputList(props: {
+    t: T;
+    output: NodeData['output'];
+    owner: string;
+}): React.JSX.Element;
+/**
+ * 编辑（或新加）一个产出文件：路径 + 生成规则。步骤模板的产出清单用它；
+ * 画布上给步骤「新建产出文件」也用它（`title` 换成那边的说法）。
+ */
+export declare function OutputEditor(props: {
+    title?: string;
+    t: T;
+    owner: string;
+    root: string | undefined;
+    /** `null` = 新加一项。 */
+    initial: OutputSpec | null;
+    suggest: string;
+    /** 同一步骤里其它文件的路径（查重名用）。 */
+    taken: readonly string[];
+    canRemove: boolean;
+    onSave(spec: OutputSpec): void;
+    onRemove(): void;
+    onClose(): void;
+}): React.JSX.Element;

package/lib/types/client/ui/PanelHead.d.ts

@@ -0,0 +1,21 @@
+/**
+ * dsh-workflow-lite — 右栏的标题栏：模板的属性面板与实例的右栏共用，两边长得一样。
+ *
+ * 左边一个图标块（步骤的外观、资源 / 输入 / 连线的图标；实例里是「在看什么」的切换），中间是名字，
+ * 名字下面一行小字是 ID（点一下复制，复制图标悬停才露），右边是关闭。
+ *
+ * @module @xiaoso/dsh-workflow-lite/client/ui/PanelHead
+ */
+import type { T } from '../i18n.ts';
+export declare function PanelHead(props: {
+    t: T;
+    lead: React.ReactNode;
+    /** 名字：能改的是输入框，只看的是一段字。 */
+    title: React.ReactNode;
+    /** 节点 id（连线、概览没有）。 */
+    id?: string | undefined;
+    /** 名字右边的小标（输入的题型）。 */
+    extra?: React.ReactNode;
+    onClose(): void;
+    closeTestId?: string;
+}): React.JSX.Element;

package/lib/types/client/ui/PlanDialog.d.ts

@@ -0,0 +1,18 @@
+/**
+ * dsh-workflow-lite — 「预览计划」对话框：把当前工作流编译成派发计划给人看。
+ *
+ * 两个版本：「给模型」就是执行时模型拿到的那份（提示词以任务描述路径引用，工作区按本会话的写）；
+ * 「给人看」把提示词内联，适合通读与存档。实例 id 执行时才有，计划里先留着 `{instance}`。
+ * 打开前会先把没落盘的改动写下去——编译读的是磁盘。
+ *
+ * @module @xiaoso/dsh-workflow-lite/client/ui/PlanDialog
+ */
+import type { PlanBuildResponse } from '../../shared/wire.ts';
+import type { T } from '../i18n.ts';
+export declare function PlanDialog(props: {
+    t: T;
+    name: string;
+    build(full: boolean): Promise<PlanBuildResponse>;
+    onLocate(nodeId: string): void;
+    onClose(): void;
+}): React.JSX.Element;

package/lib/types/client/ui/PreviewCard.d.ts

@@ -0,0 +1,38 @@
+/**
+ * dsh-workflow-lite — 右栏里的一段长文字：只露前几行，点这块或标题行的 👁 在弹窗里看全文（可复制）。
+ *
+ * 实例里步骤的提示词、摘要、失败原因，连线的上游摘要与交接说明，模板里步骤的提示词都用它，长短不一但样子一致。
+ * 能改的（给了 `edit`）标题行多一支笔，弹窗里多一个「编辑」：大段文字都在弹窗里改，右栏只露一截。
+ * 空着的能改的那块写着占位，点一下直接进「编辑」。
+ *
+ * @module @xiaoso/dsh-workflow-lite/client/ui/PreviewCard
+ */
+import type { Desktop } from '../app/desktop.ts';
+import type { T } from '../i18n.ts';
+import { type DocEdit } from './DocViewer.tsx';
+/** 能改时怎么交出去。 */
+export interface PreviewEdit extends Omit<DocEdit, 'start'> {
+    /** 弹窗关上（一次编辑结束）：断开撤销合并。 */
+    onSeal?(): void;
+}
+export declare function PreviewCard(props: {
+    t: T;
+    /** 小标题（可以带改过的小圆点）。 */
+    label: React.ReactNode;
+    text: string;
+    /** 弹窗：标题、左边的图标块、标题下面一行、收在「说明」开关里的说明。 */
+    name: string;
+    badge: React.ReactNode;
+    meta: string;
+    note?: string;
+    copyLabel: string;
+    desktop: Desktop | undefined;
+    testId: string;
+    /** 露几行（缺省 4）。 */
+    lines?: number;
+    /** 卡片下面的一行说明。 */
+    help?: React.ReactNode;
+    edit?: PreviewEdit;
+    /** 一出来就打开弹窗、进「编辑」（刚加的空白步骤写提示词）。 */
+    autoEdit?: boolean;
+}): React.JSX.Element;

package/lib/types/client/ui/QuickAdd.d.ts

@@ -0,0 +1,30 @@
+/**
+ * dsh-workflow-lite — 就地添加步骤的小菜单。
+ *
+ * 三个入口共用它：双击画布空白处、点步骤右侧的「＋」、把连线拖到空白处松手。
+ * 后两种会把新步骤顺手连在来源后面。从步骤出发时前两项是「产出文件」（放着这一步写的文件的资源卡）和
+ * 「用户输入」（执行前问用户、回答交给这一步）；从资源卡、输入卡拖出来时只列步骤（新步骤读它）；
+ * 在空白处还能放一张空的资源卡或输入卡。
+ *
+ * @module @xiaoso/dsh-workflow-lite/client/ui/QuickAdd
+ */
+import type { TemplateEntry } from '../../shared/types.ts';
+import type { T } from '../i18n.ts';
+import { type StepSource } from '../model/library.ts';
+export declare function QuickAdd(props: {
+    t: T;
+    /** 相对视图根的坐标。 */
+    at: {
+        x: number;
+        y: number;
+    };
+    bounds: {
+        width: number;
+        height: number;
+    };
+    templates: readonly TemplateEntry[];
+    /** 从哪儿来：步骤的「＋」/ 资源卡、输入卡拖出来的线 / 空白处。 */
+    origin: 'step' | 'resource' | 'input' | 'none';
+    onPick(source: StepSource): void;
+    onClose(): void;
+}): React.JSX.Element;

package/lib/types/client/ui/ResourceItemDialog.d.ts

@@ -0,0 +1,33 @@
+/**
+ * dsh-workflow-lite — 编辑（或新加）资源里的一项：模态框。
+ *
+ * 面板里的清单一行只放名字和位置；值、说明、「浏览」「从清单选」这些交互都在这里，有地方好好写。
+ * - 文件 / 文件夹：路径 +「浏览」（主机上选）；下面写出实际位置（相对路径看有没有步骤写它）。
+ * - 网址：一行网址，旁边能直接打开看一眼。
+ * - Skill：skill 名 +「从清单选」；DSH 认得这个名字就把它的一句话说明带出来，还能点开看 SKILL.md。
+ * - 自定义：一大块文字，就是一段原样交给执行者的提示词（它本身就是正文，没有说明）。
+ * 「完成」时才一次交出去（一次改动 = 一条撤销步），交出去的永远是写法合法、不重复的一项。
+ *
+ * @module @xiaoso/dsh-workflow-lite/client/ui/ResourceItemDialog
+ */
+import type { ResourceItem, ResourceKind } from '../../shared/types.ts';
+import type { HostAccess } from '../app/host.ts';
+import type { T } from '../i18n.ts';
+export declare function ResourceItemDialog(props: {
+    t: T;
+    kind: ResourceKind;
+    /** `null` = 新加一项。 */
+    initial: ResourceItem | null;
+    /** 属于哪个资源（副标题）。 */
+    owner: string;
+    host: HostAccess;
+    /** 有步骤写这个资源（相对路径落在产出根目录下）。 */
+    written: boolean;
+    /** 产出根目录（还没换实例 id；写在工作区根时为 `undefined`）。 */
+    root: string | undefined;
+    /** 同一资源里的其它项（查重）。 */
+    others: readonly ResourceItem[];
+    onSave(item: ResourceItem): void;
+    onRemove?: (() => void) | undefined;
+    onClose(): void;
+}): React.JSX.Element;

package/lib/types/client/ui/ResourceItems.d.ts

@@ -0,0 +1,30 @@
+/**
+ * dsh-workflow-lite — 资源里的内容：面板里的紧凑清单 + 「添加」菜单。
+ *
+ * 一项一行，只放「一眼看清」的东西：种类图标、名字、位置（路径 / 网址 / 种类），有说明的在行尾挂个小标。
+ * 要看、要改就点这一行，在模态框里编辑（{@link ResourceItemDialog}）；悬停时行尾浮出「移除」。
+ *
+ * 添加：点「添加内容」弹出一个小菜单——
+ * - 文件、文件夹：直接打开主机上的选择框，可以一次选好几个；
+ * - Skill：打开会话里的 agent 能用的 skill 清单，可以一次勾好几个、点眼睛看 SKILL.md；
+ * - 网址、自定义、手填路径（还不存在的文件，比如产出）：打开编辑框，写好了才加进来。
+ * 和已有的重复的不再加。
+ *
+ * @module @xiaoso/dsh-workflow-lite/client/ui/ResourceItems
+ */
+import type { ResourceItem } from '../../shared/types.ts';
+import type { HostAccess } from '../app/host.ts';
+import type { T } from '../i18n.ts';
+export declare function ResourceItems(props: {
+    t: T;
+    items: readonly ResourceItem[];
+    host: HostAccess;
+    /** 资源的显示名（编辑框的副标题）。 */
+    owner: string;
+    /** 有步骤写这个资源（相对路径落在产出根目录下）。 */
+    written: boolean;
+    /** 产出根目录（还没换实例 id；写在工作区根时为 `undefined`）。 */
+    root: string | undefined;
+    /** 改内容：整份换掉。一次改动 = 一条撤销步。 */
+    onChange(items: ResourceItem[]): void;
+}): React.JSX.Element;

package/lib/types/client/ui/ResourcePanel.d.ts

@@ -0,0 +1,26 @@
+/**
+ * dsh-workflow-lite — 选中资源卡时的属性面板。
+ *
+ * 从上到下：名字（标题栏里直接改）、ID、描述（只在卡片上显示，不进计划）、内容（一项一行，点开在模态框里改）、
+ * 写它的步骤（每个带整份写出 / 在原文件上更新的开关）、读它的步骤。一条线都没连时写明「交给整个工作流」。
+ *
+ * @module @xiaoso/dsh-workflow-lite/client/ui/ResourcePanel
+ */
+import type { ResourceNode, WorkflowDocument } from '../../shared/types.ts';
+import type { HostAccess } from '../app/host.ts';
+import type { T } from '../i18n.ts';
+import { type Edit, type Selection } from '../model/editor.ts';
+import type { FocusFile } from './Handoff.tsx';
+export declare function ResourcePanel(props: {
+    t: T;
+    doc: WorkflowDocument;
+    node: ResourceNode;
+    host: HostAccess;
+    onEdit(edit: Edit): void;
+    onSelect(selection: Selection): void;
+    onSeal(): void;
+    onFocusFile: FocusFile;
+    onRemove(id: string): void;
+    /** 标题栏里关闭按钮左边的切换（实例视图里「运行 / 编辑」）。 */
+    tabs?: React.ReactNode;
+}): React.JSX.Element;

package/lib/types/client/ui/Resources.d.ts

@@ -0,0 +1,43 @@
+/**
+ * dsh-workflow-lite — 选中步骤时它连着的资源，与连着资源的线。
+ *
+ * - {@link StepResourcesField}：选中步骤时，"它写哪些资源、读哪些资源"，还有交给整个工作流的那些；
+ *   能新建一个产出文件、关联图里已有的资源；
+ * - {@link ResourceEdgeBody}：选中一条连着资源的线时，写入方式或读取说明；
+ * - {@link ModeToggle}：整份写出 / 在原文件上更新的小开关（资源面板里写它的步骤也用它）。
+ *
+ * 行上悬停 = 画布高亮这个资源的上下游；点一行 = 选中那张卡。
+ *
+ * @module @xiaoso/dsh-workflow-lite/client/ui/Resources
+ */
+import type { ResourceNode, StepNode, WorkflowDocument, WorkflowEdge } from '../../shared/types.ts';
+import type { T } from '../i18n.ts';
+import { type Edit, type Selection } from '../model/editor.ts';
+import type { FocusFile } from './Handoff.tsx';
+/** 资源的小图标：只有一项时用那一项的种类图标，否则是一叠。 */
+export declare function ResourceIcon(props: {
+    resource: ResourceNode;
+    size?: number;
+}): React.JSX.Element;
+/** 资源的一行摘要：第一项的写法，多项时加上「等 N 项」。 */
+export declare function resourceSummary(t: T, resource: ResourceNode): string;
+export declare function StepResourcesField(props: {
+    t: T;
+    doc: WorkflowDocument;
+    step: StepNode;
+    onEdit(edit: Edit): void;
+    onSelect(selection: Selection): void;
+    onFocusFile: FocusFile;
+}): React.JSX.Element;
+/** 写入方式：整份写出 / 在原文件上更新（两格的小开关）。 */
+export declare function ModeToggle(props: {
+    t: T;
+    update: boolean;
+    onChange(update: boolean): void;
+}): React.JSX.Element;
+export declare function ResourceEdgeBody(props: {
+    t: T;
+    edge: WorkflowEdge;
+    kind: 'write' | 'read';
+    onEdit(edit: Edit): void;
+}): React.JSX.Element;

package/lib/types/client/ui/RunDraftBar.d.ts

@@ -0,0 +1,35 @@
+/**
+ * dsh-workflow-lite — 实例视图底部的草稿栏：「已改 x 处 · 改动清单 · 给模型的说明 · 通知模型（开关）· 放弃 · 保存」。
+ *
+ * 图的改动与状态的改动攒在一起：清单里图的在前（一处一行），状态的在后（一个字段一行），每行都能单独撤回；
+ * 冲突（模型同时改了同一个字段）排在最前面，让用户选。保存不了的时候按钮按住，悬停说明原因。
+ * 「通知模型」默认开着；关掉就只保存。「放弃」要二次确认，确认卡浮在按钮旁边，栏里的东西不挪位。
+ *
+ * @module @xiaoso/dsh-workflow-lite/client/ui/RunDraftBar
+ */
+import type { GraphChange } from '../../shared/graphDiff.ts';
+import type { WorkflowDocument } from '../../shared/types.ts';
+import type { Run } from '../app/useRuns.ts';
+import type { T } from '../i18n.ts';
+/** 清单里图的一行。 */
+export interface DraftLine {
+    key: string;
+    text: React.ReactNode;
+    onUndo(): void;
+}
+/** 图的一处改动写成清单里的一行：「<b>审查</b> · 改了提示词、名称」。 */
+export declare function graphLine(t: T, change: GraphChange, base: WorkflowDocument, doc: WorkflowDocument): React.ReactNode;
+export declare function DraftBar(props: {
+    t: T;
+    current: Run;
+    /** 图的改动（排在状态的改动前面）。 */
+    graph: readonly DraftLine[];
+    /** 改了几处：图一处一项，状态按对象算。 */
+    count: number;
+    /** 保存不了的原因（图有问题、改完的状态对不上）；`null` = 能存。 */
+    blocked: string | null;
+    /** 右栏开着没有（开着就让到右栏左边）。 */
+    panel: boolean;
+    onSave(): void;
+    onDiscard(): void;
+}): React.JSX.Element;

package/lib/types/client/ui/RunEdge.d.ts

@@ -0,0 +1,29 @@
+/**
+ * dsh-workflow-lite — 实例视图右栏：选中一条线。
+ *
+ * 和模板里选中连线看到的一样，换成只读、带上本次运行：
+ * - 两端（带各自的状态，点一下到那一步 / 那张卡）；
+ * - 一张小表：**状态**（已流转 / 未流转，下面一行是依据：条件线看上游的判定）、
+ *   **条件**（步骤之间的线）、**交接**（执行结果 / 只管先后）；连资源的线是写入方式或读取；
+ * - **上游摘要**、**交接说明**：只露几行，点开看全文——下游拿到的就是它们；
+ * - 用户输入的线：本次的回答；回头线说明在循环里、目标做到第几轮。
+ *
+ * @module @xiaoso/dsh-workflow-lite/client/ui/RunEdge
+ */
+import type { GraphAnalysis } from '../../shared/graph.ts';
+import type { RunState } from '../../shared/runState.ts';
+import type { InputAnswer, WorkflowDocument, WorkflowEdge } from '../../shared/types.ts';
+import type { Desktop } from '../app/desktop.ts';
+import type { T } from '../i18n.ts';
+export declare function RunEdgeDetail(props: {
+    t: T;
+    snapshot: WorkflowDocument;
+    analysis: GraphAnalysis;
+    edge: WorkflowEdge;
+    state: RunState | null;
+    /** 本次经过的线；不记进度时为 `null`。 */
+    taken: ReadonlySet<string> | null;
+    answers: Readonly<Record<string, InputAnswer>> | undefined;
+    desktop: Desktop | undefined;
+    onSelectNode(id: string): void;
+}): React.JSX.Element;

package/lib/types/client/ui/RunFiles.d.ts

@@ -0,0 +1,24 @@
+/**
+ * dsh-workflow-lite — 实例视图里步骤详情的「产出 / 读取」：它写哪些、读哪些资源；
+ * 悬停在画布上高亮那张卡，点一下选中它（选中资源卡后的右栏见 `RunResource.tsx`）。
+ *
+ * @module @xiaoso/dsh-workflow-lite/client/ui/RunFiles
+ */
+import type { ResourceNode, WorkflowDocument } from '../../shared/types.ts';
+import type { T } from '../i18n.ts';
+/**
+ * 资源里一个文件 / 文件夹在工作区里的路径（实例的快照里产出根目录已换上实例 id）：
+ * 有步骤写它时相对路径拼上产出根目录，只被读时相对工作区。
+ */
+export declare function itemDisplayPath(doc: WorkflowDocument, node: ResourceNode, index: number): string;
+export declare function StepResourceList(props: {
+    t: T;
+    snapshot: WorkflowDocument;
+    step: string;
+    /** 模型在状态文件里报告的产出（可能有图里没画出来的）。 */
+    reported: readonly string[];
+    made: Readonly<Record<string, readonly (boolean | null)[]>>;
+    onSelectResource(id: string): void;
+    onFocusFile(id: string | null): void;
+    onViewPath(path: string): void;
+}): React.JSX.Element;

package/lib/types/client/ui/RunInput.d.ts

@@ -0,0 +1,26 @@
+/**
+ * dsh-workflow-lite — 实例视图里选中一个输入节点：这次执行用户是怎么回答的。
+ *
+ * 问题、用户的回答（执行前填的，已补上默认值），以及回答交给了哪些步骤（点一下看那一步）。
+ * 回答是实例建立时定下的，这里只读。
+ *
+ * @module @xiaoso/dsh-workflow-lite/client/ui/RunInput
+ */
+import type { RunState } from '../../shared/runState.ts';
+import type { InputAnswer, InputNode, WorkflowDocument } from '../../shared/types.ts';
+import type { T } from '../i18n.ts';
+/** 用户的回答：文字原样、多选一行一个、没填写就说没填写。 */
+export declare function AnswerView(props: {
+    t: T;
+    answer: InputAnswer | undefined;
+}): React.JSX.Element;
+/** 回答的一行写法（步骤详情的「用户输入」里）：多选用顿号连起来。 */
+export declare function answerLine(t: T, answer: InputAnswer | undefined): string;
+export declare function RunInputDetail(props: {
+    t: T;
+    snapshot: WorkflowDocument;
+    input: InputNode;
+    answer: InputAnswer | undefined;
+    state: RunState | null;
+    onSelectStep(id: string): void;
+}): React.JSX.Element;

package/lib/types/client/ui/RunItemDialog.d.ts

@@ -0,0 +1,43 @@
+/**
+ * dsh-workflow-lite — 实例视图里点开资源的一项：文件夹、网址、自定义文字各自的详情框。
+ *
+ * 文件用 {@link FileViewer}（能读正文），Skill 用 {@link SkillPreview}（读 SKILL.md），都不在这里。
+ * 三个框都是 {@link DocViewer} 的小号：标题行同样有复制、用其他程序打开（文件夹）、关闭，
+ * 文件夹、网址的说明放在正文前（框小、说明就是主要内容）；自定义文字的说明收在「说明」开关里。
+ * - 文件夹：里面有什么（目录在前，只列名字），可以复制路径、用其他程序打开或在文件管理器里显示；
+ * - 网址：整条网址（点了在浏览器里开），底部一个「在浏览器中打开」；
+ * - 自定义文字：整段排版显示，可以复制。
+ *
+ * @module @xiaoso/dsh-workflow-lite/client/ui/RunItemDialog
+ */
+import type { ResourceItem } from '../../shared/types.ts';
+import type { Desktop } from '../app/desktop.ts';
+import type { HostAccess } from '../app/host.ts';
+import type { T } from '../i18n.ts';
+import { type WorkflowLiteRpc } from '../rpc.ts';
+/** 文件夹：里面有什么。 */
+export declare function FolderDialog(props: {
+    t: T;
+    rpc: WorkflowLiteRpc;
+    instance: string;
+    host: HostAccess;
+    node: string;
+    index: number;
+    item: ResourceItem;
+    desktop: Desktop | undefined;
+    onClose(): void;
+}): React.JSX.Element;
+/** 网址：整条网址、说明，底部在浏览器中打开。 */
+export declare function UrlDialog(props: {
+    t: T;
+    item: ResourceItem;
+    desktop: Desktop | undefined;
+    onClose(): void;
+}): React.JSX.Element;
+/** 自定义文字：整段排版显示。 */
+export declare function TextDialog(props: {
+    t: T;
+    item: ResourceItem;
+    desktop: Desktop | undefined;
+    onClose(): void;
+}): React.JSX.Element;

package/lib/types/client/ui/RunModeSwitch.d.ts

@@ -0,0 +1,14 @@
+/**
+ * dsh-workflow-lite — 实例右栏标题栏里「运行 / 编辑」的切换：两个图标格，挨着关闭按钮。
+ * 选中格下面的滑块靠 `transform` 滑过去；文字在悬停提示里。
+ *
+ * @module @xiaoso/dsh-workflow-lite/client/ui/RunModeSwitch
+ */
+import type { T } from '../i18n.ts';
+/** 右栏选中东西时看什么：这次运行的样子，还是改它（模板的属性面板）。 */
+export type PanelMode = 'run' | 'edit';
+export declare function RunModeSwitch(props: {
+    t: T;
+    mode: PanelMode;
+    onChange(mode: PanelMode): void;
+}): React.JSX.Element;