Improve dashboard with more relevant metrics

Author: amrit110

.pre-commit-config.yaml

@@ -39,6 +39,16 @@ repos:
       - id: typos
         args: []
 
+  - repo: local
+    hooks:
+      - id: nextjs-lint
+        name: Next.js Lint
+        entry: bash -c 'cd dashboard && npm run lint'
+        language: system
+        files: '^dashboard/'
+        types_or: [javascript, jsx, ts, tsx]
+        pass_filenames: false
+
 ci:
     autofix_commit_msg: |
         [pre-commit.ci] Add auto fixes from pre-commit.com hooks
@@ -48,4 +58,5 @@ ci:
     autoupdate_branch: ''
     autoupdate_commit_msg: '[pre-commit.ci] pre-commit autoupdate'
     autoupdate_schedule: weekly
+    skip: [nextjs-lint]
     submodules: false

dashboard/app/globals.css

@@ -101,4 +101,44 @@ body {
   .animate-slide-up {
     animation: slide-up 0.6s ease-out;
   }
+
+  /* Enhanced Select Dropdown Styling */
+  select {
+    font-weight: 500;
+  }
+
+  select:focus {
+    box-shadow: 0 0 0 3px rgba(138, 37, 201, 0.1);
+  }
+
+  select option {
+    padding: 12px 16px;
+    background-color: white;
+    color: #1e293b;
+    font-weight: 500;
+    transition: all 0.15s ease;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    select option {
+      background-color: #1e293b;
+      color: #f1f5f9;
+    }
+
+    select option:checked {
+      background: linear-gradient(90deg, rgba(235, 8, 138, 0.2) 0%, rgba(138, 37, 201, 0.2) 100%);
+      color: #EB088A;
+      font-weight: 600;
+    }
+  }
+
+  select option:checked {
+    background: linear-gradient(90deg, rgba(235, 8, 138, 0.1) 0%, rgba(138, 37, 201, 0.1) 100%);
+    color: #EB088A;
+    font-weight: 600;
+  }
+
+  select option:hover {
+    background: linear-gradient(90deg, rgba(138, 37, 201, 0.08) 0%, rgba(49, 60, 255, 0.08) 100%);
+  }
 }

dashboard/app/page.tsx

@@ -2,11 +2,10 @@ import { redirect } from 'next/navigation'
 import { isAuthenticated, getCurrentUser } from '@/lib/session'
 import { fetchTraceIndex, traceIndexToPRSummaries, enrichPRSummaries, computeMetricsFromPRSummaries } from '@/lib/data-fetcher'
 import OverviewTable from '@/components/overview-table'
-import MetricsCharts from '@/components/metrics-charts'
+import PRVelocityChart from '@/components/pr-velocity-chart'
 import PerformanceMetrics from '@/components/performance-metrics'
 import type { PRSummary, BotMetrics } from '@/lib/types'
 import { Activity } from 'lucide-react'
-import Link from 'next/link'
 
 export const dynamic = 'force-dynamic'
 export const revalidate = 0
