OPC # 0009: Gitea and OPC Build Webhooks

ControlPlane.Api/Endpoints/GitEndpoints.cs

@@ -19,13 +19,19 @@ public static class GitEndpoints
     // All responses include a repoKey field so the caller knows which repo each commit came from.
     // GET /api/git/log?grep=...&limit=25&page=1&repo=all
     // page is 1-based. Each repo contributes up to limit*page commits before merge-sort+skip/take.
+    // branch filters to commits reachable from the named local branch; requires a specific repo (not "all").
+    // Each result includes a branches[] array listing local branches that contain that commit.
     private static IResult GetLog(
         IConfiguration config,
-        string? grep  = null,
+        string? grep   = null,
-        int     limit = 25,
+        int     limit  = 25,
-        int     page  = 1,
+        int     page   = 1,
-        string  repo  = "all")
+        string  repo   = "all",
+        string? branch = null)
     {
+        if (!string.IsNullOrWhiteSpace(branch) && repo == "all")
+            return Results.BadRequest("'branch' filter requires a specific 'repo' parameter.");
+
         var repos = repo == "all"
             ? ResolveAllRepos(config)
             : ResolveNamedRepo(config, repo) is { } p
@@ -43,16 +49,30 @@ public static class GitEndpoints
 
             using var r = new Repository(repoPath);
 
-            var tips = r.Branches
+            CommitFilter filter;
-                .Where(b => b.Tip != null)
+            if (!string.IsNullOrWhiteSpace(branch))
-                .Select(b => (GitObject)b.Tip)
-                .ToList();
-
-            var filter = new CommitFilter
             {
-                SortBy               = CommitSortStrategies.Topological | CommitSortStrategies.Time,
+                var branchRef = r.Branches[branch];
-                IncludeReachableFrom = tips.Count > 0 ? tips : (object)r.Head,
+                if (branchRef?.Tip is null)
-            };
+                    return Results.BadRequest($"Branch '{branch}' not found in repo '{repoKey}'.");
+                filter = new CommitFilter
+                {
+                    SortBy               = CommitSortStrategies.Topological | CommitSortStrategies.Time,
+                    IncludeReachableFrom = branchRef.Tip,
+                };
+            }
+            else
+            {
+                var tips = r.Branches
+                    .Where(b => b.Tip != null)
+                    .Select(b => (GitObject)b.Tip)
+                    .ToList();
+                filter = new CommitFilter
+                {
+                    SortBy               = CommitSortStrategies.Topological | CommitSortStrategies.Time,
+                    IncludeReachableFrom = tips.Count > 0 ? tips : (object)r.Head,
+                };
+            }
 
             IEnumerable<Commit> query = r.Commits.QueryBy(filter);
 
@@ -63,22 +83,42 @@ public static class GitEndpoints
                 bucket.Add((c.Author.When, repoKey, ToGitCommit(r, c)));
         }
 
-        var commits = bucket
+        var pageEntries = bucket
             .OrderByDescending(x => x.When)
             .Skip((page - 1) * limit)
             .Take(limit)
-            .Select(x => new
-            {
-                repoKey   = x.RepoKey,
-                hash      = x.Commit.Hash,
-                shortHash = x.Commit.ShortHash,
-                author    = x.Commit.Author,
-                date      = x.Commit.Date,
-                subject   = x.Commit.Subject,
-                files     = x.Commit.Files,
-            })
             .ToList();
 
+        // Annotate each commit with the local branches whose tip is a descendant of that commit.
+        var branchMap = new Dictionary<string, List<string>>(StringComparer.Ordinal);
+        foreach (var grp in pageEntries.GroupBy(x => x.RepoKey))
+        {
+            if (!repos.TryGetValue(grp.Key, out var rPath) || !Directory.Exists(rPath)) continue;
+            using var annotRepo = new Repository(rPath);
+            var localBranches = annotRepo.Branches.Where(b => !b.IsRemote && b.Tip != null).ToList();
+            foreach (var (_, _, c) in grp)
+            {
+                var target = annotRepo.Lookup<Commit>(c.Hash);
+                if (target is null) { branchMap[c.Hash] = []; continue; }
+                branchMap[c.Hash] = localBranches
+                    .Where(b => annotRepo.ObjectDatabase.FindMergeBase(b.Tip, target)?.Sha == target.Sha)
+                    .Select(b => b.FriendlyName)
+                    .ToList();
+            }
+        }
+
+        var commits = pageEntries.Select(x => new
+        {
+            repoKey   = x.RepoKey,
+            hash      = x.Commit.Hash,
+            shortHash = x.Commit.ShortHash,
+            author    = x.Commit.Author,
+            date      = x.Commit.Date,
+            subject   = x.Commit.Subject,
+            files     = x.Commit.Files,
+            branches  = branchMap.TryGetValue(x.Commit.Hash, out var br) ? (IReadOnlyList<string>)br : Array.Empty<string>(),
+        }).ToList();
+
         return Results.Ok(commits);
     }
 
@@ -127,18 +167,55 @@ public static class GitEndpoints
         return Results.NotFound();
     }
 
-    // GET /api/git/branches
+    // GET /api/git/branches?repo=all
-    private static IResult GetBranches(IConfiguration config)
+    // repo defaults to "default" (single configured repo). Pass "all" to get branches from all
+    // registered repos. Each result includes repoKey so the caller can group branches by repo.
+    private static IResult GetBranches(IConfiguration config, string repo = "default")
     {
-        var repoPath = ResolveRepo(config);
+        if (repo == "all")
+        {
+            var allRepos = ResolveAllRepos(config);
+            if (allRepos.Count == 0)
+                return Results.Problem("Could not locate any git repositories.");
+
+            var allBranches = new List<object>();
+            foreach (var (repoKey, rPath) in allRepos)
+            {
+                if (!Directory.Exists(rPath)) continue;
+                using var gitRepo = new Repository(rPath);
+                allBranches.AddRange(gitRepo.Branches
+                    .Where(b => !b.IsRemote && b.Tip != null)
+                    .OrderBy(b => b.FriendlyName)
+                    .Select(b => (object)new
+                    {
+                        repoKey,
+                        name      = b.FriendlyName,
+                        hash      = b.Tip.Sha,
+                        shortHash = b.Tip.Sha[..7],
+                        subject   = b.Tip.MessageShort,
+                        author    = b.Tip.Author.Name,
+                        date      = b.Tip.Author.When.ToString("yyyy-MM-dd HH:mm:ss zzz"),
+                        isHead    = b.IsCurrentRepositoryHead,
+                    }));
+            }
+            return Results.Ok(allBranches);
+        }
+
+        var repoPath = repo == "default"
+            ? ResolveRepo(config)
+            : ResolveNamedRepo(config, repo) ?? ResolveRepo(config);
+
         if (repoPath is null)
             return Results.Problem("Could not locate a git repository.");
 
-        using var repo = new Repository(repoPath);
+        var repoLabel = repo == "default" ? "default" : repo;
-        var branches = repo.Branches
+        using var singleRepo = new Repository(repoPath);
+        var branches = singleRepo.Branches
             .Where(b => !b.IsRemote && b.Tip != null)
+            .OrderBy(b => b.FriendlyName)
             .Select(b => new
             {
+                repoKey   = repoLabel,
                 name      = b.FriendlyName,
                 hash      = b.Tip.Sha,
                 shortHash = b.Tip.Sha[..7],
@@ -147,7 +224,6 @@ public static class GitEndpoints
                 date      = b.Tip.Author.When.ToString("yyyy-MM-dd HH:mm:ss zzz"),
                 isHead    = b.IsCurrentRepositoryHead,
             })
-            .OrderBy(b => b.name)
             .ToList();
 
         return Results.Ok(branches);

ControlPlane.Api/Endpoints/ProjectBuildEndpoints.cs

@@ -1,4 +1,5 @@
 using ControlPlane.Api.Services;
+using ControlPlane.Core.Models;
 using ControlPlane.Core.Services;
 using System.Text.Json;
 
@@ -16,6 +17,7 @@ public static class ProjectBuildEndpoints
         var group = app.MapGroup("/api/builds").WithTags("Builds");
         group.MapGet("/projects",       GetProjects);
         group.MapGet("/history",        GetHistory);
+        group.MapGet("/by-sha",         GetBySha);
         group.MapPost("/{projectName}", TriggerProjectBuild);
         return app;
     }
