feat: show logs chain on table (frontend)

Author: impoiler

ui/app/workspace/logs/page.tsx

@@ -20,7 +20,7 @@ import {
 	useGetUserAgentMappingsQuery,
 } from "@/lib/store";
 import { useLazyGetLogByIdQuery, useLazyGetLogsQuery } from "@/lib/store/apis/logsApi";
-import type { LogEntry, LogFilters, Pagination } from "@/lib/types/logs";
+import type { DisplayLogEntry, LogEntry, LogFilters, Pagination } from "@/lib/types/logs";
 import { dateUtils } from "@/lib/types/logs";
 import { COMPACT_NUMBER_FORMAT } from "@/lib/utils/numbers";
 import { RbacOperation, RbacResource, useRbac } from "@enterprise/lib";
@@ -31,6 +31,10 @@ import { parseAsSafeArrayOf, parseAsSafeString } from "@/lib/queryParamsParser";
 import { parseAsBoolean, parseAsInteger, parseAsString, useQueryStates } from "nuqs";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
+// A fallback chain is a handful of attempts, so one page covers every realistic
+// chain. Capped at the list endpoint's own maximum.
+const chainChildrenPageLimit = 1000;
+
 export default function LogsPage() {
 	const [error, setError] = useState<string | null>(null);
 	const [showEmptyState, setShowEmptyState] = useState(false);
@@ -103,6 +107,7 @@ export default function LogsPage() {
 			cache_hit_types: parseAsSafeArrayOf.withDefault([]),
 			metadata_filters: parseAsString.withDefault(""),
 			selected_log: parseAsString.withDefault(""),
+			grouped: parseAsBoolean.withDefault(false),
 		},
 		{
 			history: "push",
@@ -114,6 +119,9 @@ export default function LogsPage() {
 	const selectedLogId = urlState.selected_log || null;
 	const activeLogFetchId = useRef<string | null>(null);
 	const polling = urlState.polling;
+	// Grouped view collapses fallback chains under their root. Disabled while a
+	// session filter is active — that view is already scoped to one chain/session.
+	const grouped = urlState.grouped && !urlState.parent_request_id;
 
 	// Convert URL state to filters and pagination for API calls
 	const filters: LogFilters = useMemo(
@@ -302,6 +310,7 @@ export default function LogsPage() {
 		{
 			filters,
 			pagination,
+			rootsOnly: grouped,
 		},
 		{
 			pollingInterval: showEmptyState || polling ? 10000 : 0,
@@ -361,6 +370,66 @@ export default function LogsPage() {
 		[filters, setFilters],
 	);
 
+	// --- Grouped view: chain expansion state -------------------------------
+	// Children of an expanded root, keyed by root log id. Loaded lazily through
+	// the list endpoint with the active filters plus parent_request_id, not the
+	// sessions endpoint — the sessions endpoint ignores filters, which would show
+	// rows the filter bar says are excluded. Filtering here keeps the expansion
+	// consistent with child_count, which the server computes under the same
+	// filters: every row is either a root or a child, and always matches.
+	const [expandedChainIds, setExpandedChainIds] = useState<Set<string>>(new Set());
+	const [chainChildren, setChainChildren] = useState<Record<string, LogEntry[]>>({});
+	const [loadingChainIds, setLoadingChainIds] = useState<Set<string>>(new Set());
+	const [triggerGetChainChildren] = useLazyGetLogsQuery();
+
+	// Collapse everything when the page of roots changes — expanded ids from the
+	// previous page are meaningless and cached children may be stale.
+	useEffect(() => {
+		setExpandedChainIds(new Set());
+		setChainChildren({});
+		setLoadingChainIds(new Set());
+	}, [filters, pagination, grouped]);
+
+	const handleToggleChain = useCallback(
+		(log: LogEntry) => {
+			const isExpanded = expandedChainIds.has(log.id);
+			setExpandedChainIds((prev) => {
+				const next = new Set(prev);
+				if (next.has(log.id)) {
+					next.delete(log.id);
+				} else {
+					next.add(log.id);
+				}
+				return next;
+			});
+			if (isExpanded || chainChildren[log.id] || loadingChainIds.has(log.id)) return;
+
+			setLoadingChainIds((prev) => new Set(prev).add(log.id));
+			triggerGetChainChildren({
+				filters: { ...filters, parent_request_id: log.id },
+				pagination: { ...pagination, limit: chainChildrenPageLimit, offset: 0, sort_by: "timestamp", order: "asc" },
+			}).then((result) => {
+				setLoadingChainIds((prev) => {
+					const next = new Set(prev);
+					next.delete(log.id);
+					return next;
+				});
+				if (result.data) {
+					const children = result.data.logs;
+					setChainChildren((prevCache) => ({ ...prevCache, [log.id]: children }));
+				} else if (result.error) {
+					setExpandedChainIds((prev) => {
+						const next = new Set(prev);
+						next.delete(log.id);
+						return next;
+					});
+					setError(getErrorMessage(result.error));
+				}
+			});
+		},
+		[expandedChainIds, chainChildren, loadingChainIds, triggerGetChainChildren, filters, pagination],
+	);
+
 	const handleDelete = useCallback(
 		async (log: LogEntry) => {
 			try {
@@ -500,8 +569,8 @@ export default function LogsPage() {
 	}, [userAgentMappingsData?.mappings]);
 
 	const columns = useMemo(
-		() => createColumns(handleDelete, hasDeleteAccess, metadataKeys, customAppIcons),
-		[customAppIcons, handleDelete, hasDeleteAccess, metadataKeys],
+		() => createColumns(handleDelete, hasDeleteAccess, metadataKeys, customAppIcons, grouped),
+		[customAppIcons, handleDelete, hasDeleteAccess, metadataKeys, grouped],
 	);
 
 	const columnIds = useMemo(
@@ -546,12 +615,36 @@ export default function LogsPage() {
 		paramName: "cols",
 		storageKey: "bifrost.logs.cols",
 		defaultHidden: DEFAULT_HIDDEN_COLUMNS,
-		fixedColumns: hasDeleteAccess ? { right: ["actions"] } : undefined,
+		fixedColumns: {
+			...(grouped ? { left: ["expand"] } : {}),
+			...(hasDeleteAccess ? { right: ["actions"] } : {}),
+		},
 	});
 
 	// Navigation for log detail sheet
 	const logs = logsData?.logs ?? [];
 	const totalItems = logsData?.stats?.total_requests ?? 0;
+
+	// Grouped view: splice loaded children in below their expanded root. Children
+	// are marked so the table can indent them; they don't affect pagination.
+	const displayLogs: DisplayLogEntry[] = useMemo(() => {
+		if (!grouped || expandedChainIds.size === 0) return logs;
+		const out: DisplayLogEntry[] = [];
+		for (const log of logs) {
+			out.push(log);
+			if (expandedChainIds.has(log.id)) {
+				for (const child of chainChildren[log.id] ?? []) {
+					out.push({ ...child, __chainChild: true });
+				}
+			}
+		}
+		return out;
+	}, [logs, grouped, expandedChainIds, chainChildren]);
+
+	const tableMeta = useMemo(
+		() => ({ expandedChainIds, loadingChainIds, onToggleChain: handleToggleChain }),
+		[expandedChainIds, loadingChainIds, handleToggleChain],
+	);
 	const selectedLogFromData = useMemo(
 		() => (selectedLogId ? (logs.find((l) => l.id === selectedLogId) ?? null) : null),
 		[selectedLogId, logs],
@@ -595,6 +688,7 @@ export default function LogsPage() {
 					triggerGetLogs({
 						filters,
 						pagination: { ...pagination, offset: newOffset },
+						rootsOnly: grouped,
 					}).then((result) => {
 						if (result.data?.logs?.length) {
 							const lastLog = result.data.logs[result.data.logs.length - 1];
@@ -620,6 +714,7 @@ export default function LogsPage() {
 					triggerGetLogs({
 						filters,
 						pagination: { ...pagination, offset: newOffset },
+						rootsOnly: grouped,
 					}).then((result) => {
 						if (result.data?.logs?.length) {
 							const firstLog = result.data.logs[0];
@@ -635,7 +730,7 @@ export default function LogsPage() {
 				}
 			}
 		},
-		[selectedLogId, selectedLogIndex, logs, pagination, totalItems, filters, setUrlState, triggerGetLogs],
+		[selectedLogId, selectedLogIndex, logs, pagination, totalItems, filters, grouped, setUrlState, triggerGetLogs],
 	);
 
 	return (
@@ -665,6 +760,8 @@ export default function LogsPage() {
 								loading={logsIsFetching}
 								polling={polling}
 								onPollToggle={handlePollToggle}
+								grouped={grouped}
+								onGroupedToggle={(enabled) => setUrlState({ grouped: enabled, offset: 0 })}
 								period={period}
 								onPeriodChange={handlePeriodChange}
 								totalLogs={totalItems}
@@ -736,7 +833,8 @@ export default function LogsPage() {
 						<div className="min-h-0 flex-1">
 							<LogsDataTable
 								columns={columns}
-								data={logs}
+								data={displayLogs}
+								tableMeta={tableMeta}
 								loading={logsIsFetching}
 								totalItems={totalItems}
 								pagination={pagination}

ui/app/workspace/logs/views/columns.tsx

@@ -14,14 +14,22 @@ import {
 	Status,
 	StatusBarColors,
 } from "@/lib/constants/logs";
-import { ChatMessageContent, LogEntry, ResponsesMessageContentBlock } from "@/lib/types/logs";
+import { ChatMessageContent, DisplayLogEntry, LogEntry, ResponsesMessageContentBlock } from "@/lib/types/logs";
 import { cn } from "@/lib/utils";
 import { formatCompactNumber } from "@/lib/utils/numbers";
 import { ColumnDef } from "@tanstack/react-table";
 import { format, formatDistanceToNow } from "date-fns";
-import { ArrowUpDown, MoreHorizontal, Trash2 } from "lucide-react";
+import { ArrowUpDown, ChevronRight, CornerDownRight, Loader2, MoreHorizontal, Trash2 } from "lucide-react";
 import { useState } from "react";
 
+// Passed to useReactTable({ meta }) by the logs page so the expander column can
+// read/toggle chain expansion without threading props through column factories.
+export interface LogsTableMeta {
+	expandedChainIds: Set<string>;
+	loadingChainIds: Set<string>;
+	onToggleChain: (log: LogEntry) => void;
+}
+
 function LogActionsMenu({ log, onDelete }: { log: LogEntry; onDelete: (log: LogEntry) => void }) {
 	const [isOpen, setIsOpen] = useState(false);
 
@@ -261,7 +269,51 @@ export const createColumns = (
 	hasDeleteAccess = true,
 	metadataKeys: string[] = [],
 	customAppIcons: Record<string, string> = {},
+	groupedView = false,
 ): ColumnDef<LogEntry>[] => {
+	// Chevron that expands a fallback chain in the grouped view. Child rows get a
+	// corner connector instead so the hierarchy stays readable in any column order.
+	const expandColumn: ColumnDef<LogEntry>[] = groupedView
+		? [
+			{
+				id: "expand",
+				header: "",
+				size: 52,
+				cell: ({ row, table }) => {
+					const meta = table.options.meta as LogsTableMeta | undefined;
+					const log = row.original as DisplayLogEntry;
+					if (log.__chainChild) {
+						return <CornerDownRight className="text-muted-foreground/70 mx-auto size-3.5" />;
+					}
+					const childCount = log.child_count ?? 0;
+					if (!childCount || !meta) return null;
+					const isExpanded = meta.expandedChainIds.has(log.id);
+					const isLoading = meta.loadingChainIds.has(log.id);
+					return (
+						<button
+							type="button"
+							data-testid="log-chain-expand-btn"
+							aria-label={isExpanded ? "Collapse fallback chain" : `Expand fallback chain (${childCount} attempts)`}
+							aria-expanded={isExpanded}
+							className="text-muted-foreground hover:text-foreground gap-1 rounded-sm transition-colors absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center justify-center cursor-pointer"
+							onClick={(event) => {
+								event.stopPropagation();
+								meta.onToggleChain(log);
+							}}
+						>
+							{isLoading ? (
+								<Loader2 className="size-3.5 animate-spin" />
+							) : (
+								<ChevronRight className={cn("size-3.5 transition-transform", isExpanded && "rotate-90")} />
+							)}
+							<span className="font-mono text-[10.5px] tabular-nums">{childCount}</span>
+						</button>
+					);
+				},
+			},
+		]
+		: [];
+
 	const baseColumns: ColumnDef<LogEntry>[] = [
 		{
 			accessorKey: "status",
@@ -530,5 +582,5 @@ export const createColumns = (
 		]
 		: [];
 
-	return [...baseColumns, ...attributionColumns, ...metadataColumns, ...actionsColumn];
+	return [...expandColumn, ...baseColumns, ...attributionColumns, ...metadataColumns, ...actionsColumn];
 };

ui/app/workspace/logs/views/logsHeaderView.tsx

@@ -4,14 +4,15 @@ import { Command, CommandItem, CommandList } from "@/components/ui/command";
 import { DateTimePickerWithRange } from "@/components/ui/datePickerWithRange";
 import { Input } from "@/components/ui/input";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { useTimezonePreference } from "@/lib/hooks/useTimezonePreference";
 import { getErrorMessage } from "@/lib/store";
 import { useGetRecalculateCostStatusQuery } from "@/lib/store/apis/logsApi";
 import { getActiveTempToken } from "@/lib/store/apis/tempToken";
 import type { LogFilters as LogFiltersType, RecalcJobStatus } from "@/lib/types/logs";
 import { getApiBaseUrl } from "@/lib/utils/port";
 import { getRangeForPeriod, TIME_PERIODS } from "@/lib/utils/timeRange";
-import { Calculator, MoreVertical, Radio, RefreshCw, Search } from "lucide-react";
+import { Calculator, ListTree, MoreVertical, Radio, RefreshCw, Search } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import { RecalculateCostDialog, type RecalculateCostMode } from "./recalculateCostDialog";
@@ -25,6 +26,9 @@ interface LogsHeaderViewProps {
 	loading?: boolean;
 	polling: boolean;
 	onPollToggle: (enabled: boolean) => void;
+	/** Grouped view: collapse fallback chains into their root request */
+	grouped: boolean;
+	onGroupedToggle: (enabled: boolean) => void;
 	period: string;
 	onPeriodChange: (period?: string, from?: Date, to?: Date) => void;
 	/** Total logs matching the current filters/time window (stats.total_requests) */
@@ -45,6 +49,8 @@ export function LogsHeaderView({
 	loading = false,
 	polling,
 	onPollToggle,
+	grouped,
+	onGroupedToggle,
 	period,
 	onPeriodChange,
 	totalLogs,
@@ -216,6 +222,25 @@ export function LogsHeaderView({
 				{polling ? <Radio className="h-4 w-4 animate-pulse" /> : <Radio className="h-4 w-4" />}
 				Live
 			</Button>
+			<Tooltip>
+				<TooltipTrigger asChild>
+					<Button
+						data-testid="logs-group-chains-btn"
+						variant={grouped ? "default" : "outline"}
+						size="sm"
+						className="h-7.5"
+						onClick={() => onGroupedToggle(!grouped)}
+					>
+						<ListTree className="h-4 w-4" />
+						Group
+					</Button>
+				</TooltipTrigger>
+				<TooltipContent sideOffset={6} className="max-w-64">
+					Groups fallback attempts and linked requests under the original root request. Expand any row to view the complete request chain.
+					<br /><br />
+					This grouped view may load more slowly than the flat view for very large log tables.
+				</TooltipContent>
+			</Tooltip>
 			<div className="border-input flex h-7.5 flex-1 items-center gap-2 rounded-sm border">
 				<Search className="mr-0.5 ml-2 size-4" />
 				<Input