openclaw-agent-dashboard 1.0.21 → 1.0.23

package/frontend/src/components/timeline/types.ts

@@ -1,120 +0,0 @@
-// Timeline 类型定义
-
-/** 步骤类型 */
-export type StepType =
-  | 'user'        // 用户消息
-  | 'thinking'    // Agent 思考
-  | 'text'        // Agent 文本响应
-  | 'toolCall'    // 工具调用
-  | 'toolResult'  // 工具结果
-  | 'error'       // 错误
-
-/** 步骤状态 */
-export type StepStatus = 'pending' | 'running' | 'success' | 'error'
-
-/** Token 使用 */
-export interface TokenUsage {
-  input: number
-  output: number
-  cumulative?: number
-}
-
-/** 时序步骤 */
-export interface TimelineStep {
-  id: string
-  type: StepType
-  status: StepStatus
-  timestamp: number
-  duration?: number
-
-  // 内容
-  content?: string
-  thinking?: string
-
-  // 工具调用
-  toolName?: string
-  toolCallId?: string
-  toolArguments?: Record<string, unknown>
-  toolResult?: string
-  toolResultStatus?: 'ok' | 'error'
-  toolResultError?: string  // 工具失败时的错误信息
-
-  // 工具链路关联
-  pairedToolCallId?: string   // toolResult 专用：对应的 toolCall ID
-  pairedToolResultId?: string // toolCall 专用：对应的 toolResult ID
-  executionTime?: number      // 工具执行耗时（ms），toolResult 专用
-
-  // 错误
-  errorMessage?: string
-  errorType?: string
-
-  // 统计
-  tokens?: TokenUsage
-
-  // 展示控制
-  collapsed?: boolean
-
-  // 消息来源（用于区分真实用户和其他 Agent）
-  senderId?: string      // 发送者 Agent ID（如 'main'）
-  senderName?: string    // 发送者显示名（如 '老K'）
-}
-
-/** 时序统计 */
-export interface TimelineStats {
-  totalDuration: number
-  totalInputTokens: number
-  totalOutputTokens: number
-  toolCallCount: number
-  stepCount: number
-}
-
-/** LLM 轮次 */
-export interface LLMRound {
-  id: string           // round_1, round_2, ...
-  index: number        // 轮次序号（从1开始）
-  trigger: 'user_input' | 'tool_result' | 'subagent_result' | 'start'
-  triggerBy?: string   // 触发来源描述
-  stepIds: string[]    // 该轮次包含的步骤 ID 列表
-  duration: number     // 该轮次耗时（ms）
-  tokens?: TokenUsage  // 该轮次的 token 使用
-}
-
-/** 时序会话响应 */
-export interface TimelineResponse {
-  sessionId: string | null
-  agentId: string
-  agentName?: string
-  model?: string
-  startedAt: number | null
-  status: 'running' | 'completed' | 'error' | 'empty' | 'no_sessions'
-  steps: TimelineStep[]
-  stats: TimelineStats
-  message?: string
-  // LLM 轮次分组
-  rounds?: LLMRound[]
-  roundMode?: boolean
-}
-
-/** 步骤图标和颜色配置 */
-export const stepConfig: Record<StepType, { icon: string; bgColor: string; borderColor: string; label: string }> = {
-  user: { icon: '👤', bgColor: '#f0f9ff', borderColor: '#3b82f6', label: '用户' },
-  thinking: { icon: '🧠', bgColor: '#fef3c7', borderColor: '#f59e0b', label: '思考' },
-  text: { icon: '🤖', bgColor: '#f0fdf4', borderColor: '#22c55e', label: '回复' },
-  toolCall: { icon: '🔧', bgColor: '#f5f3ff', borderColor: '#8b5cf6', label: '调用' },
-  toolResult: { icon: '✅', bgColor: '#ecfdf5', borderColor: '#10b981', label: '结果' },
-  error: { icon: '⚠️', bgColor: '#fef2f2', borderColor: '#dc2626', label: '错误' }
-}
-
-/**
- * 获取用户步骤的显示标签
- * 如果有 senderName，显示发送者名称；否则显示"用户"
- */
-export function getUserStepLabel(step: TimelineStep): string {
-  if (step.senderName) {
-    return step.senderName
-  }
-  if (step.senderId) {
-    return step.senderId
-  }
-  return '用户'
-}

