@lokvis/ui-react 0.1.1-beta.0 → 0.2.1

package/src/store/assets-slice.ts

@@ -36,6 +36,7 @@ export const createAssetsSlice: StateCreator<
       await runtime.importAsset({ kind: 'file', file });
     }
     await get().refreshAssets();
+    await get().refreshStorageUsage();
     set({ statusMessage: `Imported ${files.length} file(s)` });
   },
 
@@ -52,6 +53,7 @@ export const createAssetsSlice: StateCreator<
     if (!runtime) return;
     await runtime.removeAsset(id);
     await get().refreshAssets();
+    await get().refreshStorageUsage();
     if (get().selectedAssetId === id) set({ selectedAssetId: null });
 
     // 修复 review 报告：原实现删除 asset 后未 revoke 缩略图 ObjectURL，导致

package/src/store/history-slice.ts

@@ -0,0 +1,65 @@
+/**
+ * History slice —— 历史栈状态与撤销/重做/跳转(W7.1)
+ *
+ * 负责:
+ * - 跟踪当前活跃工作流的历史条目与游标(供 HistoryPanel 高亮当前步骤)
+ * - undo / redo / jumpTo 委托给 runtime,history:changed 事件回流自动更新 state
+ *
+ * 事件桥接:runtime-slice.init 订阅 history:changed,回调里 set 本 slice 的
+ * state,保证 store 是历史状态的单一来源,组件无需各自订阅。
+ */
+import type { StateCreator } from 'zustand';
+import type { WorkspaceStore, WorkspaceState, WorkspaceActions } from './types.js';
+
+export interface HistorySlice
+  extends Pick<
+      WorkspaceState,
+      'historyEntries' | 'historyCursor' | 'historyWorkflowId'
+    >,
+    Pick<WorkspaceActions, 'refreshHistory' | 'undo' | 'redo' | 'jumpToHistory'> {}
+
+export const createHistorySlice: StateCreator<
+  WorkspaceStore,
+  [],
+  [],
+  HistorySlice
+> = (set, get) => ({
+  historyEntries: [],
+  historyCursor: -1,
+  historyWorkflowId: null,
+
+  async refreshHistory(workflowId) {
+    const { runtime } = get();
+    if (!runtime) return;
+    try {
+      const { entries, cursor } = await runtime.getHistoryState(workflowId);
+      set({
+        historyEntries: entries,
+        historyCursor: cursor,
+        historyWorkflowId: workflowId,
+      });
+    } catch {
+      // 查询失败保持上次值,不阻断
+    }
+  },
+
+  async undo() {
+    const { runtime, historyWorkflowId } = get();
+    if (!runtime || !historyWorkflowId) return;
+    await runtime.undo(historyWorkflowId);
+    // history:changed 事件会触发 runtime-slice 的订阅回调更新 state,
+    // 此处无需手动 refresh,避免双发
+  },
+
+  async redo() {
+    const { runtime, historyWorkflowId } = get();
+    if (!runtime || !historyWorkflowId) return;
+    await runtime.redo(historyWorkflowId);
+  },
+
+  async jumpToHistory(index) {
+    const { runtime, historyWorkflowId } = get();
+    if (!runtime || !historyWorkflowId) return;
+    await runtime.jumpTo(historyWorkflowId, index);
+  },
+});

package/src/store/index.ts

@@ -16,12 +16,15 @@ import { createRuntimeSlice } from './runtime-slice.js';
 import { createAssetsSlice } from './assets-slice.js';
 import { createCapabilitiesSlice } from './capabilities-slice.js';
 import { createWorkflowSlice } from './workflow-slice.js';
+import { createHistorySlice } from './history-slice.js';
 
 export const useWorkspaceStore = create<WorkspaceStore>()((...a) => ({
   ...createRuntimeSlice(...a),
   ...createAssetsSlice(...a),
   ...createCapabilitiesSlice(...a),
   ...createWorkflowSlice(...a),
+  ...createHistorySlice(...a),
 }));
 
 export type { WorkspaceState, WorkspaceActions, WorkspaceStore } from './types.js';
