diff --git a/frontend/src/pages/SessionHistoryPage.tsx b/frontend/src/pages/SessionHistoryPage.tsx index 201449c3..e8d93aad 100644 --- a/frontend/src/pages/SessionHistoryPage.tsx +++ b/frontend/src/pages/SessionHistoryPage.tsx @@ -21,8 +21,6 @@ export function SessionHistoryPage() { const navigate = useNavigate() const [searchParams, setSearchParams] = useSearchParams() - // Top-level tab: flow sessions vs AI sessions - const [sessionType, setSessionType] = useState<'flow' | 'ai'>('flow') const [aiSessions, setAiSessions] = useState([]) const [aiLoading, setAiLoading] = useState(false) const [aiSearchInput, setAiSearchInput] = useState('') @@ -166,9 +164,8 @@ export function SessionHistoryPage() { setSearchParams(params, { replace: true }) }, [filters, setSearchParams]) - // Load AI sessions when tab is active or filters change + // Load AI sessions always useEffect(() => { - if (sessionType !== 'ai') return let cancelled = false const loadAiSessions = async () => { setAiLoading(true) @@ -190,7 +187,7 @@ export function SessionHistoryPage() { } loadAiSessions() return () => { cancelled = true } - }, [sessionType, aiFilters]) + }, [aiFilters]) const handleFilterChange = (newFilters: SessionFilterState) => { setFilters(newFilters) @@ -267,66 +264,55 @@ export function SessionHistoryPage() { return labels[outcome] ?? outcome } + const hasAiFiltersActive = !!(aiSearchInput || aiFilters.q || aiFilters.problem_domain || aiFilters.confidence_tier || aiFilters.date_from || aiFilters.date_to) + const hasFlowFiltersActive = !!(filters.ticketNumber || filters.clientName || filters.treeName || filters.dateRange?.from) + + // Determine section visibility + const showAiSection = aiLoading || aiSessions.length > 0 || hasAiFiltersActive + const showFlowSection = isLoading || sessions.length > 0 || hasFlowFiltersActive + const showCombinedEmpty = !showAiSection && !showFlowSection + return (
- +
-

Session History

+

Sessions

- Search and filter your troubleshooting sessions + View and manage all your sessions

- {/* Session type toggle */} -
- - -
- - {/* Filter Tabs (flow sessions only) */} - {sessionType === 'flow' && ( -
- {(['active', 'prepared', 'completed', 'all'] as const).map((tab) => ( - - ))} -
+ {showCombinedEmpty && ( + } + title="No sessions yet" + description="Start a flow or FlowPilot session to begin. All your sessions will appear here." + action={ +
+ + Start a Flow + + + Start AI Session + +
+ } + learnMoreLink="/guides/sessions" + /> )} - {/* AI Sessions view */} - {sessionType === 'ai' && ( + {/* FlowPilot Sessions Section */} + {showAiSection && ( <> +

FlowPilot Sessions

+ {/* AI Session Filter Bar */}
@@ -400,7 +386,7 @@ export function SessionHistoryPage() {
{/* Clear filters */} - {(aiSearchInput || aiFilters.q || aiFilters.problem_domain || aiFilters.confidence_tier || aiFilters.date_from || aiFilters.date_to) && ( + {hasAiFiltersActive && (
) : aiSessions.length === 0 ? ( - (aiSearchInput || aiFilters.q || aiFilters.problem_domain || aiFilters.confidence_tier || aiFilters.date_from || aiFilters.date_to) ? ( - { - setAiSearchInput('') - setAiFilters({ q: '', problem_domain: '', confidence_tier: '', date_from: '', date_to: '' }) - }} - className="text-foreground hover:underline text-sm" - > - Clear all filters - - } - /> - ) : ( - - Start AI Session - - } - /> - ) + { + setAiSearchInput('') + setAiFilters({ q: '', problem_domain: '', confidence_tier: '', date_from: '', date_to: '' }) + }} + className="text-foreground hover:underline text-sm" + > + Clear all filters + + } + /> ) : (
{aiSessions.map((s) => ( @@ -456,12 +427,37 @@ export function SessionHistoryPage() { ))}
)} + + {/* Divider between sections */} + {showFlowSection && ( +
+ )} )} - {/* Flow Sessions Content */} - {sessionType === 'flow' && ( + {/* Flow Sessions Section */} + {showFlowSection && ( <> +

Flow Sessions

+ + {/* Filter Tabs */} +
+ {(['active', 'prepared', 'completed', 'all'] as const).map((tab) => ( + + ))} +
+