fix(analytics): 4 UX polish fixes — resolution time column, empty states, type badges, select styling

- CoverageHeatmap: add Avg Resolution column with inverse color thresholds (green <10 min, amber 10–20 min, red >20 min); updated colSpan to 7
- FlowPilotAnalyticsPage: show positive empty state when knowledge gaps list is empty instead of rendering nothing
- FlowQualityTable: add tree_type badge next to flow name (Troubleshooting/Project/Maintenance with distinct colors)
- FlowPilotAnalyticsPage: add [&>option] Tailwind classes to period select for improved dark-theme contrast in Chrome/Firefox

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

frontend/src/pages/FlowPilotAnalyticsPage.tsx

@@ -179,7 +179,7 @@ export default function FlowPilotAnalyticsPage() {
           <select
             value={period}
             onChange={(e) => setPeriod(e.target.value)}
-            className="rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+            className="rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:outline-hidden focus:ring-1 focus:ring-primary/20 [&>option]:bg-[#1a1c21] [&>option]:text-foreground"
           >
             {PERIOD_OPTIONS.map((opt) => (
               <option key={opt.value} value={opt.value}>{opt.label}</option>
@@ -390,7 +390,7 @@ export default function FlowPilotAnalyticsPage() {
           </div>
 
           {/* Fourth row — Knowledge Gaps */}
-          {gaps && gaps.gaps.length > 0 && (
+          {gaps && gaps.gaps.length > 0 ? (
             <div className="space-y-3">
               <div className="flex items-center gap-2 px-1">
                 <AlertTriangle size={14} className="text-amber-400" />
@@ -404,6 +404,14 @@ export default function FlowPilotAnalyticsPage() {
                 ))}
               </div>
             </div>
+          ) : gaps && (
+            <div className="glass-card-static p-4 flex items-center gap-3">
+              <CheckCircle2 size={20} className="text-emerald-400 shrink-0" />
+              <div>
+                <p className="text-sm text-foreground">No knowledge gaps detected</p>
+                <p className="text-xs text-muted-foreground">Your flow coverage looks healthy for this period.</p>
+              </div>
+            </div>
           )}
         </div>
       )}