openclaw-agent-dashboard 1.0.21 → 1.0.23

package/frontend/src/managers/RealtimeDataManager.ts

@@ -1,302 +0,0 @@
-/**
- * 实时数据管理器
- * 负责 WebSocket 连接管理和 HTTP 轮询回退
- */
-
-import type { ConnectionState, WebSocketMessage } from '../types'
-
-type EventCallback = (data: unknown) => void
-
-export interface RealtimeDataManagerOptions {
-  wsUrl?: string
-  httpFallback?: boolean
-  reconnectMaxAttempts?: number
-  reconnectDelay?: number
-  pollingInterval?: number
-}
-
-export class RealtimeDataManager {
-  private ws: WebSocket | null = null
-  private connectionState: ConnectionState = {
-    status: 'disconnected',
-    reconnectAttempts: 0
-  }
-  private subscribers: Map<string, Set<EventCallback>> = new Map()
-  private options: Required<RealtimeDataManagerOptions>
-  private reconnectTimer: ReturnType<typeof setTimeout> | null = null
-  private pollingTimer: ReturnType<typeof setInterval> | null = null
-  private heartbeatTimer: ReturnType<typeof setInterval> | null = null
-  private stateListeners: Set<(state: ConnectionState) => void> = new Set()
-
-  constructor(options: RealtimeDataManagerOptions = {}) {
-    this.options = {
-      wsUrl: options.wsUrl || `ws://${window.location.host}/ws`,
-      httpFallback: options.httpFallback ?? true,
-      reconnectMaxAttempts: options.reconnectMaxAttempts ?? 5,
-      reconnectDelay: options.reconnectDelay ?? 3000,
-      pollingInterval: options.pollingInterval ?? 10000
-    }
-  }
-
-  /**
-   * 建立 WebSocket 连接
-   */
-  connect(): void {
-    if (this.ws?.readyState === WebSocket.OPEN) {
-      return
-    }
-
-    this.updateConnectionState({ status: 'connecting', reconnectAttempts: this.connectionState.reconnectAttempts })
-
-    try {
-      this.ws = new WebSocket(this.options.wsUrl)
-      
-      this.ws.onopen = () => {
-        this.updateConnectionState({
-          status: 'connected',
-          lastConnected: Date.now(),
-          reconnectAttempts: 0
-        })
-        this.startHeartbeat()
-        this.stopPolling()
-      }
-
-      this.ws.onclose = () => {
-        this.stopHeartbeat()
-        this.handleDisconnect()
-      }
-
-      this.ws.onerror = (error) => {
-        console.error('WebSocket error:', error)
-        this.updateConnectionState({
-          status: 'error',
-          errorMessage: 'WebSocket connection failed'
-        })
-        // 连接失败时触发重连或 HTTP 轮询回退
-        this.handleDisconnect()
-      }
-
-      this.ws.onmessage = (event) => {
-        try {
-          const message: WebSocketMessage = JSON.parse(event.data)
-          this.handleMessage(message)
-        } catch (e) {
-          console.error('Failed to parse WebSocket message:', e)
-        }
-      }
-    } catch (error) {
-      console.error('Failed to create WebSocket:', error)
-      this.handleDisconnect()
-    }
-  }
-
-  /**
-   * 断开连接
-   */
-  disconnect(): void {
-    this.stopHeartbeat()
-    this.stopReconnect()
-    this.stopPolling()
-    
-    if (this.ws) {
-      this.ws.close()
-      this.ws = null
-    }
-
-    this.updateConnectionState({ status: 'disconnected', reconnectAttempts: 0 })
-  }
-
-  /**
-   * 获取连接状态
-   */
-  getConnectionState(): ConnectionState {
-    return { ...this.connectionState }
-  }
-
-  /**
-   * 订阅事件
-   */
-  subscribe(event: string, callback: EventCallback): () => void {
-    if (!this.subscribers.has(event)) {
-      this.subscribers.set(event, new Set())
-    }
-    this.subscribers.get(event)!.add(callback)
-
-    // 返回取消订阅函数
-    return () => {
-      this.subscribers.get(event)?.delete(callback)
-    }
-  }
-
-  /**
-   * 监听连接状态变化
-   */
-  onStateChange(callback: (state: ConnectionState) => void): () => void {
-    this.stateListeners.add(callback)
-    return () => {
-      this.stateListeners.delete(callback)
-    }
-  }
-
-  /**
-   * 是否已连接
-   */
-  isConnected(): boolean {
-    return this.connectionState.status === 'connected'
-  }
-
-  /**
-   * 获取初始数据
-   */
-  async fetchInitialData(): Promise<void> {
-    try {
-      const [collaboration, tasks, performance, agents] = await Promise.all([
-        fetch('/api/collaboration').then(r => r.json()).catch(() => null),
-        fetch('/api/tasks').then(r => r.json()).catch(() => null),
-        fetch('/api/performance?range=20m').then(r => r.json()).catch(() => null),
-        fetch('/api/agents').then(r => r.json()).catch(() => null)
-      ])
-
-      if (collaboration) this.emit('collaboration', collaboration)
-      if (tasks) this.emit('tasks', tasks)
-      if (performance) this.emit('performance', performance)
-      if (agents) this.emit('agents', agents)
-    } catch (error) {
-      console.error('Failed to fetch initial data:', error)
-    }
-  }
-
-  private handleMessage(message: WebSocketMessage): void {
-    if (message.type === 'ping') {
-      this.send({ type: 'pong', timestamp: Date.now() })
-      return
-    }
-
-    if (message.type === 'full_state' && message.data) {
-      const data = message.data as Record<string, unknown>
-      if (data.agents) this.emit('agents', data.agents)
-      if (data.subagents) this.emit('subagents', data.subagents)
-      if (data.collaboration) this.emit('collaboration', data.collaboration)
-      // 统一为 { tasks: array }，与 HTTP 轮询和组件 handleTasksUpdate 约定一致，避免形态不一致导致不更新或误覆盖
-      const tasksArray = Array.isArray(data.tasks) ? data.tasks : []
-      this.emit('tasks', { tasks: tasksArray })
-      if (data.performance) this.emit('performance', data.performance)
-      return
-    }
-
-    // 新增：增量状态更新
-    if (message.type === 'state_update' && message.data) {
-      const data = message.data as Record<string, unknown>
-      if (data.agents) {
-        this.emit('agents_update', data.agents)  // 新增事件
-      }
-      return
-    }
-
-    if (message.channel && message.data) {
-      this.emit(message.channel, message.data)
-    }
-  }
-
-  private emit(event: string, data: unknown): void {
-    const callbacks = this.subscribers.get(event)
-    if (callbacks) {
-      callbacks.forEach(cb => {
-        try {
-          cb(data)
-        } catch (e) {
-          console.error(`Error in subscriber callback for ${event}:`, e)
-        }
-      })
-    }
-  }
-
-  private send(message: unknown): void {
-    if (this.ws?.readyState === WebSocket.OPEN) {
-      this.ws.send(JSON.stringify(message))
-    }
-  }
-
-  private handleDisconnect(): void {
-    if (this.connectionState.reconnectAttempts < this.options.reconnectMaxAttempts) {
-      this.scheduleReconnect()
-    } else if (this.options.httpFallback) {
-      this.startPolling()
-    }
-  }
-
-  private scheduleReconnect(): void {
-    this.stopReconnect()
-    
-    const delay = this.options.reconnectDelay * Math.pow(1.5, this.connectionState.reconnectAttempts)
-    
-    this.reconnectTimer = setTimeout(() => {
-      this.updateConnectionState({
-        status: 'connecting',
-        reconnectAttempts: this.connectionState.reconnectAttempts + 1
-      })
-      this.connect()
-    }, delay)
-  }
-
-  private stopReconnect(): void {
-    if (this.reconnectTimer) {
-      clearTimeout(this.reconnectTimer)
-      this.reconnectTimer = null
-    }
-  }
-
-  private startHeartbeat(): void {
-    this.stopHeartbeat()
-    this.heartbeatTimer = setInterval(() => {
-      this.send({ type: 'ping', timestamp: Date.now() })
-    }, 30000)
-  }
-
-  private stopHeartbeat(): void {
-    if (this.heartbeatTimer) {
-      clearInterval(this.heartbeatTimer)
-      this.heartbeatTimer = null
-    }
-  }
-
-  private startPolling(): void {
-    this.stopPolling()
-    this.updateConnectionState({
-      status: 'connected',
-      errorMessage: 'Using HTTP polling fallback'
-    })
-    this.fetchInitialData()
-    this.pollingTimer = setInterval(() => {
-      this.fetchInitialData()
-    }, this.options.pollingInterval)
-  }
-
-  private stopPolling(): void {
-    if (this.pollingTimer) {
-      clearInterval(this.pollingTimer)
-      this.pollingTimer = null
-    }
-  }
-
-  private updateConnectionState(updates: Partial<ConnectionState>): void {
-    this.connectionState = { ...this.connectionState, ...updates }
-    this.stateListeners.forEach(listener => {
-      try {
-        listener(this.connectionState)
-      } catch (e) {
-        console.error('Error in state listener:', e)
-      }
-    })
-  }
-}
-
-// 单例实例
-let instance: RealtimeDataManager | null = null
-
-export function getRealtimeManager(options?: RealtimeDataManagerOptions): RealtimeDataManager {
-  if (!instance) {
-    instance = new RealtimeDataManager(options)
-  }
-  return instance
-}

