From 7ebfd0f15356eebd9d356b1066820974353a1bf6 Mon Sep 17 00:00:00 2001
From: Michael <michael.dombaugh@gmail.com>
Date: Mon, 8 Jun 2026 16:17:20 +0000
Subject: [PATCH] feat(layout-review): address Reconcile page review findings

- Fix doubled "Invert right amount sign" label: keep the field label,
  strip the checkbox caption to the box only (also evens the 3-up row).
- Reorder results exceptions-first: tabs and metric strip both run
  Review -> Unmatched left -> Unmatched right -> Matched, with Review
  the default active tab and its table as the inline content; Matched
  demoted to a trailing context expander.
- Surface the "references must match left count" rule with an inline
  validation indicator under the right reference field instead of a
  label note alone.
- Mark the required Amount join key with the .req accent star on both
  sides so it reads distinct from the optional date/description pickers.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 layout-review/11_reconciler.html | 71 ++++++++++++++++----------------
 1 file changed, 36 insertions(+), 35 deletions(-)

diff --git a/layout-review/11_reconciler.html b/layout-review/11_reconciler.html
index 311837e..a867b3e 100644
--- a/layout-review/11_reconciler.html
+++ b/layout-review/11_reconciler.html
@@ -105,7 +105,7 @@
           <h4 style="margin-top:0">Left columns</h4>
           <div class="dt-field"><label class="dt-label">Date column (optional)</label><div class="dt-select">posted_date</div></div>
           <div class="dt-field"><label class="dt-label">Description column (optional)</label><div class="dt-select">description</div></div>
-          <div class="dt-field"><label class="dt-label">Amount column</label><div class="dt-select">amount</div></div>
+          <div class="dt-field"><label class="dt-label">Amount column <span class="req">*</span></label><div class="dt-select">amount</div></div>
           <div class="dt-field"><label class="dt-label">Reference columns (optional, e.g. check / invoice no.)</label>
             <div class="dt-multiselect"><span class="dt-ms-chip">ref <span class="x">✕</span></span></div></div>
         </div>
@@ -114,9 +114,10 @@
           <h4 style="margin-top:0">Right columns</h4>
           <div class="dt-field"><label class="dt-label">Date column (optional)</label><div class="dt-select">txn_date</div></div>
           <div class="dt-field"><label class="dt-label">Description column (optional)</label><div class="dt-select">memo</div></div>
-          <div class="dt-field"><label class="dt-label">Amount column</label><div class="dt-select">value</div></div>
+          <div class="dt-field"><label class="dt-label">Amount column <span class="req">*</span></label><div class="dt-select">value</div></div>
           <div class="dt-field"><label class="dt-label">Reference columns (must match left count)</label>
-            <div class="dt-multiselect"><span class="dt-ms-chip">invoice_no <span class="x">✕</span></span></div></div>
+            <div class="dt-multiselect"><span class="dt-ms-chip">invoice_no <span class="x">✕</span></span></div>
+            <div class="dt-help-text" style="color:var(--success);display:flex;align-items:center;gap:5px"><span class="dt-mi" style="font-family:'Material Symbols Outlined';font-size:15px;line-height:1">check_circle</span> 1 reference each side — counts match</div></div>
         </div>
       </div>
 
@@ -132,7 +133,7 @@
               <div class="dt-input">1</div>
               <div class="dt-help-text">Allow N calendar days of drift between posting dates.</div></div>
             <div class="dt-field"><label class="dt-label">Invert right amount sign</label>
-              <div class="dt-check" style="margin-top:8px"><span class="box"></span> Invert right amount sign</div>
+              <div class="dt-check" style="margin-top:8px"><span class="box"></span></div>
               <div class="dt-help-text">Use when one side records debits as positive and the other as negative.</div></div>
           </div>
           <div class="dt-field"><label class="dt-label">Description similarity boost (0 disables)</label>
@@ -150,56 +151,34 @@
       <!-- Results -->
       <h2>Results</h2>
       <div class="dt-metrics">
-        <div class="dt-metric"><div class="label">Matched</div><div class="value">1,173</div></div>
         <div class="dt-metric"><div class="label">Review</div><div class="value">9</div></div>
         <div class="dt-metric"><div class="label">Unmatched left</div><div class="value">22</div></div>
         <div class="dt-metric"><div class="label">Unmatched right</div><div class="value">16</div></div>
+        <div class="dt-metric"><div class="label">Matched</div><div class="value">1,173</div></div>
       </div>
       <p class="dt-caption">Coverage: 97.4% of the larger side</p>
 
-      <!-- Tabs (st.tabs) — Matched active -->
+      <!-- Tabs (st.tabs) — exceptions-first; Review active by default -->
       <div class="dt-tabs">
-        <span class="dt-tab is-active">Matched (1,173)</span>
-        <span class="dt-tab">Review (9)</span>
+        <span class="dt-tab is-active">Review (9)</span>
         <span class="dt-tab">Unmatched left (22)</span>
         <span class="dt-tab">Unmatched right (16)</span>
+        <span class="dt-tab">Matched (1,173)</span>
       </div>
 