package/frontend/src/composables/index.ts

@@ -1,7 +0,0 @@
-// 组合函数入口文件
-
-export { useDebounce } from './useDebounce'
-export { useThrottle } from './useThrottle'
-export { useRealtime } from './useRealtime'
-export { useState, useCache } from './useState'
-export { useVirtualScroll } from './useVirtualScroll'

package/frontend/src/composables/useDebounce.ts

@@ -1,48 +0,0 @@
-/**
- * 防抖组合函数
- */
-
-import { ref, onUnmounted } from 'vue'
-
-export function useDebounce<T extends (...args: unknown[]) => unknown>(
-  fn: T,
-  delay: number = 300
-): { debouncedFn: T; cancel: () => void; flush: () => void } {
-  const timer = ref<ReturnType<typeof setTimeout> | null>(null)
-  let lastArgs: unknown[] | null = null
-
-  const debouncedFn = ((...args: unknown[]) => {
-    lastArgs = args
-    if (timer.value) {
-      clearTimeout(timer.value)
-    }
-    timer.value = setTimeout(() => {
-      fn(...args)
-      timer.value = null
-      lastArgs = null
-    }, delay)
-  }) as T
-
-  const cancel = () => {
-    if (timer.value) {
-      clearTimeout(timer.value)
-      timer.value = null
-      lastArgs = null
-    }
-  }
-
-  const flush = () => {
-    if (timer.value && lastArgs) {
-      clearTimeout(timer.value)
-      fn(...lastArgs)
-      timer.value = null
-      lastArgs = null
-    }
-  }
-
-  onUnmounted(() => {
-    cancel()
-  })
-
-  return { debouncedFn, cancel, flush }
-}

package/frontend/src/composables/useRealtime.ts

@@ -1,52 +0,0 @@
-/**
- * 实时数据组合函数
- */
-
-import { ref, onMounted, onUnmounted } from 'vue'
-import { getRealtimeManager } from '../managers'
-import type { ConnectionState } from '../types'
-
-export function useRealtime() {
-  const manager = getRealtimeManager()
-  const connectionState = ref<ConnectionState>(manager.getConnectionState())
-  const isConnected = ref(false)
-
-  let unsubscribeState: (() => void) | null = null
-
-  const subscribe = <T>(event: string, callback: (data: T) => void) => {
-    return manager.subscribe(event, callback as (data: unknown) => void)
-  }
-
-  const connect = () => {
-    manager.connect()
-  }
-
-  const disconnect = () => {
-    manager.disconnect()
-  }
-
-  onMounted(() => {
-    unsubscribeState = manager.onStateChange((state) => {
-      connectionState.value = state
-      isConnected.value = state.status === 'connected'
-    })
-    
-    if (!manager.isConnected()) {
-      manager.connect()
-    }
-  })
-
-  onUnmounted(() => {
-    if (unsubscribeState) {
-      unsubscribeState()
-    }
-  })
-
-  return {
-    connectionState,
-    isConnected,
-    subscribe,
-    connect,
-    disconnect
-  }
-}

package/frontend/src/composables/useState.ts

@@ -1,52 +0,0 @@
-/**
- * 状态管理组合函数
- */
-
-import { computed, type Ref } from 'vue'
-import { getStateManager } from '../managers'
-
-export function useState<T>(key: string, defaultValue: T): Ref<T> {
-  const manager = getStateManager()
-  return manager.useStore(key, defaultValue)
-}
-
-export function useCache<T>(key: string, fetcher: () => Promise<T>, ttl?: number) {
-  const manager = getStateManager()
-  const data = useState<T | null>(`cache:${key}`, null)
-  const loading = useState(`cache:${key}:loading`, false)
-  const error = useState<Error | null>(`cache:${key}:error`, null)
-
-  const fetch = async () => {
-    // 检查缓存
-    if (manager.hasValidCache(key)) {
-      data.value = manager.getCache<T>(key) ?? null
-      return
-    }
-
-    loading.value = true
-    error.value = null
-
-    try {
-      const result = await fetcher()
-      data.value = result
-      manager.setCache(key, result, ttl)
-    } catch (e) {
-      error.value = e as Error
-    } finally {
-      loading.value = false
-    }
-  }
-
-  const invalidate = () => {
-    manager.invalidateCache(key)
-    data.value = null
-  }
-
-  return {
-    data: computed(() => data.value),
-    loading: computed(() => loading.value),
-    error: computed(() => error.value),
-    fetch,
-    invalidate
-  }
-}