package/frontend/src/managers/StateManager.ts

@@ -1,128 +0,0 @@
-/**
- * 状态管理器
- * 负责集中状态管理和数据缓存
- */
-
-import { ref, type Ref } from 'vue'
-
-interface CacheEntry<T> {
-  value: T
-  expiresAt: number
-}
-
-type StateKey = string
-
-export class StateManager {
-  private state: Map<StateKey, Ref<unknown>> = new Map()
-  private cache: Map<StateKey, CacheEntry<unknown>> = new Map()
-  private defaultTTL = 5000 // 默认缓存 5 秒
-
-  /**
-   * 获取状态值
-   */
-  getState<T>(key: StateKey): T | undefined {
-    const stateRef = this.state.get(key)
-    return stateRef?.value as T | undefined
-  }
-
-  /**
-   * 设置状态值
-   */
-  setState<T>(key: StateKey, value: T): void {
-    const existing = this.state.get(key)
-    if (existing) {
-      existing.value = value
-    } else {
-      this.state.set(key, ref(value))
-    }
-  }
-
-  /**
-   * 获取响应式状态引用
-   */
-  useStore<T>(key: StateKey, defaultValue: T): Ref<T> {
-    const existing = this.state.get(key)
-    if (existing) {
-      return existing as Ref<T>
-    }
-    
-    const newRef = ref<T>(defaultValue) as Ref<T>
-    this.state.set(key, newRef)
-    return newRef
-  }
-
-  /**
-   * 获取缓存数据
-   */
-  getCache<T>(key: StateKey): T | undefined {
-    const entry = this.cache.get(key)
-    if (!entry) return undefined
-    
-    if (Date.now() > entry.expiresAt) {
-      this.cache.delete(key)
-      return undefined
-    }
-    
-    return entry.value as T
-  }
-
-  /**
-   * 设置缓存数据
-   */
-  setCache<T>(key: StateKey, value: T, ttl?: number): void {
-    this.cache.set(key, {
-      value,
-      expiresAt: Date.now() + (ttl ?? this.defaultTTL)
-    })
-  }
-
-  /**
-   * 检查缓存是否有效
-   */
-  hasValidCache(key: StateKey): boolean {
-    const entry = this.cache.get(key)
-    if (!entry) return false
-    return Date.now() <= entry.expiresAt
-  }
-
-  /**
-   * 使缓存失效
-   */
-  invalidateCache(key: StateKey): void {
-    this.cache.delete(key)
-  }
-
-  /**
-   * 批量更新状态
-   */
-  batchUpdate(updates: Record<StateKey, unknown>): void {
-    Object.entries(updates).forEach(([key, value]) => {
-      this.setState(key, value)
-    })
-  }
-
-  /**
-   * 清除所有状态
-   */
-  clearAll(): void {
-    this.state.clear()
-    this.cache.clear()
-  }
-
-  /**
-   * 清除所有缓存
-   */
-  clearCache(): void {
-    this.cache.clear()
-  }
-}
-
-// 单例实例
-let instance: StateManager | null = null
-
-export function getStateManager(): StateManager {
-  if (!instance) {
-    instance = new StateManager()
-  }
-  return instance
-}

