Add system logs endpoint and UI components

backend/src/api/main.py

@@ -21,7 +21,7 @@ from starlette.responses import Response
 from fastmcp.server.http import StreamableHTTPSessionManager, set_http_request
 from fastapi.responses import FileResponse
 
-from .routes import auth, index, notes, search, graph, demo
+from .routes import auth, index, notes, search, graph, demo, system
 from ..mcp.server import mcp
 from ..services.seed import init_and_seed
 from ..services.config import get_config
@@ -111,6 +111,7 @@ app.include_router(search.router, tags=["search"])
 app.include_router(index.router, tags=["index"])
 app.include_router(graph.router, tags=["graph"])
 app.include_router(demo.router, tags=["demo"])
+app.include_router(system.router, tags=["system"])
 
 
 @app.api_route("/mcp", methods=["GET", "POST", "DELETE"])

backend/src/api/routes/system.py

@@ -0,0 +1,57 @@
+"""System routes for logs and diagnostics."""
+
+import logging
+from collections import deque
+from typing import List, Dict, Any
+from datetime import datetime
+
+from fastapi import APIRouter, Depends
+from pydantic import BaseModel
+
+from ..middleware import AuthContext, get_auth_context
+
+router = APIRouter()
+
+# Global in-memory log buffer
+LOG_BUFFER: deque = deque(maxlen=100)
+
+class LogEntry(BaseModel):
+    timestamp: str
+    level: str
+    message: str
+    extra: Dict[str, Any]
+
+class MemoryLogHandler(logging.Handler):
+    """Custom handler to capture logs into memory."""
+    def emit(self, record):
+        try:
+            msg = self.format(record)
+            extra = {k: v for k, v in record.__dict__.items() 
+                     if k not in {'args', 'asctime', 'created', 'exc_info', 'exc_text', 'filename', 
+                                  'funcName', 'levelname', 'levelno', 'lineno', 'module', 
+                                  'msecs', 'message', 'msg', 'name', 'pathname', 'process', 
+                                  'processName', 'relativeCreated', 'stack_info', 'thread', 'threadName'}}
+            
+            entry = {
+                "timestamp": datetime.fromtimestamp(record.created).isoformat(),
+                "level": record.levelname,
+                "message": msg,
+                "extra": extra
+            }
+            LOG_BUFFER.append(entry)
+        except Exception:
+            self.handleError(record)
+
+# Attach handler to root logger or specific loggers
+memory_handler = MemoryLogHandler()
+formatter = logging.Formatter('%(message)s')
+memory_handler.setFormatter(formatter)
+logging.getLogger("backend.src.mcp.server").addHandler(memory_handler)
+logging.getLogger("backend.src.services").addHandler(memory_handler)
+# Catch uvicorn/fastapi logs too if desired
+# logging.getLogger("uvicorn.access").addHandler(memory_handler)
+
+@router.get("/api/system/logs", response_model=List[LogEntry])
+async def get_logs(auth: AuthContext = Depends(get_auth_context)):
+    """Retrieve recent system logs."""
+    return list(LOG_BUFFER)

frontend/src/components/SystemLogs.tsx

@@ -0,0 +1,91 @@
+import { useState, useEffect } from 'react';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Badge } from '@/components/ui/badge';
+import { getLogs, type LogEntry } from '@/services/api';
+import { Loader2, RefreshCw } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+export function SystemLogs() {
+  const [logs, setLogs] = useState<LogEntry[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchLogs = async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const data = await getLogs();
+      // Sort logs newest first if backend returns oldest first
+      setLogs(data.reverse()); 
+    } catch (err) {
+      console.error('Failed to fetch logs:', err);
+      setError('Failed to load logs.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchLogs();
+    // Optional: Auto-refresh every 5 seconds?
+    // const interval = setInterval(fetchLogs, 5000);
+    // return () => clearInterval(interval);
+  }, []);
+
+  const getLevelVariant = (level: string) => {
+    switch (level.toUpperCase()) {
+      case 'ERROR': return 'destructive';
+      case 'WARNING': return 'secondary'; // yellow-ish usually
+      case 'INFO': return 'default';
+      case 'DEBUG': return 'outline';
+      default: return 'secondary';
+    }
+  };
+
+  return (
+    <Card className="h-full flex flex-col">
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle>System Logs</CardTitle>
+            <CardDescription>Backend operational logs (last 100 entries)</CardDescription>
+          </div>
+          <Button variant="ghost" size="sm" onClick={fetchLogs} disabled={isLoading}>
+            <RefreshCw className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent className="flex-1 overflow-hidden p-0">
+        <ScrollArea className="h-[400px] w-full p-4 pt-0">
+          {error && <div className="text-destructive text-sm p-2">{error}</div>}
+          {logs.length === 0 && !isLoading && !error && (
+            <div className="text-muted-foreground text-sm p-2">No logs available.</div>
+          )}
+          <div className="space-y-2">
+            {logs.map((log, i) => (
+              <div key={i} className="text-xs border-b border-border pb-2 last:border-0">
+                <div className="flex items-center gap-2 mb-1">
+                  <span className="text-muted-foreground font-mono">{new Date(log.timestamp).toLocaleTimeString()}</span>
+                  <Badge variant={getLevelVariant(log.level)} className="h-5 px-1.5 text-[10px]">
+                    {log.level}
+                  </Badge>
+                </div>
+                <div className="font-mono break-all whitespace-pre-wrap text-foreground/90">
+                  {log.message}
+                </div>
+                {log.extra && Object.keys(log.extra).length > 0 && (
+                  <div className="mt-1 pl-2 border-l-2 border-muted">
+                    <pre className="text-[10px] text-muted-foreground">
+                      {JSON.stringify(log.extra, null, 2)}
+                    </pre>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </ScrollArea>
+      </CardContent>
+    </Card>
+  );
+}

frontend/src/pages/Settings.tsx

@@ -15,6 +15,7 @@ import { getCurrentUser, getToken, logout, getStoredToken, isDemoSession, AUTH_T
 import { getIndexHealth, rebuildIndex, type RebuildResponse } from '@/services/api';
 import type { User } from '@/types/user';
 import type { IndexHealth } from '@/types/search';
+import { SystemLogs } from '@/components/SystemLogs';
 
 export function Settings() {
   const navigate = useNavigate();
@@ -326,6 +327,9 @@ export function Settings() {
             description="Full-text search index status and maintenance"
           />
         )}
+
+        {/* System Logs */}
+        <SystemLogs />
       </div>
     </div>
   );

frontend/src/services/api.ts

@@ -207,6 +207,20 @@ export async function rebuildIndex(): Promise<RebuildResponse> {
   });
 }
 
+/**
+ * Retrieve system logs
+ */
+export interface LogEntry {
+  timestamp: string;
+  level: string;
+  message: string;
+  extra: Record<string, any>;
+}
+
+export async function getLogs(): Promise<LogEntry[]> {
+  return apiFetch<LogEntry[]>('/api/system/logs');
+}
+
 /**
  * Move or rename a note to a new path
  */