package/frontend/src/composables/useThrottle.ts

@@ -1,46 +0,0 @@
-/**
- * 节流组合函数
- */
-
-import { ref, onUnmounted } from 'vue'
-
-export function useThrottle<T extends (...args: unknown[]) => unknown>(
-  fn: T,
-  interval: number = 100
-): { throttledFn: T; cancel: () => void } {
-  const lastExec = ref(0)
-  const timer = ref<ReturnType<typeof setTimeout> | null>(null)
-
-  const throttledFn = ((...args: unknown[]) => {
-    const now = Date.now()
-    const timeSinceLastExec = now - lastExec.value
-
-    if (timeSinceLastExec >= interval) {
-      lastExec.value = now
-      fn(...args)
-    } else {
-      // 确保最后一次调用会被执行
-      if (timer.value) {
-        clearTimeout(timer.value)
-      }
-      timer.value = setTimeout(() => {
-        lastExec.value = Date.now()
-        fn(...args)
-        timer.value = null
-      }, interval - timeSinceLastExec)
-    }
-  }) as T
-
-  const cancel = () => {
-    if (timer.value) {
-      clearTimeout(timer.value)
-      timer.value = null
-    }
-  }
-
-  onUnmounted(() => {
-    cancel()
-  })
-
-  return { throttledFn, cancel }
-}

package/frontend/src/composables/useVirtualScroll.ts

@@ -1,106 +0,0 @@
-/**
- * 虚拟滚动组合函数
- */
-
-import { ref, computed, onMounted, onUnmounted, type Ref } from 'vue'
-
-interface VirtualScrollOptions {
-  itemHeight: number
-  bufferSize?: number
-}
-
-export function useVirtualScroll(
-  containerRef: Ref<HTMLElement | null>,
-  totalCount: Ref<number>,
-  options: VirtualScrollOptions
-) {
-  const { itemHeight, bufferSize = 5 } = options
-  
-  const scrollTop = ref(0)
-  const containerHeight = ref(0)
-
-  const visibleCount = computed(() => {
-    return Math.ceil(containerHeight.value / itemHeight) + bufferSize * 2
-  })
-
-  const startIndex = computed(() => {
-    const rawStart = Math.floor(scrollTop.value / itemHeight) - bufferSize
-    return Math.max(0, rawStart)
-  })
-
-  const endIndex = computed(() => {
-    return Math.min(totalCount.value, startIndex.value + visibleCount.value)
-  })
-
-  const offsetY = computed(() => {
-    return startIndex.value * itemHeight
-  })
-
-  const totalHeight = computed(() => {
-    return totalCount.value * itemHeight
-  })
-
-  const visibleItems = computed(() => {
-    const items: { index: number; style: { transform: string } }[] = []
-    for (let i = startIndex.value; i < endIndex.value; i++) {
-      items.push({
-        index: i,
-        style: {
-          transform: `translateY(${i * itemHeight}px)`
-        }
-      })
-    }
-    return items
-  })
-
-  const scrollToIndex = (index: number) => {
-    if (containerRef.value) {
-      containerRef.value.scrollTop = index * itemHeight
-    }
-  }
-
-  const handleScroll = () => {
-    if (containerRef.value) {
-      scrollTop.value = containerRef.value.scrollTop
-    }
-  }
-
-  const updateContainerHeight = () => {
-    if (containerRef.value) {
-      containerHeight.value = containerRef.value.clientHeight
-    }
-  }
-
-  let resizeObserver: ResizeObserver | null = null
-
-  onMounted(() => {
-    if (containerRef.value) {
-      containerRef.value.addEventListener('scroll', handleScroll, { passive: true })
-      
-      resizeObserver = new ResizeObserver(() => {
-        updateContainerHeight()
-      })
-      resizeObserver.observe(containerRef.value)
-      updateContainerHeight()
-    }
-  })
-
-  onUnmounted(() => {
-    if (containerRef.value) {
-      containerRef.value.removeEventListener('scroll', handleScroll)
-    }
-    if (resizeObserver) {
-      resizeObserver.disconnect()
-    }
-  })
-
-  return {
-    startIndex,
-    endIndex,
-    offsetY,
-    totalHeight,
-    visibleItems,
-    scrollToIndex,
-    updateContainerHeight
-  }
-}