package/frontend/src/managers/index.ts

@@ -1,5 +0,0 @@
-// 管理器入口文件
-
-export { RealtimeDataManager, getRealtimeManager, type RealtimeDataManagerOptions } from './RealtimeDataManager'
-export { StateManager, getStateManager } from './StateManager'
-export { EventDispatcher, getEventDispatcher } from './EventDispatcher'

package/frontend/src/types/collaboration.ts

@@ -1,135 +0,0 @@
-// 协作流程类型定义
-
-export type NodeStatus = 'idle' | 'working' | 'active' | 'completed' | 'error'
-export type NodeType = 'agent' | 'task' | 'tool' | 'model'
-
-export interface AgentError {
-  hasError: boolean
-  type: string  // rate-limit, token-limit, timeout, quota, unknown
-  message: string
-  timestamp: number
-}
-
-export interface StuckWarning {
-  isStuck: boolean
-  idleSeconds: number
-  lastUpdate: number
-  // 卡顿原因分析
-  reason?: 'waiting_for_child' | 'self_busy' | 'unknown'
-  reasonDetail?: string
-  waitingFor?: {
-    agentId: string
-    task?: string
-  }
-}
-
-export type SubStatus = 'thinking' | 'tool_executing' | 'waiting_llm' | 'waiting_child'
-
-export interface CollaborationNode {
-  id: string
-  type: NodeType
-  name: string
-  status: NodeStatus
-  timestamp?: number
-  position?: { x: number; y: number }
-  metadata?: Record<string, unknown>
-  // 当前任务（有效描述）
-  currentTask?: string
-  // 错误信息
-  error?: AgentError
-  // 卡顿警告
-  stuckWarning?: StuckWarning
-  // 详细状态 (TR5)
-  subStatus?: SubStatus
-  currentAction?: string
-  toolName?: string
-  waitingFor?: string
-}
-
-export type EdgeType = 'delegates' | 'calls' | 'returns' | 'error' | 'model'
-
-export interface CollaborationEdge {
-  id: string
-  source: string
-  target: string
-  type: EdgeType
-  label?: string
-  animated?: boolean
-}
-
-export interface ModelCall {
-  id: string
-  agentId: string
-  model: string
-  sessionId: string
-  trigger: string
-  tokens: number
-  timestamp: number
-  time: string
-}
-
-export interface CollaborationFlow {
-  nodes: CollaborationNode[]
-  edges: CollaborationEdge[]
-  activePath: string[]
-  lastUpdate: number
-  mainAgentId?: string
-  agentModels?: Record<string, { primary?: string; fallbacks?: string[] }>
-  models?: string[]
-  recentCalls?: ModelCall[]
-  // 拓扑信息（用于嵌套组网布局）
-  hierarchy?: Record<string, string[]>  // agentId -> [子 agent IDs]
-  depths?: Record<string, number>  // agentId -> 层级深度
-  // 多任务并行数据（按 agent 分组）
-  agentActiveTasks?: Record<string, ActiveTask[]>
-}
-
-export interface AgentDynamicStatus {
-  status: string  // 'idle' | 'working'
-  subStatus?: SubStatus
-  currentAction?: string
-  toolName?: string
-  waitingFor?: string
-}
-
-export interface AgentDisplayStatus {
-  /** 状态：idle 或 working */
-  status: 'idle' | 'working'
-  /** 显示文本，如 "等待响应"、"执行命令"、"处理中..." */
-  display: string
-  /** 持续时间（秒） */
-  duration: number
-  /** 是否需要警告（如等待时间过长） */
-  alert: boolean
-}
-
-/** 单个活跃任务（用于多任务并行展示） */
-export interface ActiveTask {
-  /** 任务ID */
-  id: string
-  /** 任务名称（清理后） */
-  name: string
-  /** 状态：working | retrying | failed */
-  status: 'working' | 'retrying' | 'failed'
-  /** 开始时间戳 */
-  timestamp?: number
-  /** 主 Agent 任务时，指向被派发的子 Agent */
-  childAgentId?: string
-  /** FEATURE_ID（如果有） */
-  featureId?: string
-}
-
-export interface CollaborationDynamic {
-  activePath: string[]
-  recentCalls: ModelCall[]
-  agentStatuses: Record<string, string>
-  agentDynamicStatuses?: Record<string, AgentDynamicStatus>
-  /** 详细显示状态（TR9-1：基于时间阈值） */
-  agentDisplayStatuses?: Record<string, AgentDisplayStatus>
-  taskNodes: CollaborationNode[]
-  taskEdges: CollaborationEdge[]
-  mainAgentId: string
-  lastUpdate: number
-  /** 多任务并行数据（按 agent 分组） */
-  agentActiveTasks?: Record<string, ActiveTask[]>
-}

