feat: add beta tracker views (list, board, reports) with sentinel API integration

jmbish04 · claude · jmbish04 · commit 3064929e4437 · 2026-03-31T12:27:25.000-07:00
Adds Linear/ClickUp-inspired project tracker under projects/tracker-beta
with three nested views (list, board, reports), a master layout shell with
AI assistant sidebar, and sidebar nav links. All views fetch from the
sentinel backend APIs with graceful fallback to mock data.

Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/src/frontend/src/components/layout/RepoFolder.tsx b/src/frontend/src/components/layout/RepoFolder.tsx
@@ -20,7 +20,9 @@ import {
   Wrench,
   ChevronDown,
   Component,
-  Layers
+  Layers,
+  LayoutList,
+  KanbanSquare
 } from 'lucide-react';
 import { useQuery } from '@tanstack/react-query';
 import { Badge } from '@/components/ui/badge';
@@ -66,6 +68,9 @@ export function RepoFolder({ repo }: RepoFolderProps) {
     { slug: "plan", label: "AI Planner", icon: Sparkles },
     { slug: "projects", label: "Backlog", icon: ListChecks },
     { slug: "projects/tracker", label: "Projects [Beta]", icon: Layers },
+    { slug: "projects/tracker-beta/list", label: "Tracker List [Beta]", icon: LayoutList },
+    { slug: "projects/tracker-beta/board", label: "Tracker Board [Beta]", icon: KanbanSquare },
+    { slug: "projects/tracker-beta/reports", label: "Tracker Reports [Beta]", icon: BarChart3 },
     { slug: "prs", label: "PRs", icon: GitPullRequest, badge: activePrCount > 0 ? activePrCount : null },
   ];
 
diff --git a/src/frontend/src/routes/RepoRoutes.tsx b/src/frontend/src/routes/RepoRoutes.tsx
@@ -39,6 +39,12 @@ import RepoProjects from "@/views/repos/Projects";
 import RepoProjectsBeta from "@/views/repos/ProjectsBeta";
 import RepoKanban from "@/views/repos/KanbanBoard";
 
+// Beta Tracker views (Linear/ClickUp-inspired)
+import TrackerLayoutBeta from "@/views/repos/TrackerLayoutBeta";
+import TrackerListViewBeta from "@/views/repos/TrackerListViewBeta";
+import TrackerBoardViewBeta from "@/views/repos/TrackerBoardViewBeta";
+import TrackerReportsViewBeta from "@/views/repos/TrackerReportsViewBeta";
+
 // Global views reused in repo context (scoped by RepoLayout context provider)
 // Retained for routes that haven't yet been given dedicated repo-scoped variants.
 import ProjectView from "@/views/repos/Overview";
