refactor: remove Recent Sessions from dashboard, hide Active when empty

Active Sessions section now auto-hides when there are no active sessions
(same pattern as PendingEscalations). Recent Sessions removed from
dashboard entirely — users access history via the History page.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/components/dashboard/ActiveFlowPilotSessions.tsx

@@ -27,22 +27,7 @@ export function ActiveFlowPilotSessions({ hideHeader = false }: { hideHeader?: b
       .finally(() => setLoading(false))
   }, [])
 
-  if (loading) {
+  if (loading || sessions.length === 0) return null
-    return (
-      <div className="card-flat">
-        {!hideHeader && (
-          <div className="px-5 py-3" style={{ borderBottom: '1px solid var(--color-border-default)' }}>
-            <h3 className="font-heading text-sm font-bold text-foreground">Active Sessions</h3>
-          </div>
-        )}
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 p-4">
-          {Array.from({ length: 3 }).map((_, i) => (
-            <div key={i} className="h-24 rounded-xl bg-card border border-border animate-pulse" />
-          ))}
-        </div>
-      </div>
-    )
-  }
 
   return (
     <div className="card-flat">
@@ -68,13 +53,7 @@ export function ActiveFlowPilotSessions({ hideHeader = false }: { hideHeader?: b
         </div>
       )}
 
-      {sessions.length === 0 ? (
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 p-4">
-        <div className="px-5 py-8 text-center">
-          <p className="text-sm text-muted-foreground">No active sessions</p>
-          <p className="mt-1 text-[0.6875rem] text-text-muted">Start typing above to begin troubleshooting</p>
-        </div>
-      ) : (
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 p-4">
           {sessions.map((session) => (
             <button
               key={session.id}
@@ -115,7 +94,6 @@ export function ActiveFlowPilotSessions({ hideHeader = false }: { hideHeader?: b
             </button>
           ))}
         </div>
-      )}
     </div>
   )
 }

frontend/src/pages/QuickStartPage.tsx

@@ -6,7 +6,6 @@ import { ActiveFlowPilotSessions } from '@/components/dashboard/ActiveFlowPilotS
 import { PerformanceCards } from '@/components/dashboard/PerformanceCards'
 import { KnowledgeBaseCards } from '@/components/dashboard/KnowledgeBaseCards'
 import { TeamSummary } from '@/components/dashboard/TeamSummary'
-import { RecentFlowPilotSessions } from '@/components/dashboard/RecentFlowPilotSessions'
 import { GreetingStatStrip } from '@/components/dashboard/GreetingStatStrip'
 
 function SectionLabel({ children, action }: { children: React.ReactNode; action?: React.ReactNode }) {
@@ -60,20 +59,9 @@ export function QuickStartPage() {
           <PendingEscalations />
         </div>
 
-        {/* Active Sessions */}
+        {/* Active Sessions (auto-hides if none) */}
         <div className="mt-8">
-          <SectionLabel>Active Sessions</SectionLabel>
+          <ActiveFlowPilotSessions />
-          <div className="mt-3">
-            <ActiveFlowPilotSessions hideHeader />
-          </div>
-        </div>
-
-        {/* Recent Sessions */}
-        <div className="mt-8">
-          <SectionLabel>Recent Sessions</SectionLabel>
-          <div className="mt-3">
-            <RecentFlowPilotSessions hideHeader />
-          </div>
         </div>
 
         {/* Dashboard — always visible */}