From 8245ae52e2330771eafdd5dc3d9c3ac815bcd756 Mon Sep 17 00:00:00 2001
From: DJP <DJP>
Date: Thu, 9 Apr 2026 15:28:20 -0400
Subject: [PATCH] Move tier mapping to Upload tab, add S/M/L presets, remove
 expand button

- Tier mapping now on Upload tab (set BEFORE matching, not after)
- Added presets: S/M/L, Small/Medium/Large
- Full preset list: None, A/B/C, 1/2/3, S/M/L, Small/Med/Large, Gold/Silver/Bronze
- "None" button to clear tier mapping
- Removed "Expand to Tiers" button from Match Review (redundant)
- Helper text explains to set tiers before matching
- Matching uses pre-set tiers to pick correct GMAL complexity variant

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/pages/ProjectView.tsx | 65 +++++++++++++++++-------------
 1 file changed, 37 insertions(+), 28 deletions(-)

diff --git a/frontend/src/pages/ProjectView.tsx b/frontend/src/pages/ProjectView.tsx
index 322495b..e53eb44 100644
--- a/frontend/src/pages/ProjectView.tsx
+++ b/frontend/src/pages/ProjectView.tsx
@@ -323,6 +323,16 @@ export default function ProjectView() {
       {label: 'Silver', complexity: 'medium'},
       {label: 'Bronze', complexity: 'simple'},
     ],
+    'sml': [
+      {label: 'S', complexity: 'simple'},
+      {label: 'M', complexity: 'medium'},
+      {label: 'L', complexity: 'complex'},
+    ],
+    'small_med_large': [
+      {label: 'Small', complexity: 'simple'},
+      {label: 'Medium', complexity: 'medium'},
+      {label: 'Large', complexity: 'complex'},
+    ],
   };
 
   async function saveTierMapping(tiers: Array<{label: string, complexity: string}>) {
@@ -505,6 +515,33 @@ export default function ProjectView() {
             )}
           </div>
 
+          {/* Tier Mapping - set BEFORE matching */}
+          <div className="tier-mapping-box" style={{ marginTop: 20 }}>
+            <div className="tier-mapping-header">
+              <span className="efficiency-label">Client Tier Mapping (optional):</span>
+              <div className="efficiency-buttons">
+                <button onClick={() => { setTierPreset(''); saveTierMapping([]); }} className={`eff-btn ${tierMapping.tiers.length === 0 ? 'eff-btn-active' : ''}`}>None</button>
+                <button onClick={() => applyTierPreset('abc')} className={`eff-btn ${tierPreset === 'abc' ? 'eff-btn-active' : ''}`}>A/B/C</button>
+                <button onClick={() => applyTierPreset('123')} className={`eff-btn ${tierPreset === '123' ? 'eff-btn-active' : ''}`}>1/2/3</button>
+                <button onClick={() => applyTierPreset('sml')} className={`eff-btn ${tierPreset === 'sml' ? 'eff-btn-active' : ''}`}>S/M/L</button>
+                <button onClick={() => applyTierPreset('small_med_large')} className={`eff-btn ${tierPreset === 'small_med_large' ? 'eff-btn-active' : ''}`}>Small/Med/Large</button>
+                <button onClick={() => applyTierPreset('gsb')} className={`eff-btn ${tierPreset === 'gsb' ? 'eff-btn-active' : ''}`}>Gold/Silver/Bronze</button>
+              </div>
+            </div>
+            {tierMapping.tiers.length > 0 && (
+              <div className="tier-tags">
+                {tierMapping.tiers.map((t, i) => (
+                  <span key={i} className="tier-tag">
+                    <strong>{t.label}</strong> → {t.complexity}
+                  </span>
+                ))}
+              </div>
+            )}
+            <div style={{ fontSize: 12, color: 'var(--color-text-muted)', marginTop: 8 }}>
+              Set this before running AI matching. The AI will extract tier labels from the client document and match each to the correct GMAL complexity variant.
+            </div>
+          </div>
+
           {assets.length > 0 && (
             <div className="assets-section">
               <h3 className="section-title">Extracted Assets ({assets.length})</h3>
@@ -666,34 +703,6 @@ export default function ProjectView() {
             )}
           </div>
 
-          {/* Tier Mapping */}
-          {matches.length > 0 && !matching && (
-            <div className="tier-mapping-box">
-              <div className="tier-mapping-header">
-                <span className="efficiency-label">Client Tier Mapping:</span>
-                <div className="efficiency-buttons">
-                  <button onClick={() => applyTierPreset('abc')} className={`eff-btn ${tierPreset === 'abc' ? 'eff-btn-active' : ''}`}>A/B/C</button>
-                  <button onClick={() => applyTierPreset('123')} className={`eff-btn ${tierPreset === '123' ? 'eff-btn-active' : ''}`}>1/2/3</button>
-                  <button onClick={() => applyTierPreset('gsb')} className={`eff-btn ${tierPreset === 'gsb' ? 'eff-btn-active' : ''}`}>Gold/Silver/Bronze</button>
-                </div>
-                {tierMapping.tiers.length > 0 && (
-                  <button onClick={handleExpandTiers} disabled={expanding} className="btn btn-primary btn-sm" style={{ marginLeft: 12 }}>
-                    {expanding ? 'Expanding...' : `Expand to ${tierMapping.tiers.length} Tiers`}
-                  </button>
-                )}
-              </div>
-              {tierMapping.tiers.length > 0 && (
-                <div className="tier-tags">
-                  {tierMapping.tiers.map((t, i) => (
-                    <span key={i} className="tier-tag">
-                      <strong>{t.label}</strong> → {t.complexity}
-                    </span>
-                  ))}
-                </div>
-              )}
-            </div>
-          )}
-
           {matches.length > 0 && !matching && (
             <div className="refine-box">
               <div className="refine-log">