package/frontend/src/types/index.ts

@@ -1,20 +0,0 @@
-// 类型定义入口文件
-
-export * from './collaboration'
-export * from './task'
-export * from './performance'
-
-// 通用类型
-export interface ConnectionState {
-  status: 'disconnected' | 'connecting' | 'connected' | 'error'
-  lastConnected?: number
-  reconnectAttempts: number
-  errorMessage?: string
-}
-
-export interface WebSocketMessage {
-  type: 'update' | 'ping' | 'pong' | 'error'
-  channel?: 'collaboration' | 'tasks' | 'performance'
-  data?: unknown
-  timestamp: number
-}

package/frontend/src/types/performance.ts

@@ -1,105 +0,0 @@
-// 性能数据类型定义
-
-export interface PerformanceCurrent {
-  tpm: number
-  rpm: number
-  windowTotal: {
-    tokens: number
-    requests: number
-  }
-}
-
-export interface PerformanceHistory {
-  tpm: number[]
-  rpm: number[]
-  timestamps: number[]
-}
-
-export interface PerformanceStatistics {
-  avgTpm: number
-  peakTpm: number
-  peakTime: string
-}
-
-export interface PerformanceData {
-  current: PerformanceCurrent
-  history: PerformanceHistory
-  statistics: PerformanceStatistics
-}
-
-export type TimeRange = '20m' | '1h' | '24h'
-
-export interface PerformanceAlert {
-  id: string
-  type: 'high_tpm'
-  message: string
-  value: number
-  threshold: number
-  timestamp: number
-  acknowledged: boolean
-}
-
-// 调用详情类型
-export interface CallDetail {
-  agentId: string
-  sessionId: string
-  model: string
-  tokens: number
-  trigger: string
-  inputTokens: number
-  outputTokens: number
-  time: string
-}
-
-export interface CallDetailsResponse {
-  timeWindow: string
-  calls: CallDetail[]
-  totalCalls: number
-  totalTokens: number
-  summary: {
-    avgTokens: number
-  }
-}
-
-// Token 分析类型
-export interface TokenSummary {
-  input: number
-  output: number
-  cacheRead: number
-  cacheWrite: number
-  total: number
-  cacheHitRate: number
-}
-
-export interface TokenCost {
-  input: number
-  output: number
-  cacheRead: number
-  cacheWrite: number
-  total: number
-  saved: number
-  savedPercent: number
-}
-
-export interface AgentTokenData {
-  agent: string
-  input: number
-  output: number
-  cacheRead: number
-  cacheWrite: number
-  total: number
-  percent: number
-}
-
-export interface TokenTrend {
-  timestamps: number[]
-  input: number[]
-  output: number[]
-}
-
-export interface TokenAnalysisData {
-  summary: TokenSummary
-  cost: TokenCost
-  byAgent: AgentTokenData[]
-  trend: TokenTrend | null
-}