+export { MAX_WORKFLOW_STEPS } from './types.js';

package/src/store/runtime-slice.ts

@@ -1,53 +1,110 @@
 /**
  * Runtime slice —— Runtime 初始化与状态消息
  *
- * 负责 runtime 实例注入、初始化、全局状态消息与错误。
+ * 负责 runtime 实例注入、初始化、全局状态消息与错误、存储配额(W6.7)、
+ * 历史栈事件桥接(W7.1)。
  */
 import type { StateCreator } from 'zustand';
+import type { LokvisEvent } from '@lokvis/schema';
 import type { WorkspaceStore, WorkspaceState, WorkspaceActions } from './types.js';
 
 export interface RuntimeSlice
   extends Pick<
-    WorkspaceState,
-    'runtime' | 'initializing' | 'initError' | 'running' | 'statusMessage' | 'error'
-  >,
+      WorkspaceState,
+      | 'runtime'
+      | 'initializing'
+      | 'initError'
+      | 'running'
+      | 'statusMessage'
+      | 'error'
+      | 'errorSeq'
+      | 'storageUsage'
+    >,
     Pick<
       WorkspaceActions,
-      'init' | 'setStatus' | 'setError'
+      'init' | 'setStatus' | 'setError' | 'refreshStorageUsage'
     > {}
 
+/**
+ * 历史事件订阅解除函数。
+ *
+ * 修复 review 报告:原为模块级 let,多个 store 实例(测试 / 多 Workspace)
+ * 共用同一变量,后创建的 store 会覆盖前者,先前的订阅无法被正确清理 → 泄漏。
+ * 现迁到 createRuntime slice 工厂闭包内,每个 store 实例持有独立 offFn。
+ */
 export const createRuntimeSlice: StateCreator<
   WorkspaceStore,
   [],
   [],
   RuntimeSlice
-> = (set, get) => ({
-  runtime: null,
-  initializing: false,
-  initError: null,
-  running: false,
-  statusMessage: 'Idle',
-  error: null,
+> = (set, get) => {
+  /** 当前 store 实例的历史订阅解除函数(闭包私有,实例间隔离) */
+  let offHistoryChanged: (() => void) | null = null;
+
+  return {
+    runtime: null,
+    initializing: false,
+    initError: null,
+    running: false,
+    statusMessage: 'Idle',
+    error: null,
+    errorSeq: 0,
+    storageUsage: null,
+
+    async init(runtime) {
+      // 重入 init 时先清理上一次的历史订阅(避免重复订阅泄漏)
+      if (offHistoryChanged) {
+        offHistoryChanged();
+        offHistoryChanged = null;
+      }
+      set({ runtime, initializing: true, initError: null });
+      try {
+        // W7.1: 订阅 history:changed,把 runtime 历史事件桥接到 store,
+        // 使 HistoryPanel 无需各自订阅,store 成为历史状态单一来源。
+        // workspace 单工作流场景下直接采用事件携带的 workflowId/entries/cursor
+        // 覆盖 store,无需额外过滤。
+        offHistoryChanged = runtime.eventBus.on('history:changed', (e: LokvisEvent) => {
+          if (e.type !== 'history:changed') return;
+          set({
+            historyEntries: e.entries,
+            historyCursor: e.currentIndex,
+            historyWorkflowId: e.workflowId,
+          });
+        });
+        await get().refreshAssets();
+        await get().refreshCapabilities();
+        await get().refreshStorageUsage();
+        set({ initializing: false, statusMessage: 'Ready' });
+      } catch (err) {
+        set({
+          initializing: false,
+          initError: err instanceof Error ? err.message : String(err),
+        });
+      }
+    },
 
-  async init(runtime) {
-    set({ runtime, initializing: true, initError: null });
-    try {
-      await get().refreshAssets();
-      await get().refreshCapabilities();
-      set({ initializing: false, statusMessage: 'Ready' });
-    } catch (err) {
-      set({
-        initializing: false,
-        initError: err instanceof Error ? err.message : String(err),
-      });
-    }
-  },
+    setStatus(message) {
+      set({ statusMessage: message });
+    },
 
-  setStatus(message) {
-    set({ statusMessage: message });
-  },
+    setError(error) {
+      // errorSeq 在设置非 null error 时递增,使 ErrorBanner 能感知新错误事件
+      // 重新弹出(避免相同错误消息重复出现时 banner 因引用相等不触发 useEffect)
+      set((state) => ({
+        error,
+        errorSeq: error !== null ? state.errorSeq + 1 : state.errorSeq,
+      }));
+    },
 
-  setError(error) {
-    set({ error });
-  },
-});
+    async refreshStorageUsage() {
+      const { runtime } = get();
+      if (!runtime) return;
+      try {
+        const usage = await runtime.getStorageUsage();
+        set({ storageUsage: usage });
+      } catch {
+        // 查询失败不阻断,保持上次值或 null
+      }
+    },
+  };
+};

