minimal-workflow 0.2.0

package/src/index.css

@@ -0,0 +1,379 @@
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+  width: 100vw;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+    Arial, sans-serif;
+  font-size: 14px;
+  color: #1f2937;
+  background: #f9fafb;
+}
+
+button {
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
+input,
+textarea,
+select {
+  font: inherit;
+  color: inherit;
+}
+
+.app-shell {
+  display: grid;
+  grid-template-columns: 240px 1fr 320px;
+  grid-template-rows: 44px 1fr;
+  grid-template-areas:
+    'toolbar  toolbar    toolbar'
+    'palette  canvas     inspector';
+  height: 100vh;
+  width: 100vw;
+}
+
+.toolbar {
+  grid-area: toolbar;
+  background: #1f2937;
+  color: #f3f4f6;
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  gap: 12px;
+  font-size: 13px;
+}
+
+.toolbar h1 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.toolbar .sep {
+  flex: 1;
+}
+
+.toolbar .file-label {
+  font-family:
+    'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  font-size: 12px;
+  color: #d1d5db;
+}
+
+.toolbar button {
+  background: #374151;
+  color: #f3f4f6;
+  border: 1px solid #4b5563;
+  border-radius: 4px;
+  padding: 4px 10px;
+  font-size: 12px;
+}
+
+.toolbar button:hover {
+  background: #4b5563;
+}
+
+.toolbar button.primary {
+  background: #2563eb;
+  border-color: #2563eb;
+}
+
+.toolbar button.primary:hover {
+  background: #1d4ed8;
+}
+
+.toolbar button:disabled {
+  background: #4b5563;
+  color: #9ca3af;
+  cursor: not-allowed;
+}
+
+.palette {
+  grid-area: palette;
+  background: #ffffff;
+  border-right: 1px solid #e5e7eb;
+  overflow-y: auto;
+  padding: 8px 0;
+}
+
+.palette-section {
+  margin-bottom: 12px;
+}
+
+.palette-section h2 {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #6b7280;
+  padding: 6px 12px;
+  margin: 0;
+  background: #f9fafb;
+  border-top: 1px solid #e5e7eb;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.palette-item {
+  padding: 6px 12px;
+  cursor: grab;
+  font-size: 13px;
+  border-bottom: 1px solid #f3f4f6;
+  user-select: none;
+}
+
+.palette-item:hover {
+  background: #eff6ff;
+}
+
+.palette-item:active {
+  cursor: grabbing;
+}
+
+.palette-item .name {
+  font-weight: 500;
+  color: #1f2937;
+}
+
+.palette-item .desc {
+  color: #6b7280;
+  font-size: 11px;
+  margin-top: 2px;
+  line-height: 1.3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.canvas {
+  grid-area: canvas;
+  position: relative;
+  background: #f3f4f6;
+  overflow: hidden;
+}
+
+.inspector {
+  grid-area: inspector;
+  background: #ffffff;
+  border-left: 1px solid #e5e7eb;
+  overflow-y: auto;
+  padding: 12px;
+}
+
+.inspector h2 {
+  font-size: 13px;
+  font-weight: 600;
+  margin: 0 0 8px;
+  color: #1f2937;
+}
+
+.inspector .empty {
+  color: #9ca3af;
+  font-style: italic;
+  font-size: 12px;
+}
+
+.field {
+  margin-bottom: 10px;
+}
+
+.field label {
+  display: block;
+  font-size: 11px;
+  font-weight: 600;
+  color: #4b5563;
+  margin-bottom: 2px;
+}
+
+.field input,
+.field textarea,
+.field select {
+  width: 100%;
+  padding: 4px 6px;
+  border: 1px solid #d1d5db;
+  border-radius: 3px;
+  font-size: 12px;
+  background: #ffffff;
+}
+
+.field textarea {
+  font-family:
+    'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  resize: vertical;
+  min-height: 60px;
+}
+
+.field input:focus,
+.field textarea:focus,
+.field select:focus {
+  outline: none;
+  border-color: #2563eb;
+  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
+}
+
+/* canvas 节点样式 */
+.canvas-node {
+  background: #ffffff;
+  border: 2px solid #d1d5db;
+  border-radius: 6px;
+  padding: 8px 10px;
+  min-width: 180px;
+  font-size: 12px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.canvas-node.selected {
+  border-color: #2563eb;
+  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
+}
+
+.canvas-node .node-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.canvas-node .node-id {
+  font-family:
+    'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  font-size: 11px;
+  color: #6b7280;
+  margin-left: auto;
+}
+
+.canvas-node .node-body {
+  color: #4b5563;
+  font-size: 11px;
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+/* 节点颜色编码 */
+.canvas-node.tool {
+  border-color: #9ca3af;
+}
+.canvas-node.llm {
+  border-color: #3b82f6;
+}
+.canvas-node.skill {
+  border-color: #8b5cf6;
+}
+.canvas-node.assert {
+  border-color: #ef4444;
+  background: #fef2f2;
+}
+.canvas-node.pause {
+  border-color: #f59e0b;
+  background: #fffbeb;
+}
+.canvas-node.branch {
+  border-color: #10b981;
+}
+.canvas-node.loop {
+  border-color: #06b6d4;
+}
+
+/* 文件列表 / 工作流列表（叠在 palette 上方） */
+.file-list {
+  background: #f9fafb;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.file-list .file-item {
+  padding: 6px 12px;
+  cursor: pointer;
+  font-size: 12px;
+  border-bottom: 1px solid #f3f4f6;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.file-list .file-item:hover {
+  background: #eff6ff;
+}
+
+.file-list .file-item.active {
+  background: #dbeafe;
+  color: #1e40af;
+  font-weight: 500;
+}
+
+/* yaml 视图 */
+.yaml-view {
+  position: absolute;
+  inset: 0;
+  background: #1e293b;
+  color: #e2e8f0;
+  display: flex;
+  flex-direction: column;
+}
+
+.yaml-view textarea {
+  flex: 1;
+  background: #0f172a;
+  color: #e2e8f0;
+  border: none;
+  padding: 12px;
+  font-family:
+    'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  font-size: 13px;
+  line-height: 1.5;
+  resize: none;
+  outline: none;
+}
+
+.yaml-view .yaml-toolbar {
+  background: #334155;
+  padding: 6px 12px;
+  font-size: 11px;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.yaml-view .yaml-error {
+  background: #7f1d1d;
+  color: #fee2e2;
+  padding: 8px 12px;
+  font-size: 12px;
+  font-family:
+    'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  white-space: pre-wrap;
+}
+
+/* 节点角标 */
+.canvas-node .badge {
+  display: inline-block;
+  font-size: 10px;
+  padding: 1px 5px;
+  border-radius: 8px;
+  background: #e5e7eb;
+  color: #374151;
+}
+
+.canvas-node .badge.warn {
+  background: #fef3c7;
+  color: #92400e;
+}
+
+.canvas-node .badge.err {
+  background: #fee2e2;
+  color: #991b1b;
+}

package/src/inspector/Inspector.tsx

@@ -0,0 +1,224 @@
+import { useWorkflowStore } from '../store/workflowStore.ts';
+import { ToolNodeForm } from './ToolNodeForm.tsx';
+import { LlmNodeForm } from './LlmNodeForm.tsx';
+import { SkillNodeForm } from './SkillNodeForm.tsx';
+import type { StepDef } from '../types.ts';
+
+export function Inspector() {
+  const selectedId = useWorkflowStore((s) => s.selectedNodeId);
+  const nodes = useWorkflowStore((s) => s.nodes);
+  const updateStep = useWorkflowStore((s) => s.updateStep);
+  const removeStep = useWorkflowStore((s) => s.removeStep);
+
+  const node = nodes.find((n) => n.id === selectedId);
+  if (!node) {
+    return (
+      <aside className="inspector">
+        <h2>属性</h2>
+        <div className="empty">选中一个节点以编辑参数</div>
+      </aside>
+    );
+  }
+  const step = node.data.step;
+  const kind = node.data.kind;
+  const onPatch = (patch: Partial<StepDef>) => updateStep(node.id, patch);
+
+  return (
+    <aside className="inspector">
+      <h2>
+        {kind} · {step.id}
+      </h2>
+
+      <CommonStepFields step={step} onPatch={onPatch} />
+
+      {kind === 'tool' && <ToolNodeForm step={step} onPatch={onPatch} />}
+      {kind === 'llm' && <LlmNodeForm step={step} onPatch={onPatch} />}
+      {kind === 'skill' && <SkillNodeForm step={step} onPatch={onPatch} />}
+      {kind === 'assert' && <AssertForm step={step} onPatch={onPatch} />}
+      {kind === 'pause' && <PauseForm step={step} onPatch={onPatch} />}
+      {kind === 'branch' && <BranchForm step={step} onPatch={onPatch} />}
+      {kind === 'loop' && <LoopForm step={step} onPatch={onPatch} />}
+
+      <CaptureField step={step} onPatch={onPatch} />
+
+      <div style={{ marginTop: 16 }}>
+        <button
+          onClick={() => {
+            if (confirm(`删除节点 ${step.id}？`)) removeStep(node.id);
+          }}
+          style={{
+            background: '#fef2f2',
+            color: '#dc2626',
+            border: '1px solid #fca5a5',
+            borderRadius: 3,
+            padding: '4px 10px',
+            fontSize: 12,
+          }}
+        >
+          删除节点
+        </button>
+      </div>
+    </aside>
+  );
+}
+
+interface FieldProps {
+  step: StepDef;
+  onPatch: (patch: Partial<StepDef>) => void;
+}
+
+function CommonStepFields({ step, onPatch }: FieldProps) {
+  return (
+    <>
+      <div className="field">
+        <label>id</label>
+        <input
+          value={step.id}
+          onChange={(e) => onPatch({ id: e.target.value })}
+        />
+      </div>
+      <div className="field">
+        <label>when（可选执行条件）</label>
+        <input
+          value={step.when ?? ''}
+          placeholder="${flag} == true"
+          onChange={(e) => onPatch({ when: e.target.value || undefined })}
+        />
+      </div>
+      <div className="field">
+        <label>onError</label>
+        <select
+          value={step.onError ?? 'halt'}
+          onChange={(e) =>
+            onPatch({ onError: e.target.value as 'halt' | 'continue' })
+          }
+        >
+          <option value="halt">halt（默认）</option>
+          <option value="continue">continue</option>
+        </select>
+      </div>
+    </>
+  );
+}
+
+function CaptureField({ step, onPatch }: FieldProps) {
+  const entries = Object.entries(step.capture ?? {});
+  const update = (idx: number, field: 'k' | 'v', val: string) => {
+    const next = entries.map((e, i) =>
+      i === idx ? ([field === 'k' ? val : e[0], field === 'v' ? val : e[1]] as [
+        string,
+        string,
+      ]) : e,
+    );
+    onPatch({
+      capture: Object.fromEntries(next.filter((e) => e[0])),
+    });
+  };
+  const add = () =>
+    onPatch({ capture: { ...(step.capture ?? {}), '': '' } });
+  const remove = (idx: number) => {
+    const next = entries.filter((_, i) => i !== idx);
+    onPatch({ capture: Object.fromEntries(next) });
+  };
+  return (
+    <div className="field">
+      <label>capture（result 字段 → 变量名）</label>
+      {entries.map(([k, v], i) => (
+        <div key={i} style={{ display: 'flex', gap: 4, marginBottom: 4 }}>
+          <input
+            value={k}
+            placeholder="result"
+            onChange={(e) => update(i, 'k', e.target.value)}
+          />
+          <span style={{ alignSelf: 'center' }}>→</span>
+          <input
+            value={v}
+            placeholder="var_name"
+            onChange={(e) => update(i, 'v', e.target.value)}
+          />
+          <button onClick={() => remove(i)} style={{ fontSize: 10 }}>
+            ×
+          </button>
+        </div>
+      ))}
+      <button onClick={add} style={{ fontSize: 11, padding: '2px 8px' }}>
+        + 添加
+      </button>
+    </div>
+  );
+}
+
+function AssertForm({ step, onPatch }: FieldProps) {
+  return (
+    <>
+      <div className="field">
+        <label>condition</label>
+        <input
+          value={step.condition ?? ''}
+          onChange={(e) => onPatch({ condition: e.target.value })}
+          placeholder='fileExists("a.txt")'
+        />
+      </div>
+      <div className="field">
+        <label>onFail</label>
+        <input
+          value={step.onFail ?? ''}
+          onChange={(e) => onPatch({ onFail: e.target.value })}
+        />
+      </div>
+    </>
+  );
+}
+
+function PauseForm({ step, onPatch }: FieldProps) {
+  return (
+    <div className="field">
+      <label>prompt（暂停理由，渲染给用户）</label>
+      <textarea
+        value={step.prompt ?? ''}
+        onChange={(e) => onPatch({ prompt: e.target.value })}
+      />
+    </div>
+  );
+}
+
+function BranchForm({ step, onPatch }: FieldProps) {
+  return (
+    <div className="field">
+      <label>condition</label>
+      <input
+        value={step.condition ?? ''}
+        onChange={(e) => onPatch({ condition: e.target.value })}
+        placeholder="${flag}"
+      />
+      <small style={{ color: '#6b7280', fontSize: 11 }}>
+        then / else 子步骤在 yaml 视图里编辑
+      </small>
+    </div>
+  );
+}
+
+function LoopForm({ step, onPatch }: FieldProps) {
+  return (
+    <>
+      <div className="field">
+        <label>over（数组表达式）</label>
+        <input
+          value={step.over ?? ''}
+          onChange={(e) => onPatch({ over: e.target.value })}
+          placeholder="${items}"
+        />
+      </div>
+      <div className="field">
+        <label>as（迭代变量名）</label>
+        <input
+          value={step.as ?? 'item'}
+          onChange={(e) => onPatch({ as: e.target.value })}
+        />
+      </div>
+      <small style={{ color: '#6b7280', fontSize: 11 }}>
+        do 子步骤在 yaml 视图里编辑
+      </small>
+    </>
+  );
+}

package/src/inspector/LlmNodeForm.tsx

@@ -0,0 +1,59 @@
+import type { StepDef } from '../types.ts';
+
+interface Props {
+  step: StepDef;
+  onPatch: (patch: Partial<StepDef>) => void;
+}
+
+/**
+ * llm 字段两种形态：
+ *   - string：直接是 prompt 文本
+ *   - object：{ prompt, model?, temperature?, ... } 高级形态
+ *
+ * MVP 阶段只编辑 prompt 文本；其它高级字段在 yaml 视图里改。
+ */
+export function LlmNodeForm({ step, onPatch }: Props) {
+  const prompt = extractPrompt(step.llm);
+  const isObjectForm = step.llm !== null && typeof step.llm === 'object';
+
+  const onPromptChange = (text: string) => {
+    if (isObjectForm) {
+      onPatch({
+        llm: { ...(step.llm as Record<string, unknown>), prompt: text },
+      });
+    } else {
+      onPatch({ llm: text });
+    }
+  };
+
+  return (
+    <>
+      <div className="field">
+        <label>llm prompt</label>
+        <textarea
+          value={prompt}
+          rows={8}
+          spellCheck={false}
+          placeholder="请用一句话评价 ${book}"
+          onChange={(e) => onPromptChange(e.target.value)}
+          style={{ fontFamily: 'ui-monospace, monospace', fontSize: 12 }}
+        />
+        <small style={{ color: '#6b7280', fontSize: 11 }}>
+          支持 ${'{var}'} 模板；
+          {isObjectForm
+            ? '对象形态 — model / temperature 等字段请在 YAML 视图编辑'
+            : '默认走主 provider'}
+        </small>
+      </div>
+    </>
+  );
+}
+
+function extractPrompt(llm: StepDef['llm']): string {
+  if (typeof llm === 'string') return llm;
+  if (llm && typeof llm === 'object') {
+    const p = (llm as Record<string, unknown>).prompt;
+    if (typeof p === 'string') return p;
+  }
+  return '';
+}

package/src/inspector/SkillNodeForm.tsx

@@ -0,0 +1,62 @@
+import { useManifestStore } from '../store/manifestStore.ts';
+import type { StepDef } from '../types.ts';
+
+interface Props {
+  step: StepDef;
+  onPatch: (patch: Partial<StepDef>) => void;
+}
+
+export function SkillNodeForm({ step, onPatch }: Props) {
+  const manifest = useManifestStore((s) => s.manifest);
+  const skills = manifest?.skills ?? [];
+  const current = skills.find((s) => s.name === step.skill);
+
+  return (
+    <>
+      <div className="field">
+        <label>skill（技能名）</label>
+        <select
+          value={step.skill ?? ''}
+          onChange={(e) => onPatch({ skill: e.target.value })}
+        >
+          <option value="">— 选择技能 —</option>
+          {skills.map((s) => (
+            <option key={s.name} value={s.name}>
+              {s.name}
+            </option>
+          ))}
+        </select>
+        {current && (
+          <small style={{ color: '#6b7280', fontSize: 11 }}>
+            {current.description}
+          </small>
+        )}
+      </div>
+
+      <div className="field">
+        <label>input（喂给 skill 的初始消息）</label>
+        <textarea
+          value={step.input ?? ''}
+          rows={4}
+          spellCheck={false}
+          placeholder="支持 ${var} 模板"
+          onChange={(e) => onPatch({ input: e.target.value })}
+          style={{ fontFamily: 'ui-monospace, monospace', fontSize: 12 }}
+        />
+      </div>
+
+      <div className="field">
+        <label>maxTurns（最多自主轮数，留空 = 默认）</label>
+        <input
+          type="number"
+          min={1}
+          value={step.maxTurns ?? ''}
+          onChange={(e) => {
+            const v = e.target.value;
+            onPatch({ maxTurns: v === '' ? undefined : Number(v) });
+          }}
+        />
+      </div>
+    </>
+  );
+}