@@ -27,6 +29,31 @@ public static class ProjectBuildEndpoints
     private static async Task<IResult> GetHistory(BuildHistoryService history) =>
         Results.Ok(await history.GetBuildsAsync());
 
+    /// <summary>
+    /// Returns the latest SolutionBuild record for the given commit SHA, or null if none exists.
+    /// Used by the OPC CommitsTab to render per-commit CI status dots.
+    /// </summary>
+    private static async Task<IResult> GetBySha(string sha, BuildHistoryService history)
+    {
+        if (string.IsNullOrWhiteSpace(sha))
+            return Results.BadRequest("sha is required");
+
+        var builds = await history.GetBuildsByShaAsync(sha);
+        var latest = builds
+            .Where(b => b.Kind == BuildKind.SolutionBuild)
+            .MaxBy(b => b.StartedAt);
+
+        return Results.Ok(latest is null ? null : new
+        {
+            latest.Id,
+            latest.Status,
+            latest.StartedAt,
+            latest.FinishedAt,
+            latest.DurationMs,
+            latest.CommitSha,
+        });
+    }
+
     /// <summary>
     /// Triggers a build for a named project and streams SSE output.
     /// projectName must match one of the names returned by GET /api/builds/projects.

clarity.controlplane/src/api/buildApi.ts

@@ -30,6 +30,29 @@ export async function getBuildHistory(): Promise<BuildRecord[]> {
   return res.json();
 }
 
