fix: refine log level parsing and implement bottom auto-scroll

CHANGELOG.md

@@ -5,6 +5,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+- **Fixed:** Global logs misclassifying INFO messages as errors due to naive string matching.
+- **Changed:** Global logs now display chronologically (newest at bottom) with smooth auto-scrolling.
+- **Changed:** Renamed Observability navigation tab to Logs.
 - **Fixed:** TTY container log streams failing to parse globally.
 - **Fixed:** Global logs displaying in UTC instead of local browser timezone.
 - **Changed:** Global Logs UI revamped to use a floating, hover-based action bar to maximize terminal space.

backend/src/index.ts

@@ -807,8 +807,16 @@ app.get('/api/logs/global', async (req: Request, res: Response) => {
           }
 
           let level = source === 'STDERR' ? 'ERROR' : 'INFO';
-          if (cleanMessage.toLowerCase().includes('warn')) level = 'WARN';
-          else if (cleanMessage.toLowerCase().includes('error') || cleanMessage.toLowerCase().includes('fail')) level = 'ERROR';
+
+          if (/\b(warn|warning)\b/i.test(cleanMessage)) {
+            level = 'WARN';
+          } else if (/\b(error|err|fatal|exception)\b/i.test(cleanMessage)) {
+            level = 'ERROR';
+          }
+
+          if (/\[\s*(info|inf|debug|dbg)\s*\]/i.test(cleanMessage) || /^(info|debug)\b/i.test(cleanMessage)) {
+            level = 'INFO';
+          }
 
           allLogs.push({ stackName, containerName, source, level, message: cleanMessage, timestampMs });
         };
@@ -834,9 +842,9 @@ app.get('/api/logs/global', async (req: Request, res: Response) => {
       } catch (err) { /* ignore */ }
     }));
 
-    // Sort globally by timestamp descending and limit to 1000 lines to prevent payload bloat
-    allLogs.sort((a, b) => b.timestampMs - a.timestampMs);
-    res.json(allLogs.slice(0, 1000));
+    // Sort globally by timestamp ascending (newest bottom) and limit to 2000 lines
+    allLogs.sort((a, b) => a.timestampMs - b.timestampMs);
+    res.json(allLogs.slice(-2000));
   } catch (error) {
     res.status(500).json({ error: 'Failed to fetch global logs' });
   }

frontend/src/components/EditorLayout.tsx

@@ -800,10 +800,10 @@ export default function EditorLayout() {
             size="sm"
             className="rounded-lg"
             onClick={() => setActiveView('global-observability')}
-            title="Global Observability"
+            title="Global Logs"
           >
             <Activity className="w-4 h-4 mr-2" />
-            Observability
+            Logs
           </Button>
 
           {/* Settings Modal Toggle */}

frontend/src/components/GlobalObservabilityView.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useMemo } from 'react';
+import { useEffect, useState, useMemo, useRef } from 'react';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -24,6 +24,7 @@ export function GlobalObservabilityView() {
     const [selectedStacks, setSelectedStacks] = useState<string[]>([]);
     const [streamFilter, setStreamFilter] = useState<'ALL' | 'STDOUT' | 'STDERR'>('ALL');
     const [clearedAt, setClearedAt] = useState<number>(0);
+    const bottomRef = useRef<HTMLDivElement>(null);
 
     const fetchData = async () => {
         setLoading(true);
@@ -45,6 +46,7 @@ export function GlobalObservabilityView() {
         return () => clearInterval(interval);
     }, []);
 
+
     const uniqueStacks = useMemo(() => {
         const stacks = new Set(logs.map(l => l.stackName));
         return Array.from(stacks).sort();
@@ -75,6 +77,10 @@ export function GlobalObservabilityView() {
         });
     }, [logs, selectedStacks, streamFilter, searchQuery, clearedAt]);
 
+    useEffect(() => {
+        bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }, [filteredLogs]);
+
     const handleDownload = () => {
         if (filteredLogs.length === 0) return;
         const blob = new Blob([filteredLogs.map(l => `[${new Date(l.timestampMs).toLocaleTimeString([], { hour12: true })}] [${l.containerName}] ${l.level}: ${l.message}`).join('\n')], { type: 'text/plain;charset=utf-8' });
@@ -152,14 +158,17 @@ export function GlobalObservabilityView() {
 
             <ScrollArea className="flex-1 p-4">
                 {filteredLogs.length > 0 ? (
-                    filteredLogs.map((log, idx) => (
-                        <div key={idx} className="mb-1 leading-relaxed whitespace-pre-wrap break-all hover:bg-white/5 px-2 py-0.5 rounded -mx-2 font-mono text-xs">
-                            <span className="text-gray-500 mr-2">[{new Date(log.timestampMs).toLocaleTimeString([], { hour12: true })}]</span>
-                            <span className="text-blue-400 font-semibold mr-2">[{log.containerName}]</span>
-                            <span className={`mr-2 font-bold ${log.level === 'ERROR' ? 'text-red-500' : log.level === 'WARN' ? 'text-yellow-500' : 'text-green-500'}`}>{log.level}:</span>
-                            <span className={log.source === 'STDERR' ? 'text-red-300' : 'text-gray-300'}>{log.message}</span>
-                        </div>
-                    ))
+                    <>
+                        {filteredLogs.map((log, idx) => (
+                            <div key={idx} className="mb-1 leading-relaxed whitespace-pre-wrap break-all hover:bg-white/5 px-2 py-0.5 rounded -mx-2 font-mono text-xs">
+                                <span className="text-gray-500 mr-2">[{new Date(log.timestampMs).toLocaleTimeString([], { hour12: true })}]</span>
+                                <span className="text-blue-400 font-semibold mr-2">[{log.containerName}]</span>
+                                <span className={`mr-2 font-bold ${log.level === 'ERROR' ? 'text-red-500' : log.level === 'WARN' ? 'text-yellow-500' : 'text-green-500'}`}>{log.level}:</span>
+                                <span className={log.source === 'STDERR' ? 'text-red-300' : 'text-gray-300'}>{log.message}</span>
+                            </div>
+                        ))}
+                        <div ref={bottomRef} />
+                    </>
                 ) : (
                     <div className="text-gray-500 italic p-4 text-center mt-10">
                         {logs.length === 0 ? "No active logs found." : "No logs match the current filters."}