From b46a99a3a16412c26d8868921d0bc25f4a68495e Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Sun, 7 Dec 2025 21:05:56 -0600
Subject: [PATCH] refactor(practice): remove part instruction banner
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The part type is already shown in the HUD - redundant banner removed.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../src/components/practice/ActiveSession.tsx | 48 -------------------
 1 file changed, 48 deletions(-)

diff --git a/apps/web/src/components/practice/ActiveSession.tsx b/apps/web/src/components/practice/ActiveSession.tsx
index 6058a148..b8fadc24 100644
--- a/apps/web/src/components/practice/ActiveSession.tsx
+++ b/apps/web/src/components/practice/ActiveSession.tsx
@@ -81,33 +81,6 @@ function getPartTypeEmoji(type: SessionPart['type']): string {
   }
 }
 
-/**
- * Get part type colors (dark mode aware)
- */
-function getPartTypeColors(
-  type: SessionPart['type'],
-  isDark: boolean
-): {
-  bg: string
-  border: string
-  text: string
-} {
-  switch (type) {
-    case 'abacus':
-      return isDark
-        ? { bg: 'blue.900', border: 'blue.700', text: 'blue.200' }
-        : { bg: 'blue.50', border: 'blue.200', text: 'blue.700' }
-    case 'visualization':
-      return isDark
-        ? { bg: 'purple.900', border: 'purple.700', text: 'purple.200' }
-        : { bg: 'purple.50', border: 'purple.200', text: 'purple.700' }
-    case 'linear':
-      return isDark
-        ? { bg: 'orange.900', border: 'orange.700', text: 'orange.200' }
-        : { bg: 'orange.50', border: 'orange.200', text: 'orange.700' }
-  }
-}
-
 /**
  * Linear problem display component for Part 3
  */
@@ -717,8 +690,6 @@ export function ActiveSession({
     )
   }
 
-  const partColors = getPartTypeColors(currentPart.type, isDark)
-
   return (
     <div
       data-component="active-session"
@@ -937,25 +908,6 @@ export function ActiveSession({
         </div>
       </div>
 
-      {/* Part instruction banner - brief contextual hint */}
-      <div
-        data-element="part-instruction"
-        className={css({
-          padding: '0.5rem 1rem',
-          backgroundColor: partColors.bg,
-          borderRadius: '8px',
-          border: '1px solid',
-          borderColor: partColors.border,
-          textAlign: 'center',
-          fontSize: '0.875rem',
-          color: partColors.text,
-        })}
-      >
-        {currentPart.type === 'abacus' && '🧮 Use your physical abacus'}
-        {currentPart.type === 'visualization' && '🧠 Picture the beads moving in your mind'}
-        {currentPart.type === 'linear' && '💭 Calculate the answer mentally'}
-      </div>
-
       {/* Problem display */}
       <div
         data-section="problem-area"