screenclipper/apps/frontend/app/components/LiveLogViewer.tsx

"use client";

import { useEffect, useRef, useState } from "react";

export function LiveLogViewer({ sessionId }: { sessionId: string }) {
  const [lines, setLines] = useState<string[]>([]);
  const boxRef = useRef<HTMLPreElement>(null);

  useEffect(() => {
    let cancelled = false;

    async function poll() {
      try {
        const res = await fetch(`/api/debug/capture/${sessionId}`, { cache: "no-store" });
        const data = (await res.json()) as { lines: string[] };
        if (!cancelled) setLines(data.lines);
      } catch {
        // transient fetch failures are fine to just skip — next tick retries
      }
    }

    poll();
    const timer = setInterval(poll, 4000);
    return () => {
      cancelled = true;
      clearInterval(timer);
    };
  }, [sessionId]);

  useEffect(() => {
    if (boxRef.current) boxRef.current.scrollTop = boxRef.current.scrollHeight;
  }, [lines]);

  return (
    <pre
      ref={boxRef}
      className="mono"
      style={{
        maxHeight: "220px",
        overflowY: "auto",
        background: "var(--bg)",
        border: "1px solid var(--border)",
        borderRadius: "6px",
        padding: "0.6rem 0.7rem",
        fontSize: "0.7rem",
        whiteSpace: "pre-wrap",
        marginTop: "0.5rem",
      }}
    >
      {lines.length > 0 ? lines.join("\n") : "Log bekleniyor…"}
    </pre>
  );
}