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/home/bots/components/bot-log/view/BotLogCard.tsx

@@ -6,12 +6,33 @@ import styles from './botLog.module.css';
 import { httpClient } from '@/app/infra/http/HttpClient';
 import { PhotoProvider } from 'react-photo-view';
 import { useTranslation } from 'react-i18next';
-import { Check } from 'lucide-react';
+import { Check, ChevronDown, ChevronRight } from 'lucide-react';
+import { toast } from 'sonner';
 
 export function BotLogCard({ botLog }: { botLog: BotLog }) {
   const { t } = useTranslation();
   const baseURL = httpClient.getBaseUrl();
   const [copied, setCopied] = useState(false);
+  const [expanded, setExpanded] = useState(false);
+
+  // Fallback 复制方法，用于不支持 clipboard API 的环境
+  function fallbackCopy(text: string) {
+    const textArea = document.createElement('textarea');
+    textArea.value = text;
+    textArea.style.position = 'fixed';
+    textArea.style.left = '-9999px';
+    textArea.style.top = '-9999px';
+    document.body.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+    try {
+      document.execCommand('copy');
+      toast.success(t('common.copySuccess'));
+    } catch {
+      toast.error(t('common.copyFailed'));
+    }
+    document.body.removeChild(textArea);
+  }
 
   function formatTime(timestamp: number) {
     const now = new Date();
@@ -63,6 +84,15 @@ export function BotLogCard({ botLog }: { botLog: BotLog }) {
     }
   }
 
+  // 截取文本的简短版本
+  function getShortText(text: string, maxLength: number = 100) {
+    if (text.length <= maxLength) return text;
+    return text.substring(0, maxLength) + '...';
+  }
+
+  // 判断是否需要展开按钮
+  const needsExpand = botLog.text.length > 100 || botLog.images.length > 0;
+
   return (
     <div className={`${styles.botLogCardContainer}`}>
       {/* 头部标签，时间 */}
@@ -78,13 +108,24 @@ export function BotLogCard({ botLog }: { botLog: BotLog }) {
           {botLog.message_session_id && (
             <div
               className={`${styles.tag} ${styles.chatTag} relative`}
-              onClick={() => {
-                navigator.clipboard
-                  .writeText(botLog.message_session_id)
-                  .then(() => {
-                    setCopied(true);
-                    setTimeout(() => setCopied(false), 2000);
-                  });
+              onClick={(e) => {
+                e.stopPropagation();
+                // 兼容性更好的复制方法
+                if (navigator.clipboard && navigator.clipboard.writeText) {
+                  navigator.clipboard
+                    .writeText(botLog.message_session_id)
+                    .then(() => {
+                      setCopied(true);
+                      setTimeout(() => setCopied(false), 2000);
+                      toast.success(t('common.copySuccess'));
+                    })
+                    .catch(() => {
+                      // fallback
+                      fallbackCopy(botLog.message_session_id);
+                    });
+                } else {
+                  fallbackCopy(botLog.message_session_id);
+                }
               }}
               title={t('common.clickToCopy')}
             >
@@ -125,12 +166,38 @@ export function BotLogCard({ botLog }: { botLog: BotLog }) {
             </div>
           )}
         </div>
-        <div className={`${styles.timestamp}`}>
-          {formatTime(botLog.timestamp)}
+        <div className="flex items-center gap-2">
+          {needsExpand && (
+            <button
+              onClick={() => setExpanded(!expanded)}
+              className="flex items-center gap-1 text-xs text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 transition-colors"
+            >
+              {expanded ? (
+                <>
+                  <ChevronDown className="w-3 h-3" />
+                  {t('bots.collapse')}
+                </>
+              ) : (
+                <>
+                  <ChevronRight className="w-3 h-3" />
+                  {t('bots.viewDetails')}
+                </>
+              )}
+            </button>
+          )}
+          <div className={`${styles.timestamp}`}>
+            {formatTime(botLog.timestamp)}
+          </div>
         </div>
       </div>
-      <div className={`${styles.cardText}`}>{botLog.text}</div>
-      {botLog.images.length > 0 && (
+
+      {/* 日志内容 - 简化显示 */}
+      <div className={`${styles.cardText}`}>
+        {expanded ? botLog.text : getShortText(botLog.text)}
+      </div>
+
+      {/* 图片 - 只在展开时显示 */}
+      {expanded && botLog.images.length > 0 && (
         <PhotoProvider>
           <div className={`flex flex-wrap gap-2 mt-3`}>
             {botLog.images.map((item) => (
@@ -144,6 +211,13 @@ export function BotLogCard({ botLog }: { botLog: BotLog }) {
           </div>
         </PhotoProvider>
       )}
+
+      {/* 图片数量提示 - 未展开时显示 */}
+      {!expanded && botLog.images.length > 0 && (
+        <div className="mt-2 text-xs text-gray-500 dark:text-gray-400">
+          📷 {botLog.images.length} {t('bots.imagesAttached')}
+        </div>
+      )}
     </div>
   );
 }

web/src/app/home/bots/components/bot-log/view/BotLogListComponent.tsx

@@ -13,12 +13,14 @@ import {
 } from '@/components/ui/popover';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
-import { ChevronDownIcon } from 'lucide-react';
+import { ChevronDownIcon, ExternalLink } from 'lucide-react';
 import { debounce } from 'lodash';
 import { useTranslation } from 'react-i18next';
+import { useRouter } from 'next/navigation';
 
 export function BotLogListComponent({ botId }: { botId: string }) {
   const { t } = useTranslation();
+  const router = useRouter();
   const manager = useRef(new BotLogManager(botId)).current;
   const [botLogList, setBotLogList] = useState<BotLog[]>([]);
   const [autoFlush, setAutoFlush] = useState(true);
@@ -206,6 +208,15 @@ export function BotLogListComponent({ botId }: { botId: string }) {
             </div>
           </PopoverContent>
         </Popover>
+        <Button
+          variant="outline"
+          size="sm"
+          className="ml-4 flex items-center gap-1"
+          onClick={() => router.push(`/home/monitoring?botId=${botId}`)}
+        >
+          <ExternalLink className="h-4 w-4" />
+          <span className="text-sm">{t('bots.viewDetailedLogs')}</span>
+        </Button>
       </div>
 
       {filteredLogs.map((botLog) => {