feat: add monitoring tab to pipeline dialog for in-context error debugging (#1953)

* Initial plan

* Add monitoring tab to pipeline dialog with i18n support

Co-authored-by: RockChinQ <45992437+RockChinQ@users.noreply.github.com>

* Fix prettier formatting for monitoring tab component

Co-authored-by: RockChinQ <45992437+RockChinQ@users.noreply.github.com>

* Fix code review issues: use functional state updates and add comment for delay

Co-authored-by: RockChinQ <45992437+RockChinQ@users.noreply.github.com>

* Update dependencies and enhance monitoring tab functionality

- Updated various package versions in pnpm-lock.yaml for improved compatibility and performance.
- Refactored PipelineDetailDialog to streamline WebSocket connection status display.
- Enhanced PipelineMonitoringTab to support navigation to detailed logs and improved UI elements.
- Added i18n support for 'Detailed Logs' in English, Japanese, Simplified Chinese, and Traditional Chinese locales.

* Fix lint errors: remove unused Button import and format en-US.ts

Co-authored-by: RockChinQ <45992437+RockChinQ@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: RockChinQ <45992437+RockChinQ@users.noreply.github.com>
Co-authored-by: RockChinQ <rockchinq@gmail.com>

web/src/app/home/pipelines/PipelineDetailDialog.tsx

@@ -7,7 +7,6 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
-import { Button } from '@/components/ui/button';
 import {
   Sidebar,
   SidebarContent,
@@ -21,6 +20,7 @@ import {
 import PipelineFormComponent from './components/pipeline-form/PipelineFormComponent';
 import DebugDialog from './components/debug-dialog/DebugDialog';
 import PipelineExtension from './components/pipeline-extensions/PipelineExtension';
+import PipelineMonitoringTab from './components/monitoring-tab/PipelineMonitoringTab';
 
 interface PipelineDialogProps {
   open: boolean;
@@ -34,7 +34,7 @@ interface PipelineDialogProps {
   onCancel: () => void;
 }
 
-type DialogMode = 'config' | 'debug' | 'extensions';
+type DialogMode = 'config' | 'debug' | 'extensions' | 'monitoring';
 
 export default function PipelineDialog({
   open,
@@ -111,6 +111,19 @@ export default function PipelineDialog({
         </svg>
       ),
     },
+    {
+      key: 'monitoring',
+      label: t('pipelines.monitoring.title'),
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+        >
+          <path d="M2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM4 5V19H20V5H4ZM6 7H18V9H6V7ZM6 11H18V13H6V11ZM6 15H12V17H6V15Z"></path>
+        </svg>
+      ),
+    },
   ];
 
   const getDialogTitle = () => {
@@ -122,6 +135,9 @@ export default function PipelineDialog({
     if (currentMode === 'extensions') {
       return t('pipelines.extensions.title');
     }
+    if (currentMode === 'monitoring') {
+      return t('pipelines.monitoring.title');
+    }
     return t('pipelines.debugDialog.title');
   };
 
@@ -193,48 +209,23 @@ export default function PipelineDialog({
             >
               <DialogTitle>{getDialogTitle()}</DialogTitle>
               {currentMode === 'debug' && (
-                <>
+                <div className="flex items-center gap-2 ml-2">
-                  <div className="flex items-center gap-2 ml-2">
+                  <div
-                    <div
+                    className={`w-2.5 h-2.5 rounded-full ${
-                      className={`w-2.5 h-2.5 rounded-full ${
+                      isWebSocketConnected ? 'bg-green-500' : 'bg-red-500'
-                        isWebSocketConnected ? 'bg-green-500' : 'bg-red-500'
+                    }`}
-                      }`}
+                    title={
-                      title={
+                      isWebSocketConnected
-                        isWebSocketConnected
-                          ? t('pipelines.debugDialog.connected')
-                          : t('pipelines.debugDialog.disconnected')
-                      }
-                    />
-                    <span className="text-sm text-gray-600 dark:text-gray-400">
-                      {isWebSocketConnected
                         ? t('pipelines.debugDialog.connected')
-                        : t('pipelines.debugDialog.disconnected')}
+                        : t('pipelines.debugDialog.disconnected')
-                    </span>
+                    }
-                  </div>
+                  />
-                  <div className="ml-auto mr-4">
+                  <span className="text-sm text-gray-600 dark:text-gray-400">
-                    <Button
+                    {isWebSocketConnected
-                      variant="outline"
+                      ? t('pipelines.debugDialog.connected')
-                      size="sm"
+                      : t('pipelines.debugDialog.disconnected')}
-                      onClick={() => {
+                  </span>
-                        router.push(
+                </div>
-                          `/home/monitoring?pipelineId=${pipelineId}`,
-                        );
-                        onOpenChange(false);
-                      }}
-                      className="bg-white dark:bg-[#2a2a2e]"
-                    >
-                      <svg
-                        className="w-4 h-4 mr-2"
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 24 24"
-                        fill="currentColor"
-                      >
-                        <path d="M2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM4 5V19H20V5H4ZM6 7H18V9H6V7ZM6 11H18V13H6V11ZM6 15H12V17H6V15Z"></path>
-                      </svg>
-                      {t('monitoring.viewMonitoring')}
-                    </Button>
-                  </div>
-                </>
               )}
             </DialogHeader>
             <div
@@ -268,6 +259,16 @@ export default function PipelineDialog({
                   onConnectionStatusChange={setIsWebSocketConnected}
                 />
               )}
+
+              {currentMode === 'monitoring' && pipelineId && (
+                <PipelineMonitoringTab
+                  pipelineId={pipelineId}
+                  onNavigateToMonitoring={() => {
+                    router.push(`/home/monitoring?pipelineId=${pipelineId}`);
+                    onOpenChange(false);
+                  }}
+                />
+              )}
             </div>
           </main>
         </SidebarProvider>

web/src/app/home/pipelines/components/monitoring-tab/PipelineMonitoringTab.tsx

@@ -0,0 +1,665 @@
+'use client';
+
+import React, { useState, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Button } from '@/components/ui/button';
+import { ChevronRight, ChevronDown, ExternalLink } from 'lucide-react';
+import { useMonitoringData } from '@/app/home/monitoring/hooks/useMonitoringData';
+import { MessageContentRenderer } from '@/app/home/monitoring/components/MessageContentRenderer';
+import { LoadingSpinner } from '@/components/ui/loading-spinner';
+import { httpClient } from '@/app/infra/http/HttpClient';
+import { MessageDetails } from '@/app/home/monitoring/types/monitoring';
+
+interface PipelineMonitoringTabProps {
+  pipelineId: string;
+  onNavigateToMonitoring?: () => void;
+}
+
+interface RawMessageData {
+  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: Record<string, unknown>;
+}
+
+interface RawLLMCallData {
+  id: string;
+  timestamp: string;
+  model_name: string;
+  status: string;
+  duration: number;
+  error_message: string | null;
+  input_tokens: number;
+  output_tokens: number;
+  total_tokens: number;
+}
+
+interface RawLLMStatsData {
+  total_calls: number;
+  total_input_tokens: number;
+  total_output_tokens: number;
+  total_tokens: number;
+  total_duration_ms: number;
+  average_duration_ms: number;
+}
+
+interface RawErrorData {
+  id: string;
+  timestamp: string;
+  error_type: string;
+  error_message: string;
+  stack_trace: string | null;
+}
+
+export default function PipelineMonitoringTab({
+  pipelineId,
+  onNavigateToMonitoring,
+}: PipelineMonitoringTabProps) {
+  const { t } = useTranslation();
+
+  // Filter state - only show data for this pipeline, last 24 hours
+  const filterState = useMemo(
+    () => ({
+      selectedBots: [],
+      selectedPipelines: [pipelineId],
+      timeRange: 'last24Hours' as const,
+      customDateRange: null,
+    }),
+    [pipelineId],
+  );
+
+  const { data, loading, refetch } = useMonitoringData(filterState);
+
+  const [expandedMessageId, setExpandedMessageId] = useState<string | null>(
+    null,
+  );
+  const [messageDetails, setMessageDetails] = useState<
+    Record<string, MessageDetails>
+  >({});
+  const [loadingDetails, setLoadingDetails] = useState<Record<string, boolean>>(
+    {},
+  );
+  const [expandedErrorId, setExpandedErrorId] = useState<string | null>(null);
+  const [activeTab, setActiveTab] = useState<string>('messages');
+
+  const toggleMessageExpand = async (messageId: string) => {
+    if (expandedMessageId === messageId) {
+      setExpandedMessageId(null);
+    } else {
+      setExpandedMessageId(messageId);
+
+      if (!messageDetails[messageId]) {
+        setLoadingDetails((prev) => ({ ...prev, [messageId]: true }));
+        try {
+          const result = await httpClient.get<{
+            message_id: string;
+            found: boolean;
+            message: RawMessageData | null;
+            llm_calls: RawLLMCallData[];
+            llm_stats: RawLLMStatsData;
+            errors: RawErrorData[];
+          }>(`/api/v1/monitoring/messages/${messageId}/details`);
+
+          if (result) {
+            setMessageDetails((prev) => ({
+              ...prev,
+              [messageId]: {
+                messageId: result.message_id,
+                found: result.found,
+                message: result.message
+                  ? {
+                      id: result.message.id,
+                      timestamp: new Date(result.message.timestamp),
+                      botId: result.message.bot_id,
+                      botName: result.message.bot_name,
+                      pipelineId: result.message.pipeline_id,
+                      pipelineName: result.message.pipeline_name,
+                      messageContent: result.message.message_content,
+                      sessionId: result.message.session_id,
+                      status: result.message.status,
+                      level: result.message.level,
+                      platform: result.message.platform,
+                      userId: result.message.user_id,
+                      runnerName: result.message.runner_name,
+                      variables: result.message.variables,
+                    }
+                  : undefined,
+                llmCalls: result.llm_calls.map((call: RawLLMCallData) => ({
+                  id: call.id,
+                  timestamp: new Date(call.timestamp),
+                  modelName: call.model_name,
+                  status: call.status,
+                  duration: call.duration,
+                  errorMessage: call.error_message,
+                  tokens: {
+                    input: call.input_tokens || 0,
+                    output: call.output_tokens || 0,
+                    total: call.total_tokens || 0,
+                  },
+                })),
+                errors: result.errors.map((error: RawErrorData) => ({
+                  id: error.id,
+                  timestamp: new Date(error.timestamp),
+                  errorType: error.error_type,
+                  errorMessage: error.error_message,
+                  stackTrace: error.stack_trace,
+                })),
+                llmStats: {
+                  totalCalls: result.llm_stats.total_calls,
+                  totalInputTokens: result.llm_stats.total_input_tokens,
+                  totalOutputTokens: result.llm_stats.total_output_tokens,
+                  totalTokens: result.llm_stats.total_tokens,
+                  totalDurationMs: result.llm_stats.total_duration_ms,
+                  averageDurationMs: result.llm_stats.average_duration_ms,
+                },
+              } as MessageDetails,
+            }));
+          }
+        } catch (error) {
+          console.error('Failed to fetch message details:', error);
+        } finally {
+          setLoadingDetails((prev) => ({ ...prev, [messageId]: false }));
+        }
+      }
+    }
+  };
+
+  const toggleErrorExpand = (errorId: string) => {
+    if (expandedErrorId === errorId) {
+      setExpandedErrorId(null);
+    } else {
+      setExpandedErrorId(errorId);
+    }
+  };
+
+  const jumpToMessage = async (messageId: string) => {
+    setActiveTab('messages');
+    // Small delay to ensure tab transition completes before expanding
+    setTimeout(() => {
+      toggleMessageExpand(messageId);
+    }, 100);
+  };
+
+  return (
+    <div className="w-full h-full flex flex-col">
+      {/* Header with refresh button */}
+      <div className="flex items-center justify-between mb-4 pb-4 border-b border-gray-200 dark:border-gray-700">
+        <p className="text-sm text-gray-500 dark:text-gray-400">
+          {t('pipelines.monitoring.description')}
+        </p>
+        <div className="flex items-center gap-2">
+          {onNavigateToMonitoring && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onNavigateToMonitoring}
+              className="bg-white dark:bg-[#2a2a2e] hover:bg-gray-50 dark:hover:bg-gray-800 border-gray-300 dark:border-gray-600"
+            >
+              <svg
+                className="w-4 h-4 mr-2"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+              >
+                <path d="M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19V6.413L11.2071 14.2071L9.79289 12.7929L17.585 5H13V3H21Z"></path>
+              </svg>
+              {t('pipelines.monitoring.detailedLogs')}
+            </Button>
+          )}
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={refetch}
+            className="bg-white dark:bg-[#2a2a2e] hover:bg-gray-50 dark:hover:bg-gray-800 border-gray-300 dark:border-gray-600"
+          >
+            <svg
+              className="w-4 h-4 mr-2"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+            >
+              <path d="M5.46257 4.43262C7.21556 2.91688 9.5007 2 12 2C17.5228 2 22 6.47715 22 12C22 14.1361 21.3302 16.1158 20.1892 17.7406L17 12H20C20 7.58172 16.4183 4 12 4C9.84982 4 7.89777 4.84827 6.46023 6.22842L5.46257 4.43262ZM18.5374 19.5674C16.7844 21.0831 14.4993 22 12 22C6.47715 22 2 17.5228 2 12C2 9.86386 2.66979 7.88416 3.8108 6.25944L7 12H4C4 16.4183 7.58172 20 12 20C14.1502 20 16.1022 19.1517 17.5398 17.7716L18.5374 19.5674Z"></path>
+            </svg>
+            {t('monitoring.refreshData')}
+          </Button>
+        </div>
+      </div>
+
+      {/* Overview Stats */}
+      {data && (
+        <div className="grid grid-cols-3 gap-4 mb-6">
+          <div className="bg-white dark:bg-[#2a2a2e] rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+            <div className="text-sm text-gray-500 dark:text-gray-400">
+              {t('monitoring.totalMessages')}
+            </div>
+            <div className="text-2xl font-bold text-gray-900 dark:text-gray-100 mt-1">
+              {data.overview.totalMessages}
+            </div>
+          </div>
+          <div className="bg-white dark:bg-[#2a2a2e] rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+            <div className="text-sm text-gray-500 dark:text-gray-400">
+              {t('monitoring.successRate')}
+            </div>
+            <div className="text-2xl font-bold text-gray-900 dark:text-gray-100 mt-1">
+              {data.overview.successRate.toFixed(1)}%
+            </div>
+          </div>
+          <div className="bg-white dark:bg-[#2a2a2e] rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+            <div className="text-sm text-gray-500 dark:text-gray-400">
+              {t('monitoring.tabs.errors')}
+            </div>
+            <div className="text-2xl font-bold text-red-600 dark:text-red-400 mt-1">
+              {data.errors.length}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Tabs */}
+      <Tabs
+        value={activeTab}
+        onValueChange={setActiveTab}
+        className="flex-1 flex flex-col min-h-0"
+      >
+        <TabsList className="bg-gray-100 dark:bg-[#1a1a1e] h-10 p-1 mb-4">
+          <TabsTrigger
+            value="messages"
+            className="px-4 py-1.5 text-sm font-medium cursor-pointer data-[state=active]:bg-white dark:data-[state=active]:bg-[#2a2a2e] data-[state=active]:shadow-sm"
+          >
+            {t('monitoring.tabs.messages')}
+          </TabsTrigger>
+          <TabsTrigger
+            value="errors"
+            className="px-4 py-1.5 text-sm font-medium cursor-pointer data-[state=active]:bg-white dark:data-[state=active]:bg-[#2a2a2e] data-[state=active]:shadow-sm"
+          >
+            {t('monitoring.tabs.errors')}
+          </TabsTrigger>
+          <TabsTrigger
+            value="llmCalls"
+            className="px-4 py-1.5 text-sm font-medium cursor-pointer data-[state=active]:bg-white dark:data-[state=active]:bg-[#2a2a2e] data-[state=active]:shadow-sm"
+          >
+            {t('monitoring.tabs.modelCalls')}
+          </TabsTrigger>
+        </TabsList>
+
+        <div className="flex-1 overflow-y-auto min-h-0">
+          {/* Messages Tab */}
+          <TabsContent value="messages" className="m-0 h-full">
+            {loading && (
+              <div className="py-12 flex justify-center">
+                <LoadingSpinner text={t('monitoring.messageList.loading')} />
+              </div>
+            )}
+
+            {!loading && data && data.messages && data.messages.length > 0 && (
+              <div className="space-y-3">
+                {data.messages
+                  .filter((msg) => {
+                    const content = msg.messageContent?.trim();
+                    return content && content !== '[]' && content !== '""';
+                  })
+                  .map((msg) => (
+                    <div
+                      key={msg.id}
+                      className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden hover:shadow-md transition-all duration-200"
+                    >
+                      <div
+                        className="p-4 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors"
+                        onClick={() => toggleMessageExpand(msg.id)}
+                      >
+                        <div className="flex items-start justify-between">
+                          <div className="flex items-start flex-1">
+                            <div className="mr-2 mt-0.5">
+                              {expandedMessageId === msg.id ? (
+                                <ChevronDown className="w-4 h-4 text-gray-500" />
+                              ) : (
+                                <ChevronRight className="w-4 h-4 text-gray-500" />
+                              )}
+                            </div>
+                            <div className="flex-1">
+                              <div className="flex items-center gap-2 mb-1">
+                                <span
+                                  className={`text-xs px-2 py-0.5 rounded ${
+                                    msg.status === 'success'
+                                      ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
+                                      : msg.status === 'error'
+                                        ? 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
+                                        : 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'
+                                  }`}
+                                >
+                                  {msg.status}
+                                </span>
+                                <span className="text-xs text-gray-500 dark:text-gray-400">
+                                  {msg.botName}
+                                </span>
+                              </div>
+                              <div className="text-sm text-gray-700 dark:text-gray-300 line-clamp-2">
+                                <MessageContentRenderer
+                                  content={msg.messageContent}
+                                />
+                              </div>
+                            </div>
+                          </div>
+                          <span className="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap ml-4">
+                            {msg.timestamp.toLocaleString()}
+                          </span>
+                        </div>
+                      </div>
+
+                      {expandedMessageId === msg.id && (
+                        <div className="border-t border-gray-200 dark:border-gray-700 p-4 bg-gray-50 dark:bg-gray-900">
+                          {loadingDetails[msg.id] && (
+                            <div className="flex justify-center py-8">
+                              <LoadingSpinner
+                                text={t('monitoring.messageList.loading')}
+                              />
+                            </div>
+                          )}
+
+                          {!loadingDetails[msg.id] &&
+                            messageDetails[msg.id] && (
+                              <div className="space-y-4">
+                                {messageDetails[msg.id].errors.length > 0 && (
+                                  <div className="bg-red-50 dark:bg-red-900/20 rounded-lg p-3">
+                                    <h4 className="text-sm font-semibold text-red-700 dark:text-red-400 mb-2">
+                                      {t('monitoring.errors.errorMessage')}
+                                    </h4>
+                                    {messageDetails[msg.id].errors.map(
+                                      (error) => (
+                                        <div
+                                          key={error.id}
+                                          className="text-sm space-y-2"
+                                        >
+                                          <div className="text-red-600 dark:text-red-400">
+                                            {error.errorType}:{' '}
+                                            {error.errorMessage}
+                                          </div>
+                                          {error.stackTrace && (
+                                            <pre className="text-xs text-gray-600 dark:text-gray-400 overflow-auto max-h-40 bg-white dark:bg-gray-900 p-2 rounded whitespace-pre-wrap break-words">
+                                              {error.stackTrace}
+                                            </pre>
+                                          )}
+                                        </div>
+                                      ),
+                                    )}
+                                  </div>
+                                )}
+
+                                {messageDetails[msg.id].llmCalls.length > 0 && (
+                                  <div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-3">
+                                    <h4 className="text-sm font-semibold text-blue-700 dark:text-blue-400 mb-2">
+                                      {t('monitoring.tabs.modelCalls')} (
+                                      {messageDetails[msg.id].llmCalls.length})
+                                    </h4>
+                                    <div className="text-xs text-gray-600 dark:text-gray-400 space-y-1">
+                                      <div>
+                                        {t('monitoring.llmCalls.totalTokens')}:{' '}
+                                        {
+                                          messageDetails[msg.id].llmStats
+                                            .totalTokens
+                                        }
+                                      </div>
+                                      <div>
+                                        {t('monitoring.llmCalls.duration')}:{' '}
+                                        {messageDetails[
+                                          msg.id
+                                        ].llmStats.totalDurationMs.toFixed(0)}
+                                        ms
+                                      </div>
+                                    </div>
+                                  </div>
+                                )}
+                              </div>
+                            )}
+                        </div>
+                      )}
+                    </div>
+                  ))}
+              </div>
+            )}
+
+            {!loading &&
+              (!data || !data.messages || data.messages.length === 0) && (
+                <div className="text-center text-gray-500 dark:text-gray-400 py-16">
+                  <svg
+                    className="w-16 h-16 mx-auto mb-4 text-gray-300 dark:text-gray-600"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={1.5}
+                      d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+                    />
+                  </svg>
+                  <p className="text-base font-medium">
+                    {t('monitoring.messageList.noMessages')}
+                  </p>
+                </div>
+              )}
+          </TabsContent>
+
+          {/* Errors Tab */}
+          <TabsContent value="errors" className="m-0 h-full">
+            {loading && (
+              <div className="py-12 flex justify-center">
+                <LoadingSpinner text={t('common.loading')} />
+              </div>
+            )}
+
+            {!loading && data && data.errors && data.errors.length > 0 && (
+              <div className="space-y-3">
+                {data.errors.map((error) => (
+                  <div
+                    key={error.id}
+                    className="border border-red-200 dark:border-red-900 rounded-lg overflow-hidden hover:shadow-md transition-all duration-200"
+                  >
+                    <div
+                      className="p-4 cursor-pointer hover:bg-red-50 dark:hover:bg-red-950/50 transition-colors bg-red-50/50 dark:bg-red-950/30"
+                      onClick={() => toggleErrorExpand(error.id)}
+                    >
+                      <div className="flex items-start justify-between">
+                        <div className="flex items-start flex-1">
+                          <div className="mr-2 mt-0.5">
+                            {expandedErrorId === error.id ? (
+                              <ChevronDown className="w-4 h-4 text-red-500" />
+                            ) : (
+                              <ChevronRight className="w-4 h-4 text-red-500" />
+                            )}
+                          </div>
+                          <div className="flex-1">
+                            <div className="flex items-center gap-2 mb-1">
+                              {error.messageId && (
+                                <Button
+                                  variant="ghost"
+                                  size="sm"
+                                  className="h-5 px-1.5 text-xs"
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    jumpToMessage(error.messageId!);
+                                  }}
+                                >
+                                  <ExternalLink className="w-3 h-3 mr-1" />
+                                  {t('monitoring.messageList.viewConversation')}
+                                </Button>
+                              )}
+                            </div>
+                            <div className="font-medium text-sm text-red-700 dark:text-red-300 mb-1">
+                              {error.errorType}
+                            </div>
+                            <p className="text-sm text-red-600 dark:text-red-400 line-clamp-2">
+                              {error.errorMessage}
+                            </p>
+                          </div>
+                        </div>
+                        <span className="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap ml-4">
+                          {error.timestamp.toLocaleString()}
+                        </span>
+                      </div>
+                    </div>
+
+                    {expandedErrorId === error.id && (
+                      <div className="border-t border-red-200 dark:border-red-900 p-4 bg-white dark:bg-gray-900">
+                        <div className="space-y-3">
+                          <div className="bg-red-50 dark:bg-red-900/20 rounded-lg p-3">
+                            <h4 className="text-sm font-semibold text-red-700 dark:text-red-400 mb-2">
+                              {t('monitoring.errors.errorMessage')}
+                            </h4>
+                            <div className="text-sm text-red-600 dark:text-red-400 whitespace-pre-wrap break-words">
+                              {error.errorMessage}
+                            </div>
+                          </div>
+
+                          {error.stackTrace && (
+                            <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
+                              <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
+                                {t('monitoring.errors.stackTrace')}
+                              </h4>
+                              <pre className="text-xs text-gray-600 dark:text-gray-400 overflow-auto max-h-60 bg-white dark:bg-gray-900 p-2 rounded whitespace-pre-wrap break-words">
+                                {error.stackTrace}
+                              </pre>
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {!loading &&
+              (!data || !data.errors || data.errors.length === 0) && (
+                <div className="text-center text-gray-500 dark:text-gray-400 py-16">
+                  <svg
+                    className="w-16 h-16 mx-auto mb-4 text-green-300 dark:text-green-600"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={1.5}
+                      d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
+                  </svg>
+                  <p className="text-base font-medium text-green-600 dark:text-green-400">
+                    {t('monitoring.errors.noErrors')}
+                  </p>
+                </div>
+              )}
+          </TabsContent>
+
+          {/* LLM Calls Tab */}
+          <TabsContent value="llmCalls" className="m-0 h-full">
+            {loading && (
+              <div className="py-12 flex justify-center">
+                <LoadingSpinner text={t('common.loading')} />
+              </div>
+            )}
+
+            {!loading && data && data.llmCalls && data.llmCalls.length > 0 && (
+              <div className="space-y-3">
+                {data.llmCalls.map((call) => (
+                  <div
+                    key={call.id}
+                    className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition-all duration-200"
+                  >
+                    <div className="flex items-start justify-between">
+                      <div className="flex-1">
+                        <div className="flex items-center gap-2 mb-2">
+                          <span
+                            className={`text-xs px-2 py-0.5 rounded ${
+                              call.status === 'success'
+                                ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
+                                : 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
+                            }`}
+                          >
+                            {call.status}
+                          </span>
+                        </div>
+                        <div className="font-medium text-sm text-gray-700 dark:text-gray-300 mb-2">
+                          {call.modelName}
+                        </div>
+                        <div className="text-xs text-gray-600 dark:text-gray-400 space-y-1">
+                          <div className="flex flex-wrap gap-4">
+                            <span>
+                              {t('monitoring.llmCalls.inputTokens')}:{' '}
+                              {call.tokens.input}
+                            </span>
+                            <span>
+                              {t('monitoring.llmCalls.outputTokens')}:{' '}
+                              {call.tokens.output}
+                            </span>
+                            <span>
+                              {t('monitoring.llmCalls.totalTokens')}:{' '}
+                              {call.tokens.total}
+                            </span>
+                            <span>
+                              {t('monitoring.llmCalls.duration')}:{' '}
+                              {call.duration}ms
+                            </span>
+                            {call.cost && (
+                              <span>
+                                {t('monitoring.llmCalls.cost')}: $
+                                {call.cost.toFixed(4)}
+                              </span>
+                            )}
+                          </div>
+                        </div>
+                        {call.errorMessage && (
+                          <div className="mt-2 text-xs text-red-600 dark:text-red-400">
+                            Error: {call.errorMessage}
+                          </div>
+                        )}
+                      </div>
+                      <span className="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap ml-4">
+                        {call.timestamp.toLocaleString()}
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {!loading &&
+              (!data || !data.llmCalls || data.llmCalls.length === 0) && (
+                <div className="text-center text-gray-500 dark:text-gray-400 py-16">
+                  <svg
+                    className="w-16 h-16 mx-auto mb-4 text-gray-300 dark:text-gray-600"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={1.5}
+                      d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+                    />
+                  </svg>
+                  <p className="text-base font-medium">
+                    {t('monitoring.llmCalls.noData')}
+                  </p>
+                </div>
+              )}
+          </TabsContent>
+        </div>
+      </Tabs>
+    </div>
+  );
+}

web/src/i18n/locales/en-US.ts

@@ -644,6 +644,12 @@ const enUS = {
       showMarkdown: 'Show Markdown',
       showRaw: 'Show Raw',
     },
+    monitoring: {
+      title: 'Monitoring',
+      description:
+        'View execution logs and errors for this pipeline (last 24 hours)',
+      detailedLogs: 'Detailed Logs',
+    },
   },
   knowledge: {
     title: 'Knowledge',

web/src/i18n/locales/ja-JP.ts

@@ -647,6 +647,11 @@ const jaJP = {
       showMarkdown: 'Markdownで表示',
       showRaw: '原文で表示',
     },
+    monitoring: {
+      title: 'モニタリング',
+      description: 'このパイプラインの実行ログとエラー情報を表示（過去24時間）',
+      detailedLogs: '詳細ログ',
+    },
   },
   knowledge: {
     title: '知識ベース',

web/src/i18n/locales/zh-Hans.ts

@@ -620,6 +620,11 @@ const zhHans = {
       showMarkdown: '渲染',
       showRaw: '原文',
     },
+    monitoring: {
+      title: '监控日志',
+      description: '查看此流水线的运行记录和错误信息（最近24小时）',
+      detailedLogs: '详细日志',
+    },
   },
   knowledge: {
     title: '知识库',

web/src/i18n/locales/zh-Hant.ts

@@ -613,6 +613,11 @@ const zhHant = {
       showMarkdown: '渲染',
       showRaw: '原文',
     },
+    monitoring: {
+      title: '監控日誌',
+      description: '檢視此流程線的執行記錄和錯誤資訊（最近24小時）',
+      detailedLogs: '詳細日誌',
+    },
   },
   knowledge: {
     title: '知識庫',