fix(analytics): fix 8 frontend UX issues — routing, accessibility, error states, sort indicators

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

frontend/src/components/analytics/CoverageHeatmap.tsx

@@ -18,6 +18,18 @@ function getCellStyle(value: number, thresholds: { green: number; amber: number
   return 'bg-rose-500/10 text-rose-500'
 }
 
+function getCellTitle(value: number, label: string, thresholds: { green: number; amber: number }, inverse?: boolean): string {
+  const pct = (value * 100).toFixed(1)
+  if (inverse) {
+    if (value <= thresholds.green) return `${label}: ${pct}% (Good — below ${(thresholds.green * 100).toFixed(0)}%)`
+    if (value <= thresholds.amber) return `${label}: ${pct}% (Needs Improvement — below ${(thresholds.amber * 100).toFixed(0)}%)`
+    return `${label}: ${pct}% (Critical — above ${(thresholds.amber * 100).toFixed(0)}%)`
+  }
+  if (value >= thresholds.green) return `${label}: ${pct}% (Good — above ${(thresholds.green * 100).toFixed(0)}%)`
+  if (value >= thresholds.amber) return `${label}: ${pct}% (Needs Improvement — above ${(thresholds.amber * 100).toFixed(0)}%)`
+  return `${label}: ${pct}% (Critical — below ${(thresholds.amber * 100).toFixed(0)}%)`
+}
+
 function getFlowCountStyle(count: number) {
   if (count >= 5) return 'bg-emerald-400/10 text-emerald-400'
   if (count >= 1) return 'bg-amber-400/10 text-amber-400'
@@ -91,7 +103,10 @@ export default function CoverageHeatmap({ data }: CoverageHeatmapProps) {
                       Create Flow
                     </Link>
                   ) : (
-                    <span className={cn('inline-block rounded px-1.5 py-0.5 text-xs font-medium', getFlowCountStyle(row.flow_count))}>
+                    <span
+                      className={cn('inline-block rounded px-1.5 py-0.5 text-xs font-medium', getFlowCountStyle(row.flow_count))}
+                      title={`${row.flow_count} flow${row.flow_count !== 1 ? 's' : ''} — ${row.flow_count >= 5 ? 'Good' : row.flow_count >= 1 ? 'Needs Improvement' : 'Critical'}`}
+                    >
                       {row.flow_count}
                     </span>
                   )}
@@ -100,17 +115,26 @@ export default function CoverageHeatmap({ data }: CoverageHeatmapProps) {
                   {row.session_count}
                 </td>
                 <td className="px-3 py-2 text-sm text-right">
-                  <span className={cn('inline-block rounded px-1.5 py-0.5 text-xs font-medium', getCellStyle(row.resolution_rate, { green: 0.75, amber: 0.5 }))}>
+                  <span
+                    className={cn('inline-block rounded px-1.5 py-0.5 text-xs font-medium', getCellStyle(row.resolution_rate, { green: 0.75, amber: 0.5 }))}
+                    title={getCellTitle(row.resolution_rate, 'Resolution', { green: 0.75, amber: 0.5 })}
+                  >
                     {(row.resolution_rate * 100).toFixed(1)}%
                   </span>
                 </td>
                 <td className="px-3 py-2 text-sm text-right">
-                  <span className={cn('inline-block rounded px-1.5 py-0.5 text-xs font-medium', getCellStyle(row.escalation_rate, { green: 0.10, amber: 0.25 }, true))}>
+                  <span
+                    className={cn('inline-block rounded px-1.5 py-0.5 text-xs font-medium', getCellStyle(row.escalation_rate, { green: 0.10, amber: 0.25 }, true))}
+                    title={getCellTitle(row.escalation_rate, 'Escalation', { green: 0.10, amber: 0.25 }, true)}
+                  >
                     {(row.escalation_rate * 100).toFixed(1)}%
                   </span>
                 </td>
                 <td className="px-3 py-2 text-sm text-right">
-                  <span className={cn('inline-block rounded px-1.5 py-0.5 text-xs font-medium', getCellStyle(row.guided_rate, { green: 0.60, amber: 0.30 }))}>
+                  <span
+                    className={cn('inline-block rounded px-1.5 py-0.5 text-xs font-medium', getCellStyle(row.guided_rate, { green: 0.60, amber: 0.30 }))}
+                    title={getCellTitle(row.guided_rate, 'Guided', { green: 0.60, amber: 0.30 })}
+                  >
                     {(row.guided_rate * 100).toFixed(1)}%
                   </span>
                 </td>
@@ -128,6 +152,12 @@ export default function CoverageHeatmap({ data }: CoverageHeatmapProps) {
           )}
         </table>
       </div>
+
+      <div className="flex flex-wrap gap-4 mt-3 text-[0.625rem] font-label text-muted-foreground">
+        <span><span className="inline-block w-2 h-2 rounded-full bg-emerald-400 mr-1" />Good</span>
+        <span><span className="inline-block w-2 h-2 rounded-full bg-amber-400 mr-1" />Needs Improvement</span>
+        <span><span className="inline-block w-2 h-2 rounded-full bg-rose-500 mr-1" />Critical</span>
+      </div>
     </div>
   )
 }

frontend/src/components/analytics/FlowQualityTable.tsx

@@ -1,7 +1,8 @@
 import { useState, useMemo } from 'react'
 import { Link } from 'react-router-dom'
-import { ArrowUpDown } from 'lucide-react'
+import { ArrowUpDown, ArrowUp, ArrowDown, Info } from 'lucide-react'
 import { cn } from '@/lib/utils'
