OPC # 0009: Gitea and OPC Build Webhooks

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,8 +1,9 @@
 import { useEffect, useRef, useState } from 'react';
 import {
-  AnchorButton, Button, Callout, Collapse, HTMLTable, Intent, NonIdealState, Spinner, Tag,
+  Button, Callout, Collapse, Intent, NonIdealState, Spinner, Tag,
 } from '@blueprintjs/core';
 import { getProjects, getBuildHistory, type ProjectDefinition, type BuildRecord } from '../api/buildApi';
+import './BuildMonitorPage.css';
 
 const BASE_URL = import.meta.env.VITE_API_URL ?? '';
 
@@ -20,168 +21,182 @@ const KIND_INTENT: Record<string, Intent> = {
   SolutionBuild:  Intent.SUCCESS,
 };
 
-const STATUS_INTENT: Record<string, Intent> = {
-  Succeeded: Intent.SUCCESS,
-  Failed:    Intent.DANGER,
-  Running:   Intent.PRIMARY,
+const STATUS_COLOR: Record<string, string> = {
+  Succeeded: '#2d9e2d',
+  Failed:    '#c23030',
+  Running:   '#3d8bd4',
 };
 
-// ── Inline log viewer ─────────────────────────────────────────────────────────
+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 LogRow({ lines }: { lines: string[] }) {
+// SparkBar ------------------------------------------------------------------
+
+function SparkBar({ builds }: { builds: BuildRecord[] }) {
+  const bars = [...builds]
+    .sort((a, b) => new Date(a.startedAt).getTime() - new Date(b.startedAt).getTime())
+    .slice(-20);
+
+  if (bars.length === 0) return <span className="bm-spark-empty">no history</span>;
+
+  const W = 5, GAP = 2, H = 28;
+  return (
+    <svg width={bars.length * (W + GAP) - GAP} height={H} className="bm-spark">
+      {bars.map((b, i) => (
+        <rect key={b.id} x={i * (W + GAP)} y={0} width={W} height={H} rx={1}
+          fill={STATUS_COLOR[b.status] ?? '#c5cbd3'} />
+      ))}
+    </svg>
+  );
+}
+
+// LogViewer -----------------------------------------------------------------
+
+function LogViewer({ lines }: { lines: string[] }) {
   const ref = useRef<HTMLDivElement>(null);
   useEffect(() => { if (ref.current) ref.current.scrollTop = ref.current.scrollHeight; }, [lines]);
   return (
-    <tr>
-      <td colSpan={7} style={{ padding: 0 }}>
-        <div ref={ref} style={{
-          fontFamily: 'monospace', fontSize: '0.7rem',
-          background: '#111', color: '#d4d4d4',
-          padding: '0.5rem 0.75rem', maxHeight: 200, overflowY: 'auto',
-          whiteSpace: 'pre-wrap', wordBreak: 'break-all',
-        }}>
-          {lines.map((l, i) => <div key={i}>{l}</div>)}
-        </div>
-      </td>
-    </tr>
+    <div ref={ref} className="bm-log-viewer">
+      {lines.map((l, i) => <div key={i}>{l}</div>)}
+    </div>
   );
 }
 
-// ── Manual project row ────────────────────────────────────────────────────────
+// PipelineCard --------------------------------------------------------------
 
-function ProjectRow({
-  project, lastBuild, onBuilt,
-}: {
-  project:   ProjectDefinition;
-  lastBuild: BuildRecord | undefined;
-  onBuilt:   () => void;
-}) {
-  const [building, setBuilding] = useState(false);
-  const [logs,     setLogs]     = useState<string[]>([]);
-  const [open,     setOpen]     = useState(false);
-  const [error,    setError]    = useState<string | null>(null);
+interface PipelineCardProps {
+  name:        string;
+  kind:        string;
+  subtitle?:   string;
+  builds:      BuildRecord[];
+  onBuild?:    () => void;
+  building?:   boolean;
+  buildLogs?:  string[];
+  buildError?: string | null;
+}
 
-  const handleBuild = async () => {
-    setBuilding(true);
-    setOpen(true);
-    setLogs([]);
-    setError(null);
-    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) 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);
-    }
-  };
+function PipelineCard({ name, kind, subtitle, builds, onBuild, building, buildLogs, buildError }: PipelineCardProps) {
+  const [logsOpen, setLogsOpen] = useState(false);
 
-  const statusIntent = lastBuild ? STATUS_INTENT[lastBuild.status] : Intent.NONE;
-  const duration     = lastBuild?.durationMs != null ? `${(lastBuild.durationMs / 1000).toFixed(1)}s` : '—';
-  const lastRun      = lastBuild ? new Date(lastBuild.startedAt).toLocaleString() : '—';
+  const latest   = [...builds].sort((a, b) => new Date(b.startedAt).getTime() - new Date(a.startedAt).getTime())[0];
+  const dotColor = building
+    ? STATUS_COLOR.Running
+    : latest ? (STATUS_COLOR[latest.status] ?? '#c5cbd3') : '#c5cbd3';
+
+  useEffect(() => { if (building) setLogsOpen(true); }, [building]);
+
+  const statusText = building
+    ? 'Building...'
+    : latest ? `${latest.status} · ${timeAgo(latest.startedAt)}`
+    : 'Never built';
 
   return (
-    <>
-      <tr>
-        <td>
-          <span style={{ fontWeight: 600 }}>{project.name}</span>
-          <br />
-          <code style={{ fontSize: '0.68rem', color: '#8f99a8' }}>{project.relativePath}</code>
-        </td>
-        <td><Tag intent={KIND_INTENT[project.kind] ?? Intent.NONE} minimal round>{KIND_LABEL[project.kind] ?? project.kind}</Tag></td>
-        <td><Tag minimal round style={{ color: '#8f99a8' }}>manual</Tag></td>
-        <td><Tag intent={statusIntent} minimal round>{lastBuild?.status ?? 'Never'}</Tag></td>
-        <td style={{ color: '#8f99a8', fontSize: '0.8rem' }}>{lastRun}</td>
-        <td style={{ color: '#8f99a8', fontSize: '0.8rem', textAlign: 'right' }}>{duration}</td>
-        <td style={{ textAlign: 'right' }}>
-          <Button icon="play" small intent={Intent.PRIMARY} loading={building} onClick={handleBuild} text="Build" />
-          {logs.length > 0 && (
-            <Button minimal small icon={open ? 'chevron-up' : 'chevron-down'} onClick={() => setOpen((o) => !o)} style={{ marginLeft: 4 }} />
+    <div className="bm-pipeline-card">
+      <div className="bm-pipeline-card-top">
+        <div className="bm-pipeline-dot" style={{ background: dotColor }} />
+        <div className="bm-pipeline-info">
+          <span className="bm-pipeline-name">{name}</span>
+          {subtitle && <code className="bm-pipeline-sub">{subtitle}</code>}
+        </div>
+        <div className="bm-pipeline-card-actions">
+          <Tag minimal round intent={KIND_INTENT[kind] ?? Intent.NONE} style={{ fontSize: '0.65rem' }}>
+            {KIND_LABEL[kind] ?? kind}
+          </Tag>
+          {onBuild && (
+            <Button icon="play" small minimal intent={Intent.PRIMARY} loading={building} onClick={onBuild} />
           )}
-        </td>
-      </tr>
-      {error && (
-        <tr><td colSpan={7}><Callout intent={Intent.DANGER} compact>{error}</Callout></td></tr>
+        </div>
+      </div>
+
+      <div className="bm-pipeline-card-bottom">
+        <SparkBar builds={builds} />
+        <span className="bm-pipeline-status-text">{statusText}</span>
+      </div>
+
+      {buildLogs && buildLogs.length > 0 && (
+        <>
+          <div className="bm-pipeline-log-toggle">
+            <Button minimal small
+              icon={logsOpen ? 'chevron-up' : 'chevron-down'}
+              text={logsOpen ? 'Hide log' : 'Show log'}
+              onClick={() => setLogsOpen((o) => !o)} />
+          </div>
+          <Collapse isOpen={logsOpen} keepChildrenMounted>
+            <LogViewer lines={buildLogs} />
+          </Collapse>
+        </>
       )}
-      <Collapse isOpen={open && logs.length > 0} keepChildrenMounted>
-        <LogRow lines={logs} />
-      </Collapse>
-    </>
+
+      {buildError && (
+        <Callout intent={Intent.DANGER} compact style={{ marginTop: '0.4rem' }}>{buildError}</Callout>
+      )}
+    </div>
   );
 }
 
-// ── CI (SolutionBuild) row ───────────────────────────────────────────────────
+// RunRow --------------------------------------------------------------------
 
-function CiRow({ build, giteaBase }: { build: BuildRecord; giteaBase: string }) {
+function RunRow({ build, giteaBase }: { build: BuildRecord; giteaBase: string }) {
   const [open, setOpen] = useState(false);
 
-  const repo     = build.target.replace(/\.slnx?$/, '');  // "ControlPlane.slnx" → "ControlPlane"
-  const shortSha = build.commitSha?.slice(0, 7);
-  const shaUrl   = build.commitSha
+  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 lastRun  = new Date(build.startedAt).toLocaleString();
+  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 (
     <>
-      <tr>
-        <td>
-          <span style={{ fontWeight: 600 }}>{repo}</span>
-          <br />
-          <code style={{ fontSize: '0.68rem', color: '#8f99a8' }}>{build.target}</code>
-        </td>
-        <td><Tag intent={Intent.SUCCESS} minimal round>CI</Tag></td>
-        <td>
-          {shortSha && shaUrl ? (
-            <AnchorButton href={shaUrl} target="_blank" rel="noopener noreferrer" minimal small
-              style={{ fontFamily: 'monospace', fontSize: '0.72rem', padding: '0 4px' }}>
-              {shortSha}
-            </AnchorButton>
-          ) : <span style={{ color: '#8f99a8', fontSize: '0.8rem' }}>—</span>}
-        </td>
-        <td><Tag intent={STATUS_INTENT[build.status] ?? Intent.NONE} minimal round>{build.status}</Tag></td>
-        <td style={{ color: '#8f99a8', fontSize: '0.8rem' }}>{lastRun}</td>
-        <td style={{ color: '#8f99a8', fontSize: '0.8rem', textAlign: 'right' }}>{duration}</td>
-        <td style={{ textAlign: 'right' }}>
-          {build.log.length > 0 && (
-            <Button minimal small icon={open ? 'chevron-up' : 'chevron-down'} onClick={() => setOpen((o) => !o)} text={open ? 'Hide' : 'Log'} />
-          )}
-        </td>
-      </tr>
+      <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>
-        <LogRow lines={build.log} />
+        <div className="bm-run-log-panel">
+          <LogViewer lines={build.log} />
+        </div>
       </Collapse>
     </>
   );
 }
 
-// ── Page ──────────────────────────────────────────────────────────────────────
+// Page ----------------------------------------------------------------------
+
+interface ProjectBuildState {
+  building: boolean;
+  logs:     string[];
+  error:    string | null;
+}
 
 export default function BuildMonitorPage() {
-  const [projects, setProjects] = useState<ProjectDefinition[]>([]);
-  const [history,  setHistory]  = useState<BuildRecord[]>([]);
-  const [loading,  setLoading]  = useState(true);
-  const [error,    setError]    = useState<string | null>(null);
+  const [projects,    setProjects]    = useState<ProjectDefinition[]>([]);
+  const [history,     setHistory]     = useState<BuildRecord[]>([]);
+  const [loading,     setLoading]     = useState(true);
+  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';
 
@@ -201,27 +216,53 @@ export default function BuildMonitorPage() {
 
   useEffect(() => { load(); }, []);
 
-  // Latest SolutionBuild per solution target (one CI row per repo)
-  const ciBuilds = Object.values(
-    history
-      .filter((b) => b.kind === 'SolutionBuild')
-      .reduce<Record<string, BuildRecord>>((acc, b) => {
-        if (!acc[b.target] || new Date(b.startedAt) > new Date(acc[b.target].startedAt))
-          acc[b.target] = b;
-        return acc;
-      }, {})
-  );
+  const makeBuildHandler = (project: ProjectDefinition) => async () => {
+    setBuildStates((s) => ({ ...s, [project.name]: { building: true, logs: [], error: null } }));
+    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 } }));
+    }
+  };
 
-  // Latest manual build per project path
-  const lastBuildFor = (project: ProjectDefinition): BuildRecord | undefined =>
-    history.find((b) => b.target === project.relativePath);
+  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>CI gate builds (webhook-triggered) and manual per-project builds.</p>
+          <p>CI gate builds and manual per-project builds</p>
         </div>
         <Button icon="refresh" minimal onClick={load} loading={loading} title="Refresh" />
       </div>
@@ -233,30 +274,49 @@ export default function BuildMonitorPage() {
       {loading && <NonIdealState icon={<Spinner />} title="Loading..." />}
 
       {!loading && !error && (
-        <HTMLTable className="bp6-html-table-condensed bp6-html-table-striped" style={{ width: '100%' }}>
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Kind</th>
-              <th>Commit / Trigger</th>
-              <th>Status</th>
-              <th>Last Run</th>
-              <th style={{ textAlign: 'right' }}>Duration</th>
-              <th style={{ textAlign: 'right' }}>Actions</th>
-            </tr>
-          </thead>
-          <tbody>
-            {ciBuilds.map((b) => (
-              <CiRow key={`ci-${b.target}`} build={b} giteaBase={giteaBase} />
-            ))}
-            {projects.map((p) => (
-              <ProjectRow key={p.name} project={p} lastBuild={lastBuildFor(p)} onBuilt={load} />
-            ))}
-            {ciBuilds.length === 0 && projects.length === 0 && (
-              <tr><td colSpan={7} style={{ textAlign: 'center', color: '#8f99a8', padding: '2rem' }}>No builds yet.</td></tr>
+        <>
+          <p className="bm-section-title">Pipelines</p>
+          <div className="bm-pipeline-grid">
+            {ciTargets.map((target) => {
+              const repo = target.replace(/\.slnx?$/, '');
+              return (
+                <PipelineCard key={target}
+                  name={repo}
+                  kind="SolutionBuild"
+                  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>
             )}
-          </tbody>
-        </HTMLTable>
+          </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>
+            </>
+          )}
+        </>
       )}
     </>
   );