feat(dashboard): FlowPilot cockpit dashboard + sidebar redesign

- Replace QuickStartPage with FlowPilot-centric dashboard - Add StartSessionInput with Guided/Chat mode toggle - Add PendingEscalations, ActiveFlowPilotSessions, PerformanceCards - Add KnowledgeBaseCards, TeamSummary, RecentFlowPilotSessions - Every number/card is a portal to its detail page - Restructure sidebar: Resolve/Knowledge/Insights sections - Remove redundant nav items (FlowPilot, Flow Editor, Flow Assist, etc.) - Wire prefill from dashboard input to FlowPilot intake - Update mobile nav to match new sidebar structure Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-20 14:22:50 +00:00
parent 6122dda71d
commit 3d911d2dc9
13 changed files with 1704 additions and 633 deletions
--- a/frontend/src/components/dashboard/ActiveFlowPilotSessions.tsx
+++ b/frontend/src/components/dashboard/ActiveFlowPilotSessions.tsx
@@ -0,0 +1,111 @@
+import { useState, useEffect } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import { Sparkles, Clock, ArrowRight } from 'lucide-react'
+import { aiSessionsApi } from '@/api/aiSessions'
+import type { AISessionSummary } from '@/types/ai-session'
+import { cn } from '@/lib/utils'
+
+function timeAgo(dateStr: string): string {
+  const diffMs = Date.now() - new Date(dateStr).getTime()
+  const minutes = Math.floor(diffMs / 60000)
+  if (minutes < 1) return 'just now'
+  if (minutes < 60) return `${minutes}m ago`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}h ago`
+  return `${Math.floor(hours / 24)}d ago`
+}
+
+export function ActiveFlowPilotSessions() {
+  const [sessions, setSessions] = useState<AISessionSummary[]>([])
+  const [loading, setLoading] = useState(true)
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    aiSessionsApi.listSessions({ status: 'active', limit: 6 })
+      .then(setSessions)
+      .catch(() => {})
+      .finally(() => setLoading(false))
+  }, [])
+
+  if (loading) {
+    return (
+      <div className="glass-card-static">
+        <div className="px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
+          <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="glass-card-static">
+      <div
+        className="flex items-center justify-between px-5 py-3"
+        style={{ borderBottom: '1px solid var(--glass-border)' }}
+      >
+        <div className="flex items-center gap-2">
+          <h3 className="font-heading text-sm font-bold text-foreground">Active Sessions</h3>
+          {sessions.length > 0 && (
+            <span className="inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary/10 px-1.5 text-[0.625rem] font-bold text-primary">
+              {sessions.length}
+            </span>
+          )}
+        </div>
+        <Link
+          to="/sessions?filter=active"
+          className="flex items-center gap-1 text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors"
+        >
+          View all <ArrowRight size={10} />
+        </Link>
+      </div>
+
+      {sessions.length === 0 ? (
+        <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-[#5a6170]">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}
+              onClick={() => navigate(`/pilot/${session.id}`)}
+              className="glass-card p-4 text-left"
+            >
+              <div className="flex items-start justify-between gap-2 mb-2">
+                <Sparkles size={14} className="shrink-0 text-primary mt-0.5" />
+                <span
+                  className={cn(
+                    'font-label text-[0.5625rem] uppercase px-1.5 py-0.5 rounded',
+                    session.confidence_tier === 'guided' && 'bg-emerald-400/10 text-emerald-400',
+                    session.confidence_tier === 'exploring' && 'bg-amber-400/10 text-amber-400',
+                    session.confidence_tier === 'discovery' && 'bg-blue-400/10 text-blue-400',
+                    !session.confidence_tier && 'bg-card text-muted-foreground',
+                  )}
+                >
+                  {session.confidence_tier || 'starting'}
+                </span>
+              </div>
+              <p className="text-sm font-medium text-foreground truncate">
+                {session.problem_summary || 'Session in progress'}
+              </p>
+              <div className="mt-2 flex items-center gap-2 text-[0.625rem] text-muted-foreground">
+                <span className="flex items-center gap-1">
+                  <Clock size={10} />
+                  {timeAgo(session.created_at)}
+                </span>
+                <span>&middot;</span>
+                <span>{session.step_count} steps</span>
+              </div>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}