Function LogsPage

client-next/src/app/logs/page.tsx:19–136

()

type LogFilter = "all" | "mcp" | "agent" | "error";

export default function LogsPage() {
  const [logs, setLogs] = useState<LogEntry[]>([]);
  const [paused, setPaused] = useState(false);
  const [autoScroll, setAutoScroll] = useState(true);
  const [filter, setFilter] = useState<LogFilter>("all");
  const containerRef = useRef<HTMLDivElement | null>(null);
  const eventSourceRef = useRef<EventSource | null>(null);

  useEffect(() => {
    let active = true;
    const connect = async () => {
      try {
        const base = await getApiBaseUrl();
        if (!active) return;
        const source = new EventSource(`${base}/logs/stream`);
        eventSourceRef.current = source;

        source.onmessage = (event) => {
          if (paused) return;
          try {
            const entry = JSON.parse(event.data) as LogEntry;
            setLogs((prev) => [...prev.slice(-500), entry]);
          } catch {
            // ignore parse errors
          }
        };

        source.onerror = () => {
          toast.error("Log stream disconnected");
        };
      } catch (err: any) {
        toast.error(err?.message || "Failed to connect to logs");
      }
    };

    connect();
    return () => {
      active = false;
      eventSourceRef.current?.close();
    };
  }, [paused]);

  useEffect(() => {
    if (!autoScroll) return;
    if (!containerRef.current) return;
    containerRef.current.scrollTop = containerRef.current.scrollHeight;
  }, [logs, autoScroll]);

  const filtered = useMemo(() => {
    if (filter === "all") return logs;
    if (filter === "mcp") return logs.filter((l) => l.line.includes("[MCP]"));
    if (filter === "agent") return logs.filter((l) => l.line.includes("[Agent]"));
    if (filter === "error") {
      return logs.filter((l) => l.line.includes("[Error]") || l.line.includes("error=") || l.line.includes("status=429"));
    }
    return logs;
  }, [logs, filter]);