front-cpu 0.1.1

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "front-cpu",
+  "version": "0.1.1",
+  "description": "FrontCPU - Frontend instruction execution system with out-of-order execution",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./debug": {
+      "import": "./dist/debug.js",
+      "types": "./dist/debug.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc",
+    "build:playground": "vite build",
+    "prepublishOnly": "pnpm -s build",
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "bench": "vitest bench",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --ext .ts",
+    "size:bundle": "node ./scripts/check-bundle-size.mjs",
+    "format": "prettier --write \"src/**/*.ts\""
+  },
+  "keywords": [
+    "front-cpu",
+    "frontcpu",
+    "cpu",
+    "pipeline",
+    "instruction",
+    "scheduler",
+    "out-of-order",
+    "concurrency",
+    "frontend-architecture",
+    "async",
+    "debugging"
+  ],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "@vitest/ui": "^1.0.0",
+    "@vue/tsconfig": "^0.5.0",
+    "esbuild": "^0.27.2",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0",
+    "vitest": "^1.0.0",
+    "vue": "^3.4.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "lucide-vue-next": "^0.547.0"
+  }
+}

package/src/Pipeline.ts

@@ -0,0 +1,475 @@
+/**
+ * CPU流水线主控制器（解耦版）
+ *
+ * 通过依赖注入实现零耦合架构
+ */
+
+import { InstructionFetchStage } from './stages/IF'
+import { SchedulerStage } from './stages/SCH'
+import { ExecuteStage } from './stages/EX'
+import { ResponseStage } from './stages/RES'
+import { WriteBackStage } from './stages/WB'
+import { cpuEventCollector, cpuConsole, captureCallSource } from './logging/runtime'
+import type { QueuedInstruction } from './types'
+import { InstructionStatus } from './types'
+import type { IReactiveState } from './interfaces'
+import { isInstructionCancelled, cancelInstruction } from './utils/InstructionCancellation'
+
+export interface PipelineStatus {
+  ifBufferSize: number
+  schPendingSize: number
+  schActiveSize: number
+  totalCompleted: number
+  totalFailed: number
+  totalCancelled: number
+}
+
+/**
+ * Pipeline配置
+ */
+export interface PipelineConfig {
+  /** Tick间隔（ms），默认16 */
+  tickInterval?: number
+  /** 最大并发数，默认10 */
+  maxConcurrency?: number
+  /** 响应式状态工厂（用于适配不同框架） */
+  reactiveStateFactory?: <T>(initialValue: T) => IReactiveState<T>
+}
+
+/**
+ * 默认状态实现（非响应式）
+ */
+function createPlainState<T>(initialValue: T): IReactiveState<T> {
+  let value = initialValue
+  const subscribers: Array<(value: T) => void> = []
+
+  return {
+    get value() {
+      return value
+    },
+    setValue(newValue: T) {
+      value = newValue
+      subscribers.forEach((cb) => cb(value))
+    },
+    subscribe(callback) {
+      subscribers.push(callback)
+      return () => {
+        const index = subscribers.indexOf(callback)
+        if (index > -1) subscribers.splice(index, 1)
+      }
+    },
+  }
+}
+
+export class Pipeline {
+  private IF: InstructionFetchStage
+  private SCH: SchedulerStage
+  private EX: ExecuteStage
+  private RES: ResponseStage
+  private WB: WriteBackStage
+
+  private isRunning = false
+  private tickInterval: ReturnType<typeof setInterval> | null = null
+  private readonly TICK_INTERVAL_MS: number
+  private readonly MAX_CONCURRENCY: number
+  private totalCompleted = 0
+  private totalFailed = 0
+  private totalCancelled = 0
+
+  // 响应式状态
+  public status: IReactiveState<PipelineStatus>
+
+  // 🔥 Promise resolvers for awaitable dispatch
+  private promiseResolvers = new Map<
+    string,
+    {
+      resolve: (result: any) => void
+      reject: (error: Error) => void
+    }
+  >()
+
+  constructor(config: PipelineConfig = {}) {
+    // 配置参数
+    this.TICK_INTERVAL_MS = config.tickInterval ?? 16
+    this.MAX_CONCURRENCY = config.maxConcurrency ?? 10
+
+    // 创建响应式状态
+    const stateFactory = config.reactiveStateFactory ?? createPlainState
+    this.status = stateFactory<PipelineStatus>({
+      ifBufferSize: 0,
+      schPendingSize: 0,
+      schActiveSize: 0,
+      totalCompleted: 0,
+      totalFailed: 0,
+      totalCancelled: 0,
+    })
+
+    // 创建流水线阶段
+    this.IF = new InstructionFetchStage()
+    this.SCH = new SchedulerStage(this.MAX_CONCURRENCY)
+    this.EX = new ExecuteStage()
+    this.RES = new ResponseStage()
+    this.WB = new WriteBackStage()
+  }
+
+  /**
+   * 发射指令（外部API）
+   *
+   * @returns Promise that resolves with the instruction result or rejects with error
+   */
+  dispatch<TPayload, TResult = any>(
+    type: string,
+    payload: TPayload,
+    source: 'user' | 'system' | 'test' = 'user',
+    options?: { tags?: string[] }
+  ): Promise<TResult> {
+    return new Promise((resolve, reject) => {
+      // 🔒 检查流水线是否在运行
+      if (!this.isRunning) {
+        console.warn('%c⚠️ 流水线未启动，指令被拒绝', 'color: #FF9800; font-weight: bold', {
+          type,
+          payload,
+        })
+        reject(new Error('Pipeline is not running'))
+        return
+      }
+
+      // 🔍 捕获调用源（跳过 1 层：Promise constructor）
+      const callSource = captureCallSource(1)
+
+      // IF: 获取指令
+      const instruction = this.IF.fetchInstruction(type, payload, source, callSource, options?.tags)
+
+      // 🔥 保存 Promise resolvers
+      this.promiseResolvers.set(instruction.id, { resolve, reject })
+
+      // 🎯 记录指令创建事件
+      cpuEventCollector.onInstructionCreated(instruction)
+      cpuConsole.onInstructionCreated(instruction)
+
+      // 加入调度队列
+      this.SCH.addInstruction(instruction)
+
+      // 立即尝试调度
+      this.SCH.tick()
+
+      // 🔥 立即执行新发射的指令（避免tick延迟）
+      this.processActiveInstructions()
+
+      // 更新状态
+      this.updateStatus()
+    })
+  }
+
+  /**
+   * 启动流水线
+   */
+  start(): void {
+    if (this.isRunning) return
+
+    this.isRunning = true
+
+    // 启动调度器的tick循环
+    this.tickInterval = globalThis.setInterval(() => {
+      this.SCH.tick()
+      this.processActiveInstructions()
+      this.updateStatus()
+    }, this.TICK_INTERVAL_MS)
+
+    console.log('%c🚀 CPU流水线已启动', 'color: #2196F3; font-weight: bold')
+  }
+
+  /**
+   * 停止流水线
+   */
+  stop(): void {
+    if (!this.isRunning) return
+
+    this.isRunning = false
+
+    if (this.tickInterval !== null) {
+      globalThis.clearInterval(this.tickInterval)
+      this.tickInterval = null
+    }
+
+    console.log('%c⏸️ CPU流水线已停止', 'color: #FF9800; font-weight: bold')
+  }
+
+  /**
+   * 重置流水线
+   */
+  reset(): void {
+    this.stop()
+
+    // 清空所有阶段
+    this.IF.clear()
+    this.SCH.clear()
+
+    // 🔥 Reject all pending promises
+    for (const [, resolver] of this.promiseResolvers.entries()) {
+      resolver.reject(new Error('Pipeline was reset'))
+    }
+    this.promiseResolvers.clear()
+
+    // 重置状态
+    this.totalCompleted = 0
+    this.totalFailed = 0
+    this.totalCancelled = 0
+    this.status.setValue({
+      ifBufferSize: 0,
+      schPendingSize: 0,
+      schActiveSize: 0,
+      totalCompleted: 0,
+      totalFailed: 0,
+      totalCancelled: 0,
+    })
+
+    console.log('%c🔄 CPU流水线已重置', 'color: #9C27B0; font-weight: bold')
+  }
+
+  /**
+   * 处理正在执行的指令
+   */
+  private async processActiveInstructions(): Promise<void> {
+    const activeInstructions = this.SCH.getActiveInstructions()
+
+    for (const instruction of activeInstructions) {
+      // 已经在执行中，跳过
+      if (instruction.timestamps.EX) {
+        continue
+      }
+
+      // 🔥 检查是否已被取消（switchMap 等场景）
+      if (isInstructionCancelled(instruction)) {
+        // 立即处理取消，不再进入执行流程
+        this.handleCancelledInstruction(instruction)
+        continue
+      }
+
+      // 异步执行指令
+      this.executeInstruction(instruction)
+    }
+  }
+
+  /**
+   * 处理已取消的指令
+   * 直接完成清理工作，不再进入 EX/RES/WB 流程
+   */
+  private handleCancelledInstruction(instruction: QueuedInstruction): void {
+    // 标记 WB 时间戳（虽然没有真正执行 WB）
+    instruction.timestamps.WB = Date.now()
+
+    // 释放资源
+    this.SCH.releaseInstruction(instruction.id)
+
+    // 计算持续时间
+    const duration =
+      (instruction.timestamps.WB || Date.now()) - (instruction.timestamps.IF || Date.now())
+
+    // 记录取消事件
+    cpuEventCollector.onInstructionCancelled(instruction)
+    cpuConsole.onInstructionCancelled(instruction, duration)
+    this.totalCancelled += 1
+
+    // Reject Promise
+    const resolver = this.promiseResolvers.get(instruction.id)
+    if (resolver) {
+      resolver.reject(instruction.error || new Error('Instruction was cancelled'))
+      this.promiseResolvers.delete(instruction.id)
+    }
+
+    // 更新状态
+    this.updateStatus()
+  }
+
+  /**
+   * 执行单个指令
+   */
+  private async executeInstruction(instruction: QueuedInstruction): Promise<void> {
+    let executionError: Error | undefined
+
+    try {
+      // EX: 执行
+      await this.EX.execute(instruction)
+    } catch (err) {
+      executionError = err as Error
+    }
+
+    // RES: 处理响应
+    const { success } = this.RES.processResponse(instruction, executionError)
+
+    // WB: 写回
+    await this.WB.writeBack(instruction, success)
+
+    // 释放资源
+    this.SCH.releaseInstruction(instruction.id)
+
+    // 🎯 获取最终错误信息
+    // 优先级：instruction.error（可能在 SCH/EX/RES 任何阶段设置） > 执行时捕获的错误 > 未知错误
+    const finalError = instruction.error || executionError || new Error('未知错误')
+
+    // 🎯 记录指令完成/失败/取消事件
+    const duration =
+      (instruction.timestamps.WB || Date.now()) - (instruction.timestamps.IF || Date.now())
+    
+    if (success) {
+      // 成功
+      cpuEventCollector.onInstructionCommitted(instruction)
+      cpuConsole.onInstructionSuccess(instruction, duration)
+      this.totalCompleted += 1
+    } else if (instruction.status === InstructionStatus.CANCELLED) {
+      // 被取消（不算失败）
+      cpuEventCollector.onInstructionCancelled(instruction)
+      cpuConsole.onInstructionCancelled(instruction, duration)
+      this.totalCancelled += 1
+    } else {
+      // 失败
+      cpuEventCollector.onInstructionFailed(instruction, finalError)
+      cpuConsole.onInstructionFailure(instruction, finalError, duration)
+      this.totalFailed += 1
+    }
+
+    // 🔥 Resolve/Reject Promise (if awaited)
+    const resolver = this.promiseResolvers.get(instruction.id)
+    if (resolver) {
+      if (success) {
+        resolver.resolve(instruction.result)
+      } else {
+        resolver.reject(finalError)
+      }
+      this.promiseResolvers.delete(instruction.id)
+    }
+
+    // 更新状态
+    this.updateStatus()
+  }
+
+  /**
+   * 按标签批量取消指令
+   * @param tags 要取消的标签（字符串或字符串数组）
+   * @returns 取消的指令数量
+   */
+  flush(tags: string | string[]): number {
+    const targetTags = Array.isArray(tags) ? tags : [tags]
+    let cancelledCount = 0
+
+    // 1. 取消 SCH 中的 pending 指令
+    const pendingInstructions = this.SCH.getPendingInstructions()
+    for (const instruction of pendingInstructions) {
+      if (this.hasMatchingTags(instruction, targetTags)) {
+        cancelInstruction(instruction, `Flushed by tags: ${targetTags.join(', ')}`, 'SCH')
+        cancelledCount++
+      }
+    }
+
+    // 2. 取消 SCH 中的 active 指令
+    const activeInstructions = this.SCH.getActiveInstructions()
+    for (const instruction of activeInstructions) {
+      if (this.hasMatchingTags(instruction, targetTags)) {
+        cancelInstruction(instruction, `Flushed by tags: ${targetTags.join(', ')}`, 'SCH')
+        cancelledCount++
+      }
+    }
+
+    return cancelledCount
+  }
+
+  /**
+   * 检查指令是否包含匹配的标签
+   */
+  private hasMatchingTags(instruction: QueuedInstruction, targetTags: string[]): boolean {
+    if (!instruction.tags || instruction.tags.length === 0) {
+      return false
+    }
+    return targetTags.some(tag => instruction.tags!.includes(tag))
+  }
+
+  /**
+   * 获取带特定标签的指令
+   */
+  getInstructionsByTags(tags: string[]): QueuedInstruction[] {
+    const allInstructions = [
+      ...this.SCH.getPendingInstructions(),
+      ...this.SCH.getActiveInstructions()
+    ]
+    return allInstructions.filter(instruction => this.hasMatchingTags(instruction, tags))
+  }
+
+  /**
+   * 获取所有活跃标签
+   */
+  getActiveTags(): string[] {
+    const allInstructions = [
+      ...this.SCH.getPendingInstructions(),
+      ...this.SCH.getActiveInstructions()
+    ]
+    const tagSet = new Set<string>()
+    for (const instruction of allInstructions) {
+      if (instruction.tags) {
+        instruction.tags.forEach(tag => tagSet.add(tag))
+      }
+    }
+    return Array.from(tagSet)
+  }
+
+  /**
+   * 获取标签统计信息
+   */
+  getTagStats(): Record<string, number> {
+    const allInstructions = [
+      ...this.SCH.getPendingInstructions(),
+      ...this.SCH.getActiveInstructions()
+    ]
+    const tagStats: Record<string, number> = {}
+    for (const instruction of allInstructions) {
+      if (instruction.tags) {
+        instruction.tags.forEach(tag => {
+          tagStats[tag] = (tagStats[tag] || 0) + 1
+        })
+      }
+    }
+    return tagStats
+  }
+
+  /**
+   * 更新流水线状态
+   */
+  private updateStatus(): void {
+    this.status.setValue({
+      ifBufferSize: this.IF.getBufferSize(),
+      schPendingSize: this.SCH.getPendingQueueSize(),
+      schActiveSize: this.SCH.getActiveCount(),
+      totalCompleted: this.totalCompleted,
+      totalFailed: this.totalFailed,
+      totalCancelled: this.totalCancelled,
+    })
+  }
+
+  /**
+   * 获取流水线状态（供外部使用）
+   */
+  getStatus(): PipelineStatus {
+    return this.status.value
+  }
+
+  /**
+   * 获取IF缓冲区
+   */
+  getIFBuffer(): QueuedInstruction[] {
+    return this.IF.getBuffer()
+  }
+
+  /**
+   * 获取SCH pending队列
+   */
+  getSCHPendingQueue(): QueuedInstruction[] {
+    return this.SCH.getPendingQueue()
+  }
+
+  /**
+   * 获取SCH active指令
+   */
+  getSCHActiveInstructions(): QueuedInstruction[] {
+    return this.SCH.getActiveInstructions()
+  }
+}