+export interface ShaBuildResult {
+  id:          string;
+  status:      'Running' | 'Succeeded' | 'Failed';
+  startedAt:   string;
+  finishedAt?: string;
+  durationMs?: number;
+  commitSha?:  string;
+}
+
+/** Returns the latest SolutionBuild for a given SHA, or null if none exists. */
+export async function getBuildBySha(sha: string): Promise<ShaBuildResult | null> {
+  const res = await fetch(`${BASE_URL}/api/builds/by-sha?sha=${encodeURIComponent(sha)}`);
+  if (!res.ok) throw new Error(`getBuildBySha failed: ${res.statusText}`);
+  return res.json();
+}
+
+/** Batch-fetches SolutionBuild status for multiple SHAs. Returns a map of sha -> result|null. */
+export async function getBuildsByShas(shas: string[]): Promise<Map<string, ShaBuildResult | null>> {
+  const unique  = [...new Set(shas.filter(Boolean))];
+  const entries = await Promise.all(unique.map(async (sha) => [sha, await getBuildBySha(sha)] as const));
+  return new Map(entries);
+}
+
 export function triggerProjectBuild(
   projectName: string,
   onLine:      (line: string) => void,

clarity.controlplane/src/api/opcApi.ts

@@ -121,6 +121,7 @@ export interface LinkedCommit {
   date:      string;
   subject:   string;
   files:     string[];
+  branches:  string[];
 }
 
 export async function getLinkedCommits(opcNumber: string): Promise<LinkedCommit[]> {
@@ -208,18 +209,35 @@ export async function getBranchCoverageForRepo(repoKey: string, hashes: string[]
 // Reuses LinkedCommit shape — repoKey identifies which repo each commit came from.
 
 export async function getChangesets(
-  page  = 1,
+  page   = 1,
-  limit = 25,
+  limit  = 25,
-  repo  = 'all',
+  repo   = 'all',
   grep?: string,
+  branch?: string,
 ): Promise<LinkedCommit[]> {
   const params = new URLSearchParams({ page: String(page), limit: String(limit), repo });
-  if (grep) params.set('grep', grep);
+  if (grep)   params.set('grep',   grep);
+  if (branch) params.set('branch', branch);
   const res = await fetch(`${BASE_URL}/api/git/log?${params}`);
   if (!res.ok) throw new Error(`Failed to load changesets: ${res.statusText}`);
   return res.json();
 }
 
+// ── Local git branches (from LibGit2 repos) ───────────────────────────────────
+
+export interface RepoBranchInfo {
+  repoKey:  string;
+  name:     string;
+  hash:     string;
+  isHead:   boolean;
+}
+
+export async function getBranches(repo = 'all'): Promise<RepoBranchInfo[]> {
+  const res = await fetch(`${BASE_URL}/api/git/branches?repo=${encodeURIComponent(repo)}`);
+  if (!res.ok) throw new Error(`Failed to load branches: ${res.statusText}`);
+  return res.json();
+}
+
 // ── Commit detail (full diff) ─────────────────────────────────────────────────
 
 export interface CommitFile {

clarity.controlplane/src/index.css

@@ -1292,3 +1292,50 @@ body {
   min-width: 60px;
   text-align: center;
 }
+
+.cs-page-with-tree {
+  display: flex;
+  gap: 1.5rem;
+  align-items: flex-start;
+}
+
+.cs-branch-tree {
+  width: 200px;
+  flex-shrink: 0;
+  position: sticky;
+  top: 1rem;
+  border: 1px solid #dce0e6;
+  border-radius: 8px;
+  overflow: hidden;
+  padding: 0.25rem 0;
+  max-height: calc(100vh - 8rem);
+  overflow-y: auto;
+}
+
+.cs-branch-tree .bp6-tree-node-content {
+  font-size: 0.82rem;
+  height: 28px;
+}
+
+.cs-branch-tree .bp6-tree-node-content:hover {
+  background: #f6f7f9;
+}
+
+.cs-branch-tree .bp6-tree-node.bp6-tree-node-selected > .bp6-tree-node-content {
+  background: #e8f0fb;
+  color: #215db0;
+}
+
+.cs-content-area {
+  flex: 1;
+  min-width: 0;
+}
+
+.cs-branch-badge {
+  font-size: 0.67rem;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+  margin-left: 0.5rem;
+  opacity: 0.85;
+  vertical-align: middle;
+}

clarity.controlplane/src/pages/BuildMonitorPage.css

@@ -0,0 +1,229 @@
+/* ── Section headings ───────────────────────────────────────────────────────── */
+.bm-section-title {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #5f6b7c;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-bottom: 0.75rem;
+}
+
+/* ── Pipeline card grid ─────────────────────────────────────────────────────── */
+.bm-pipeline-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+  gap: 1rem;
+  margin-bottom: 2rem;
+}
+
+.bm-pipeline-card {
+  background: #fff;
+  border: 1px solid #e5e8eb;
+  border-radius: 10px;
+  padding: 0.9rem 1rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+  display: flex;
+  flex-direction: column;
+  gap: 0.7rem;
+  transition: box-shadow 0.15s, border-color 0.15s;
+}
+
+.bm-pipeline-card:hover {
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
+  border-color: #c5cbd3;
+}
+
+.bm-pipeline-card-top {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.55rem;
+}
+
+.bm-pipeline-dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  margin-top: 4px;
+}
+
+.bm-pipeline-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.bm-pipeline-name {
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: #1c2127;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.bm-pipeline-sub {
+  font-family: 'Cascadia Code', 'Consolas', monospace;
+  font-size: 0.62rem;
+  color: #8f99a8;
+  display: block;
+  margin-top: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.bm-pipeline-card-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+/* ── Spark bar ──────────────────────────────────────────────────────────────── */
+.bm-pipeline-card-bottom {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  min-height: 30px;
+}
+
+.bm-spark { display: block; flex-shrink: 0; }
+
+.bm-spark-empty {
+  font-size: 0.7rem;
+  color: #c5cbd3;
+  font-style: italic;
+}
+
+.bm-pipeline-status-text {
+  font-size: 0.7rem;
+  color: #8f99a8;
+  text-align: right;
+  white-space: nowrap;
+}
+
+/* ── Card log area ──────────────────────────────────────────────────────────── */
+.bm-pipeline-log-toggle {
+  border-top: 1px solid #f0f2f5;
+  padding-top: 0.4rem;
+  margin-top: -0.1rem;
+}
+
+/* ── Log viewer ─────────────────────────────────────────────────────────────── */
+.bm-log-viewer {
+  font-family: 'Cascadia Code', 'Consolas', monospace;
+  font-size: 0.68rem;
+  background: #0d1117;
+  color: #c9d1d9;
+  padding: 0.5rem 0.75rem;
+  max-height: 220px;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+  border-radius: 6px;
+  line-height: 1.55;
+}
+
+/* ── Runs list ──────────────────────────────────────────────────────────────── */
+.bm-runs-list {
+  background: #fff;
+  border: 1px solid #e5e8eb;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.bm-run-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.55rem 1rem;
+  border-bottom: 1px solid #f0f2f5;
+  font-size: 0.825rem;
+  cursor: default;
+}
+
+.bm-run-row:last-of-type {
+  border-bottom: none;
+}
+
+.bm-run-row:hover {
+  background: #f8f9fb;
+}
+
+.bm-run-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.bm-run-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+.bm-run-name {
+  font-weight: 600;
+  color: #1c2127;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 220px;
+}
+
+.bm-run-sha {
+  font-family: 'Cascadia Code', 'Consolas', monospace;
+  font-size: 0.7rem;
+  color: #215db0;
+  background: #e8f0fc;
+  padding: 1px 6px;
+  border-radius: 4px;
+  text-decoration: none;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.bm-run-sha:hover { text-decoration: underline; }
+
+.bm-run-trigger {
+  font-size: 0.7rem;
+  color: #8f99a8;
+  background: #f0f2f5;
+  padding: 1px 6px;
+  border-radius: 4px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.bm-run-time {
+  color: #8f99a8;
+  font-size: 0.78rem;
+  white-space: nowrap;
+  min-width: 68px;
+  text-align: right;
+  flex-shrink: 0;
+}
+
+.bm-run-dur {
+  color: #8f99a8;
+  font-size: 0.78rem;
+  white-space: nowrap;
+  min-width: 46px;
+  text-align: right;
+  flex-shrink: 0;
+}
+
+.bm-run-log-panel {
+  padding: 0 0 0;
+  background: #0d1117;
+}
+
+.bm-run-log-panel .bm-log-viewer {
+  border-radius: 0;
+  max-height: 260px;
+}

clarity.controlplane/src/pages/BuildMonitorPage.tsx

@@ -1,13 +1,19 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import {
-  Button, Callout, Intent, Tag, Spinner, NonIdealState,
+  Button, Callout, Collapse, Intent, NonIdealState, Spinner, Tag,
-  Collapse, HTMLTable,
 } from '@blueprintjs/core';
 import { getProjects, getBuildHistory, type ProjectDefinition, type BuildRecord } from '../api/buildApi';
-import { getGitLog, type GitCommit } from '../api/gitApi';
+import './BuildMonitorPage.css';
 
 const BASE_URL = import.meta.env.VITE_API_URL ?? '';
 
+const KIND_LABEL: Record<string, string> = {
+  DotnetProject: '.NET',
+  NpmProject:    'npm',
+  DockerImage:   'Docker',
+  SolutionBuild: 'CI',
+};
+
 const KIND_INTENT: Record<string, Intent> = {
   DotnetProject:  Intent.PRIMARY,
   NpmProject:     Intent.WARNING,
@@ -15,223 +21,184 @@ const KIND_INTENT: Record<string, Intent> = {
   SolutionBuild:  Intent.SUCCESS,
 };
 
-const STATUS_INTENT: Record<string, Intent> = {
+const STATUS_COLOR: Record<string, string> = {
-  Succeeded: Intent.SUCCESS,
+  Succeeded: '#2d9e2d',
-  Failed:    Intent.DANGER,
+  Failed:    '#c23030',
-  Running:   Intent.PRIMARY,
+  Running:   '#3d8bd4',
 };
 
-// ── Git history panel ─────────────────────────────────────────────────────────
+function timeAgo(dateStr: string): string {
+  const s = Math.floor((Date.now() - new Date(dateStr).getTime()) / 1000);
+  if (s < 60)  return `${s}s ago`;
+  const m = Math.floor(s / 60);
+  if (m < 60)  return `${m}m ago`;
+  const h = Math.floor(m / 60);
+  if (h < 24)  return `${h}h ago`;
+  return `${Math.floor(h / 24)}d ago`;
+}
 
-function GitHistoryPanel({ relativePath }: { relativePath: string }) {
+// SparkBar ------------------------------------------------------------------
-  const [commits,  setCommits]  = useState<GitCommit[]>([]);
-  const [loading,  setLoading]  = useState(false);
-  const [open,     setOpen]     = useState(false);
-  const [fetched,  setFetched]  = useState(false);
-  const [error,    setError]    = useState<string | null>(null);
 
-  const toggle = async () => {
+function SparkBar({ builds }: { builds: BuildRecord[] }) {
-    if (!open && !fetched) {
+  const bars = [...builds]
-      setLoading(true);
+    .sort((a, b) => new Date(a.startedAt).getTime() - new Date(b.startedAt).getTime())
-      setError(null);
+    .slice(-20);
-      try {
-        const data = await getGitLog(relativePath, 10);
-        setCommits(data);
-        setFetched(true);
-      } catch (e) {
-        setError(e instanceof Error ? e.message : 'Failed to load git history');
-      } finally {
-        setLoading(false);
-      }
-    }
-    setOpen((o) => !o);
-  };
 
+  if (bars.length === 0) return <span className="bm-spark-empty">no history</span>;
+
+  const W = 5, GAP = 2, H = 28;
   return (
-    <div style={{ marginTop: '0.5rem' }}>
+    <svg width={bars.length * (W + GAP) - GAP} height={H} className="bm-spark">
-      <Button
+      {bars.map((b, i) => (
-        minimal small
+        <rect key={b.id} x={i * (W + GAP)} y={0} width={W} height={H} rx={1}
-        icon="git-branch"
+          fill={STATUS_COLOR[b.status] ?? '#c5cbd3'} />
-        text={open ? 'Hide history' : 'Git history'}
+      ))}
-        onClick={toggle}
+    </svg>
-        loading={loading}
+  );
-      />
+}
 
-      <Collapse isOpen={open && !loading}>
+// LogViewer -----------------------------------------------------------------
-        {error && <Callout intent={Intent.DANGER} compact style={{ marginTop: '0.25rem' }}>{error}</Callout>}
+
-        {commits.length === 0 && !error && (
+function LogViewer({ lines }: { lines: string[] }) {
-          <p style={{ fontSize: '0.75rem', color: '#8f99a8', marginTop: '0.5rem' }}>No commits found for this path.</p>
+  const ref = useRef<HTMLDivElement>(null);
-        )}
+  useEffect(() => { if (ref.current) ref.current.scrollTop = ref.current.scrollHeight; }, [lines]);
-        {commits.length > 0 && (
+  return (
-          <HTMLTable className="bp6-html-table-condensed bp6-html-table-striped" style={{ width: '100%', marginTop: '0.5rem', fontSize: '0.72rem' }}>
+    <div ref={ref} className="bm-log-viewer">
-            <thead>
+      {lines.map((l, i) => <div key={i}>{l}</div>)}
-              <tr>
-                <th style={{ width: 60 }}>Commit</th>
-                <th>Message</th>
-                <th>Author</th>
-                <th style={{ width: 140 }}>Date</th>
-                <th style={{ width: 40, textAlign: 'right' }}>Files</th>
-              </tr>
-            </thead>
-            <tbody>
-              {commits.map((c) => (
-                <tr key={c.hash}>
-                  <td>
-                    <code style={{ fontSize: '0.7rem', color: '#4a90d9' }}>{c.shortHash}</code>
-                  </td>
-                  <td style={{ maxWidth: 320, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                    {c.subject}
-                  </td>
-                  <td style={{ color: '#738091' }}>{c.author}</td>
-                  <td style={{ color: '#738091' }}>
-                    {new Date(c.date).toLocaleString(undefined, { dateStyle: 'short', timeStyle: 'short' })}
-                  </td>
-                  <td style={{ textAlign: 'right', color: '#8f99a8' }}>
-                    <span title={c.files.join('\n')}>{c.files.length}</span>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </HTMLTable>
-        )}
-      </Collapse>
     </div>
   );
 }
 
-// ── Per-project card ──────────────────────────────────────────────────────────
+// PipelineCard --------------------------------------------------------------
 
-function ProjectCard({
+interface PipelineCardProps {
-  project,
+  name:        string;
-  lastBuild,
+  kind:        string;
-  onBuilt,
+  subtitle?:   string;
-}: {
+  builds:      BuildRecord[];
-  project:   ProjectDefinition;
+  onBuild?:    () => void;
-  lastBuild: BuildRecord | undefined;
+  building?:   boolean;
-  onBuilt:   () => void;
+  buildLogs?:  string[];
-}) {
+  buildError?: string | null;
-  const [building, setBuilding] = useState(false);
+}
-  const [logs,     setLogs]     = useState<string[]>([]);
-  const [open,     setOpen]     = useState(false);
-  const [error,    setError]    = useState<string | null>(null);
-  const logRef                  = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
+function PipelineCard({ name, kind, subtitle, builds, onBuild, building, buildLogs, buildError }: PipelineCardProps) {
-    if (logRef.current) logRef.current.scrollTop = logRef.current.scrollHeight;
+  const [logsOpen, setLogsOpen] = useState(false);
-  }, [logs]);
 
-  const handleBuild = async () => {
+  const latest   = [...builds].sort((a, b) => new Date(b.startedAt).getTime() - new Date(a.startedAt).getTime())[0];
-    setBuilding(true);
+  const dotColor = building
-    setOpen(true);
+    ? STATUS_COLOR.Running
-    setLogs([]);
+    : latest ? (STATUS_COLOR[latest.status] ?? '#c5cbd3') : '#c5cbd3';
-    setError(null);
 
-    try {
+  useEffect(() => { if (building) setLogsOpen(true); }, [building]);
-      const res = await fetch(
-        `${BASE_URL}/api/builds/${encodeURIComponent(project.name)}`,
-        { method: 'POST' }
-      );
-      if (!res.ok || !res.body) throw new Error(res.statusText);
 
-      const reader  = res.body.getReader();
+  const statusText = building
-      const decoder = new TextDecoder();
+    ? 'Building...'
-      let   buffer  = '';
+    : latest ? `${latest.status} · ${timeAgo(latest.startedAt)}`
-
+    : 'Never built';
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) break;
-        buffer += decoder.decode(value, { stream: true });
-        const parts = buffer.split('\n\n');
-        buffer = parts.pop() ?? '';
-        for (const chunk of parts) {
-          const dataLine = chunk.replace(/^data:\s*/m, '').trim();
-          if (!dataLine) continue;
-          try {
-            const msg = JSON.parse(dataLine);
-            if (msg.done) onBuilt();
-            else if (typeof msg.line === 'string')
-              setLogs((p) => [...p.slice(-1000), msg.line]);
-          } catch { /* ignore */ }
-        }
-      }
-    } catch (e) {
-      setError(e instanceof Error ? e.message : 'Unknown error');
-    } finally {
-      setBuilding(false);
-    }
-  };
-
-  const statusIntent = lastBuild ? STATUS_INTENT[lastBuild.status] : Intent.NONE;
-  const statusLabel  = lastBuild?.status ?? 'Never built';
-  const lastRun      = lastBuild ? new Date(lastBuild.startedAt).toLocaleString() : '—';
-  const duration     = lastBuild?.durationMs != null
-    ? `${(lastBuild.durationMs / 1000).toFixed(1)}s` : null;
 
   return (
-    <div className="job-card">
+    <div className="bm-pipeline-card">
-      <div className="job-card-header">
+      <div className="bm-pipeline-card-top">
-        <div>
+        <div className="bm-pipeline-dot" style={{ background: dotColor }} />
-          <strong>{project.name}</strong>
+        <div className="bm-pipeline-info">
-          <span className="job-card-subdomain" style={{ fontFamily: 'monospace', fontSize: '0.72rem' }}>
+          <span className="bm-pipeline-name">{name}</span>
-            {project.relativePath}
+          {subtitle && <code className="bm-pipeline-sub">{subtitle}</code>}
-          </span>
         </div>
-        <div style={{ display: 'flex', gap: '0.4rem', alignItems: 'center' }}>
+        <div className="bm-pipeline-card-actions">
-          <Tag intent={KIND_INTENT[project.kind] ?? Intent.NONE} minimal round>{project.kind}</Tag>
+          <Tag minimal round intent={KIND_INTENT[kind] ?? Intent.NONE} style={{ fontSize: '0.65rem' }}>
-          <Tag intent={statusIntent} round>{statusLabel}</Tag>
+            {KIND_LABEL[kind] ?? kind}
-          {duration && <Tag minimal round>{duration}</Tag>}
+          </Tag>
+          {onBuild && (
+            <Button icon="play" small minimal intent={Intent.PRIMARY} loading={building} onClick={onBuild} />
+          )}
         </div>
       </div>
 
-      <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center', padding: '0.5rem 0 0.25rem' }}>
+      <div className="bm-pipeline-card-bottom">
-        <Button
+        <SparkBar builds={builds} />
-          icon="play"
+        <span className="bm-pipeline-status-text">{statusText}</span>
-          small
-          intent={Intent.PRIMARY}
-          loading={building}
-          onClick={handleBuild}
-          text="Build"
-        />
-        <span style={{ fontSize: '0.75rem', color: '#999' }}>Last run: {lastRun}</span>
-        {logs.length > 0 && (
-          <Button minimal small
-            icon={open ? 'chevron-up' : 'chevron-down'}
-            onClick={() => setOpen((o) => !o)}
-            text={open ? 'Hide log' : 'Show log'}
-          />
-        )}
       </div>
 
-      {error && <Callout intent={Intent.DANGER} compact style={{ marginTop: '0.25rem' }}>{error}</Callout>}
+      {buildLogs && buildLogs.length > 0 && (
-
+        <>
-      {open && logs.length > 0 && (
+          <div className="bm-pipeline-log-toggle">
-        <div
+            <Button minimal small
-          ref={logRef}
+              icon={logsOpen ? 'chevron-up' : 'chevron-down'}
-          style={{
+              text={logsOpen ? 'Hide log' : 'Show log'}
-            fontFamily: 'monospace', fontSize: '0.7rem',
+              onClick={() => setLogsOpen((o) => !o)} />
-            background: '#111', color: '#d4d4d4',
+          </div>
-            padding: '0.5rem 0.75rem', borderRadius: 4,
+          <Collapse isOpen={logsOpen} keepChildrenMounted>
-            height: 200, overflowY: 'auto',
+            <LogViewer lines={buildLogs} />
-            whiteSpace: 'pre-wrap', wordBreak: 'break-all',
+          </Collapse>
-            marginTop: '0.5rem',
+        </>
-          }}
-        >
-          {logs.map((l, i) => <div key={i}>{l}</div>)}
-        </div>
       )}
 
-      <GitHistoryPanel relativePath={project.relativePath} />
+      {buildError && (
+        <Callout intent={Intent.DANGER} compact style={{ marginTop: '0.4rem' }}>{buildError}</Callout>
+      )}
     </div>
   );
 }
 
-// ── Page ──────────────────────────────────────────────────────────────────────
+// RunRow --------------------------------------------------------------------
+
+function RunRow({ build, giteaBase }: { build: BuildRecord; giteaBase: string }) {
+  const [open, setOpen] = useState(false);
+
+  const repo      = build.target.replace(/\.slnx?$/, '');
+  const shortSha  = build.commitSha?.slice(0, 7);
+  const shaUrl    = build.commitSha && build.kind === 'SolutionBuild'
+    ? `${giteaBase}/ClarityStack/${repo === 'ControlPlane' ? 'OPC' : repo}/commit/${build.commitSha}`
+    : null;
+  const duration  = build.durationMs != null ? `${(build.durationMs / 1000).toFixed(1)}s` : '-';
+  const dotColor  = STATUS_COLOR[build.status] ?? '#c5cbd3';
+  const dispName  = build.kind === 'SolutionBuild' ? repo : (build.target.split('/').pop() ?? build.target);
+
+  return (
+    <>
+      <div className="bm-run-row">
+        <span className="bm-run-dot" style={{ background: dotColor }} />
+        <div className="bm-run-main">
+          <span className="bm-run-name">{dispName}</span>
+          {shortSha && shaUrl
+            ? <a href={shaUrl} target="_blank" rel="noopener noreferrer" className="bm-run-sha">{shortSha}</a>
+            : <span className="bm-run-trigger">manual</span>}
+        </div>
+        <Tag minimal round intent={KIND_INTENT[build.kind] ?? Intent.NONE} style={{ fontSize: '0.65rem' }}>
+          {KIND_LABEL[build.kind] ?? build.kind}
+        </Tag>
+        <span className="bm-run-time">{timeAgo(build.startedAt)}</span>
+        <span className="bm-run-dur">{duration}</span>
+        {build.log.length > 0
+          ? <Button minimal small icon={open ? 'chevron-up' : 'chevron-down'} onClick={() => setOpen((o) => !o)} />
+          : <span style={{ width: 24, flexShrink: 0 }} />}
+      </div>
+      <Collapse isOpen={open} keepChildrenMounted>
+        <div className="bm-run-log-panel">
+          <LogViewer lines={build.log} />
+        </div>
+      </Collapse>
+    </>
+  );
+}
+
+// Page ----------------------------------------------------------------------
+
+interface ProjectBuildState {
+  building: boolean;
+  logs:     string[];
+  error:    string | null;
+}
 
 export default function BuildMonitorPage() {
-  const [projects, setProjects] = useState<ProjectDefinition[]>([]);
+  const [projects,    setProjects]    = useState<ProjectDefinition[]>([]);
-  const [history,  setHistory]  = useState<BuildRecord[]>([]);
+  const [history,     setHistory]     = useState<BuildRecord[]>([]);
-  const [loading,  setLoading]  = useState(true);
+  const [loading,     setLoading]     = useState(true);
-  const [error,    setError]    = useState<string | null>(null);
+  const [error,       setError]       = useState<string | null>(null);
+  const [buildStates, setBuildStates] = useState<Record<string, ProjectBuildState>>({});
+
+  const giteaBase = (import.meta.env.VITE_GITEA_URL as string | undefined) ?? 'https://opc.clarity.test';
 
   const load = async () => {
     setLoading(true);
@@ -247,55 +214,109 @@ export default function BuildMonitorPage() {
     }
   };
 
-  useEffect(() => { (async () => { await load(); })(); }, []);
+  useEffect(() => { load(); }, []);
 
-  // Find latest build per project — match exactly by relativePath (= build target)
+  const makeBuildHandler = (project: ProjectDefinition) => async () => {
-  const lastBuildFor = (project: ProjectDefinition): BuildRecord | undefined =>
+    setBuildStates((s) => ({ ...s, [project.name]: { building: true, logs: [], error: null } }));
-    history.find((b) => b.target === project.relativePath);
+    try {
+      const res = await fetch(`${BASE_URL}/api/builds/${encodeURIComponent(project.name)}`, { method: 'POST' });
+      if (!res.ok || !res.body) throw new Error(res.statusText);
+      const reader  = res.body.getReader();
+      const decoder = new TextDecoder();
+      let   buffer  = '';
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        const parts = buffer.split('\n\n');
+        buffer = parts.pop() ?? '';
+        for (const chunk of parts) {
+          const dataLine = chunk.replace(/^data:\s*/m, '').trim();
+          if (!dataLine) continue;
+          try {
+            const msg = JSON.parse(dataLine);
+            if (msg.done) load();
+            else if (typeof msg.line === 'string')
+              setBuildStates((s) => ({
+                ...s,
+                [project.name]: { ...s[project.name], logs: [...(s[project.name]?.logs ?? []).slice(-1000), msg.line] },
+              }));
+          } catch { /* ignore */ }
+        }
+      }
+    } catch (e) {
+      const err = e instanceof Error ? e.message : 'Unknown error';
+      setBuildStates((s) => ({ ...s, [project.name]: { ...s[project.name], error: err } }));
+    } finally {
+      setBuildStates((s) => ({ ...s, [project.name]: { ...s[project.name], building: false } }));
+    }
+  };
+
+  const ciTargets  = [...new Set(history.filter((b) => b.kind === 'SolutionBuild').map((b) => b.target))];
+  const recentRuns = [...history]
+    .sort((a, b) => new Date(b.startedAt).getTime() - new Date(a.startedAt).getTime())
+    .slice(0, 50);
 
   return (
     <>
       <div className="page-header">
         <div>
           <h1>Build Monitor</h1>
-          <p>Trigger and track builds for every project in the solution.</p>
+          <p>CI gate builds and manual per-project builds</p>
-        </div>
-        <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
-          <Button icon="refresh" minimal onClick={load} loading={loading} title="Refresh" />
-          <Button
-            icon="play"
-            text="Build All"
-            intent={Intent.WARNING}
-            disabled={loading || projects.length === 0}
-            onClick={async () => {
-              for (const p of projects) {
-                await fetch(`${BASE_URL}/api/builds/${encodeURIComponent(p.name)}`, { method: 'POST' });
-              }
-              load();
-            }}
-          />
         </div>
+        <Button icon="refresh" minimal onClick={load} loading={loading} title="Refresh" />
       </div>
 
       {error && (
-        <Callout intent={Intent.DANGER} title="Failed to load projects" style={{ marginBottom: '1rem' }}>
+        <Callout intent={Intent.DANGER} title="Failed to load" style={{ marginBottom: '1rem' }}>{error}</Callout>
-          {error}
-        </Callout>
       )}
 
-      {loading && <NonIdealState icon={<Spinner />} title="Loading projects..." />}
+      {loading && <NonIdealState icon={<Spinner />} title="Loading..." />}
 
       {!loading && !error && (
-        <div className="job-list">
+        <>
-          {projects.map((p) => (
+          <p className="bm-section-title">Pipelines</p>
-            <ProjectCard
+          <div className="bm-pipeline-grid">
-              key={p.name}
+            {ciTargets.map((target) => {
-              project={p}
+              const repo = target.replace(/\.slnx?$/, '');
-              lastBuild={lastBuildFor(p)}
+              return (
-              onBuilt={load}
+                <PipelineCard key={target}
-            />
+                  name={repo}
-          ))}
+                  kind="SolutionBuild"
-        </div>
+                  subtitle={target}
+                  builds={history.filter((b) => b.target === target)} />
+              );
+            })}
+            {projects.map((p) => {
+              const bs = buildStates[p.name];
+              return (
+                <PipelineCard key={p.name}
+                  name={p.name}
+                  kind={p.kind}
+                  subtitle={p.relativePath}
+                  builds={history.filter((b) => b.target === p.relativePath)}
+                  onBuild={makeBuildHandler(p)}
+                  building={bs?.building}
+                  buildLogs={bs?.logs}
+                  buildError={bs?.error} />
+              );
+            })}
+            {ciTargets.length === 0 && projects.length === 0 && (
+              <span style={{ color: '#8f99a8', fontSize: '0.875rem' }}>No pipelines configured.</span>
+            )}
+          </div>
+
+          {recentRuns.length > 0 && (
+            <>
+              <p className="bm-section-title" style={{ marginTop: '2rem' }}>Recent Runs</p>
+              <div className="bm-runs-list">
+                {recentRuns.map((b) => (
+                  <RunRow key={b.id} build={b} giteaBase={giteaBase} />
+                ))}
+              </div>
+            </>
+          )}
+        </>
       )}
     </>
   );

clarity.controlplane/src/pages/ChangesetsPage.tsx

@@ -1,7 +1,8 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useMemo } from 'react';
-import { Button, HTMLSelect, InputGroup, Intent, NonIdealState, Spinner, Tag, Tooltip } from '@blueprintjs/core';
+import { Button, HTMLSelect, InputGroup, Intent, NonIdealState, Spinner, Tag, Tooltip, Tree } from '@blueprintjs/core';
+import type { TreeNodeInfo } from '@blueprintjs/core';
 import { GitCommitDrawer } from '../components/GitCommitDrawer';
-import { getChangesets } from '../api/opcApi';
+import { getChangesets, getBranches } from '../api/opcApi';
 import type { LinkedCommit } from '../api/opcApi';
 
 const PAGE_SIZE = 25;
@@ -19,23 +20,62 @@ const REPO_INTENT: Record<string, Intent> = {
   Gateway: Intent.SUCCESS,
 };
 
-export default function ChangesetsPage() {
+const REPO_COLOR: Record<string, string> = {
-  const [commits,     setCommits]     = useState<LinkedCommit[]>([]);
+  Clarity: '#215db0',
-  const [loading,     setLoading]     = useState(true);
+  OPC:     '#935610',
-  const [error,       setError]       = useState<string | null>(null);
+  Gateway: '#1c6e42',
-  const [page,        setPage]        = useState(1);
+};
-  const [hasMore,     setHasMore]     = useState(false);
-  const [repoFilter,  setRepoFilter]  = useState('all');
-  const [grepFilter,  setGrepFilter]  = useState('');
-  const [grepInput,   setGrepInput]   = useState('');
-  const [viewingHash, setViewingHash] = useState<string | null>(null);
 
-  const load = useCallback(async (p: number, repo: string, grep: string) => {
+const SDLC_ORDER = ['develop', 'staging', 'uat', 'main'] as const;
+
+function getBranchLabel(branches: string[]): string | null {
+  if (branches.length === 0) return null;
+  const sdlc = branches.filter(b => (SDLC_ORDER as readonly string[]).includes(b));
+  if (sdlc.length === 0) return branches[0];
+  const highest = sdlc.reduce((a, b) =>
+    SDLC_ORDER.indexOf(b as typeof SDLC_ORDER[number]) > SDLC_ORDER.indexOf(a as typeof SDLC_ORDER[number]) ? b : a,
+  );
+  const idx = SDLC_ORDER.indexOf(highest as typeof SDLC_ORDER[number]);
+  if (idx > 0) {
+    const prev = SDLC_ORDER[idx - 1];
+    if (branches.includes(prev)) return `${prev} → ${highest}`;
+  }
+  return highest;
+}
+
+export default function ChangesetsPage() {
+  const [commits,        setCommits]        = useState<LinkedCommit[]>([]);
+  const [loading,        setLoading]        = useState(true);
+  const [error,          setError]          = useState<string | null>(null);
+  const [page,           setPage]           = useState(1);
+  const [hasMore,        setHasMore]        = useState(false);
+  const [repoFilter,     setRepoFilter]     = useState('all');
+  const [grepFilter,     setGrepFilter]     = useState('');
+  const [grepInput,      setGrepInput]      = useState('');
+  const [viewingHash,    setViewingHash]    = useState<string | null>(null);
+  const [branchMap,      setBranchMap]      = useState<Record<string, string[]>>({});
+  const [selectedBranch, setSelectedBranch] = useState<{ repoKey: string; branch: string } | null>(null);
+  const [expandedRepos,  setExpandedRepos]  = useState<Set<string>>(new Set());
+
+  // Load branches for the tree once on mount
+  useEffect(() => {
+    getBranches('all')
+      .then(data => {
+        const map: Record<string, string[]> = {};
+        for (const b of data) {
+          if (!map[b.repoKey]) map[b.repoKey] = [];
+          map[b.repoKey].push(b.name);
+        }
+        setBranchMap(map);
+      })
+      .catch(() => { /* branch tree is non-critical */ });
+  }, []);
+
+  const load = useCallback(async (p: number, repo: string, grep: string, branch?: string) => {
     setLoading(true);
     setError(null);
     try {
-      // Fetch one extra to detect whether there's a next page
+      const rows = await getChangesets(p, PAGE_SIZE + 1, repo, grep || undefined, branch);
-      const rows = await getChangesets(p, PAGE_SIZE + 1, repo, grep || undefined);
       setHasMore(rows.length > PAGE_SIZE);
       setCommits(rows.slice(0, PAGE_SIZE));
     } catch (e) {
@@ -47,25 +87,77 @@ export default function ChangesetsPage() {
   }, []);
 
   useEffect(() => {
-    load(page, repoFilter, grepFilter);
+    const effectiveRepo   = selectedBranch ? selectedBranch.repoKey : repoFilter;
-  }, [load, page, repoFilter, grepFilter]);
+    const effectiveBranch = selectedBranch?.branch;
+    load(page, effectiveRepo, grepFilter, effectiveBranch);
+  }, [load, page, repoFilter, grepFilter, selectedBranch]);
 
-  const applySearch = () => {
+  const applySearch = () => { setPage(1); setGrepFilter(grepInput); };
-    setPage(1);
+  const clearSearch = () => { setGrepInput(''); setGrepFilter(''); setPage(1); };
-    setGrepFilter(grepInput);
-  };
-
-  const clearSearch = () => {
-    setGrepInput('');
-    setGrepFilter('');
-    setPage(1);
-  };
 
   const handleRepoChange = (repo: string) => {
     setPage(1);
+    setSelectedBranch(null);
     setRepoFilter(repo);
   };
 
+  const treeNodes = useMemo((): TreeNodeInfo[] => [
+    {
+      id:         'all',
+      label:      'All Branches',
+      icon:       'git-branch',
+      isSelected: selectedBranch === null,
+    },
+    ...Object.keys(branchMap).map(repoKey => ({
+      id:         `repo|${repoKey}`,
+      label:      <span style={{ color: REPO_COLOR[repoKey] ?? 'inherit', fontWeight: 500 }}>{repoKey}</span>,
+      icon:       (expandedRepos.has(repoKey) ? 'folder-open' : 'folder-close') as TreeNodeInfo['icon'],
+      isExpanded: expandedRepos.has(repoKey),
+      isSelected: false,
+      childNodes: branchMap[repoKey].map(name => ({
+        id:         `branch|${repoKey}|${name}`,
+        label:      name,
+        icon:       'git-commit' as TreeNodeInfo['icon'],
+        isSelected: selectedBranch?.repoKey === repoKey && selectedBranch?.branch === name,
+      })),
+    })),
+  ], [branchMap, expandedRepos, selectedBranch]);
+
+  const handleNodeClick = (node: TreeNodeInfo) => {
+    const id = String(node.id);
+    if (id === 'all') {
+      setPage(1);
+      setSelectedBranch(null);
+    } else if (id.startsWith('branch|')) {
+      const [, repoKey, ...rest] = id.split('|');
+      setPage(1);
+      setSelectedBranch({ repoKey, branch: rest.join('|') });
+    } else if (id.startsWith('repo|')) {
+      const repoKey = id.slice(5);
+      setExpandedRepos(s => {
+        const next = new Set(s);
+        next.has(repoKey) ? next.delete(repoKey) : next.add(repoKey);
+        return next;
+      });
+    }
+  };
+
+  const handleNodeExpand = (node: TreeNodeInfo) => {
+    const id = String(node.id);
+    if (id.startsWith('repo|')) setExpandedRepos(s => new Set([...s, id.slice(5)]));
+  };
+
+  const handleNodeCollapse = (node: TreeNodeInfo) => {
+    const id = String(node.id);
+    if (id.startsWith('repo|')) setExpandedRepos(s => { const n = new Set(s); n.delete(id.slice(5)); return n; });
+  };
+
+  const doRefresh = () => {
+    const effectiveRepo   = selectedBranch ? selectedBranch.repoKey : repoFilter;
+    const effectiveBranch = selectedBranch?.branch;
+    load(page, effectiveRepo, grepFilter, effectiveBranch);
+  };
+
   return (
     <div>
       <div className="page-header">
@@ -73,100 +165,132 @@ export default function ChangesetsPage() {
           <h1>Changesets</h1>
           <p>Chronological commit timeline across all three repos.</p>
         </div>
-        <Button icon="refresh" minimal onClick={() => load(page, repoFilter, grepFilter)} />
+        <Button icon="refresh" minimal onClick={doRefresh} />
       </div>
 
-      {/* Filter bar */}
+      <div className="cs-page-with-tree">
-      <div className="opc-filter-bar">
+        {/* Branch tree */}
-        <HTMLSelect
+        <div className="cs-branch-tree">
-          value={repoFilter}
+          <Tree
-          onChange={e => handleRepoChange(e.target.value)}
+            contents={treeNodes}
-          options={REPO_OPTIONS}
+            onNodeClick={handleNodeClick}
-        />
+            onNodeExpand={handleNodeExpand}
-        <InputGroup
+            onNodeCollapse={handleNodeCollapse}
-          leftIcon="search"
+          />
-          placeholder="Filter commits by text or OPC number…"
+        </div>
-          value={grepInput}
-          onChange={e => setGrepInput(e.target.value)}
-          onKeyDown={e => { if (e.key === 'Enter') applySearch(); }}
-          style={{ width: 320 }}
-          rightElement={
-            <Button minimal icon="arrow-right" intent={Intent.PRIMARY}
-              disabled={!grepInput.trim()} onClick={applySearch} />
-          }
-        />
-        {grepFilter && (
-          <Button minimal small icon="cross" text="Clear" onClick={clearSearch} />
-        )}
-        <span className="opc-count-badge">{loading ? '…' : `${commits.length} shown`}</span>
-      </div>
 
-      {/* Content */}
+        {/* Main content */}
-      {loading ? (
+        <div className="cs-content-area">
-        <NonIdealState icon={<Spinner />} title="Loading changesets…" />
+          {/* Filter bar */}
-      ) : error ? (
+          <div className="opc-filter-bar">
-        <NonIdealState icon="warning-sign" title="Could not load commits"
+            <HTMLSelect
-          description={error} intent={Intent.DANGER} />
+              value={repoFilter}
-      ) : commits.length === 0 ? (
+              onChange={e => handleRepoChange(e.target.value)}
-        <NonIdealState icon="git-commit" title="No commits found"
+              options={REPO_OPTIONS}
-          description="Try changing the repo filter or clearing the search." />
+              disabled={!!selectedBranch}
-      ) : (
+            />
-        <div className="cs-timeline">
+            <InputGroup
-          {commits.map(c => (
+              leftIcon="search"
-            <div
+              placeholder="Filter commits by text or OPC number…"
-              key={`${c.repoKey}-${c.hash}`}
+              value={grepInput}
-              className="cs-row"
+              onChange={e => setGrepInput(e.target.value)}
-              onClick={() => setViewingHash(c.hash)}
+              onKeyDown={e => { if (e.key === 'Enter') applySearch(); }}
-            >
+              style={{ width: 320 }}
-              <div className="cs-row-left">
+              rightElement={
-                <Tag
+                <Button minimal icon="arrow-right" intent={Intent.PRIMARY}
-                  intent={REPO_INTENT[c.repoKey] ?? Intent.NONE}
+                  disabled={!grepInput.trim()} onClick={applySearch} />
-                  minimal round
+              }
-                  className="cs-repo-badge"
+            />
-                >
+            {grepFilter && (
-                  {c.repoKey || '?'}
+              <Button minimal small icon="cross" text="Clear" onClick={clearSearch} />
-                </Tag>
+            )}
-              </div>
+            {selectedBranch && (
+              <Tag
+                minimal
+                intent={REPO_INTENT[selectedBranch.repoKey] ?? Intent.NONE}
+                icon="git-branch"
+                onRemove={() => { setPage(1); setSelectedBranch(null); }}
+              >
+                {selectedBranch.repoKey} / {selectedBranch.branch}
+              </Tag>
+            )}
+            <span className="opc-count-badge">{loading ? '…' : `${commits.length} shown`}</span>
+          </div>
 
-              <div className="cs-row-body">
+          {/* Content */}
-                <div className="cs-row-top">
+          {loading ? (
-                  <Tooltip content="View diff" placement="top">
+            <NonIdealState icon={<Spinner />} title="Loading changesets…" />
-                    <code className="opc-commit-hash">{c.shortHash}</code>
+          ) : error ? (
-                  </Tooltip>
+            <NonIdealState icon="warning-sign" title="Could not load commits"
-                  <span className="cs-subject">{c.subject}</span>
+              description={error} />
-                </div>
+          ) : commits.length === 0 ? (
-                <div className="cs-row-meta">
+            <NonIdealState icon="git-commit" title="No commits found"
-                  {c.author} · {c.date}
+              description="Try changing the repo filter or clearing the search." />
-                  {c.files.length > 0 && (
+          ) : (
-                    <span className="cs-file-count"> · {c.files.length} file{c.files.length !== 1 ? 's' : ''}</span>
+            <div className="cs-timeline">
-                  )}
+              {commits.map(c => {
-                </div>
+                const branchLabel = getBranchLabel(c.branches ?? []);
-              </div>
+                return (
+                  <div
+                    key={`${c.repoKey}-${c.hash}`}
+                    className="cs-row"
+                    onClick={() => setViewingHash(c.hash)}
+                  >
+                    <div className="cs-row-left">
+                      <Tag
+                        intent={REPO_INTENT[c.repoKey] ?? Intent.NONE}
+                        minimal round
+                        className="cs-repo-badge"
+                      >
+                        {c.repoKey || '?'}
+                      </Tag>
+                    </div>
+
+                    <div className="cs-row-body">
+                      <div className="cs-row-top">
+                        <Tooltip content="View diff" placement="top">
+                          <code className="opc-commit-hash">{c.shortHash}</code>
+                        </Tooltip>
+                        <span className="cs-subject">{c.subject}</span>
+                      </div>
+                      <div className="cs-row-meta">
+                        {c.author} · {c.date}
+                        {c.files.length > 0 && (
+                          <span className="cs-file-count"> · {c.files.length} file{c.files.length !== 1 ? 's' : ''}</span>
+                        )}
+                        {branchLabel && (
+                          <Tag minimal className="cs-branch-badge">{branchLabel}</Tag>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
             </div>
-          ))}
+          )}
-        </div>
-      )}
 
-      {/* Pagination */}
+          {/* Pagination */}
-      {!loading && !error && (commits.length > 0 || page > 1) && (
+          {!loading && !error && (commits.length > 0 || page > 1) && (
-        <div className="cs-pagination">
+            <div className="cs-pagination">
-          <Button
+              <Button
-            icon="arrow-left"
+                icon="arrow-left"
-            minimal
+                minimal
-            text="Previous"
+                text="Previous"
-            disabled={page <= 1}
+                disabled={page <= 1}
-            onClick={() => setPage(p => p - 1)}
+                onClick={() => setPage(p => p - 1)}
-          />
+              />
-          <span className="cs-page-label">Page {page}</span>
+              <span className="cs-page-label">Page {page}</span>
-          <Button
+              <Button
-            rightIcon="arrow-right"
+                rightIcon="arrow-right"
-            minimal
+                minimal
-            text="Next"
+                text="Next"
-            disabled={!hasMore}
+                disabled={!hasMore}
-            onClick={() => setPage(p => p + 1)}
+                onClick={() => setPage(p => p + 1)}
-          />
+              />
+            </div>
+          )}
         </div>
-      )}
+      </div>
 
       <GitCommitDrawer hash={viewingHash} onClose={() => setViewingHash(null)} />
     </div>

clarity.controlplane/src/pages/DashboardPage.tsx

@@ -43,6 +43,15 @@ function TenantCard({ t }: { t: TenantRecord }) {
         <div style={{ display: 'flex', gap: '0.4rem', alignItems: 'center' }}>
           <Tag intent={ENV_INTENT[t.environment] ?? Intent.NONE} round minimal>{t.environment}</Tag>
           <Tag intent={t.status === 'Provisioned' ? Intent.SUCCESS : Intent.WARNING} round>{t.status}</Tag>
+          {t.containerImage && (() => {
+            const sha = t.containerImage.includes(':') ? t.containerImage.split(':').pop()! : t.containerImage;
+            return (
+              <Tag minimal round style={{ fontFamily: 'monospace', fontSize: '0.7rem', color: '#8f99a8' }}
+                title={t.containerImage}>
+                {sha.slice(0, 7)}
+              </Tag>
+            );
+          })()}
         </div>
       </div>