@@ -90,12 +89,12 @@ export default async function DashboardPage() {
               No Data Available
             </h2>
             <p className="text-slate-600 dark:text-slate-400 mb-4">
-              The bot hasn't processed any PRs yet. Data will appear here once the bot starts monitoring and fixing PRs.
+              The bot hasn&apos;t processed any PRs yet. Data will appear here once the bot starts monitoring and fixing PRs.
             </p>
             <div className="text-sm text-slate-500 dark:text-slate-500">
               <p>Trigger the bot workflow to fix a PR:</p>
               <code className="block mt-2 p-2 bg-slate-100 dark:bg-slate-800 rounded text-xs">
-                gh workflow run fix-remote-pr.yml --field target_repo="VectorInstitute/repo-name" --field pr_number="123"
+                gh workflow run fix-remote-pr.yml --field target_repo=&quot;VectorInstitute/repo-name&quot; --field pr_number=&quot;123&quot;
               </code>
             </div>
           </div>
@@ -142,88 +141,11 @@ export default async function DashboardPage() {
 
       <div className="max-w-7xl mx-auto px-4 md:px-8 pb-8">
         <div className="space-y-8">
-
-      {/* Key Metrics Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm font-medium text-gray-500 dark:text-gray-400">
-                Total PRs Scanned
-              </p>
-              <p className="text-3xl font-bold text-gray-900 dark:text-white mt-2">
-                {metrics.stats.total_prs_scanned}
-              </p>
-            </div>
-            <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center">
-              <svg className="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-              </svg>
-            </div>
-          </div>
-        </div>
-
-        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm font-medium text-gray-500 dark:text-gray-400">
-                Auto-Merged
-              </p>
-              <p className="text-3xl font-bold text-green-600 dark:text-green-400 mt-2">
-                {metrics.stats.prs_auto_merged}
-              </p>
-            </div>
-            <div className="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center">
-              <svg className="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-              </svg>
-            </div>
-          </div>
-        </div>
-
-        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm font-medium text-gray-500 dark:text-gray-400">
-                Bot Fixed
-              </p>
-              <p className="text-3xl font-bold text-vector-magenta mt-2">
-                {metrics.stats.prs_bot_fixed}
-              </p>
-            </div>
-            <div className="w-12 h-12 bg-vector-magenta/10 rounded-lg flex items-center justify-center">
-              <svg className="w-6 h-6 text-vector-magenta" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-              </svg>
-            </div>
-          </div>
-        </div>
-
-        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm font-medium text-gray-500 dark:text-gray-400">
-                Success Rate
-              </p>
-              <p className="text-3xl font-bold text-vector-violet mt-2">
-                {(metrics.stats.success_rate * 100).toFixed(0)}%
-              </p>
-            </div>
-            <div className="w-12 h-12 bg-vector-violet/10 rounded-lg flex items-center justify-center">
-              <svg className="w-6 h-6 text-vector-violet" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
-              </svg>
-            </div>
-          </div>
-        </div>
-      </div>
-
       {/* Performance Metrics */}
       <PerformanceMetrics metrics={metrics} />
 
-      {/* Charts */}
-      <MetricsCharts metrics={metrics} />
+      {/* PR Velocity Chart */}
+      <PRVelocityChart prSummaries={prSummaries} />
 
       {/* Recent PRs Table */}
       <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">

dashboard/app/pr/[repo]/[number]/page.tsx

@@ -4,7 +4,6 @@ import { fetchPRTrace } from '@/lib/data-fetcher'
 import { notFound } from 'next/navigation'
 import AgentTimeline from '@/components/agent-timeline'
 import FailureAnalysis from '@/components/failure-analysis'
-import PerformanceMetrics from '@/components/performance-metrics'
 import { Clock, GitBranch, User, ExternalLink } from 'lucide-react'
 
 export const dynamic = 'force-dynamic'

dashboard/components/agent-timeline.tsx

@@ -11,7 +11,6 @@ import {
   Info,
   ChevronDown,
   ChevronRight,
-  Code,
   FileEdit,
   Search,
   Terminal,
@@ -36,7 +35,7 @@ export default function AgentTimeline({ events }: AgentTimelineProps) {
     setExpandedEvents(newExpanded)
   }
 
-  const getEventIcon = (type: string, tool?: string, parsedType?: string) => {
+  const getEventIcon = (type: string, tool?: string) => {
     // For TOOL_RESULT events, show check icon
     if (type === 'TOOL_RESULT') {
       return <CheckCircle className="w-5 h-5 text-green-600 dark:text-green-400" />
@@ -123,7 +122,7 @@ export default function AgentTimeline({ events }: AgentTimelineProps) {
               <div className="flex items-start space-x-3">
                 {/* Icon */}
                 <div className="flex-shrink-0 mt-0.5">
-                  {getEventIcon(event.type, event.tool || parsed.metadata?.tool, parsed.type)}
+                  {getEventIcon(event.type, event.tool || parsed.metadata?.tool)}
                 </div>
 
                 {/* Content */}

dashboard/components/code-diff-viewer.tsx

@@ -21,7 +21,7 @@ export default function CodeDiffViewer({
   const [isExpanded, setIsExpanded] = useState(false)
   const [showDiff, setShowDiff] = useState(!!oldCode)
   const [copied, setCopied] = useState(false)
-  const [isDark, setIsDark] = useState(true)
+  const isDark = true
 
   const handleCopy = async () => {
     try {

dashboard/components/failure-analysis.tsx

@@ -144,7 +144,7 @@ export default function FailureAnalysis({ failure }: FailureAnalysisProps) {
               </div>
               {!showFullLogs && hasMoreLogs && (
                 <p className="text-xs text-gray-500 dark:text-gray-400 mt-2">
-                  Showing first 50 lines. Click "Show All" to see complete logs.
+                  Showing first 50 lines. Click &quot;Show All&quot; to see complete logs.
                 </p>
               )}
             </div>