Polish workbench action controls

Author: xiangtinghe616-blip

CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 2026-05-28 — Next.js Workbench Visual Polish Pass 1
+
+### Changed
+
+- Refined workbench action controls with shared button sizing and styling.
+- Added a clearer action workflow label above the action controls.
+- Applied more consistent styling to candidate decision buttons.
+- Preserved existing queue filters, break selection, evidence comparison, drill-down panels, and structured action workflow behavior.
+
+### Design Notes
+
+- This milestone improves visual consistency without changing reconciliation logic.
+- The Action Panel is moving toward a more controlled financial operations workflow style.
+- Further visual polish is still needed for panel density, header hierarchy, and Salt-aligned components.
+
 ## 2026-05-28 — Next.js Queue Productivity Milestone
 
 ### Changed

frontend/components/BreakResolutionWorkbench.tsx

@@ -77,6 +77,22 @@ const fallbackWorkbenchData: WorkbenchData = {
   breakPacketsByExceptionId: {},
 };
 
+const actionButtonStyle = {
+  width: "100%",
+  minHeight: "44px",
+  borderRadius: "14px",
+  fontWeight: 800,
+  letterSpacing: "0.01em",
+} as const;
+
+const candidateButtonStyle = {
+  width: "100%",
+  minHeight: "36px",
+  borderRadius: "12px",
+  fontSize: "12px",
+  fontWeight: 800,
+} as const;
+
 function hasRelatedCandidate(
   exceptionId: string,
   candidatesByExceptionId: Record<string, Candidate[]>,
@@ -609,20 +625,23 @@ function CandidateCard({
           sentiment="neutral"
           appearance="bordered"
           onClick={() => onDecision("Review")}
+          style={candidateButtonStyle}
         >
           Review
         </Button>
         <Button
           sentiment="accented"
           appearance="solid"
           onClick={() => onDecision("Accept")}
+          style={candidateButtonStyle}
         >
           Accept
         </Button>
         <Button
           sentiment="neutral"
           appearance="bordered"
           onClick={() => onDecision("Reject")}
+          style={candidateButtonStyle}
         >
           Reject
         </Button>
@@ -1079,7 +1098,11 @@ export default function BreakResolutionWorkbench() {
               <p className="mt-2 text-sm leading-6 text-red-700">{displayedReason}</p>
             </div>
 
-            <div className="mt-5 space-y-3">
+            <div className="mt-5">
+              <div className="mb-2 text-xs font-bold uppercase tracking-[0.16em] text-slate-500">
+                Stage analyst action
+              </div>
+              <div className="space-y-3">
               <Button
                 sentiment="accented"
                 appearance="solid"
@@ -1089,7 +1112,7 @@ export default function BreakResolutionWorkbench() {
                   setAnalystNote("");
                   setDecisionTimestamp(new Date().toISOString());
                 }}
-                style={{ width: "100%" }}
+                style={actionButtonStyle}
               >
                 Stage recommendation
               </Button>
@@ -1102,7 +1125,7 @@ export default function BreakResolutionWorkbench() {
                   setAnalystNote("");
                   setDecisionTimestamp(new Date().toISOString());
                 }}
-                style={{ width: "100%" }}
+                style={actionButtonStyle}
               >
                 Reject recommendation
               </Button>
@@ -1115,7 +1138,7 @@ export default function BreakResolutionWorkbench() {
                   setAnalystNote("");
                   setDecisionTimestamp(new Date().toISOString());
                 }}
-                style={{ width: "100%" }}
+                style={actionButtonStyle}
               >
                 Request information
               </Button>
@@ -1128,10 +1151,11 @@ export default function BreakResolutionWorkbench() {
                   setAnalystNote("");
                   setDecisionTimestamp(new Date().toISOString());
                 }}
-                style={{ width: "100%" }}
+                style={actionButtonStyle}
               >
                 Add analyst note
               </Button>
+              </div>
             </div>
 
             <div className="mt-5 rounded-2xl bg-slate-50 p-4 text-sm leading-6 text-slate-600">