improved sessions (#5481)

Author: chitalian

valhalla/jawn/src/managers/SessionManager.ts

@@ -33,6 +33,7 @@ export interface SessionResult {
   completion_tokens: number;
   total_tokens: number;
   avg_latency: number;
+  user_ids: string[];
 }
 
 export interface SessionsAggregateMetrics {
@@ -355,7 +356,7 @@ export class SessionManager {
 
     // Step 1 get all the properties given this filter
     const query = `
-    SELECT 
+    SELECT
       min(request_response_rmt.request_created_at) + INTERVAL ${timezoneDifference} MINUTE AS created_at,
       max(request_response_rmt.request_created_at) + INTERVAL ${timezoneDifference} MINUTE AS latest_request_created_at,
       properties['Helicone-Session-Id'] as session_id,
@@ -365,7 +366,8 @@ export class SessionManager {
       count(*) AS total_requests,
       sum(request_response_rmt.prompt_tokens) AS prompt_tokens,
       sum(request_response_rmt.completion_tokens) AS completion_tokens,
-      sum(request_response_rmt.prompt_tokens) + sum(request_response_rmt.completion_tokens) AS total_tokens
+      sum(request_response_rmt.prompt_tokens) + sum(request_response_rmt.completion_tokens) AS total_tokens,
+      groupUniqArray(request_response_rmt.user_id) AS user_ids
     FROM request_response_rmt
     WHERE (
         has(properties, 'Helicone-Session-Id')

web/components/templates/sessions/initialColumns.tsx

@@ -10,6 +10,7 @@ export const getColumns = () => {
     "total_tokens",
     "total_requests",
     "avg_latency",
+    "user_ids",
   ];
   return columns.map((property) => {
     return {
@@ -19,7 +20,13 @@ export const getColumns = () => {
         return value;
       },
       cell: ({ row }: any) => {
-        return row.original.metadata[property];
+        const value = row.original.metadata[property];
+        // Format arrays as comma-separated strings
+        if (Array.isArray(value)) {
+          const filtered = value.filter((v: string) => v && v.trim() !== "");
+          return filtered.length > 0 ? filtered.join(", ") : "-";
+        }
+        return value;
       },
     };
   });

web/components/templates/sessions/sessionId/Span.tsx

@@ -10,6 +10,7 @@ import {
   useCallback,
   useEffect,
   useMemo,
+  useRef,
   useState,
 } from "react";
 import { PiSplitHorizontalBold } from "react-icons/pi";
@@ -21,6 +22,7 @@ import {
   LabelList,
   Tooltip as RechartsTooltip,
   ReferenceArea,
+  ReferenceLine,
   ResponsiveContainer,
   XAxis,
   YAxis,
@@ -73,6 +75,12 @@ export const TraceSpan = ({
   const [dragStartX, setDragStartX] = useState<number | null>(null);
   const [initialDragMovement, setInitialDragMovement] = useState(false);
 
+  // Crosshair state for showing precise timestamp on hover
+  const [crosshairX, setCrosshairX] = useState<number | null>(null);
+  const [crosshairPixelX, setCrosshairPixelX] = useState<number | null>(null);
+  const [isHoveringChart, setIsHoveringChart] = useState(false);
+  const chartContainerRef = useRef<HTMLDivElement>(null);
+
   const spanData: BarChartTrace[] = useMemo(() => {
     if (!session || !session.traces) return [];
     const startTimeMs = session.start_time_unix_timestamp_ms;
@@ -237,9 +245,33 @@ export const TraceSpan = ({
     [lastChartDimensions],
   );
 
-  // Handle mouse move for dragging the highlighter
+  // Handle mouse move for dragging the highlighter and updating crosshair
   const handleMouseMove = useCallback(
     (e: any) => {
+      // Update crosshair using native mouse position for accurate pixel placement
+      const container = chartContainerRef.current;
+      if (container && e.chartX !== undefined) {
+        const chartWidth = e.width || lastChartDimensions?.width || 1000;
+        const leftMargin = 20;
+        const rightMargin = 30;
+        const plotAreaWidth = chartWidth - leftMargin - rightMargin;
+
+        // Store pixel position for CSS positioning
+        setCrosshairPixelX(e.chartX);
+
+        // Calculate domain value for the label
+        const adjustedX = e.chartX - leftMargin;
+        if (adjustedX >= 0 && adjustedX <= plotAreaWidth) {
+          const ratio = adjustedX / plotAreaWidth;
+          const xDomain = domain[0] + ratio * (domain[1] - domain[0]);
+          setCrosshairX(xDomain);
+          // Set hovering true when we have valid coordinates (more reliable than onMouseEnter)
+          setIsHoveringChart(true);
+        } else {
+          setCrosshairX(null);
+        }
+      }
+
       if (
         !isDragging ||
         !highlighterActive ||
@@ -250,15 +282,15 @@ export const TraceSpan = ({
       )
         return;
 
-      // Ensure we have a valid chartX value
-      const chartX = e.chartX;
-      if (typeof chartX !== "number") return;
+      // Get chartX for drag handling
+      const dragChartX = e.chartX;
+      if (typeof dragChartX !== "number") return;
 
       // Consistently track chart dimensions
-      const chartWidth = e.width || lastChartDimensions?.width || 1000;
       updateChartDimensions(e);
+      const dragChartWidth = e.width || lastChartDimensions?.width || 1000;
 
-      const deltaX = chartX - dragStartX;
+      const deltaX = dragChartX - dragStartX;
 
       // Skip tiny movements to reduce jitter
       if (Math.abs(deltaX) < 2) return;
@@ -270,11 +302,11 @@ export const TraceSpan = ({
 
       // Direct ratio calculation for movement - simpler and more accurate
       const domainWidth = domain[1] - domain[0];
-      const domainDeltaX = (deltaX / chartWidth) * domainWidth;
+      const domainDeltaX = (deltaX / dragChartWidth) * domainWidth;
 
       // Don't update highlighter during initial movement
       if (!initialDragMovement) {
-        setDragStartX(chartX);
+        setDragStartX(dragChartX);
         return;
       }
 
@@ -319,7 +351,7 @@ export const TraceSpan = ({
       setHighlighterEnd(newEnd);
 
       // Always update dragStartX to prevent accumulation of small movements
-      setDragStartX(chartX);
+      setDragStartX(dragChartX);
 
       // Prevent default behavior and stop propagation
       e.preventDefault?.();
@@ -336,9 +368,21 @@ export const TraceSpan = ({
       lastChartDimensions,
       initialDragMovement,
       updateChartDimensions,
+      pixelToDomain,
     ],
   );
 
+  // Handle mouse enter/leave for crosshair visibility
+  const handleMouseEnter = useCallback(() => {
+    setIsHoveringChart(true);
+  }, []);
+
+  const handleMouseLeave = useCallback(() => {
+    setIsHoveringChart(false);
+    setCrosshairX(null);
+    setCrosshairPixelX(null);
+  }, []);
+
   // Handle mouse down on the chart for dragging the highlighter
   const handleMouseDown = useCallback(
     (e: any) => {
@@ -500,11 +544,12 @@ export const TraceSpan = ({
       className="relative flex h-full select-none flex-col"
       id="sessions-trace-span"
     >
-      <ScrollArea>
-        <ResponsiveContainer
-          width="100%"
-          height={Math.max(300, spanData.length * BAR_SIZE)}
-        >
+      <div ref={chartContainerRef} className="relative">
+        <ScrollArea>
+          <ResponsiveContainer
+            width="100%"
+            height={Math.max(300, spanData.length * BAR_SIZE)}
+          >
           <BarChart
             data={spanData}
             layout="vertical"
@@ -514,7 +559,11 @@ export const TraceSpan = ({
             onMouseDown={handleMouseDown}
             onMouseMove={handleMouseMove}
             onMouseUp={handleMouseUp}
-            onMouseLeave={handleMouseUp}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={(e) => {
+              handleMouseUp();
+              handleMouseLeave();
+            }}
           >
             <CartesianGrid
               strokeDasharray="3 3"
@@ -784,9 +833,38 @@ export const TraceSpan = ({
                   />
                 </>
               )}
+
           </BarChart>
-        </ResponsiveContainer>
-      </ScrollArea>
+          </ResponsiveContainer>
+        </ScrollArea>
+
+        {/* CSS-positioned crosshair overlay */}
+        {isHoveringChart && crosshairPixelX !== null && crosshairX !== null && !isDragging && (
+          <div
+            className="pointer-events-none absolute top-0 z-10"
+            style={{
+              left: crosshairPixelX,
+              height: "100%",
+            }}
+          >
+            <div
+              className="h-full border-l border-dashed"
+              style={{
+                borderColor: theme === "dark" ? "#94a3b8" : "#64748b",
+              }}
+            />
+            <div
+              className="absolute -top-1 left-1/2 -translate-x-1/2 whitespace-nowrap rounded px-1.5 py-0.5 text-xs font-medium"
+              style={{
+                backgroundColor: theme === "dark" ? "#334155" : "#f1f5f9",
+                color: theme === "dark" ? "#e2e8f0" : "#334155",
+              }}
+            >
+              {crosshairX.toFixed(3)}s
+            </div>
+          </div>
+        )}
+      </div>
       <ResponsiveContainer width="100%" height={52}>
         <BarChart
           data={spanData}

web/components/templates/sessions/sessionsPage.tsx

@@ -1,6 +1,7 @@
 import FoldedHeader from "@/components/shared/FoldedHeader";
 import { FreeTierLimitBanner } from "@/components/shared/FreeTierLimitBanner";
 import { EmptyStateCard } from "@/components/shared/helicone/EmptyStateCard";
+import LivePill from "@/components/shared/LivePill";
 import { Button } from "@/components/ui/button";
 import {
   Command,
@@ -83,6 +84,7 @@ export type TSessions = {
     completion_tokens: number;
     total_tokens: number;
     avg_latency: number;
+    user_ids?: string[];
   };
 };
 
@@ -112,9 +114,13 @@ const SessionsPage = (props: SessionsPageProps) => {
   );
   const [page, setPage] = useState<number>(props.currentPage);
 
-  const [timeFilter, setTimeFilter] = useState<TimeFilter>({
-    start: getTimeIntervalAgo("1m"),
-    end: new Date(),
+  const [timeFilter, setTimeFilter] = useState<TimeFilter>(() => {
+    const now = new Date();
+    const threeDaysAgo = new Date(now.getTime() - 3 * 24 * 60 * 60 * 1000);
+    return {
+      start: threeDaysAgo,
+      end: now,
+    };
   });
 
   const [sessionIdSearch] = useURLParams<string | undefined>(
@@ -126,6 +132,7 @@ const SessionsPage = (props: SessionsPageProps) => {
   const [sessionNameSearch, setSessionNameSearch] = useState<
     string | undefined
   >(undefined);
+  const [isLive, setIsLive] = useLocalStorage("isLive-SessionsPage", false);
 
   const debouncedSessionNameSearch = useDebounce(sessionNameSearch, 500);
 
@@ -147,12 +154,13 @@ const SessionsPage = (props: SessionsPageProps) => {
     props.selectedName,
   );
 
-  const { sessions, isLoading, hasSessions } = useSessions({
+  const { sessions, isLoading, hasSessions, refetch, isRefetching } = useSessions({
     timeFilter,
     sessionIdSearch: debouncedSessionIdSearch ?? "",
     selectedName,
     page: page,
     pageSize: currentPageSize,
+    isLive,
   });
 
   const { aggregateMetrics, isLoading: isCountLoading } =
@@ -376,15 +384,24 @@ const SessionsPage = (props: SessionsPageProps) => {
                 timeFilterOptions={[]}
                 onSelect={onTimeSelectHandler}
                 isFetching={isSessionsLoading}
-                defaultValue={"1m"}
+                defaultValue={"7d"}
                 custom={true}
+                isLive={isLive}
               />
 
               <FilterASTButton />
             </section>
           }
           rightSection={
             <section className="flex flex-row items-center gap-2">
+              <LivePill
+                isLive={isLive}
+                setIsLive={setIsLive}
+                isDataLoading={isLoading}
+                isRefetching={isRefetching}
+                refetch={refetch}
+              />
+
               <div className="flex flex-row items-center gap-2 rounded-lg bg-sky-200">
                 {selectedIds.length > 0 && (
                   <Tooltip>

web/lib/freeTierLimits.ts

@@ -122,12 +122,9 @@ export const FREE_TIER_CONFIG: FreeTierConfig = {
     },
     sessions: {
       main: {
-        getLimit: () => 1,
-        description: (limit) =>
-          `You can have up to ${limit} named sessions with the free tier`,
+        getLimit: () => Infinity, // Unlimited sessions for free tier
+        description: () => `Unlimited sessions`,
         upgradeFeatureName: FEATURE_DISPLAY_NAMES.sessions,
-        upgradeMessage: (limit, used) =>
-          `You've used ${used}/${limit} named sessions. Upgrade for unlimited access.`,
       },
     },
     properties: {

web/services/hooks/sessions.tsx

@@ -13,12 +13,14 @@ const useSessions = ({
   selectedName,
   page = 1,
   pageSize = 50,
+  isLive = false,
 }: {
   timeFilter: TimeFilter;
   sessionIdSearch: string;
   selectedName?: string;
   page?: number;
   pageSize?: number;
+  isLive?: boolean;
 }) => {
   const org = useOrg();
   const filterStore = useFilterAST();
@@ -65,7 +67,7 @@ const useSessions = ({
     refetchOnWindowFocus: false,
     retry: 2,
     refetchIntervalInBackground: false,
-    refetchInterval: false,
+    refetchInterval: isLive ? 2000 : false,
   });
   const properties = useQuery({
     queryKey: ["/v1/property/query", org?.currentOrg?.id],