Add branches section to app

frontend/src/MuiApp.tsx

@@ -18,6 +18,7 @@ import {
   ContributorsSection,
   IssuesSection,
   CommitsSection,
+  BranchesSection,
 } from './components';
 
 function App() {
@@ -179,6 +180,12 @@ function App() {
               repo={repo}
             />
 
+            <BranchesSection
+              branches={data.branches || []}
+              owner={owner}
+              repo={repo}
+            />
+
             {/* Footer */}
             <Box
               sx={{

frontend/src/components/BranchesSection.tsx

@@ -0,0 +1,227 @@
+import React, { useState, useMemo } from 'react';
+import {
+  Card,
+  CardContent,
+  Typography,
+  Box,
+  Table,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableBody,
+  TableSortLabel,
+  Link,
+  Chip,
+  Avatar,
+  AvatarGroup,
+} from '@mui/material';
+import { Branch } from '../types';
+import { formatDateTime } from '../utils/dateUtils';
+
+interface BranchesSectionProps {
+  branches: Branch[];
+  owner: string;
+  repo: string;
+}
+
+export const BranchesSection: React.FC<BranchesSectionProps> = ({
+  branches,
+  owner,
+  repo,
+}) => {
+  const [sortBy, setSortBy] = useState<keyof Branch>('last_commit_date');
+  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
+
+  // Sort branches based on current sort criteria
+  const sortedBranches = useMemo(() => {
+    return [...branches].sort((a, b) => {
+      let aValue: any = a[sortBy];
+      let bValue: any = b[sortBy];
+
+      // Handle special sorting cases
+      if (sortBy === 'last_commit_date') {
+        aValue = new Date(aValue).getTime();
+        bValue = new Date(bValue).getTime();
+      } else if (sortBy === 'ahead_by' || sortBy === 'behind_by') {
+        aValue = aValue ?? 0;
+        bValue = bValue ?? 0;
+      } else if (sortBy === 'contributors') {
+        aValue = a.contributors.length;
+        bValue = b.contributors.length;
+      }
+
+      if (aValue < bValue) {
+        return sortDirection === 'asc' ? -1 : 1;
+      }
+      if (aValue > bValue) {
+        return sortDirection === 'asc' ? 1 : -1;
+      }
+      return 0;
+    });
+  }, [branches, sortBy, sortDirection]);
+
+  const handleSort = (column: keyof Branch) => {
+    if (sortBy === column) {
+      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
+    } else {
+      setSortBy(column);
+      setSortDirection('asc');
+    }
+  };
+
+  return (
+    <Card sx={{ mb: 4 }}>
+      <CardContent>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            mb: 2,
+          }}
+        >
+          <div>
+            <Typography variant="h5" component="h2" gutterBottom>
+              Branches
+            </Typography>
+            <Typography variant="body2" color="text.secondary">
+              {branches.length} active branches in this repository
+            </Typography>
+          </div>
+        </Box>
+
+        {branches && branches.length > 0 ? (
+          <Table size="small">
+            <TableHead>
+              <TableRow>
+                <TableCell sx={{ fontWeight: 700 }}>
+                  <TableSortLabel
+                    active={sortBy === 'name'}
+                    direction={sortBy === 'name' ? sortDirection : 'asc'}
+                    onClick={() => handleSort('name')}
+                  >
+                    Branch Name
+                  </TableSortLabel>
+                </TableCell>
+                <TableCell sx={{ fontWeight: 700 }}>
+                  <TableSortLabel
+                    active={sortBy === 'contributors'}
+                    direction={sortBy === 'contributors' ? sortDirection : 'asc'}
+                    onClick={() => handleSort('contributors')}
+                  >
+                    Contributors
+                  </TableSortLabel>
+                </TableCell>
+                <TableCell sx={{ fontWeight: 700 }}>
+                  <TableSortLabel
+                    active={sortBy === 'last_commit_date'}
+                    direction={
+                      sortBy === 'last_commit_date' ? sortDirection : 'asc'
+                    }
+                    onClick={() => handleSort('last_commit_date')}
+                  >
+                    Last Updated
+                  </TableSortLabel>
+                </TableCell>
+                <TableCell sx={{ fontWeight: 700 }}>Last Commit</TableCell>
+                <TableCell sx={{ fontWeight: 700 }}>
+                  <TableSortLabel
+                    active={sortBy === 'ahead_by'}
+                    direction={sortBy === 'ahead_by' ? sortDirection : 'asc'}
+                    onClick={() => handleSort('ahead_by')}
+                  >
+                    Ahead
+                  </TableSortLabel>
+                </TableCell>
+                <TableCell sx={{ fontWeight: 700 }}>
+                  <TableSortLabel
+                    active={sortBy === 'behind_by'}
+                    direction={sortBy === 'behind_by' ? sortDirection : 'asc'}
+                    onClick={() => handleSort('behind_by')}
+                  >
+                    Behind
+                  </TableSortLabel>
+                </TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {sortedBranches.map((branch) => (
+                <TableRow key={branch.name}>
+                  <TableCell>
+                    <Link
+                      href={branch.url}
+                      target="_blank"
+                      rel="noreferrer"
+                      sx={{ fontFamily: 'monospace', fontWeight: 600 }}
+                    >
+                      {branch.name}
+                    </Link>
+                  </TableCell>
+                  <TableCell>
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                      <AvatarGroup max={5} sx={{ '& .MuiAvatar-root': { width: 24, height: 24, fontSize: '0.75rem' } }}>
+                        {branch.contributors.map((contributor) => (
+                          <Avatar
+                            key={contributor}
+                            alt={contributor}
+                            src={`https://avatars.githubusercontent.com/${contributor}`}
+                            sx={{ width: 24, height: 24 }}
+                          >
+                            {contributor[0].toUpperCase()}
+                          </Avatar>
+                        ))}
+                      </AvatarGroup>
+                      {branch.contributors.length > 5 && (
+                        <Typography variant="caption" color="text.secondary">
+                          +{branch.contributors.length - 5}
+                        </Typography>
+                      )}
+                    </Box>
+                  </TableCell>
+                  <TableCell>{formatDateTime(branch.last_commit_date)}</TableCell>
+                  <TableCell>
+                    <Link
+                      href={`https://github.com/${owner}/${repo}/commit/${branch.last_commit_sha}`}
+                      target="_blank"
+                      rel="noreferrer"
+                      sx={{ fontFamily: 'monospace' }}
+                    >
+                      {branch.last_commit_sha.slice(0, 7)}
+                    </Link>
+                  </TableCell>
+                  <TableCell>
+                    {branch.ahead_by !== undefined ? (
+                      <Chip
+                        label={branch.ahead_by}
+                        size="small"
+                        color={branch.ahead_by > 0 ? 'success' : 'default'}
+                        sx={{ fontWeight: 600 }}
+                      />
+                    ) : (
+                      '—'
+                    )}
+                  </TableCell>
+                  <TableCell>
+                    {branch.behind_by !== undefined ? (
+                      <Chip
+                        label={branch.behind_by}
+                        size="small"
+                        color={branch.behind_by > 0 ? 'warning' : 'default'}
+                        sx={{ fontWeight: 600 }}
+                      />
+                    ) : (
+                      '—'
+                    )}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        ) : (
+          <Typography variant="body2" color="text.secondary">
+            No branches found
+          </Typography>
+        )}
+      </CardContent>
+    </Card>
+  );
+};

frontend/src/components/index.ts

@@ -4,3 +4,4 @@ export { PullRequestsSection } from './PullRequestsSection';
 export { ContributorsSection } from './ContributorsSection';
 export { IssuesSection } from './IssuesSection';
 export { CommitsSection } from './CommitsSection';
+export { BranchesSection } from './BranchesSection';

frontend/src/data/mockData.ts

@@ -17,26 +17,31 @@ export const mockAnalysisData: AnalysisReport = {
     {
       login: 'alice',
       commits: 14,
+      commits_all_branches: 18,
       prs: 3,
     },
     {
       login: 'bob',
       commits: 8,
+      commits_all_branches: 12,
       prs: 4,
     },
     {
       login: 'carol',
       commits: 12,
+      commits_all_branches: 15,
       prs: 2,
     },
     {
       login: 'dave',
       commits: 6,
+      commits_all_branches: 9,
       prs: 1,
     },
     {
       login: 'eve',
       commits: 10,
+      commits_all_branches: 13,
       prs: 2,
     },
   ],
@@ -182,4 +187,49 @@ export const mockAnalysisData: AnalysisReport = {
       deletions: 112,
     },
   ],
+  branches: [
+    {
+      name: 'main',
+      last_commit_sha: 'a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t',
+      last_commit_date: '2025-09-26T18:20:00Z',
+      contributors: ['alice', 'bob', 'carol', 'dave', 'eve'],
+      url: 'https://github.com/cmu-sei/example-project/tree/main',
+    },
+    {
+      name: 'feature/user-authentication',
+      last_commit_sha: 'f1e2d3c4b5a6978655443322110fedcba9876543',
+      last_commit_date: '2025-09-25T10:15:00Z',
+      contributors: ['alice', 'bob'],
+      ahead_by: 5,
+      behind_by: 2,
+      url: 'https://github.com/cmu-sei/example-project/tree/feature/user-authentication',
+    },
+    {
+      name: 'feature/dashboard-redesign',
+      last_commit_sha: 'd4c3b2a1098765432100ffeeddccbbaa99887766',
+      last_commit_date: '2025-09-24T14:30:00Z',
+      contributors: ['carol'],
+      ahead_by: 12,
+      behind_by: 8,
+      url: 'https://github.com/cmu-sei/example-project/tree/feature/dashboard-redesign',
+    },
+    {
+      name: 'fix/database-connection',
+      last_commit_sha: '9988776655443322110ffeeddccbbaa11223344',
+      last_commit_date: '2025-09-26T09:45:00Z',
+      contributors: ['eve', 'dave'],
+      ahead_by: 3,
+      behind_by: 1,
+      url: 'https://github.com/cmu-sei/example-project/tree/fix/database-connection',
+    },
+    {
+      name: 'develop',
+      last_commit_sha: 'aabbccddee00112233445566778899ffeeddccbb',
+      last_commit_date: '2025-09-26T16:00:00Z',
+      contributors: ['alice', 'bob', 'carol', 'dave'],
+      ahead_by: 8,
+      behind_by: 0,
+      url: 'https://github.com/cmu-sei/example-project/tree/develop',
+    },
+  ],
 };

shared/types/index.ts

@@ -23,6 +23,7 @@ export interface AnalysisReport {
   pull_requests: PullRequest[];
   commits?: Commit[];
   issues: Issue[];
+  branches?: Branch[];
 }
 
 export interface Contributor {
@@ -76,3 +77,13 @@ export interface Commit {
   additions?: number;
   deletions?: number;
 }
+
+export interface Branch {
+  name: string;
+  last_commit_sha: string;
+  last_commit_date: string;
+  contributors: string[];
+  ahead_by?: number;
+  behind_by?: number;
+  url: string;
+}

src/services/commit-culture.ts

@@ -26,12 +26,13 @@ export class CommitCultureService {
     from: Date,
     to: Date
   ): Promise<AnalysisReport> {
-    const [pullRequests, commits, issues, allBranchesCommitCounts] =
+    const [pullRequests, commits, issues, allBranchesCommitCounts, branches] =
       await Promise.all([
         this.github.getPullRequestsSince(owner, repo, from, to),
         this.github.fetchCommitsForDefaultBranch(owner, repo, from, to),
         this.github.getIssuesSince(owner, repo, from, to),
         this.github.getCommitCountsAcrossBranches(owner, repo, from, to),
+        this.github.fetchBranches(owner, repo, from, to),
       ]);
 
     // Aggregate contributor data
@@ -61,6 +62,7 @@ export class CommitCultureService {
       pull_requests: pullRequests,
       commits: commits,
       issues,
+      branches,
     };
   }