-      <!-- Matched tab content -->
-      <p class="dt-caption">Preview of first 25 of 1,173 rows — download the CSV below for the full set.</p>
+      <!-- Active tab content: Review (exceptions-first default) -->
+      <p class="dt-caption">Pairs flagged because the algorithm couldn't pick a single best match (e.g. multiple equally-good candidates). Use the left/right indices to disambiguate manually.</p>
       <div class="dt-table-wrap">
         <table class="dt-table">
-          <thead><tr>
-            <th>left_posted_date</th><th>left_description</th><th>left_amount</th>
-            <th>right_txn_date</th><th>right_memo</th><th>right_value</th><th>amount_diff</th>
-          </tr></thead>
+          <thead><tr><th>left_idx</th><th>left_amount</th><th>right_idx</th><th>right_value</th><th>candidates</th></tr></thead>
           <tbody>
-            <tr><td>2026-05-01</td><td>ACME SUPPLIES</td><td>-1240.00</td><td>2026-05-01</td><td>Acme Supplies Inc</td><td>-1240.00</td><td class="dt-cell-add">0.00</td></tr>
-            <tr><td>2026-05-02</td><td>PAYROLL RUN</td><td>-8800.00</td><td>2026-05-02</td><td>Monthly payroll</td><td>-8800.00</td><td class="dt-cell-add">0.00</td></tr>
-            <tr><td>2026-05-03</td><td>CLIENT GLOBEX</td><td>5200.00</td><td>2026-05-03</td><td>Globex retainer</td><td>5200.00</td><td class="dt-cell-add">0.00</td></tr>
-            <tr><td>2026-05-04</td><td>UTILITY CO</td><td>-318.42</td><td>2026-05-04</td><td>City Utilities</td><td>-318.40</td><td class="dt-cell-flag">0.02</td></tr>
-            <tr><td>2026-05-06</td><td>OFFICE DEPOT</td><td>-89.15</td><td>2026-05-07</td><td>Office supplies</td><td>-89.15</td><td class="dt-cell-add">0.00</td></tr>
+            <tr><td>118</td><td>-450.00</td><td>121, 209</td><td>-450.00</td><td class="dt-cell-flag">2 equal</td></tr>
+            <tr><td>203</td><td>1000.00</td><td>198, 244</td><td>1000.00</td><td class="dt-cell-flag">2 equal</td></tr>
           </tbody>
         </table>
       </div>
 
       <!-- Other tab previews shown as collapsed expanders for review context -->
-      <details class="dt-expander">
-        <summary>Review (9) — ambiguous candidates</summary>
-        <div class="dt-expander-body">
-          <p class="dt-caption">Pairs flagged because the algorithm couldn't pick a single best match (e.g. multiple equally-good candidates). Use the left/right indices to disambiguate manually.</p>
-          <div class="dt-table-wrap">
-            <table class="dt-table">
-              <thead><tr><th>left_idx</th><th>left_amount</th><th>right_idx</th><th>right_value</th><th>candidates</th></tr></thead>
-              <tbody>
-                <tr><td>118</td><td>-450.00</td><td>121, 209</td><td>-450.00</td><td class="dt-cell-flag">2 equal</td></tr>
-                <tr><td>203</td><td>1000.00</td><td>198, 244</td><td>1000.00</td><td class="dt-cell-flag">2 equal</td></tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </details>
-
       <details class="dt-expander">
         <summary>Unmatched left (22) — only in bank_feed_may.csv</summary>
         <div class="dt-expander-body">
@@ -232,6 +211,28 @@
         </div>
       </details>
 
+      <details class="dt-expander">
+        <summary>Matched (1,173) — cleanly reconciled</summary>
+        <div class="dt-expander-body">
+          <p class="dt-caption">Preview of first 25 of 1,173 rows — download the CSV below for the full set.</p>
+          <div class="dt-table-wrap">
+            <table class="dt-table">
+              <thead><tr>
+                <th>left_posted_date</th><th>left_description</th><th>left_amount</th>
+                <th>right_txn_date</th><th>right_memo</th><th>right_value</th><th>amount_diff</th>
+              </tr></thead>
+              <tbody>
+                <tr><td>2026-05-01</td><td>ACME SUPPLIES</td><td>-1240.00</td><td>2026-05-01</td><td>Acme Supplies Inc</td><td>-1240.00</td><td class="dt-cell-add">0.00</td></tr>
+                <tr><td>2026-05-02</td><td>PAYROLL RUN</td><td>-8800.00</td><td>2026-05-02</td><td>Monthly payroll</td><td>-8800.00</td><td class="dt-cell-add">0.00</td></tr>
+                <tr><td>2026-05-03</td><td>CLIENT GLOBEX</td><td>5200.00</td><td>2026-05-03</td><td>Globex retainer</td><td>5200.00</td><td class="dt-cell-add">0.00</td></tr>
+                <tr><td>2026-05-04</td><td>UTILITY CO</td><td>-318.42</td><td>2026-05-04</td><td>City Utilities</td><td>-318.40</td><td class="dt-cell-flag">0.02</td></tr>
+                <tr><td>2026-05-06</td><td>OFFICE DEPOT</td><td>-89.15</td><td>2026-05-07</td><td>Office supplies</td><td>-89.15</td><td class="dt-cell-add">0.00</td></tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </details>
+
       <hr class="dt-divider">
 
       <!-- Downloads (st.columns(4) of html_download_button) -->