feat: SSE real-time trace streaming + advanced search/filter with URL sync

apps/web/src/components/trace-list.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect, useCallback } from "react";
 import Link from "next/link";
+import { useSearchParams } from "next/navigation";
 import {
   Search,
   Filter,
@@ -14,6 +15,12 @@ import {
   ChevronLeft,
   ChevronRight,
   ArrowRight,
+  ChevronDown,
+  ChevronUp,
+  RefreshCw,
+  ToggleLeft,
+  ToggleRight,
+  WifiOff,
 } from "lucide-react";
 import { cn, formatDuration, formatRelativeTime } from "@/lib/utils";
 
@@ -43,6 +50,7 @@ interface TraceListProps {
 }
 
 type FilterStatus = "ALL" | TraceStatus;
+type SortOption = "newest" | "oldest" | "longest" | "shortest" | "costliest";
 
 const statusConfig: Record<TraceStatus, { label: string; icon: React.ComponentType<{ className?: string }>; color: string; bgColor: string }> = {
   RUNNING: {
@@ -65,17 +73,206 @@ const statusConfig: Record<TraceStatus, { label: string; icon: React.ComponentTy
   },
 };
 
+const sortOptions: { value: SortOption; label: string }[] = [
+  { value: "newest", label: "Newest" },
+  { value: "oldest", label: "Oldest" },
+  { value: "longest", label: "Longest duration" },
+  { value: "shortest", label: "Shortest duration" },
+  { value: "costliest", label: "Highest cost" },
+];
+
 export function TraceList({
   initialTraces,
   initialTotal,
   initialTotalPages,
   initialPage,
 }: TraceListProps) {
+  const searchParams = useSearchParams();
+  const [traces, setTraces] = useState<Trace[]>(initialTraces);
+  const [total, setTotal] = useState(initialTotal);
+  const [totalPages, setTotalPages] = useState(initialTotalPages);
+  const [currentPage, setCurrentPage] = useState(initialPage);
+  const [isLoading, setIsLoading] = useState(false);
+
   const [searchQuery, setSearchQuery] = useState("");
   const [statusFilter, setStatusFilter] = useState<FilterStatus>("ALL");
-  const [currentPage, setCurrentPage] = useState(initialPage);
+  const [sortFilter, setSortFilter] = useState<SortOption>("newest");
+  const [tagsFilter, setTagsFilter] = useState("");
+  const [dateFrom, setDateFrom] = useState("");
+  const [dateTo, setDateTo] = useState("");
 
-  const filteredTraces = initialTraces.filter((trace) => {
+  const [showAdvancedFilters, setShowAdvancedFilters] = useState(false);
+  const [autoRefresh, setAutoRefresh] = useState(false);
+  const [sseConnected, setSseConnected] = useState(false);
+  const [newTracesCount, setNewTracesCount] = useState(0);
+
+  const updateUrlParams = useCallback(() => {
+    const params = new URLSearchParams(searchParams.toString());
+
+    if (statusFilter !== "ALL") {
+      params.set("status", statusFilter);
+    } else {
+      params.delete("status");
+    }
+
+    if (searchQuery) {
+      params.set("search", searchQuery);
+    } else {
+      params.delete("search");
+    }
+
+    if (sortFilter !== "newest") {
+      params.set("sort", sortFilter);
+    } else {
+      params.delete("sort");
+    }
+
+    if (tagsFilter) {
+      params.set("tags", tagsFilter);
+    } else {
+      params.delete("tags");
+    }
+
+    if (dateFrom) {
+      params.set("dateFrom", dateFrom);
+    } else {
+      params.delete("dateFrom");
+    }
+
+    if (dateTo) {
+      params.set("dateTo", dateTo);
+    } else {
+      params.delete("dateTo");
+    }
+
+    params.set("page", currentPage.toString());
+
+    const newUrl = `${window.location.pathname}?${params.toString()}`;
+    window.history.replaceState({}, "", newUrl);
+  }, [searchParams, statusFilter, searchQuery, sortFilter, tagsFilter, dateFrom, dateTo, currentPage]);
+
+  const fetchTraces = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const params = new URLSearchParams();
+      params.set("page", currentPage.toString());
+      params.set("limit", "50");
+
+      if (statusFilter !== "ALL") {
+        params.set("status", statusFilter);
+      }
+      if (searchQuery) {
+        params.set("search", searchQuery);
+      }
+      if (sortFilter !== "newest") {
+        params.set("sort", sortFilter);
+      }
+      if (tagsFilter) {
+        params.set("tags", tagsFilter);
+      }
+      if (dateFrom) {
+        params.set("dateFrom", dateFrom);
+      }
+      if (dateTo) {
+        params.set("dateTo", dateTo);
+      }
+
+      const res = await fetch(`/api/traces?${params.toString()}`, { cache: "no-store" });
+
+      if (!res.ok) {
+        throw new Error(`Failed to fetch traces: ${res.status}`);
+      }
+
+      const data = await res.json();
+      setTraces(data.traces);
+      setTotal(data.total);
+      setTotalPages(data.totalPages);
+      setNewTracesCount(0);
+    } catch (error) {
+      console.error("Error fetching traces:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [currentPage, statusFilter, searchQuery, sortFilter, tagsFilter, dateFrom, dateTo]);
+
+  useEffect(() => {
+    const status = searchParams.get("status") as FilterStatus | null;
+    const search = searchParams.get("search") ?? "";
+    const sort = (searchParams.get("sort") as SortOption | null) ?? "newest";
+    const tags = searchParams.get("tags") ?? "";
+    const from = searchParams.get("dateFrom") ?? "";
+    const to = searchParams.get("dateTo") ?? "";
+    const page = parseInt(searchParams.get("page") ?? "1", 10);
+
+    setStatusFilter(status ?? "ALL");
+    setSearchQuery(search);
+    setSortFilter(sort);
+    setTagsFilter(tags);
+    setDateFrom(from);
+    setDateTo(to);
+    setCurrentPage(page);
+
+    const savedAutoRefresh = localStorage.getItem("agentlens-auto-refresh");
+    setAutoRefresh(savedAutoRefresh === "true");
+  }, [searchParams]);
+
+  useEffect(() => {
+    updateUrlParams();
+  }, [updateUrlParams]);
+
+  useEffect(() => {
+    fetchTraces();
+  }, [currentPage, fetchTraces]);
+
+  useEffect(() => {
+    if (!autoRefresh) return;
+
+    const interval = setInterval(() => {
+      fetchTraces();
+    }, 5000);
+
+    return () => clearInterval(interval);
+  }, [autoRefresh, fetchTraces]);
+
+  useEffect(() => {
+    localStorage.setItem("agentlens-auto-refresh", autoRefresh.toString());
+  }, [autoRefresh]);
+
+  useEffect(() => {
+    const eventSource = new EventSource("/api/traces/stream");
+
+    eventSource.onopen = () => {
+      setSseConnected(true);
+    };
+
+    eventSource.onerror = () => {
+      setSseConnected(false);
+    };
+
+    eventSource.addEventListener("trace-update", (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        if (data.type === "new") {
+          setNewTracesCount((prev) => prev + 1);
+        } else if (data.type === "updated") {
+          setNewTracesCount((prev) => prev + 1);
+        }
+      } catch (error) {
+        console.error("Error parsing SSE message:", error);
+      }
+    });
+
+    eventSource.addEventListener("heartbeat", () => {
+      setSseConnected(true);
+    });
+
+    return () => {
+      eventSource.close();
+      setSseConnected(false);
+    };
+  }, []);
+
+  const filteredTraces = traces.filter((trace) => {
     const matchesSearch =
       trace.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
       trace.tags.some((tag) =>
@@ -93,7 +290,12 @@ export function TraceList({
     { value: "ERROR", label: "Error" },
   ];
 
-  if (initialTraces.length === 0) {
+  const handlePageChange = (newPage: number) => {
+    setCurrentPage(newPage);
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
+  if (traces.length === 0) {
     return <EmptyState />;
   }
 
@@ -101,44 +303,171 @@ export function TraceList({
     <div className="space-y-6">
       {/* Header */}
       <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-        <div>
-          <h1 className="text-2xl font-bold text-neutral-100">Traces</h1>
-          <p className="text-neutral-400 mt-1">
-            {initialTotal} trace{initialTotal !== 1 ? "s" : ""} captured
-          </p>
+        <div className="flex items-center gap-3">
+          <div>
+            <h1 className="text-2xl font-bold text-neutral-100">Traces</h1>
+            <p className="text-neutral-400 mt-1">
+              {total} trace{total !== 1 ? "s" : ""} captured
+            </p>
+          </div>
+          <div
+            className={cn(
+              "flex items-center gap-1.5 text-xs font-medium",
+              sseConnected ? "text-emerald-400" : "text-neutral-500"
+            )}
+          >
+            {sseConnected ? (
+              <>
+                <div className="relative">
+                  <div className="w-2 h-2 rounded-full bg-emerald-400" />
+                  <div className="absolute inset-0 w-2 h-2 rounded-full bg-emerald-400 animate-ping" />
+                </div>
+                <span className="ml-1">Live</span>
+              </>
+            ) : (
+              <>
+                <WifiOff className="w-3.5 h-3.5" />
+                <span className="ml-1">Offline</span>
+              </>
+            )}
+          </div>
         </div>
+        <button
+          onClick={() => setAutoRefresh(!autoRefresh)}
+          className={cn(
+            "flex items-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-colors",
+            autoRefresh
+              ? "bg-emerald-500/10 border-emerald-500/30 text-emerald-400"
+              : "bg-neutral-900 border-neutral-800 text-neutral-400 hover:border-neutral-700"
+          )}
+        >
+          {autoRefresh ? (
+            <>
+              <ToggleRight className="w-4 h-4" />
+              Auto-refresh ON
+            </>
+          ) : (
+            <>
+              <ToggleLeft className="w-4 h-4" />
+              Auto-refresh OFF
+            </>
+          )}
+        </button>
       </div>
 
-      {/* Search and Filter */}
-      <div className="flex flex-col sm:flex-row gap-4">
-        <div className="relative flex-1">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-neutral-500" />
-          <input
-            type="text"
-            placeholder="Search traces..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="w-full pl-10 pr-4 py-3 bg-neutral-900 border border-neutral-800 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/50 transition-all"
-          />
+      {/* New Traces Banner */}
+      {newTracesCount > 0 && (
+        <div className="flex items-center justify-between gap-4 px-4 py-3 bg-blue-500/10 border border-blue-500/20 text-blue-400 rounded-lg">
+          <span className="text-sm font-medium">
+            {newTracesCount} new trace{newTracesCount !== 1 ? "s" : ""} available
+          </span>
+          <button
+            onClick={() => fetchTraces()}
+            className="flex items-center gap-1.5 px-3 py-1.5 bg-blue-500/20 hover:bg-blue-500/30 text-blue-300 text-sm font-medium rounded-lg transition-colors"
+          >
+            <RefreshCw className={cn("w-3.5 h-3.5", isLoading && "animate-spin")} />
+            Refresh
+          </button>
         </div>
-        <div className="flex items-center gap-2">
-          <Filter className="w-5 h-5 text-neutral-500" />
-          <div className="flex gap-2">
-            {filterChips.map((chip) => (
-              <button
-                key={chip.value}
-                onClick={() => setStatusFilter(chip.value)}
-                className={cn(
-                  "px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200",
-                  statusFilter === chip.value
-                    ? "bg-emerald-500/20 text-emerald-400 border border-emerald-500/30"
-                    : "bg-neutral-900 text-neutral-400 border border-neutral-800 hover:border-neutral-700"
-                )}
-              >
-                {chip.label}
-              </button>
-            ))}
+      )}
+
+      {/* Search and Filter */}
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-col sm:flex-row gap-4">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-neutral-500" />
+            <input
+              type="text"
+              placeholder="Search traces..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="w-full pl-10 pr-4 py-3 bg-neutral-900 border border-neutral-800 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/50 transition-all"
+            />
           </div>
+          <div className="flex items-center gap-2">
+            <Filter className="w-5 h-5 text-neutral-500" />
+            <div className="flex gap-2">
+              {filterChips.map((chip) => (
+                <button
+                  key={chip.value}
+                  onClick={() => setStatusFilter(chip.value)}
+                  className={cn(
+                    "px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200",
+                    statusFilter === chip.value
+                      ? "bg-emerald-500/20 text-emerald-400 border border-emerald-500/30"
+                      : "bg-neutral-900 text-neutral-400 border border-neutral-800 hover:border-neutral-700"
+                  )}
+                >
+                  {chip.label}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Advanced Filters */}
+        <div className="border-t border-neutral-800 pt-4">
+          <button
+            onClick={() => setShowAdvancedFilters(!showAdvancedFilters)}
+            className="flex items-center gap-2 text-sm text-neutral-400 hover:text-neutral-300 transition-colors"
+          >
+            {showAdvancedFilters ? (
+              <ChevronUp className="w-4 h-4" />
+            ) : (
+              <ChevronDown className="w-4 h-4" />
+            )}
+            Advanced Filters
+          </button>
+
+          {showAdvancedFilters && (
+            <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-4">
+              <div className="space-y-2">
+                <label className="text-xs text-neutral-500 font-medium">Sort by</label>
+                <select
+                  value={sortFilter}
+                  onChange={(e) => setSortFilter(e.target.value as SortOption)}
+                  className="w-full bg-neutral-900 border border-neutral-700 rounded-lg px-3 py-2 text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-emerald-500/50 focus:border-emerald-500 transition-all"
+                >
+                  {sortOptions.map((option) => (
+                    <option key={option.value} value={option.value}>
+                      {option.label}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              <div className="space-y-2">
+                <label className="text-xs text-neutral-500 font-medium">Date from</label>
+                <input
+                  type="date"
+                  value={dateFrom}
+                  onChange={(e) => setDateFrom(e.target.value)}
+                  className="w-full bg-neutral-900 border border-neutral-700 rounded-lg px-3 py-2 text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-emerald-500/50 focus:border-emerald-500 transition-all"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <label className="text-xs text-neutral-500 font-medium">Date to</label>
+                <input
+                  type="date"
+                  value={dateTo}
+                  onChange={(e) => setDateTo(e.target.value)}
+                  className="w-full bg-neutral-900 border border-neutral-700 rounded-lg px-3 py-2 text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-emerald-500/50 focus:border-emerald-500 transition-all"
+                />
+              </div>
+
+              <div className="sm:col-span-3 space-y-2">
+                <label className="text-xs text-neutral-500 font-medium">Tags (comma-separated)</label>
+                <input
+                  type="text"
+                  placeholder="e.g., production, critical, api"
+                  value={tagsFilter}
+                  onChange={(e) => setTagsFilter(e.target.value)}
+                  className="w-full bg-neutral-900 border border-neutral-700 rounded-lg px-3 py-2 text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/50 focus:border-emerald-500 transition-all"
+                />
+              </div>
+            </div>
+          )}
         </div>
       </div>
 
@@ -150,7 +479,7 @@ export function TraceList({
       </div>
 
       {/* Empty Filtered State */}
-      {filteredTraces.length === 0 && initialTraces.length > 0 && (
+      {filteredTraces.length === 0 && traces.length > 0 && (
         <div className="text-center py-12">
           <p className="text-neutral-400">
             No traces match your search criteria
@@ -159,24 +488,22 @@ export function TraceList({
       )}
 
       {/* Pagination */}
-      {initialTotalPages > 1 && (
+      {totalPages > 1 && (
         <div className="flex items-center justify-between pt-6 border-t border-neutral-800">
           <p className="text-sm text-neutral-500">
-            Page {currentPage} of {initialTotalPages}
+            Page {currentPage} of {totalPages}
           </p>
           <div className="flex gap-2">
             <button
               disabled={currentPage <= 1}
-              onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+              onClick={() => handlePageChange(Math.max(1, currentPage - 1))}
               className="p-2 rounded-lg border border-neutral-800 text-neutral-400 hover:text-neutral-100 hover:border-neutral-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
             >
               <ChevronLeft className="w-5 h-5" />
             </button>
             <button
-              disabled={currentPage >= initialTotalPages}
-              onClick={() =>
-                setCurrentPage((p) => Math.min(initialTotalPages, p + 1))
-              }
+              disabled={currentPage >= totalPages}
+              onClick={() => handlePageChange(Math.min(totalPages, currentPage + 1))}
               className="p-2 rounded-lg border border-neutral-800 text-neutral-400 hover:text-neutral-100 hover:border-neutral-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
             >
               <ChevronRight className="w-5 h-5" />