package/frontend/src/main.ts

@@ -1,4 +0,0 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-
-createApp(App).mount('#app')

package/frontend/src/managers/EventDispatcher.ts

@@ -1,127 +0,0 @@
-/**
- * 事件分发器
- * 负责组件间事件通信
- */
-
-type EventHandler = (payload?: unknown) => void
-
-interface QueuedEvent {
-  event: string
-  payload?: unknown
-}
-
-export class EventDispatcher {
-  private listeners: Map<string, Set<EventHandler>> = new Map()
-  private eventQueue: QueuedEvent[] = []
-  private isFlushing = false
-  private maxQueueSize = 100
-
-  /**
-   * 分发事件
-   */
-  emit(event: string, payload?: unknown): void {
-    const handlers = this.listeners.get(event)
-    if (handlers) {
-      handlers.forEach(handler => {
-        try {
-          handler(payload)
-        } catch (e) {
-          console.error(`Error in event handler for ${event}:`, e)
-        }
-      })
-    }
-  }
-
-  /**
-   * 监听事件
-   * 返回取消监听函数
-   */
-  on(event: string, handler: EventHandler): () => void {
-    if (!this.listeners.has(event)) {
-      this.listeners.set(event, new Set())
-    }
-    this.listeners.get(event)!.add(handler)
-
-    return () => {
-      this.listeners.get(event)?.delete(handler)
-    }
-  }
-
-  /**
-   * 监听一次事件
-   */
-  once(event: string, handler: EventHandler): void {
-    const wrapper: EventHandler = (payload) => {
-      this.off(event, wrapper)
-      handler(payload)
-    }
-    this.on(event, wrapper)
-  }
-
-  /**
-   * 取消监听
-   */
-  off(event: string, handler: EventHandler): void {
-    this.listeners.get(event)?.delete(handler)
-  }
-
-  /**
-   * 将事件加入队列
-   */
-  enqueue(event: string, payload?: unknown): void {
-    if (this.eventQueue.length >= this.maxQueueSize) {
-      console.warn('Event queue is full, dropping oldest event')
-      this.eventQueue.shift()
-    }
-    this.eventQueue.push({ event, payload })
-  }
-
-  /**
-   * 刷新队列中的所有事件
-   */
-  flush(): void {
-    if (this.isFlushing) return
-    
-    this.isFlushing = true
-    try {
-      while (this.eventQueue.length > 0) {
-        const { event, payload } = this.eventQueue.shift()!
-        this.emit(event, payload)
-      }
-    } finally {
-      this.isFlushing = false
-    }
-  }
-
-  /**
-   * 获取队列长度
-   */
-  getQueueLength(): number {
-    return this.eventQueue.length
-  }
-
-  /**
-   * 清空队列
-   */
-  clearQueue(): void {
-    this.eventQueue = []
-  }
-
-  /**
-   * 清除所有监听器
-   */
-  clearAll(): void {
-    this.listeners.clear()
-    this.eventQueue = []
-  }
-}
-
-// 单例实例
-let instance: EventDispatcher | null = null
-
-export function getEventDispatcher(): EventDispatcher {
-  if (!instance) {
-    instance = new EventDispatcher()
-  }
-  return instance
-}