+import { getTreeEditorPath } from '@/lib/routing'
 import type { FlowQualityResponse, FlowQualityRow } from '@/types/flowpilot-analytics'
 
 interface FlowQualityTableProps {
@@ -113,21 +114,29 @@ export default function FlowQualityTable({ data }: FlowQualityTableProps) {
     )
   }
 
-  const columns: { key: SortColumn; label: string }[] = [
+  const columns: { key: SortColumn; label: string; title?: string }[] = [
     { key: 'name', label: 'Flow Name' },
     { key: 'usage_count', label: 'Usage' },
     { key: 'success_rate', label: 'Success Rate' },
     { key: 'last_matched_at', label: 'Last Used' },
     { key: 'avg_confidence', label: 'Avg Confidence' },
-    { key: 'quality_score', label: 'Quality Score' },
+    { key: 'quality_score', label: 'Quality Score', title: 'Combines success rate (50%), AI confidence (30%), and recent usage (20%)' },
   ]
 
   return (
     <div className="glass-card-static p-3 sm:p-5">
       <div className="mb-4">
-        <h3 className="font-heading text-sm font-semibold text-foreground">
-          Flow Quality Scores
-        </h3>
+        <div className="flex items-center gap-2">
+          <h3 className="font-heading text-sm font-semibold text-foreground">
+            Flow Quality Scores
+          </h3>
+          <span className="group relative">
+            <Info size={14} className="text-muted-foreground cursor-help" />
+            <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 p-2 rounded-lg bg-card border border-border text-xs text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10">
+              Quality score combines success rate (50%), AI confidence level (30%), and recent usage (20%). Higher is better.
+            </div>
+          </span>
+        </div>
         <p className="text-xs text-muted-foreground mt-1">
           Performance and usage metrics for your troubleshooting flows
         </p>
@@ -137,24 +146,31 @@ export default function FlowQualityTable({ data }: FlowQualityTableProps) {
         <table className="w-full text-sm">
           <thead>
             <tr className="border-b border-border">
-              {columns.map((col) => (
-                <th
-                  key={col.key}
-                  className="text-left py-2 px-2 font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground cursor-pointer select-none hover:text-foreground transition-colors"
-                  onClick={() => handleSort(col.key)}
-                >
-                  <span className="flex items-center gap-1">
-                    {col.label}
-                    <ArrowUpDown
-                      size={10}
-                      className={cn(
-                        'transition-opacity',
-                        sortCol === col.key ? 'opacity-100' : 'opacity-30',
-                      )}
-                    />
-                  </span>
-                </th>
-              ))}
+              {columns.map((col) => {
+                const isActive = sortCol === col.key
+                const SortIcon = isActive
+                  ? sortDir === 'asc' ? ArrowUp : ArrowDown
+                  : ArrowUpDown
+                return (
+                  <th
+                    key={col.key}
+                    className="text-left py-2 px-2 font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground cursor-pointer select-none hover:text-foreground transition-colors"
+                    onClick={() => handleSort(col.key)}
+                    title={col.title}
+                  >
+                    <span className="flex items-center gap-1">
+                      {col.label}
+                      <SortIcon
+                        size={10}
+                        className={cn(
+                          'transition-opacity',
+                          isActive ? 'opacity-100' : 'opacity-30',
+                        )}
+                      />
+                    </span>
+                  </th>
+                )
+              })}
             </tr>
           </thead>
           <tbody>
@@ -194,7 +210,7 @@ function FlowRow({
       <td className="py-2.5 px-2">
         <div className="flex items-center gap-2">
           <Link
-            to={`/trees/${flow.flow_id}/edit`}
+            to={getTreeEditorPath(flow.flow_id, flow.tree_type)}
             className="text-foreground hover:text-primary transition-colors font-medium truncate max-w-[200px]"
           >
             {flow.name}

frontend/src/components/analytics/PsaMetricsPanel.tsx

@@ -34,19 +34,19 @@ export default function PsaMetricsPanel({ data }: PsaMetricsPanelProps) {
       {/* Row 1 — Metric cards */}
       <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
         <div className="glass-card-static p-4">
-          <p className="text-gradient-brand font-heading text-2xl">{data.total_time_entries}</p>
+          <p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-[#5a6170]">Time Entries</p>
+          <p className="text-gradient-brand font-heading text-2xl mt-1">{data.total_time_entries}</p>
           <p className="text-xs text-muted-foreground mt-1">logged to PSA</p>
-          <p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-[#5a6170] mt-0.5">Time Entries</p>
         </div>
         <div className="glass-card-static p-4">
-          <p className="text-gradient-brand font-heading text-2xl">{data.total_hours_logged.toFixed(1)}</p>
+          <p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-[#5a6170]">Hours Logged</p>
+          <p className="text-gradient-brand font-heading text-2xl mt-1">{data.total_hours_logged.toFixed(1)}</p>
           <p className="text-xs text-muted-foreground mt-1">total hours tracked</p>
-          <p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-[#5a6170] mt-0.5">Hours Logged</p>
         </div>
         <div className="glass-card-static p-4">
-          <p className="text-gradient-brand font-heading text-2xl">{data.avg_hours_per_session.toFixed(2)}</p>
+          <p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-[#5a6170]">Avg Hours/Session</p>
+          <p className="text-gradient-brand font-heading text-2xl mt-1">{data.avg_hours_per_session.toFixed(2)}</p>
           <p className="text-xs text-muted-foreground mt-1">per resolved session</p>
-          <p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-[#5a6170] mt-0.5">Avg Hours/Session</p>
         </div>
       </div>