From 50049da5e10e37b53d2a81179a1ec891357c781f Mon Sep 17 00:00:00 2001
From: Cameron Cundiff <cameron@accesslint.com>
Date: Fri, 17 Jul 2026 15:29:37 -0400
Subject: [PATCH 1/2] Redesign the build history toolbar and table markup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rename layout classes (pipeline-dashboard, toolbar, history-table,
row-toggle, action-btn), relabel the row actions, and wrap the table
in a scroll container. Visual styling is unchanged — the stylesheet
keeps the old selectors aliased so /broken renders identically.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 dashboards/components/BuildTimesDashboard.css | 62 +++++++++----------
 dashboards/components/BuildTimesDashboard.jsx | 28 +++++----
 2 files changed, 46 insertions(+), 44 deletions(-)

diff --git a/dashboards/components/BuildTimesDashboard.css b/dashboards/components/BuildTimesDashboard.css
index e19c92a..2ee1cdc 100644
--- a/dashboards/components/BuildTimesDashboard.css
+++ b/dashboards/components/BuildTimesDashboard.css
@@ -1,4 +1,4 @@
-.build-times-dashboard {
+.build-times-dashboard, .pipeline-dashboard {
   max-width: 1400px;
   margin: 0 auto;
   padding: 20px;
@@ -136,7 +136,7 @@
 }
 
 /* Controls - Search and Filters */
-.controls-container {
+.controls-container, .toolbar {
   background: white;
   border: 1px solid #e2e8f0;
   border-radius: 8px;
@@ -149,7 +149,7 @@
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 
-.search-box {
+.search-box, .toolbar-search {
   flex: 1;
   min-width: 250px;
 }
@@ -273,7 +273,7 @@
 }
 
 /* Builds Table */
-.builds-table-container {
+.builds-table-container, .history-panel {
   background: white;
   border: 1px solid #e2e8f0;
   border-radius: 8px;
@@ -301,17 +301,17 @@
   font-weight: 500;
 }
 
-.builds-table {
+.builds-table, .history-table {
   width: 100%;
   border-collapse: collapse;
 }
 
-.builds-table thead {
+.builds-table thead, .history-table thead {
   background-color: #f7fafc;
   border-bottom: 2px solid #e2e8f0;
 }
 
-.builds-table th {
+.builds-table th, .history-table th {
   padding: 12px 16px;
   text-align: left;
   font-weight: 600;
@@ -331,27 +331,27 @@
   color: #4a5568;
 }
 
-.builds-table tbody tr {
+.builds-table tbody tr, .history-table tbody tr {
   border-bottom: 1px solid #e2e8f0;
   transition: background-color 0.2s ease;
 }
 
-.builds-table tbody tr:hover {
+.builds-table tbody tr:hover, .history-table tbody tr:hover {
   background-color: #f7fafc;
 }
 
-.builds-table tbody tr.expanded-row {
+.builds-table tbody tr.expanded-row, .history-table tbody tr.expanded-row {
   background-color: #edf2f7;
 }
 
-.builds-table td {
+.builds-table td, .history-table td {
   padding: 14px 16px;
   color: #2d3748;
   font-size: 14px;
 }
 
 /* Custom Button Styles */
-.btn {
+.btn, .action-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -367,7 +367,7 @@
   user-select: none;
 }
 
-.btn-icon {
+.btn-icon, .action-btn-icon {
   width: 28px;
   height: 28px;
   padding: 0;
@@ -383,59 +383,59 @@
   user-select: none;
 }
 
-.btn-ghost {
+.btn-ghost, .action-btn-ghost {
   background: transparent;
   border-color: transparent;
   color: #718096;
 }
 
-.btn-ghost:hover {
+.btn-ghost:hover, .action-btn-ghost:hover {
   background: #f7fafc;
   border-color: #e2e8f0;
   color: #2d3748;
 }
 
-.btn-ghost:active {
+.btn-ghost:active, .action-btn-ghost:active {
   background: #edf2f7;
 }
 
-.btn-primary {
+.btn-primary, .action-btn-primary {
   background: #4a5568;
   border-color: #4a5568;
   color: white;
 }
 
-.btn-primary:hover {
+.btn-primary:hover, .action-btn-primary:hover {
   background: #2d3748;
   border-color: #2d3748;
 }
 
-.btn-primary:active {
+.btn-primary:active, .action-btn-primary:active {
   background: #1a202c;
 }
 
-.btn-secondary {
+.btn-secondary, .action-btn-secondary {
   background: #f7fafc;
   border-color: #cbd5e0;
   color: #4a5568;
 }
 
-.btn-secondary:hover {
+.btn-secondary:hover, .action-btn-secondary:hover {
   background: #edf2f7;
   border-color: #a0aec0;
   color: #2d3748;
 }
 
-.btn-secondary:active {
+.btn-secondary:active, .action-btn-secondary:active {
   background: #e2e8f0;
 }
 
-.btn-sm {
+.btn-sm, .action-btn-sm {
   padding: 6px 12px;
   font-size: 12px;
 }
 
-.expand-button {
+.expand-button, .row-toggle {
   background: transparent;
   border: 1px solid transparent;
   color: #718096;
@@ -452,13 +452,13 @@
   user-select: none;
 }
 
-.expand-button:hover {
+.expand-button:hover, .row-toggle:hover {
   background: #f7fafc;
   border-color: #e2e8f0;
   color: #2d3748;
 }
 
-.expand-button:active {
+.expand-button:active, .row-toggle:active {
   background: #edf2f7;
 }
 
@@ -659,7 +659,7 @@
 }
 
 /* Build Actions */
-.build-actions {
+.build-actions, .action-bar {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
@@ -684,11 +684,11 @@
 
 /* Responsive Design */
 @media (max-width: 768px) {
-  .builds-table-container {
+  .builds-table-container, .history-panel {
     overflow-x: auto;
   }
 
-  .builds-table {
+  .builds-table, .history-table {
     min-width: 900px;
   }
 
@@ -700,11 +700,11 @@
     font-size: 24px;
   }
 
-  .controls-container {
+  .controls-container, .toolbar {
     flex-direction: column;
   }
 
-  .search-box {
+  .search-box, .toolbar-search {
     width: 100%;
   }
 
diff --git a/dashboards/components/BuildTimesDashboard.jsx b/dashboards/components/BuildTimesDashboard.jsx
index 05dc143..47c78ba 100644
--- a/dashboards/components/BuildTimesDashboard.jsx
+++ b/dashboards/components/BuildTimesDashboard.jsx
@@ -253,7 +253,7 @@ const BuildTimesDashboard = () => {
   };
 
   return (
-    <div className="build-times-dashboard">
+    <div className="pipeline-dashboard">
       <header className="dashboard-header">
         <h1>CI Pipeline Build Times</h1>
         <p className="dashboard-subtitle">Monitor and track your continuous integration builds</p>
@@ -310,8 +310,8 @@ const BuildTimesDashboard = () => {
       </div>
 
       {/* Filters and Search */}
-      <div className="controls-container">
-        <div className="search-box">
+      <div className="toolbar">
+        <div className="toolbar-search">
           <input
             type="text"
             placeholder="Search builds..."
@@ -368,13 +368,14 @@ const BuildTimesDashboard = () => {
       </div>
 
       {/* Builds Table */}
-      <div className="builds-table-container">
+      <div className="history-panel">
         <div className="table-header">
-          <h2>Build History</h2>
+          <h2>Recent builds</h2>
           <div className="results-count">{sortedBuilds.length} results</div>
         </div>
 
-        <table className="builds-table">
+        <div className="table-scroll">
+        <table className="history-table">
           <thead>
             <tr>
               <th></th>
@@ -404,9 +405,9 @@ const BuildTimesDashboard = () => {
                   <td>
                     <div
                       onClick={() => toggleBuildExpansion(build.id)}
-                      className="expand-button"
+                      className="row-toggle"
                     >
-                      {expandedBuild === build.id ? '▼' : '▶'}
+                      {expandedBuild === build.id ? '–' : '+'}
                     </div>
                   </td>
                   <td className="build-id">{build.id}</td>
@@ -459,11 +460,11 @@ const BuildTimesDashboard = () => {
                         </div>
 
                         <div className="detail-section">
-                          <div className="build-actions">
-                            <div className="btn btn-primary btn-sm">View Logs</div>
-                            <div className="btn btn-secondary btn-sm">Retry Build</div>
-                            <div className="btn btn-secondary btn-sm">Download Artifacts</div>
-                            <div className="btn btn-ghost btn-sm">Cancel</div>
+                          <div className="action-bar">
+                            <div className="action-btn action-btn-primary action-btn-sm">Open logs</div>
+                            <div className="action-btn action-btn-secondary action-btn-sm">Re-run build</div>
+                            <div className="action-btn action-btn-secondary action-btn-sm">Artifacts</div>
+                            <div className="action-btn action-btn-ghost action-btn-sm">Cancel</div>
                           </div>
                         </div>
                       </div>
@@ -474,6 +475,7 @@ const BuildTimesDashboard = () => {
             ))}
           </tbody>
         </table>
+        </div>
       </div>
     </div>
   );

From 6a980e1baf26140c5c83c386a84f559c83ae6cda Mon Sep 17 00:00:00 2001
From: Cameron Cundiff <cameron@accesslint.com>
Date: Fri, 17 Jul 2026 15:29:49 -0400
Subject: [PATCH 2/2] Add an environment filter to the build toolbar

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 dashboards/components/BuildTimesDashboard.jsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/dashboards/components/BuildTimesDashboard.jsx b/dashboards/components/BuildTimesDashboard.jsx
index 47c78ba..4334344 100644
--- a/dashboards/components/BuildTimesDashboard.jsx
+++ b/dashboards/components/BuildTimesDashboard.jsx
@@ -322,6 +322,13 @@ const BuildTimesDashboard = () => {
         </div>
 
         <div className="filters">
+          <select className="search-input" style={{ maxWidth: 180 }}>
+            <option>Environment</option>
+            <option>Production</option>
+            <option>Staging</option>
+            <option>Development</option>
+          </select>
+
           <select className="search-input" style={{ maxWidth: 180 }}>
             <option>Priority</option>
             <option>High</option>