@@ -93,6 +99,14 @@ export function RepoRoutes() {
       {/* /repos/:owner/:repo/projects — repo project board (dedicated) */}
       <Route path="projects" element={<RepoProjects />} />
       <Route path="projects/tracker" element={<RepoProjectsBeta />} />
+
+      {/* Beta Tracker — layout route with nested list/board/reports views */}
+      <Route path="projects/tracker-beta" element={<TrackerLayoutBeta />}>
+        <Route index element={<Navigate to="list" replace />} />
+        <Route path="list" element={<TrackerListViewBeta />} />
+        <Route path="board" element={<TrackerBoardViewBeta />} />
+        <Route path="reports" element={<TrackerReportsViewBeta />} />
+      </Route>
       <Route path="projects/:projectId" element={guard(<ProjectView />)} />
 
       {/* Work items within a project */}
diff --git a/src/frontend/src/views/repos/TrackerReportsViewBeta.tsx b/src/frontend/src/views/repos/TrackerReportsViewBeta.tsx
@@ -1,9 +1,9 @@
 /**
  * @file views/repos/TrackerReportsViewBeta.tsx
- * Analytics dashboard with AI insights, velocity chart,
+ * Stats & reports dashboard with AI insights, velocity chart,
  * and team workload visualization.
  *
- * Fetches system status from /api/projects/sentinel/status.
+ * Fetches from /api/projects/sentinel/status for live metrics.
  */
 
 import React, { useState, useEffect } from "react";
@@ -12,17 +12,16 @@ import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/com
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { TrendingUp, AlertTriangle, Users, Activity, CheckCircle2, Bot, Loader2 } from "lucide-react";
 
-interface SentinelStatus {
+interface StatusData {
   totalTasks: number;
-  availableTasks: number;
-  claimedTasks: number;
+  activeTasks: number;
   completedTasks: number;
-  recentEvents: any[];
+  blockedTasks: number;
 }
 
 export default function TrackerReportsViewBeta() {
   const { owner, repo } = useParams();
-  const [status, setStatus] = useState<SentinelStatus | null>(null);
+  const [status, setStatus] = useState<StatusData | null>(null);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
@@ -34,9 +33,16 @@ export default function TrackerReportsViewBeta() {
         });
         if (!res.ok) throw new Error("Failed to fetch");
         const data = await res.json();
-        if (!cancelled) setStatus(data);
+        if (!cancelled) {
+          setStatus({
+            totalTasks: data.totalTasks ?? data.taskCounts?.total ?? 0,
+            activeTasks: data.activeTasks ?? data.taskCounts?.active ?? 0,
+            completedTasks: data.completedTasks ?? data.taskCounts?.completed ?? 0,
+            blockedTasks: data.blockedTasks ?? data.taskCounts?.blocked ?? 0,
+          });
+        }
       } catch {
-        // Use fallback
+        // Use defaults
       } finally {
         if (!cancelled) setLoading(false);
       }
@@ -45,14 +51,47 @@ export default function TrackerReportsViewBeta() {
     return () => { cancelled = true; };
   }, [owner, repo]);
 
