openclaw-agent-dashboard 1.0.4

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

@@ -0,0 +1,120 @@
+// 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

@@ -0,0 +1,7 @@
+// 组合函数入口文件
+
+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

@@ -0,0 +1,48 @@
+/**
+ * 防抖组合函数
+ */
+
+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

@@ -0,0 +1,52 @@
+/**
+ * 实时数据组合函数
+ */
+
+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

@@ -0,0 +1,52 @@
+/**
+ * 状态管理组合函数
+ */
+
+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

@@ -0,0 +1,46 @@
+/**
+ * 节流组合函数
+ */
+
+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

@@ -0,0 +1,106 @@
+/**
+ * 虚拟滚动组合函数
+ */
+
+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

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

package/frontend/src/managers/EventDispatcher.ts

@@ -0,0 +1,127 @@
+/**
+ * 事件分发器
+ * 负责组件间事件通信
+ */
+
+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
+}