package/src/store/types.ts

@@ -4,7 +4,7 @@
  * 把原 store.ts 顶部的 WorkspaceState / WorkspaceActions 抽出,
  * 供各 slice 引用,避免循环依赖。
  */
-import type { Asset, Capability } from '@lokvis/schema';
+import type { Asset, Capability, HistoryEntry } from '@lokvis/schema';
 import type { LokvisRuntime } from '@lokvis/runtime';
 import type { CapabilityMap, NodeStatus, WorkspaceNode } from '../types.js';
 
@@ -40,6 +40,30 @@ export interface WorkspaceState {
   statusMessage: string;
   /** 错误信息 */
   error: string | null;
+  /**
+   * 错误事件序号(单调递增)。每次 setError(非 null) 都递增,使
+   * ErrorBanner 能在相同错误消息重复出现时仍感知到"新错误事件"重新弹出。
+   * null error 不递增。0 表示初始无错误状态。
+   */
+  errorSeq: number;
+
+  /** 存储配额使用情况(W6.7):{ usage, quota } 字节,null 表示未查询 */
+  storageUsage: { usage: number; quota: number } | null;
+
+  /** 历史栈条目(W7.1):当前活跃工作流的执行历史 */
+  historyEntries: HistoryEntry[];
+  /** 历史栈游标(W7.1):-1 表示无已应用条目(初始);i 表示第 i 条已应用 */
+  historyCursor: number;
+  /** 当前历史所属的工作流 ID(W7.1) */
+  historyWorkflowId: string | null;
+
+  /** 上次工作流执行的输出 Asset ID 列表(W9.4/W9.5):用于 before/after 对比与下载管理 */
+  lastOutputIds: string[];
+  /** 当前选中的输出 Asset ID(W9.4):用于多输出场景选择 */
+  selectedOutputId: string | null;
+
+  /** 当前正在运行的工作流 ID(W11.6:用于 cancel) */
+  currentRunId: string | null;
 }
 
 /** 工作台操作 */