-  const totalTasks = status?.totalTasks ?? 42;
-  const completedTasks = status?.completedTasks ?? 28;
-  const completionPct = totalTasks > 0 ? Math.round((completedTasks / totalTasks) * 100) : 0;
-
   const workload = [
     { name: "Alex M.", tasks: 12, capacity: 15, color: "bg-indigo-500" },
     { name: "Sarah J.", tasks: 18, capacity: 15, color: "bg-rose-500" },
-    { name: "AI Agent", tasks: status?.claimedTasks ?? 45, capacity: 100, color: "bg-emerald-500" },
+    { name: "AI Agent", tasks: 45, capacity: 100, color: "bg-emerald-500" },
+  ];
+
+  const completionPct = status
+    ? status.totalTasks > 0
+      ? Math.round((status.completedTasks / status.totalTasks) * 100)
+      : 0
+    : 68;
+
+  const metrics = [
+    {
+      label: "Sprint Completion",
+      value: `${completionPct}%`,
+      icon: CheckCircle2,
+      color: "text-emerald-400",
+      sub: status ? `${status.completedTasks} of ${status.totalTasks} tasks` : "+12% from last sprint",
+    },
+    {
+      label: "Active Tasks",
+      value: status ? String(status.activeTasks) : "4",
+      icon: Activity,
+      color: "text-indigo-400",
+      sub: status ? "Currently in progress" : "2 at risk of delay",
+    },
+    {
+      label: "Cycle Time",
+      value: "2.4d",
+      icon: TrendingUp,
+      color: "text-amber-400",
+      sub: "-0.5d improvement",
+    },
+    {
+      label: "Bottlenecks",
+      value: status ? String(status.blockedTasks) : "3",
+      icon: AlertTriangle,
+      color: "text-rose-400",
+      sub: "Waiting on external APIs",
+    },
   ];
 
   if (loading) {
@@ -65,25 +104,19 @@ export default function TrackerReportsViewBeta() {
 
   return (
     <div className="h-full overflow-y-auto pr-2 space-y-6">
-
       {/* AI Callout Alert */}
       <Alert className="bg-indigo-500/10 border-indigo-500/20 text-indigo-200 shadow-xl shadow-indigo-500/5">
         <Bot className="h-4 w-4 text-indigo-400" />
         <AlertTitle className="font-semibold text-indigo-300">AI Project Insights</AlertTitle>
         <AlertDescription className="text-indigo-200/80 text-xs mt-1 leading-relaxed">
-          Velocity has increased by 14% this sprint. However, <strong>Sarah J.</strong> is over capacity.
-          Consider dispatching a Code Review agent to unblock her tasks currently in review.
+          Velocity has increased by 14% this sprint. However, <strong>Sarah J.</strong> is over
+          capacity. Consider dispatching a Code Review agent to unblock her tasks currently in review.
         </AlertDescription>
       </Alert>
 
       {/* Top Metrics Strip */}
       <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-        {[
-          { label: "Sprint Completion", value: `${completionPct}%`, icon: CheckCircle2, color: "text-emerald-400", sub: `${completedTasks}/${totalTasks} tasks done` },
-          { label: "Active Epics", value: "4", icon: Activity, color: "text-indigo-400", sub: "2 at risk of delay" },
-          { label: "Cycle Time", value: "2.4d", icon: TrendingUp, color: "text-amber-400", sub: "-0.5d improvement" },
-          { label: "Bottlenecks", value: String(status?.availableTasks ?? 3), icon: AlertTriangle, color: "text-rose-400", sub: "Unclaimed tasks" },
-        ].map((stat, i) => (
+        {metrics.map((stat, i) => (
           <Card key={i} className="bg-zinc-900/50 border-zinc-800/50 shadow-sm">
             <CardContent className="p-5">
               <div className="flex justify-between items-start mb-2">
@@ -104,7 +137,9 @@ export default function TrackerReportsViewBeta() {
             <div className="flex items-center justify-between">
               <div>
                 <CardTitle className="text-base text-zinc-100">Velocity &amp; Burndown</CardTitle>
-                <CardDescription className="text-xs text-zinc-500">Tasks closed over the last 14 days</CardDescription>
+                <CardDescription className="text-xs text-zinc-500">
+                  Tasks closed over the last 14 days
+                </CardDescription>
               </div>
               <TrendingUp className="w-4 h-4 text-zinc-500" />
             </div>
@@ -113,7 +148,15 @@ export default function TrackerReportsViewBeta() {
             <div className="h-[200px] w-full flex items-end justify-between gap-2 px-2 pt-4 border-b border-zinc-800/50 relative">
               {/* Ideal line overlay */}
               <svg className="absolute inset-0 h-full w-full" preserveAspectRatio="none">
-                <line x1="0" y1="20" x2="100%" y2="180" stroke="rgba(99,102,241,0.3)" strokeWidth="2" strokeDasharray="4 4" />
+                <line
+                  x1="0"
+                  y1="20"
+                  x2="100%"
+                  y2="180"
+                  stroke="rgba(99,102,241,0.3)"
+                  strokeWidth="2"
+                  strokeDasharray="4 4"
+                />
               </svg>
               {/* CSS Bar Chart */}
               {[40, 60, 30, 80, 90, 45, 65, 100, 75, 50].map((h, i) => (
@@ -159,10 +202,9 @@ export default function TrackerReportsViewBeta() {
                       {member.tasks} / {member.capacity} tasks
                     </span>
                   </div>
-                  {/* Custom progress bar to support dynamic colors */}
-                  <div className="h-1.5 w-full bg-zinc-800 rounded-full overflow-hidden">
+                  <div className="relative h-1.5 w-full overflow-hidden rounded-full bg-zinc-800">
                     <div
-                      className={cn("h-full rounded-full transition-all", isOver ? "bg-rose-500" : member.color)}
+                      className={`h-full rounded-full transition-all ${isOver ? "bg-rose-500" : member.color}`}
                       style={{ width: `${Math.min(pct, 100)}%` }}
                     />
                   </div>
