Feat/monitor (#1928)

* feat: add monitor

* feat: fix tab

* feat: work

* feat: not reliable monitor

* feat: enhance monitoring page layout with integrated filters and refresh button

* feat: add support for runner recording

* feat: add jump button & alignment

* feat: new

* fix: not show query variables in local agent

* fix: pnpm lint and python ruff check

* fix: ruff fromat

* chore: remove unnecessary migration

* style: optimize monitoring page layout and fix sticky filter issues

- Enhanced metric cards with gradient backgrounds and hover effects
- Increased traffic chart height from 200px to 300px
- Adjusted grid layout and spacing for better visual appeal
- Fixed sticky filter area to properly cover parent padding without transparent gaps
- Used negative margins and positioning to eliminate scrolling artifacts
- Matched padding/margins with other pages (pipelines, bots) for consistency
- Removed duplicate title/subtitle from page content
- Added cursor-pointer styling to tab triggers
- Removed border between tab list and tab content

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

* fix: apply prettier formatting to monitoring components

- Fixed indentation and spacing in MetricCard.tsx
- Fixed formatting in TrafficChart.tsx
- Applied prettier formatting to page.tsx

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

* feat: update HomeSidebar to trigger action on child selection and localize monitoring titles

* refactor: streamline LLM and embedding invocation methods

* feat: add embedding model monitor

* fix: database version

* chore: simplify pnpm-lock.yaml formatting

---------

Co-authored-by: Junyan Qin <rockchinq@gmail.com>
Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>

web/src/app/infra/http/BackendClient.ts

@@ -803,4 +803,150 @@ export class BackendClient extends BaseHttpClient {
     }
     return response.data.data;
   }
+
+  // ============ Monitoring API ============
+  public getMonitoringData(params: {
+    botId?: string[];
+    pipelineId?: string[];
+    startTime?: string;
+    endTime?: string;
+    limit?: number;
+  }): Promise<{
+    overview: {
+      total_messages: number;
+      llm_calls: number;
+      embedding_calls: number;
+      model_calls: number;
+      success_rate: number;
+      active_sessions: number;
+    };
+    messages: Array<{
+      id: string;
+      timestamp: string;
+      bot_id: string;
+      bot_name: string;
+      pipeline_id: string;
+      pipeline_name: string;
+      message_content: string;
+      session_id: string;
+      status: string;
+      level: string;
+      platform?: string;
+      user_id?: string;
+      runner_name?: string;
+      variables?: string;
+    }>;
+    llmCalls: Array<{
+      id: string;
+      timestamp: string;
+      model_name: string;
+      input_tokens: number;
+      output_tokens: number;
+      total_tokens: number;
+      duration: number;
+      cost?: number;
+      status: string;
+      bot_id: string;
+      bot_name: string;
+      pipeline_id: string;
+      pipeline_name: string;
+      error_message?: string;
+      message_id?: string;
+    }>;
+    embeddingCalls: Array<{
+      id: string;
+      timestamp: string;
+      model_name: string;
+      prompt_tokens: number;
+      total_tokens: number;
+      duration: number;
+      input_count: number;
+      status: string;
+      error_message?: string;
+      knowledge_base_id?: string;
+      query_text?: string;
+      session_id?: string;
+      message_id?: string;
+      call_type?: string;
+    }>;
+    sessions: Array<{
+      session_id: string;
+      bot_id: string;
+      bot_name: string;
+      pipeline_id: string;
+      pipeline_name: string;
+      message_count: number;
+      last_activity: string;
+      start_time: string;
+      platform?: string;
+      user_id?: string;
+    }>;
+    errors: Array<{
+      id: string;
+      timestamp: string;
+      error_type: string;
+      error_message: string;
+      bot_id: string;
+      bot_name: string;
+      pipeline_id: string;
+      pipeline_name: string;
+      session_id?: string;
+      stack_trace?: string;
+      message_id?: string;
+    }>;
+    totalCount: {
+      messages: number;
+      llmCalls: number;
+      embeddingCalls: number;
+      sessions: number;
+      errors: number;
+    };
+  }> {
+    const queryParams = new URLSearchParams();
+    if (params.botId) {
+      params.botId.forEach((id) => queryParams.append('botId', id));
+    }
+    if (params.pipelineId) {
+      params.pipelineId.forEach((id) => queryParams.append('pipelineId', id));
+    }
+    if (params.startTime) {
+      queryParams.append('startTime', params.startTime);
+    }
+    if (params.endTime) {
+      queryParams.append('endTime', params.endTime);
+    }
+    if (params.limit) {
+      queryParams.append('limit', params.limit.toString());
+    }
+
+    return this.get(`/api/v1/monitoring/data?${queryParams.toString()}`);
+  }
+
+  public getMonitoringOverview(params: {
+    botId?: string[];
+    pipelineId?: string[];
+    startTime?: string;
+    endTime?: string;
+  }): Promise<{
+    total_messages: number;
+    llm_calls: number;
+    success_rate: number;
+    active_sessions: number;
+  }> {
+    const queryParams = new URLSearchParams();
+    if (params.botId) {
+      params.botId.forEach((id) => queryParams.append('botId', id));
+    }
+    if (params.pipelineId) {
+      params.pipelineId.forEach((id) => queryParams.append('pipelineId', id));
+    }
+    if (params.startTime) {
+      queryParams.append('startTime', params.startTime);
+    }
+    if (params.endTime) {
+      queryParams.append('endTime', params.endTime);
+    }
+
+    return this.get(`/api/v1/monitoring/overview?${queryParams.toString()}`);
+  }
 }