@@ -69,19 +93,65 @@ export interface WorkspaceActions {
   selectNode(id: string | null): void;
   /** 设置节点状态 */
   setNodeStatus(id: string, status: NodeStatus, error?: string, duration?: number): void;
+  /**
+   * 移动节点到新位置(线性链重排,W10.4)。
+   * @param from 源索引(0-based)
+   * @param to 目标索引(0-based,移动后该节点的新位置)
+   */
+  moveNode(from: number, to: number): void;
+  /**
+   * 在指定位置插入节点(W11.1)。
+   * @param index 目标位置(0-based;越界时自动 clamp 到 [0, length])
+   * @param capability 能力名
+   */
+  insertNodeAt(index: number, capability: string): void;
 
   /** 执行工作流 */
   run(): Promise<Asset[]>;
+  /** 取消当前运行(W11.6) */
+  cancelRun(): Promise<void>;
+  /**
+   * 应用工作流模板(W11.4):替换当前 nodes 为模板节点序列。
+   * @param templateNodes 模板节点(capability + 默认 params)
+   */
+  loadWorkflowTemplate(
+    templateNodes: Array<{ capability: string; params: Record<string, unknown> }>
+  ): void;
   /** 设置状态消息 */
   setStatus(message: string): void;
   /** 设置错误 */
   setError(error: string | null): void;
+  /** 刷新存储配额使用情况(W6.7) */
+  refreshStorageUsage(): Promise<void>;
+  /** 刷新历史栈(W7.1) */
+  refreshHistory(workflowId: string): Promise<void>;
+  /** 撤销一步(W7.1) */
+  undo(): Promise<void>;
+  /** 重做一步(W7.1) */
+  redo(): Promise<void>;
+  /** 跳转到指定历史条目(W7.1) */
+  jumpToHistory(index: number): Promise<void>;
   /** 清空工作流 */
   clearWorkflow(): void;
+  /** 选择输出资产(W9.4) */
+  selectOutput(id: string | null): void;
+  /** 清空上次输出列表(W9.4/W9.5) */
+  clearOutputs(): void;
 }
 
 export type WorkspaceStore = WorkspaceState & WorkspaceActions;
 