package/src/debug.ts

@@ -0,0 +1,15 @@
+import { cpuEventCollector, cpuConsole, cpuLogger } from './logging'
+import { captureCallSource } from './logging/stack-parser'
+import { setLoggingProvider } from './logging/runtime'
+
+setLoggingProvider({
+  cpuEventCollector,
+  cpuConsole,
+  cpuLogger,
+  captureCallSource,
+})
+
+export * from './index'
+export * from './logging'
+
+

package/src/index.ts

@@ -0,0 +1,67 @@
+/**
+ * FrontCPU - 前端指令执行系统
+ *
+ * 解耦版：通过依赖注入实现零耦合架构
+ */
+
+// 核心Pipeline
+export { Pipeline } from './Pipeline'
+export type { PipelineStatus, PipelineConfig } from './Pipeline'
+
+// 核心类型
+export type {
+  QueuedInstruction,
+  InstructionContext,
+  InstructionStatus,
+  PipelineStage,
+  WriteBackExecution,
+} from './types'
+export {
+  PipelineStage as PipelineStageEnum,
+  InstructionStatus as InstructionStatusEnum,
+} from './types'
+
+// ISA相关
+export { registerISA, getISA, clearISA } from './isa'
+export type { ISADefinition, InstructionDefinition } from './isa/types'
+export type {
+  InstructionMeta,
+  HttpMethod,
+  RequestConfig,
+  MultiRequestConfig,
+  OptimisticSnapshot,
+  OptimisticConfig,
+  SchedulingStrategy,
+} from './isa/types'
+
+// 调度策略
+export type { ResourceStrategyConfig, StrategyContext } from './scheduling'
+export {
+  registerResourceStrategy,
+  registerResourceStrategies,
+  setDefaultSchedulingStrategy,
+} from './scheduling'
+
+// 依赖注入
+export { setHttpClient } from './utils/request'
+export { setCorrelationIdGenerator } from './stages/IF'
+
+// 抽象接口
+export type {
+  IHttpClient,
+  ILogger,
+  ICorrelationIdGenerator,
+  IReactiveState,
+  RequestConfig as IRequestConfig,
+} from './interfaces'
+
+// 指令取消工具
+export {
+  cancelInstruction,
+  isInstructionCancelled,
+  getCancellationInfo,
+  cancelInstructions,
+} from './utils/InstructionCancellation'
+
+// 可取消工具
+export { makeAbortable, cancellableDelay } from './utils/abortable'

