feat: add MaiSaka real-time chat flow monitoring component and WebSocket event handling
- Implemented the MaiSakaMonitor component for real-time monitoring of chat flow using WebSocket. - Created a custom hook `useMaisakaMonitor` to manage WebSocket subscriptions and event states. - Developed a backend module for broadcasting various monitoring events through WebSocket. - Added serialization functions for messages and tool calls to optimize data transmission. - Included event emission functions for session start, message ingestion, cycle start, timing gate results, planner requests/responses, tool executions, and replier requests/responses.
This commit is contained in:
DrSmoothl
@@ -36,7 +36,7 @@ export const menuSections: MenuSection[] = [
|
||||
{ icon: LayoutGrid, label: 'sidebar.menu.configTemplate', path: '/config/pack-market' },
|
||||
{ icon: Sliders, label: 'sidebar.menu.pluginConfig', path: '/plugin-config' },
|
||||
{ icon: FileSearch, label: 'sidebar.menu.logViewer', path: '/logs', searchDescription: 'search.items.logsDesc' },
|
||||
{ icon: Activity, label: 'sidebar.menu.plannerMonitor', path: '/planner-monitor' },
|
||||
{ icon: Activity, label: 'sidebar.menu.maisakaMonitor', path: '/planner-monitor' },
|
||||
{ icon: MessageSquare, label: 'sidebar.menu.localChat', path: '/chat' },
|
||||
],
|
||||
},
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
"configTemplate": "Config Templates",
|
||||
"pluginConfig": "Plugin Config",
|
||||
"logViewer": "Log Viewer",
|
||||
"plannerMonitor": "Planner & Replier Monitor",
|
||||
"maisakaMonitor": "MaiSaka Chat Monitor",
|
||||
"localChat": "Local Chat",
|
||||
"settings": "Settings"
|
||||
}
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
"configTemplate": "設定テンプレート",
|
||||
"pluginConfig": "プラグイン設定",
|
||||
"logViewer": "ログビューア",
|
||||
"plannerMonitor": "プランナー & リプライヤー監視",
|
||||
"maisakaMonitor": "MaiSaka チャット監視",
|
||||
"localChat": "ローカルチャット",
|
||||
"settings": "設定"
|
||||
}
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
"configTemplate": "설정 템플릿",
|
||||
"pluginConfig": "플러그인 설정",
|
||||
"logViewer": "로그 뷰어",
|
||||
"plannerMonitor": "플래너 & 리플라이어 모니터",
|
||||
"maisakaMonitor": "MaiSaka 채팅 모니터",
|
||||
"localChat": "로컬 채팅",
|
||||
"settings": "설정"
|
||||
}
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
"configTemplate": "配置模板市场",
|
||||
"pluginConfig": "插件配置",
|
||||
"logViewer": "日志查看器",
|
||||
"plannerMonitor": "计划器&回复器监控",
|
||||
"maisakaMonitor": "MaiSaka 聊天流监控",
|
||||
"localChat": "本地聊天室",
|
||||
"settings": "系统设置"
|
||||
}
|
||||
|
||||
@@ -30,7 +30,7 @@ export async function getApiBaseUrl(): Promise<string> {
|
||||
/**
|
||||
* Get WebSocket base URL
|
||||
* - Electron: Convert HTTP/HTTPS URL to WS/WSS
|
||||
* - Browser DEV: ws://127.0.0.1:8001 (hardcoded, same as log-websocket.ts)
|
||||
* - Browser DEV: Use same-origin WS URL and let Vite proxy forward requests
|
||||
* - Browser PROD: Construct WS URL from window.location
|
||||
*/
|
||||
export async function getWsBaseUrl(): Promise<string> {
|
||||
@@ -47,9 +47,10 @@ export async function getWsBaseUrl(): Promise<string> {
|
||||
})
|
||||
}
|
||||
|
||||
// Browser DEV: Use hardcoded WebSocket server
|
||||
// Browser DEV: Use same-origin URL so Vite proxy can forward WebSocket requests
|
||||
if (import.meta.env.DEV) {
|
||||
return 'ws://127.0.0.1:8001'
|
||||
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
|
||||
return `${protocol}//${window.location.host}`
|
||||
}
|
||||
|
||||
// Browser PROD: Construct WS URL from current location
|
||||
|
||||
223
dashboard/src/lib/maisaka-monitor-client.ts
Normal file
223
dashboard/src/lib/maisaka-monitor-client.ts
Normal file
@@ -0,0 +1,223 @@
|
||||
/**
|
||||
* MaiSaka 实时监控 WebSocket 客户端
|
||||
*
|
||||
* 订阅 maisaka_monitor 主题，接收推理引擎各阶段的实时事件。
|
||||
*/
|
||||
import type { WsEventEnvelope } from './unified-ws'
|
||||
|
||||
import { unifiedWsClient } from './unified-ws'
|
||||
|
||||
// ─── 事件数据类型 ───────────────────────────────────────────────
|
||||
|
||||
export interface MaisakaMessage {
|
||||
role: string
|
||||
content: string | null
|
||||
tool_call_id?: string
|
||||
tool_calls?: MaisakaToolCall[]
|
||||
}
|
||||
|
||||
export interface MaisakaToolCall {
|
||||
id: string
|
||||
name: string
|
||||
arguments?: Record<string, unknown>
|
||||
arguments_raw?: string
|
||||
}
|
||||
|
||||
export interface SessionStartEvent {
|
||||
session_id: string
|
||||
session_name: string
|
||||
timestamp: number
|
||||
}
|
||||
|
||||
export interface MessageIngestedEvent {
|
||||
session_id: string
|
||||
speaker_name: string
|
||||
content: string
|
||||
message_id: string
|
||||
timestamp: number
|
||||
}
|
||||
|
||||
export interface CycleStartEvent {
|
||||
session_id: string
|
||||
cycle_id: number
|
||||
round_index: number
|
||||
max_rounds: number
|
||||
history_count: number
|
||||
timestamp: number
|
||||
}
|
||||
|
||||
export interface TimingGateResultEvent {
|
||||
session_id: string
|
||||
cycle_id: number
|
||||
action: 'continue' | 'wait' | 'no_reply'
|
||||
content: string | null
|
||||
tool_calls: MaisakaToolCall[]
|
||||
messages: MaisakaMessage[]
|
||||
prompt_tokens: number
|
||||
selected_history_count: number
|
||||
duration_ms: number
|
||||
timestamp: number
|
||||
}
|
||||
|
||||
export interface PlannerRequestEvent {
|
||||
session_id: string
|
||||
cycle_id: number
|
||||
messages: MaisakaMessage[]
|
||||
tool_count: number
|
||||
selected_history_count: number
|
||||
timestamp: number
|
||||
}
|
||||
|
||||
export interface PlannerResponseEvent {
|
||||
session_id: string
|
||||
cycle_id: number
|
||||
content: string | null
|
||||
tool_calls: MaisakaToolCall[]
|
||||
prompt_tokens: number
|
||||
completion_tokens: number
|
||||
total_tokens: number
|
||||
duration_ms: number
|
||||
timestamp: number
|
||||
}
|
||||
|
||||
export interface ToolExecutionEvent {
|
||||
session_id: string
|
||||
cycle_id: number
|
||||
tool_name: string
|
||||
tool_args: Record<string, unknown>
|
||||
result_summary: string
|
||||
success: boolean
|
||||
duration_ms: number
|
||||
timestamp: number
|
||||
}
|
||||
|
||||
export interface CycleEndEvent {
|
||||
session_id: string
|
||||
cycle_id: number
|
||||
time_records: Record<string, number>
|
||||
agent_state: string
|
||||
timestamp: number
|
||||
}
|
||||
|
||||
export interface ReplierRequestEvent {
|
||||
session_id: string
|
||||
messages: MaisakaMessage[]
|
||||
model_name: string
|
||||
timestamp: number
|
||||
}
|
||||
|
||||
export interface ReplierResponseEvent {
|
||||
session_id: string
|
||||
content: string | null
|
||||
reasoning: string
|
||||
model_name: string
|
||||
prompt_tokens: number
|
||||
completion_tokens: number
|
||||
total_tokens: number
|
||||
duration_ms: number
|
||||
success: boolean
|
||||
timestamp: number
|
||||
}
|
||||
|
||||
// ─── 统一事件联合类型 ─────────────────────────────────────────
|
||||
|
||||
export type MaisakaMonitorEvent =
|
||||
| { type: 'session.start'; data: SessionStartEvent }
|
||||
| { type: 'message.ingested'; data: MessageIngestedEvent }
|
||||
| { type: 'cycle.start'; data: CycleStartEvent }
|
||||
| { type: 'timing_gate.result'; data: TimingGateResultEvent }
|
||||
| { type: 'planner.request'; data: PlannerRequestEvent }
|
||||
| { type: 'planner.response'; data: PlannerResponseEvent }
|
||||
| { type: 'tool.execution'; data: ToolExecutionEvent }
|
||||
| { type: 'cycle.end'; data: CycleEndEvent }
|
||||
| { type: 'replier.request'; data: ReplierRequestEvent }
|
||||
| { type: 'replier.response'; data: ReplierResponseEvent }
|
||||
|
||||
export type MaisakaEventListener = (event: MaisakaMonitorEvent) => void
|
||||
|
||||
// ─── 客户端 ───────────────────────────────────────────────────
|
||||
|
||||
class MaisakaMonitorClient {
|
||||
private initialized = false
|
||||
private listenerIdCounter = 0
|
||||
private listeners: Map<number, MaisakaEventListener> = new Map()
|
||||
private subscriptionActive = false
|
||||
private subscriptionPromise: Promise<void> | null = null
|
||||
private deferredUnsubTimer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
private initialize(): void {
|
||||
if (this.initialized) {
|
||||
return
|
||||
}
|
||||
|
||||
unifiedWsClient.addEventListener((message: WsEventEnvelope) => {
|
||||
if (message.domain !== 'maisaka_monitor') {
|
||||
return
|
||||
}
|
||||
|
||||
const event: MaisakaMonitorEvent = {
|
||||
type: message.event as MaisakaMonitorEvent['type'],
|
||||
data: message.data as never,
|
||||
}
|
||||
|
||||
this.listeners.forEach((listener) => {
|
||||
try {
|
||||
listener(event)
|
||||
} catch (error) {
|
||||
console.error('MaiSaka 监控事件监听器执行失败:', error)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
this.initialized = true
|
||||
}
|
||||
|
||||
private async ensureSubscribed(): Promise<void> {
|
||||
if (this.subscriptionActive) {
|
||||
return
|
||||
}
|
||||
|
||||
if (this.subscriptionPromise === null) {
|
||||
this.subscriptionPromise = unifiedWsClient
|
||||
.subscribe('maisaka_monitor', 'main')
|
||||
.then(() => {
|
||||
this.subscriptionActive = true
|
||||
})
|
||||
.finally(() => {
|
||||
this.subscriptionPromise = null
|
||||
})
|
||||
}
|
||||
|
||||
await this.subscriptionPromise
|
||||
}
|
||||
|
||||
async subscribe(listener: MaisakaEventListener): Promise<() => Promise<void>> {
|
||||
this.initialize()
|
||||
const listenerId = ++this.listenerIdCounter
|
||||
this.listeners.set(listenerId, listener)
|
||||
|
||||
// 如果有待执行的延迟退订，取消它（React StrictMode 快速卸载/重新挂载）
|
||||
if (this.deferredUnsubTimer !== null) {
|
||||
clearTimeout(this.deferredUnsubTimer)
|
||||
this.deferredUnsubTimer = null
|
||||
}
|
||||
|
||||
await this.ensureSubscribed()
|
||||
|
||||
return async () => {
|
||||
this.listeners.delete(listenerId)
|
||||
if (this.listeners.size === 0 && this.subscriptionActive) {
|
||||
// 延迟退订：等待短暂时间再真正退订，避免 StrictMode 导致的竞态
|
||||
this.deferredUnsubTimer = setTimeout(() => {
|
||||
this.deferredUnsubTimer = null
|
||||
if (this.listeners.size === 0 && this.subscriptionActive) {
|
||||
this.subscriptionActive = false
|
||||
void unifiedWsClient.unsubscribe('maisaka_monitor', 'main')
|
||||
}
|
||||
}, 200)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const maisakaMonitorClient = new MaisakaMonitorClient()
|
||||
@@ -83,11 +83,14 @@ async function getWsToken(): Promise<string | null> {
|
||||
}
|
||||
|
||||
class UnifiedWebSocketClient {
|
||||
private readonly heartbeatIntervalMs = 30000
|
||||
private readonly heartbeatTimeoutMs = 90000
|
||||
private connectPromise: Promise<void> | null = null
|
||||
private connectionListeners: Set<ConnectionListener> = new Set()
|
||||
private eventListeners: Set<EventListener> = new Set()
|
||||
private hasConnectedOnce = false
|
||||
private heartbeatIntervalId: number | null = null
|
||||
private lastPongAt = 0
|
||||
private manualDisconnect = false
|
||||
private pendingRequests: Map<string, PendingRequest> = new Map()
|
||||
private reconnectAttempts = 0
|
||||
@@ -151,10 +154,21 @@ class UnifiedWebSocketClient {
|
||||
private startHeartbeat(): void {
|
||||
this.stopHeartbeat()
|
||||
this.heartbeatIntervalId = window.setInterval(() => {
|
||||
if (this.ws?.readyState === WebSocket.OPEN) {
|
||||
this.ws.send(JSON.stringify({ op: 'ping' }))
|
||||
if (this.ws?.readyState !== WebSocket.OPEN) {
|
||||
return
|
||||
}
|
||||
}, 30000)
|
||||
|
||||
const now = Date.now()
|
||||
if (this.lastPongAt > 0 && now - this.lastPongAt > this.heartbeatTimeoutMs) {
|
||||
console.warn('统一 WebSocket 心跳超时，准备重连')
|
||||
void this.restart().catch((error) => {
|
||||
console.error('统一 WebSocket 心跳重连失败:', error)
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
this.ws.send(JSON.stringify({ op: 'ping' }))
|
||||
}, this.heartbeatIntervalMs)
|
||||
}
|
||||
|
||||
private clearReconnectTimer(): void {
|
||||
@@ -252,7 +266,11 @@ class UnifiedWebSocketClient {
|
||||
}
|
||||
}
|
||||
|
||||
private handleServerMessage(rawData: string): void {
|
||||
private handleServerMessage(socket: WebSocket, rawData: string): void {
|
||||
if (this.ws !== socket) {
|
||||
return
|
||||
}
|
||||
|
||||
let message: WsServerEnvelope
|
||||
try {
|
||||
message = JSON.parse(rawData) as WsServerEnvelope
|
||||
@@ -262,6 +280,7 @@ class UnifiedWebSocketClient {
|
||||
}
|
||||
|
||||
if (message.op === 'pong') {
|
||||
this.lastPongAt = Date.now()
|
||||
return
|
||||
}
|
||||
|
||||
@@ -297,8 +316,13 @@ class UnifiedWebSocketClient {
|
||||
}
|
||||
}
|
||||
|
||||
private handleClose(event: CloseEvent): void {
|
||||
private handleClose(socket: WebSocket, event: CloseEvent): void {
|
||||
if (this.ws !== socket) {
|
||||
return
|
||||
}
|
||||
|
||||
this.stopHeartbeat()
|
||||
this.lastPongAt = 0
|
||||
this.ws = null
|
||||
this.connectPromise = null
|
||||
this.setStatus('idle')
|
||||
@@ -340,10 +364,16 @@ class UnifiedWebSocketClient {
|
||||
this.ws = socket
|
||||
|
||||
socket.onopen = () => {
|
||||
if (this.ws !== socket) {
|
||||
socket.close()
|
||||
return
|
||||
}
|
||||
|
||||
settled = true
|
||||
const shouldNotifyReconnect = this.hasConnectedOnce
|
||||
this.hasConnectedOnce = true
|
||||
this.reconnectAttempts = 0
|
||||
this.lastPongAt = Date.now()
|
||||
this.startHeartbeat()
|
||||
this.setStatus('connected')
|
||||
resolve()
|
||||
@@ -351,10 +381,14 @@ class UnifiedWebSocketClient {
|
||||
}
|
||||
|
||||
socket.onmessage = (event) => {
|
||||
this.handleServerMessage(event.data)
|
||||
this.handleServerMessage(socket, event.data)
|
||||
}
|
||||
|
||||
socket.onerror = () => {
|
||||
if (this.ws !== socket) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!settled) {
|
||||
settled = true
|
||||
reject(new Error('统一 WebSocket 连接失败'))
|
||||
@@ -366,7 +400,7 @@ class UnifiedWebSocketClient {
|
||||
settled = true
|
||||
reject(new Error(`统一 WebSocket 已关闭 (${event.code})`))
|
||||
}
|
||||
this.handleClose(event)
|
||||
this.handleClose(socket, event)
|
||||
}
|
||||
})
|
||||
})()
|
||||
@@ -384,6 +418,7 @@ class UnifiedWebSocketClient {
|
||||
this.manualDisconnect = true
|
||||
this.clearReconnectTimer()
|
||||
this.stopHeartbeat()
|
||||
this.lastPongAt = 0
|
||||
this.rejectPendingRequests(new Error('统一 WebSocket 已手动断开'))
|
||||
this.connectPromise = null
|
||||
if (this.ws) {
|
||||
|
||||
@@ -156,7 +156,7 @@ const logsRoute = createRoute({
|
||||
component: LogViewerPage,
|
||||
})
|
||||
|
||||
// 计划器&恢复器监控路由
|
||||
// MaiSaka 聊天流监控路由
|
||||
const plannerMonitorRoute = createRoute({
|
||||
getParentRoute: () => protectedRoute,
|
||||
path: '/planner-monitor',
|
||||
|
||||
@@ -1,86 +1,30 @@
|
||||
/**
|
||||
* 监控页面主入口
|
||||
* 整合规划器监控和回复器监控
|
||||
* MaiSaka 聊天流监控页面入口
|
||||
*
|
||||
* 通过 WebSocket 实时渲染 MaiSaka 推理过程。
|
||||
*/
|
||||
import { Activity, RefreshCw, MessageSquareText } from 'lucide-react'
|
||||
import { ScrollArea } from '@/components/ui/scroll-area'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { useState, useCallback } from 'react'
|
||||
import { PlannerMonitor } from './planner-monitor'
|
||||
import { ReplierMonitor } from './replier-monitor'
|
||||
import { Activity } from 'lucide-react'
|
||||
|
||||
import { MaisakaMonitor } from './maisaka-monitor'
|
||||
|
||||
export function PlannerMonitorPage() {
|
||||
const [activeTab, setActiveTab] = useState<'planner' | 'replier'>('planner')
|
||||
const [autoRefresh, setAutoRefresh] = useState(false)
|
||||
const [refreshKey, setRefreshKey] = useState(0)
|
||||
|
||||
const handleManualRefresh = useCallback(() => {
|
||||
setRefreshKey(k => k + 1)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="space-y-4 sm:space-y-6 p-4 sm:p-6">
|
||||
{/* 页面标题 */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-2xl sm:text-3xl font-bold">计划器 & 回复器监控</h1>
|
||||
<h1 className="text-2xl sm:text-3xl font-bold flex items-center gap-2">
|
||||
<Activity className="h-6 w-6 sm:h-7 sm:w-7" />
|
||||
MaiSaka 聊天流监控
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-1 sm:mt-2 text-sm sm:text-base">
|
||||
实时监控麦麦的任务计划器和回复生成器运行状态
|
||||
实时追踪 MaiSaka 推理引擎的完整思考过程
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant={autoRefresh ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => setAutoRefresh(!autoRefresh)}
|
||||
>
|
||||
<RefreshCw className={`h-4 w-4 mr-2 ${autoRefresh ? 'animate-spin' : ''}`} />
|
||||
{autoRefresh ? '自动刷新中' : '自动刷新'}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleManualRefresh}
|
||||
>
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 标签页 */}
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onValueChange={(v) => setActiveTab(v as 'planner' | 'replier')}
|
||||
className="w-full"
|
||||
>
|
||||
<TabsList className="grid w-full grid-cols-2 gap-0.5 sm:gap-1 h-auto p-1">
|
||||
<TabsTrigger value="planner" className="gap-1 sm:gap-2 text-xs sm:text-sm px-2 sm:px-3 py-2">
|
||||
<Activity className="h-3.5 w-3.5 sm:h-4 sm:w-4" strokeWidth={2} fill="none" />
|
||||
<span>计划器监控</span>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="replier" className="gap-1 sm:gap-2 text-xs sm:text-sm px-2 sm:px-3 py-2">
|
||||
<MessageSquareText className="h-3.5 w-3.5 sm:h-4 sm:w-4" strokeWidth={2} fill="none" />
|
||||
<span>回复器监控</span>
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<ScrollArea className="h-[calc(100vh-240px)] sm:h-[calc(100vh-280px)] mt-4 sm:mt-6">
|
||||
<TabsContent value="planner" className="mt-0">
|
||||
<PlannerMonitor
|
||||
autoRefresh={autoRefresh}
|
||||
refreshKey={refreshKey}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="replier" className="mt-0">
|
||||
<ReplierMonitor
|
||||
autoRefresh={autoRefresh}
|
||||
refreshKey={refreshKey}
|
||||
/>
|
||||
</TabsContent>
|
||||
</ScrollArea>
|
||||
</Tabs>
|
||||
{/* 主体 */}
|
||||
<MaisakaMonitor />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
553
dashboard/src/routes/monitor/maisaka-monitor.tsx
Normal file
553
dashboard/src/routes/monitor/maisaka-monitor.tsx
Normal file
@@ -0,0 +1,553 @@
|
||||
/**
|
||||
* MaiSaka 聊天流实时监控组件
|
||||
*
|
||||
* 通过 WebSocket 实时接收 MaiSaka 推理引擎事件，
|
||||
* 以时间线形式展示聊天流的推理过程。
|
||||
*/
|
||||
import {
|
||||
Activity,
|
||||
ArrowRight,
|
||||
Bot,
|
||||
Brain,
|
||||
CheckCircle2,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
CircleDot,
|
||||
Clock,
|
||||
Eraser,
|
||||
Gauge,
|
||||
MessageSquare,
|
||||
PauseCircle,
|
||||
Timer,
|
||||
Wrench,
|
||||
XCircle,
|
||||
Zap,
|
||||
} from 'lucide-react'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { ScrollArea } from '@/components/ui/scroll-area'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { useCallback, useEffect, useRef, useState } from 'react'
|
||||
|
||||
import type {
|
||||
CycleEndEvent,
|
||||
CycleStartEvent,
|
||||
MaisakaToolCall,
|
||||
MessageIngestedEvent,
|
||||
PlannerResponseEvent,
|
||||
ReplierResponseEvent,
|
||||
TimingGateResultEvent,
|
||||
ToolExecutionEvent,
|
||||
} from '@/lib/maisaka-monitor-client'
|
||||
import type { SessionInfo, TimelineEntry } from './use-maisaka-monitor'
|
||||
import { useMaisakaMonitor } from './use-maisaka-monitor'
|
||||
|
||||
// ─── 工具函数 ──────────────────────────────────────────────────
|
||||
|
||||
function formatMs(ms: number): string {
|
||||
if (ms < 1000) return `${Math.round(ms)}ms`
|
||||
return `${(ms / 1000).toFixed(2)}s`
|
||||
}
|
||||
|
||||
function formatTimestamp(ts: number): string {
|
||||
return new Date(ts * 1000).toLocaleTimeString('zh-CN', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
})
|
||||
}
|
||||
|
||||
function formatRelativeTime(ts: number): string {
|
||||
const diff = Date.now() / 1000 - ts
|
||||
if (diff < 10) return '刚刚'
|
||||
if (diff < 60) return `${Math.round(diff)}秒前`
|
||||
if (diff < 3600) return `${Math.round(diff / 60)}分钟前`
|
||||
return `${Math.round(diff / 3600)}小时前`
|
||||
}
|
||||
|
||||
// ─── 会话侧边栏 ──────────────────────────────────────────────
|
||||
|
||||
function SessionSidebar({
|
||||
sessions,
|
||||
selectedSession,
|
||||
onSelect,
|
||||
}: {
|
||||
sessions: Map<string, SessionInfo>
|
||||
selectedSession: string | null
|
||||
onSelect: (id: string) => void
|
||||
}) {
|
||||
const sortedSessions = Array.from(sessions.values()).sort(
|
||||
(a, b) => b.lastActivity - a.lastActivity,
|
||||
)
|
||||
|
||||
if (sortedSessions.length === 0) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-full text-muted-foreground gap-2 p-4">
|
||||
<Bot className="h-8 w-8 opacity-40" />
|
||||
<p className="text-sm text-center">等待 MaiSaka 会话…</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-1 p-2">
|
||||
{sortedSessions.map((session) => (
|
||||
<button
|
||||
key={session.sessionId}
|
||||
onClick={() => onSelect(session.sessionId)}
|
||||
className={cn(
|
||||
'flex flex-col items-start gap-0.5 rounded-lg px-3 py-2 text-left text-sm transition-colors',
|
||||
'hover:bg-accent/50',
|
||||
selectedSession === session.sessionId && 'bg-accent text-accent-foreground',
|
||||
)}
|
||||
>
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<span className="font-medium truncate max-w-35">
|
||||
{session.sessionName}
|
||||
</span>
|
||||
<Badge variant="secondary" className="text-[10px] h-4 px-1">
|
||||
{session.eventCount}
|
||||
</Badge>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{formatRelativeTime(session.lastActivity)}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── 单条时间线事件渲染 ──────────────────────────────────────
|
||||
|
||||
function MessageIngestedCard({ data }: { data: MessageIngestedEvent }) {
|
||||
return (
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="mt-1 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-blue-500/15 text-blue-500">
|
||||
<MessageSquare className="h-3.5 w-3.5" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="font-medium text-sm">{data.speaker_name}</span>
|
||||
<span className="text-xs text-muted-foreground">{formatTimestamp(data.timestamp)}</span>
|
||||
</div>
|
||||
<p className="text-sm text-foreground/80 whitespace-pre-wrap wrap-break-word leading-relaxed">
|
||||
{data.content || '[空消息]'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function CycleStartCard({ data }: { data: CycleStartEvent }) {
|
||||
return (
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-violet-500/15 text-violet-500">
|
||||
<Zap className="h-3.5 w-3.5" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="text-sm font-medium">推理循环 #{data.cycle_id}</span>
|
||||
<Badge variant="outline" className="text-[10px]">
|
||||
回合 {data.round_index + 1}/{data.max_rounds}
|
||||
</Badge>
|
||||
<Badge variant="secondary" className="text-[10px]">
|
||||
上下文 {data.history_count} 条
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function TimingGateCard({ data }: { data: TimingGateResultEvent }) {
|
||||
const actionConfig: Record<string, { label: string; variant: 'default' | 'secondary' | 'destructive'; icon: typeof ArrowRight }> = {
|
||||
continue: { label: '继续执行', variant: 'default', icon: ArrowRight },
|
||||
wait: { label: '等待', variant: 'secondary', icon: PauseCircle },
|
||||
no_reply: { label: '不回复', variant: 'destructive', icon: XCircle },
|
||||
}
|
||||
const config = actionConfig[data.action] ?? actionConfig.continue
|
||||
const Icon = config.icon
|
||||
|
||||
return (
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="mt-1 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-amber-500/15 text-amber-500">
|
||||
<Timer className="h-3.5 w-3.5" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1 flex-wrap">
|
||||
<span className="text-sm font-medium">Timing Gate</span>
|
||||
<Badge variant={config.variant} className="text-[10px] gap-0.5">
|
||||
<Icon className="h-2.5 w-2.5" />
|
||||
{config.label}
|
||||
</Badge>
|
||||
<span className="text-xs text-muted-foreground">{formatMs(data.duration_ms)}</span>
|
||||
</div>
|
||||
{data.content && (
|
||||
<CollapsibleText text={data.content} maxLines={3} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function PlannerResponseCard({ data }: { data: PlannerResponseEvent }) {
|
||||
return (
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="mt-1 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-emerald-500/15 text-emerald-500">
|
||||
<Brain className="h-3.5 w-3.5" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1 flex-wrap">
|
||||
<span className="text-sm font-medium">规划器思考</span>
|
||||
<span className="text-xs text-muted-foreground">{formatMs(data.duration_ms)}</span>
|
||||
<Badge variant="outline" className="text-[10px]">
|
||||
{data.prompt_tokens}+{data.completion_tokens} tokens
|
||||
</Badge>
|
||||
</div>
|
||||
{data.content && (
|
||||
<CollapsibleText text={data.content} maxLines={6} />
|
||||
)}
|
||||
{data.tool_calls.length > 0 && (
|
||||
<div className="mt-2 flex flex-wrap gap-1.5">
|
||||
{data.tool_calls.map((tc: MaisakaToolCall, idx: number) => (
|
||||
<Badge key={idx} variant="secondary" className="text-[10px] gap-1">
|
||||
<Wrench className="h-2.5 w-2.5" />
|
||||
{tc.name}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ToolExecutionCard({ data }: { data: ToolExecutionEvent }) {
|
||||
return (
|
||||
<div className="flex items-start gap-3">
|
||||
<div className={cn(
|
||||
'mt-1 flex h-7 w-7 shrink-0 items-center justify-center rounded-full',
|
||||
data.success
|
||||
? 'bg-teal-500/15 text-teal-500'
|
||||
: 'bg-red-500/15 text-red-500',
|
||||
)}>
|
||||
<Wrench className="h-3.5 w-3.5" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1 flex-wrap">
|
||||
<span className="text-sm font-medium font-mono">{data.tool_name}</span>
|
||||
{data.success
|
||||
? <CheckCircle2 className="h-3.5 w-3.5 text-teal-500" />
|
||||
: <XCircle className="h-3.5 w-3.5 text-red-500" />
|
||||
}
|
||||
<span className="text-xs text-muted-foreground">{formatMs(data.duration_ms)}</span>
|
||||
</div>
|
||||
{Object.keys(data.tool_args).length > 0 && (
|
||||
<div className="text-xs text-muted-foreground font-mono bg-muted/50 rounded px-2 py-1 mb-1 whitespace-pre-wrap break-all">
|
||||
{JSON.stringify(data.tool_args, null, 2)}
|
||||
</div>
|
||||
)}
|
||||
{data.result_summary && (
|
||||
<CollapsibleText text={data.result_summary} maxLines={3} className="text-muted-foreground" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function CycleEndCard({ data }: { data: CycleEndEvent }) {
|
||||
const totalTime = Object.values(data.time_records).reduce((a, b) => a + b, 0)
|
||||
return (
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-slate-500/15 text-slate-500">
|
||||
<CircleDot className="h-3.5 w-3.5" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="text-sm text-muted-foreground">循环结束</span>
|
||||
<Badge variant="outline" className="text-[10px]">
|
||||
总耗时 {formatMs(totalTime * 1000)}
|
||||
</Badge>
|
||||
{Object.entries(data.time_records).map(([name, duration]) => (
|
||||
<span key={name} className="text-[10px] text-muted-foreground">
|
||||
{name}: {formatMs(duration * 1000)}
|
||||
</span>
|
||||
))}
|
||||
<Badge
|
||||
variant={data.agent_state === 'running' ? 'default' : 'secondary'}
|
||||
className="text-[10px]"
|
||||
>
|
||||
{data.agent_state}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── 可折叠文本组件 ────────────────────────────────────────────
|
||||
|
||||
function CollapsibleText({
|
||||
text,
|
||||
maxLines = 4,
|
||||
className,
|
||||
}: {
|
||||
text: string
|
||||
maxLines?: number
|
||||
className?: string
|
||||
}) {
|
||||
const [expanded, setExpanded] = useState(false)
|
||||
const lines = text.split('\n')
|
||||
const needsCollapse = lines.length > maxLines
|
||||
|
||||
if (!needsCollapse || expanded) {
|
||||
return (
|
||||
<div className="relative">
|
||||
<p className={cn(
|
||||
'text-sm whitespace-pre-wrap wrap-break-word leading-relaxed',
|
||||
className,
|
||||
)}>
|
||||
{text}
|
||||
</p>
|
||||
{needsCollapse && (
|
||||
<button
|
||||
onClick={() => setExpanded(false)}
|
||||
className="text-xs text-primary hover:underline mt-1 flex items-center gap-0.5"
|
||||
>
|
||||
<ChevronDown className="h-3 w-3" /> 收起
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p className={cn(
|
||||
'text-sm whitespace-pre-wrap wrap-break-word leading-relaxed',
|
||||
className,
|
||||
)}>
|
||||
{lines.slice(0, maxLines).join('\n')}
|
||||
</p>
|
||||
<button
|
||||
onClick={() => setExpanded(true)}
|
||||
className="text-xs text-primary hover:underline mt-1 flex items-center gap-0.5"
|
||||
>
|
||||
<ChevronRight className="h-3 w-3" /> 展开全部 ({lines.length} 行)
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── 回复器响应卡片 ──────────────────────────────────────────
|
||||
|
||||
function ReplierResponseCard({ data }: { data: ReplierResponseEvent }) {
|
||||
return (
|
||||
<Card className="border-l-4 border-l-purple-500/60">
|
||||
<CardHeader className="py-2.5 px-4 space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Bot className="h-4 w-4 text-purple-500" />
|
||||
<CardTitle className="text-sm font-medium">回复器响应</CardTitle>
|
||||
<Badge variant="outline" className="text-xs font-normal ml-auto">
|
||||
{formatMs(data.duration_ms)}
|
||||
</Badge>
|
||||
{data.success ? (
|
||||
<Badge variant="secondary" className="text-xs gap-1">
|
||||
<CheckCircle2 className="h-3 w-3" /> 成功
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="destructive" className="text-xs gap-1">
|
||||
<XCircle className="h-3 w-3" /> 失败
|
||||
</Badge>
|
||||
)}
|
||||
<span className="text-xs text-muted-foreground">{formatTimestamp(data.timestamp)}</span>
|
||||
</div>
|
||||
{data.content && (
|
||||
<CollapsibleText text={data.content} maxLines={6} className="text-foreground/90" />
|
||||
)}
|
||||
{data.reasoning && (
|
||||
<details className="mt-1">
|
||||
<summary className="text-xs text-muted-foreground cursor-pointer hover:text-foreground">
|
||||
思考过程
|
||||
</summary>
|
||||
<CollapsibleText text={data.reasoning} maxLines={8} className="mt-1 text-muted-foreground" />
|
||||
</details>
|
||||
)}
|
||||
{(data.prompt_tokens > 0 || data.completion_tokens > 0) && (
|
||||
<div className="flex gap-3 text-xs text-muted-foreground mt-1">
|
||||
{data.model_name && <span>模型: {data.model_name}</span>}
|
||||
<span>输入: {data.prompt_tokens}</span>
|
||||
<span>输出: {data.completion_tokens}</span>
|
||||
<span>总计: {data.total_tokens}</span>
|
||||
</div>
|
||||
)}
|
||||
</CardHeader>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── 时间线入口渲染器 ──────────────────────────────────────────
|
||||
|
||||
function TimelineEventRenderer({ entry }: { entry: TimelineEntry }) {
|
||||
switch (entry.type) {
|
||||
case 'message.ingested':
|
||||
return <MessageIngestedCard data={entry.data as MessageIngestedEvent} />
|
||||
case 'cycle.start':
|
||||
return <CycleStartCard data={entry.data as CycleStartEvent} />
|
||||
case 'timing_gate.result':
|
||||
return <TimingGateCard data={entry.data as TimingGateResultEvent} />
|
||||
case 'planner.response':
|
||||
return <PlannerResponseCard data={entry.data as PlannerResponseEvent} />
|
||||
case 'tool.execution':
|
||||
return <ToolExecutionCard data={entry.data as ToolExecutionEvent} />
|
||||
case 'cycle.end':
|
||||
return <CycleEndCard data={entry.data as CycleEndEvent} />
|
||||
case 'replier.response':
|
||||
return <ReplierResponseCard data={entry.data as ReplierResponseEvent} />
|
||||
// planner.request, replier.request 和 session.start 通常不需要在 timeline 中主要展示
|
||||
default:
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
// ─── 主组件 ─────────────────────────────────────────────────
|
||||
|
||||
export function MaisakaMonitor() {
|
||||
const {
|
||||
timeline,
|
||||
sessions,
|
||||
selectedSession,
|
||||
setSelectedSession,
|
||||
connected,
|
||||
clearTimeline,
|
||||
} = useMaisakaMonitor()
|
||||
|
||||
const scrollRef = useRef<HTMLDivElement>(null)
|
||||
const [autoScroll, setAutoScroll] = useState(true)
|
||||
|
||||
// 自动滚动到底部
|
||||
useEffect(() => {
|
||||
if (autoScroll && scrollRef.current) {
|
||||
const viewport = scrollRef.current.querySelector('[data-radix-scroll-area-viewport]')
|
||||
if (viewport) {
|
||||
viewport.scrollTop = viewport.scrollHeight
|
||||
}
|
||||
}
|
||||
}, [timeline, autoScroll])
|
||||
|
||||
const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
|
||||
const target = e.currentTarget.querySelector('[data-radix-scroll-area-viewport]')
|
||||
if (!target) return
|
||||
const { scrollTop, scrollHeight, clientHeight } = target as HTMLElement
|
||||
setAutoScroll(scrollHeight - scrollTop - clientHeight < 80)
|
||||
}, [])
|
||||
|
||||
// 统计当前会话的各事件类型计数
|
||||
const stats = {
|
||||
messages: timeline.filter((e) => e.type === 'message.ingested').length,
|
||||
cycles: timeline.filter((e) => e.type === 'cycle.start').length,
|
||||
toolCalls: timeline.filter((e) => e.type === 'tool.execution').length,
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-[calc(100vh-180px)] gap-4">
|
||||
{/* 会话侧边栏 */}
|
||||
<Card className="w-60 shrink-0 flex flex-col">
|
||||
<CardHeader className="py-3 px-4 space-y-0">
|
||||
<CardTitle className="text-sm font-medium flex items-center gap-2">
|
||||
<Activity className="h-4 w-4" />
|
||||
聊天流
|
||||
{connected && (
|
||||
<span className="ml-auto flex h-2 w-2 rounded-full bg-emerald-500" />
|
||||
)}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<Separator />
|
||||
<ScrollArea className="flex-1">
|
||||
<SessionSidebar
|
||||
sessions={sessions}
|
||||
selectedSession={selectedSession}
|
||||
onSelect={setSelectedSession}
|
||||
/>
|
||||
</ScrollArea>
|
||||
</Card>
|
||||
|
||||
{/* 主时间线区域 */}
|
||||
<div className="flex-1 flex flex-col min-w-0">
|
||||
{/* 顶部统计栏 */}
|
||||
<div className="flex items-center gap-3 mb-3 flex-wrap">
|
||||
<div className="flex items-center gap-4 text-sm">
|
||||
<div className="flex items-center gap-1.5 text-muted-foreground">
|
||||
<MessageSquare className="h-3.5 w-3.5" />
|
||||
<span>{stats.messages} 消息</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 text-muted-foreground">
|
||||
<Brain className="h-3.5 w-3.5" />
|
||||
<span>{stats.cycles} 循环</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 text-muted-foreground">
|
||||
<Wrench className="h-3.5 w-3.5" />
|
||||
<span>{stats.toolCalls} 工具调用</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ml-auto flex items-center gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 text-xs"
|
||||
onClick={() => setAutoScroll(!autoScroll)}
|
||||
>
|
||||
<Gauge className={cn('h-3.5 w-3.5 mr-1', autoScroll && 'text-primary')} />
|
||||
{autoScroll ? '跟踪中' : '已暂停'}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 text-xs"
|
||||
onClick={clearTimeline}
|
||||
>
|
||||
<Eraser className="h-3.5 w-3.5 mr-1" />
|
||||
清空
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 时间线 */}
|
||||
<Card className="flex-1 overflow-hidden">
|
||||
<ScrollArea
|
||||
className="h-full"
|
||||
ref={scrollRef}
|
||||
onScrollCapture={handleScroll}
|
||||
>
|
||||
<div className="p-4 space-y-3">
|
||||
{timeline.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground gap-3">
|
||||
<Clock className="h-10 w-10 opacity-30" />
|
||||
<p className="text-sm">等待 MaiSaka 推理事件…</p>
|
||||
<p className="text-xs opacity-60">
|
||||
当 MaiSaka 处理新消息时，推理过程会实时展示在这里
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
timeline.map((entry) => {
|
||||
const rendered = <TimelineEventRenderer entry={entry} />
|
||||
if (!rendered) return null
|
||||
return (
|
||||
<div
|
||||
key={entry.id}
|
||||
className="animate-in fade-in-0 slide-in-from-bottom-2 duration-300"
|
||||
>
|
||||
{rendered}
|
||||
{entry.type === 'cycle.end' && (
|
||||
<Separator className="mt-3" />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
144
dashboard/src/routes/monitor/use-maisaka-monitor.ts
Normal file
144
dashboard/src/routes/monitor/use-maisaka-monitor.ts
Normal file
@@ -0,0 +1,144 @@
|
||||
/**
|
||||
* MaiSaka 聊天流实时监控 - React Hook
|
||||
*
|
||||
* 管理 WebSocket 订阅与事件流的状态。
|
||||
*/
|
||||
import { useCallback, useEffect, useRef, useState } from 'react'
|
||||
|
||||
import type { MaisakaMonitorEvent } from '@/lib/maisaka-monitor-client'
|
||||
import { maisakaMonitorClient } from '@/lib/maisaka-monitor-client'
|
||||
|
||||
/** 单条时间线事件（前端视图模型） */
|
||||
export interface TimelineEntry {
|
||||
/** 唯一 ID */
|
||||
id: string
|
||||
/** 事件类型 */
|
||||
type: MaisakaMonitorEvent['type']
|
||||
/** 原始事件数据 */
|
||||
data: MaisakaMonitorEvent['data']
|
||||
/** 事件时间戳 */
|
||||
timestamp: number
|
||||
/** 所属会话 ID */
|
||||
sessionId: string
|
||||
}
|
||||
|
||||
/** 会话概要信息 */
|
||||
export interface SessionInfo {
|
||||
sessionId: string
|
||||
sessionName: string
|
||||
lastActivity: number
|
||||
eventCount: number
|
||||
}
|
||||
|
||||
/** 最大保留的时间线条目数 */
|
||||
const MAX_TIMELINE_ENTRIES = 500
|
||||
|
||||
let entryCounter = 0
|
||||
|
||||
export function useMaisakaMonitor() {
|
||||
const [timeline, setTimeline] = useState<TimelineEntry[]>([])
|
||||
const [sessions, setSessions] = useState<Map<string, SessionInfo>>(new Map())
|
||||
const [selectedSession, setSelectedSession] = useState<string | null>(null)
|
||||
const [connected, setConnected] = useState(false)
|
||||
const unsubRef = useRef<(() => Promise<void>) | null>(null)
|
||||
|
||||
const handleEvent = useCallback((event: MaisakaMonitorEvent) => {
|
||||
const sessionId = (event.data as unknown as Record<string, unknown>).session_id as string
|
||||
const timestamp = (event.data as unknown as Record<string, unknown>).timestamp as number
|
||||
|
||||
const entry: TimelineEntry = {
|
||||
id: `evt_${++entryCounter}_${Date.now()}`,
|
||||
type: event.type,
|
||||
data: event.data,
|
||||
timestamp,
|
||||
sessionId,
|
||||
}
|
||||
|
||||
setTimeline((prev) => {
|
||||
const next = [...prev, entry]
|
||||
return next.length > MAX_TIMELINE_ENTRIES
|
||||
? next.slice(next.length - MAX_TIMELINE_ENTRIES)
|
||||
: next
|
||||
})
|
||||
|
||||
// 更新会话信息
|
||||
if (event.type === 'session.start') {
|
||||
const d = event.data
|
||||
setSessions((prev) => {
|
||||
const next = new Map(prev)
|
||||
next.set(sessionId, {
|
||||
sessionId,
|
||||
sessionName: d.session_name,
|
||||
lastActivity: timestamp,
|
||||
eventCount: (prev.get(sessionId)?.eventCount ?? 0) + 1,
|
||||
})
|
||||
return next
|
||||
})
|
||||
} else {
|
||||
setSessions((prev) => {
|
||||
const existing = prev.get(sessionId)
|
||||
if (!existing) {
|
||||
const next = new Map(prev)
|
||||
next.set(sessionId, {
|
||||
sessionId,
|
||||
sessionName: sessionId.slice(0, 8),
|
||||
lastActivity: timestamp,
|
||||
eventCount: 1,
|
||||
})
|
||||
return next
|
||||
}
|
||||
const next = new Map(prev)
|
||||
next.set(sessionId, {
|
||||
...existing,
|
||||
lastActivity: timestamp,
|
||||
eventCount: existing.eventCount + 1,
|
||||
})
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
// 自动选中第一个会话
|
||||
setSelectedSession((current) => current ?? sessionId)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false
|
||||
|
||||
maisakaMonitorClient.subscribe(handleEvent).then((unsub) => {
|
||||
if (cancelled) {
|
||||
void unsub()
|
||||
return
|
||||
}
|
||||
unsubRef.current = unsub
|
||||
setConnected(true)
|
||||
})
|
||||
|
||||
return () => {
|
||||
cancelled = true
|
||||
if (unsubRef.current) {
|
||||
void unsubRef.current()
|
||||
unsubRef.current = null
|
||||
}
|
||||
setConnected(false)
|
||||
}
|
||||
}, [handleEvent])
|
||||
|
||||
const clearTimeline = useCallback(() => {
|
||||
setTimeline([])
|
||||
}, [])
|
||||
|
||||
/** 当前选中会话的时间线 */
|
||||
const filteredTimeline = selectedSession
|
||||
? timeline.filter((e) => e.sessionId === selectedSession)
|
||||
: timeline
|
||||
|
||||
return {
|
||||
timeline: filteredTimeline,
|
||||
allTimeline: timeline,
|
||||
sessions,
|
||||
selectedSession,
|
||||
setSelectedSession,
|
||||
connected,
|
||||
clearTimeline,
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user