+/**
+ * 工作流最大节点数(M1 MVP 约束)。
+ *
+ * UI 层独立定义此常量而非 import runtime 包的 MAX_WORKFLOW_STEPS,
+ * 因为 ui-react → runtime 的方向依赖违反五层架构约束(UI → Workflow → Runtime)。
+ * 两层各自维护同值常量,通过测试 + 文档约定保持同步
+ * (runtime 测试断言 MAX_WORKFLOW_STEPS === 5,UI 层此常量也为 5)。
+ * 调整上限时需同步修改两处 + 相关注释。
+ */
+export const MAX_WORKFLOW_STEPS = 5;
+
 /** 生成节点 ID */
 export function genNodeId(): string {
   return `node_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 6)}`;

package/src/store/workflow-slice.ts

@@ -12,10 +12,10 @@ import type { StateCreator } from 'zustand';
 import type { Asset, Workflow, WorkflowEdge, WorkflowNode } from '@lokvis/schema';
 import type { WorkspaceNode } from '../types.js';
 import type { WorkspaceStore, WorkspaceState, WorkspaceActions } from './types.js';
-import { genNodeId } from './types.js';
+import { genNodeId, MAX_WORKFLOW_STEPS } from './types.js';
 
 export interface WorkflowSlice
-  extends Pick<WorkspaceState, 'nodes' | 'selectedNodeId'>,
+  extends Pick<WorkspaceState, 'nodes' | 'selectedNodeId' | 'lastOutputIds' | 'selectedOutputId' | 'currentRunId'>,
     Pick<
       WorkspaceActions,
       | 'addNode'
@@ -23,8 +23,14 @@ export interface WorkflowSlice
       | 'removeNode'
       | 'selectNode'
       | 'setNodeStatus'
+      | 'moveNode'
+      | 'insertNodeAt'
       | 'run'
+      | 'cancelRun'
+      | 'loadWorkflowTemplate'
       | 'clearWorkflow'
+      | 'selectOutput'
+      | 'clearOutputs'
     > {}
 
 export const createWorkflowSlice: StateCreator<
@@ -35,8 +41,16 @@ export const createWorkflowSlice: StateCreator<
 > = (set, get) => ({
   nodes: [],
   selectedNodeId: null,
+  lastOutputIds: [],
+  selectedOutputId: null,
+  currentRunId: null,
 
   addNode(capability) {
+    // W10.1/W10.3: 节点数上限(与 runtime MAX_WORKFLOW_STEPS 对齐,UI 层独立常量)
+    if (get().nodes.length >= MAX_WORKFLOW_STEPS) {
+      get().setError(`工作流最多 ${MAX_WORKFLOW_STEPS} 个节点(M1 MVP 限制),请先删除不需要的节点`);
+      return;
+    }
     const node: WorkspaceNode = {
       id: genNodeId(),
       capability,
@@ -74,13 +88,96 @@ export const createWorkflowSlice: StateCreator<
     }));
   },
 
+  moveNode(from, to) {
+    set((state) => {
+      if (
+        from < 0 || from >= state.nodes.length ||
+        to < 0 || to >= state.nodes.length ||
+        from === to
+      ) {
+        return {};
+      }
+      const next = [...state.nodes];
+      const [moved] = next.splice(from, 1);
+      if (!moved) return {};
+      next.splice(to, 0, moved);
+      return { nodes: next };
+    });
+  },
+
+  insertNodeAt(index, capability) {
+    // W11.1: 在指定位置插入节点(与节点数上限对齐)
+    if (get().nodes.length >= MAX_WORKFLOW_STEPS) {
+      get().setError(`工作流最多 ${MAX_WORKFLOW_STEPS} 个节点(M1 MVP 限制),请先删除不需要的节点`);
+      return;
+    }
+    if (!capability) return;
+    const node: WorkspaceNode = {
+      id: genNodeId(),
+      capability,
+      params: {},
+      status: 'idle',
+    };
+    set((state) => {
+      const next = [...state.nodes];
+      const at = Math.max(0, Math.min(index, next.length));
+      next.splice(at, 0, node);
+      return { nodes: next, selectedNodeId: node.id };
+    });
+  },
+
+  loadWorkflowTemplate(templateNodes) {
+    // W11.4: 用模板节点序列替换当前工作流,清空上次输出
+    const nodes: WorkspaceNode[] = templateNodes.map(({ capability, params }) => ({
+      id: genNodeId(),
+      capability,
+      params,
+      status: 'idle' as const,
+    }));
+    set({
+      nodes,
+      selectedNodeId: nodes[0]?.id ?? null,
+      lastOutputIds: [],
+      selectedOutputId: null,
+      error: null,
+    });
+  },
+
+  async cancelRun() {
+    // W11.6: 取消当前运行。本函数仅负责向 runtime 发起 cancel 信号;
+    // running / currentRunId / 节点状态的归位由 run() 的 finally 统一处理,
+    // 避免 cancel 与 run() 的 finally 同时写状态造成竞态
+    // (review 反馈:若 cancel() 抛错,旧实现仍会 set running: false 伪造
+    //  "已停止",但底层工作流仍在运行,UI 状态与实际不符)。
+    //
+    // 时序:cancel() 成功 → runtime.run() 返回 status='cancelled'
+    //       → run() 兜底把 pending/running 节点标 cancelled + finally 归位。
+    // cancel() 抛错:不伪造停止状态,仅记录错误让用户感知"取消失败,仍在运行"。
+    const { runtime, currentRunId } = get();
+    if (!runtime || !currentRunId) return;
+    set({ statusMessage: 'Cancelling...' });
+    try {
+      await runtime.cancel(currentRunId);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      console.warn('[lokvis] cancelRun failed:', message);
+      get().setError(`取消失败,工作流仍在运行:${message}`);
+    }
+    // 不在此设置 running / currentRunId / 节点状态;
+    // 等 run() 的 await runtime.run() 返回后,由 run() 统一归位。
+  },
+
   async run() {
-    const { runtime, nodes, selectedAssetId } = get();
+    const { runtime, nodes, selectedAssetId, running } = get();
     if (!runtime) throw new Error('Runtime not initialized');
     if (nodes.length === 0) throw new Error('Workflow is empty');
     if (!selectedAssetId) throw new Error('No asset selected');
+    // 并发保护:正在运行时再次调用直接拒绝(避免事件订阅泄漏 + currentRunId 覆盖)
+    if (running) {
+      throw new Error('Workflow is already running');
+    }
 
-    set({ running: true, error: null, statusMessage: 'Running...' });
+    set({ running: true, error: null, statusMessage: 'Running...', currentRunId: null });
 
     // 重置所有节点状态
     set((state) => ({
@@ -110,6 +207,8 @@ export const createWorkflowSlice: StateCreator<
     try {
       // 构建 Workflow
       const workflow = buildLinearWorkflow(nodes);
+      // W11.6: 记录当前 workflowId 供 cancelRun() 使用
+      set({ currentRunId: workflow.id });
       const input = await runtime.getAsset(selectedAssetId);
 
       set({ statusMessage: 'Running workflow...' });
@@ -127,15 +226,30 @@ export const createWorkflowSlice: StateCreator<
         }
       }
 
-      // 加载输出资产
+      // 加载输出资产。失败时收集失败 id 并设置 error 让用户感知(不静默丢弃)
       const outputs: Asset[] = [];
+      const failedOutputIds: string[] = [];
       for (const id of result.outputs) {
         try {
           outputs.push(await runtime.getAsset(id));
-        } catch {
-          // skip
+        } catch (err) {
+          console.warn(`[lokvis] getAsset(${id}) failed:`, err);
+          failedOutputIds.push(id);
         }
       }
+      if (failedOutputIds.length > 0) {
+        get().setError(`${failedOutputIds.length} 个输出资产加载失败,可能存储损坏`);
+      }
+
+      // W9.4/W9.5: 记录输出 Asset ID,供 before/after 对比与下载管理使用。
+      // 仅在 status === 'completed' 时记录,失败/取消的输出无意义。
+      if (result.status === 'completed' && outputs.length > 0) {
+        const firstOutput = outputs[0];
+        set({
+          lastOutputIds: outputs.map((o) => o.id),
+          selectedOutputId: firstOutput ? firstOutput.id : null,
+        });
+      }
 
       set({
         running: false,
@@ -143,18 +257,20 @@ export const createWorkflowSlice: StateCreator<
       });
 
       if (result.status === 'failed') {
-        set({ error: result.error ?? 'Workflow failed' });
+        get().setError(result.error ?? 'Workflow failed');
       }
 
       await get().refreshAssets();
+      await get().refreshStorageUsage();
       return outputs;
     } catch (err) {
       const message = err instanceof Error ? err.message : String(err);
       set({
         running: false,
-        error: message,
+        currentRunId: null,
         statusMessage: 'Failed',
       });
+      get().setError(message);
       // 异常退出时把仍在 pending/running 的节点标 failed
       for (const node of get().nodes) {
         if (node.status === 'pending' || node.status === 'running') {
@@ -163,6 +279,8 @@ export const createWorkflowSlice: StateCreator<
       }
       throw err;
     } finally {
+      // W11.6: 清除 currentRunId(成功/失败/取消都应清除)
+      set({ currentRunId: null });
       offStarted();
       offFinished();
       offNodeFailed();
@@ -172,6 +290,14 @@ export const createWorkflowSlice: StateCreator<
   clearWorkflow() {
     set({ nodes: [], selectedNodeId: null });
   },
+
+  selectOutput(id) {
+    set({ selectedOutputId: id });
+  },
+
+  clearOutputs() {
+    set({ lastOutputIds: [], selectedOutputId: null });
+  },
 });
 
 /** 把工作台节点序列构建为线性 Workflow */
@@ -187,7 +313,10 @@ function buildLinearWorkflow(nodes: WorkspaceNode[]): Workflow {
   }));
   const edges: WorkflowEdge[] = [];
   for (let i = 0; i < workflowNodes.length - 1; i++) {
-    edges.push({ from: workflowNodes[i]!.id, to: workflowNodes[i + 1]!.id });
+    const fromNode = workflowNodes[i];
+    const toNode = workflowNodes[i + 1];
+    if (!fromNode || !toNode) continue;
+    edges.push({ from: fromNode.id, to: toNode.id });
   }
   return {
     id: `wf_${Date.now().toString(36)}`,