package/src/interfaces.ts

@@ -0,0 +1,53 @@
+/**
+ * FrontCPU 抽象接口定义
+ *
+ * 这些接口用于解耦CPU核心系统与具体实现，
+ * 通过依赖注入实现零耦合架构。
+ */
+
+/**
+ * HTTP客户端接口
+ */
+export interface IHttpClient {
+  get<T>(url: string, config?: RequestConfig): Promise<T>
+  post<T>(url: string, data?: any, config?: RequestConfig): Promise<T>
+  patch<T>(url: string, data?: any, config?: RequestConfig): Promise<T>
+  put<T>(url: string, data?: any, config?: RequestConfig): Promise<T>
+  delete<T>(url: string, config?: RequestConfig): Promise<T>
+}
+
+/**
+ * HTTP请求配置
+ */
+export interface RequestConfig {
+  headers?: Record<string, string>
+  [key: string]: any
+}
+
+/**
+ * 日志接口
+ */
+export interface ILogger {
+  debug(tag: string, message: string, data?: any): void
+  info(tag: string, message: string, data?: any): void
+  warn(tag: string, message: string, data?: any): void
+  error(tag: string, message: string, data?: any): void
+}
+
+/**
+ * CorrelationId生成器接口
+ */
+export interface ICorrelationIdGenerator {
+  generate(): string
+}
+
+/**
+ * 响应式状态接口
+ *
+ * 用于适配不同框架的响应式系统（Vue、React、Svelte等）
+ */
+export interface IReactiveState<T> {
+  value: T
+  setValue(newValue: T): void
+  subscribe(callback: (value: T) => void): () => void
+}