diff --git a/dashboard/habits.html b/dashboard/habits.html
index aec0859..8b41432 100644
--- a/dashboard/habits.html
+++ b/dashboard/habits.html
@@ -522,6 +522,74 @@
         .toast.error svg {
             color: var(--error);
         }
+        
+        /* Pulse animation */
+        @keyframes pulse {
+            0%, 100% {
+                transform: scale(1);
+            }
+            50% {
+                transform: scale(1.05);
+            }
+        }
+        
+        .pulse {
+            animation: pulse 0.5s ease-in-out;
+        }
+        
+        /* Check-in detail modal */
+        .checkin-modal {
+            max-width: 400px;
+        }
+        
+        .rating-stars {
+            display: flex;
+            gap: var(--space-2);
+            justify-content: center;
+            margin: var(--space-3) 0;
+        }
+        
+        .rating-star {
+            font-size: 32px;
+            cursor: pointer;
+            transition: all var(--transition-base);
+            opacity: 0.3;
+        }
+        
+        .rating-star.active {
+            opacity: 1;
+        }
+        
+        .rating-star:hover {
+            transform: scale(1.2);
+            opacity: 0.8;
+        }
+        
+        .mood-buttons {
+            display: flex;
+            gap: var(--space-3);
+            justify-content: center;
+            margin: var(--space-3) 0;
+        }
+        
+        .mood-btn {
+            font-size: 32px;
+            cursor: pointer;
+            padding: var(--space-2);
+            border: 2px solid transparent;
+            border-radius: var(--radius-md);
+            transition: all var(--transition-base);
+            background: none;
+        }
+        
+        .mood-btn:hover {
+            transform: scale(1.1);
+        }
+        
+        .mood-btn.selected {
+            border-color: var(--accent);
+            background: var(--accent-muted);
+        }
     </style>
 </head>
 <body>
@@ -659,6 +727,53 @@
         </div>
     </div>
 
+    <!-- Check-in Detail Modal -->
+    <div id="checkinModal" class="modal-overlay">
+        <div class="modal checkin-modal">
+            <div class="modal-header">
+                <h2 class="modal-title">Check-In Details</h2>
+                <button class="modal-close" onclick="closeCheckinModal()">
+                    <i data-lucide="x"></i>
+                </button>
+            </div>
+            <div class="modal-body">
+                <!-- Note -->
+                <div class="form-field">
+                    <label class="form-label" for="checkinNote">Note (optional)</label>
+                    <textarea id="checkinNote" class="form-textarea" placeholder="How did it go?"></textarea>
+                </div>
+                
+                <!-- Rating -->
+                <div class="form-field">
+                    <label class="form-label">Rating (optional)</label>
+                    <div class="rating-stars" id="ratingStars">
+                        <span class="rating-star" data-rating="1" onclick="selectRating(1)">⭐</span>
+                        <span class="rating-star" data-rating="2" onclick="selectRating(2)">⭐</span>
+                        <span class="rating-star" data-rating="3" onclick="selectRating(3)">⭐</span>
+                        <span class="rating-star" data-rating="4" onclick="selectRating(4)">⭐</span>
+                        <span class="rating-star" data-rating="5" onclick="selectRating(5)">⭐</span>
+                    </div>
+                </div>
+                
+                <!-- Mood -->
+                <div class="form-field">
+                    <label class="form-label">Mood (optional)</label>
+                    <div class="mood-buttons">
+                        <button class="mood-btn" data-mood="happy" onclick="selectMood('happy')">😊</button>
+                        <button class="mood-btn" data-mood="neutral" onclick="selectMood('neutral')">😐</button>
+                        <button class="mood-btn" data-mood="sad" onclick="selectMood('sad')">😞</button>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn" onclick="closeCheckinModal()">Cancel</button>
+                <button type="submit" class="btn btn-primary" id="submitCheckinBtn" onclick="submitCheckInDetail()">
+                    Done!
+                </button>
+            </div>
+        </div>
+    </div>
+
     <script>
         // Theme management
         function initTheme() {
@@ -722,6 +837,26 @@
             const habitsHtml = habits.map(habit => renderHabitCard(habit)).join('');
             container.innerHTML = `<div class="habits-grid">${habitsHtml}</div>`;
             lucide.createIcons();
+            
+            // Attach event handlers to check-in buttons
+            habits.forEach(habit => {
+                if (!isCheckedToday(habit)) {
+                    const btn = document.getElementById(`checkin-btn-${habit.id}`);
+                    if (btn) {
+                        // Right-click to open detail modal
+                        btn.addEventListener('contextmenu', (e) => handleCheckInButtonPress(habit.id, e, true));
+                        
+                        // Mouse/touch events for long-press detection
+                        btn.addEventListener('mousedown', (e) => handleCheckInButtonPress(habit.id, e, true));
+                        btn.addEventListener('mouseup', (e) => handleCheckInButtonRelease(habit.id, e));
+                        btn.addEventListener('mouseleave', () => handleCheckInButtonCancel());
+                        
+                        btn.addEventListener('touchstart', (e) => handleCheckInButtonPress(habit.id, e, false));
+                        btn.addEventListener('touchend', (e) => handleCheckInButtonRelease(habit.id, e));
+                        btn.addEventListener('touchcancel', () => handleCheckInButtonCancel());
+                    }
+                }
+            });
         }
         
         // Render single habit card
@@ -757,7 +892,7 @@
                     
                     <button 
                         class="habit-card-check-btn" 
-                        onclick="checkInHabit('${habit.id}')"
+                        id="checkin-btn-${habit.id}"
                         ${isDoneToday ? 'disabled' : ''}
                     >
                         ${isDoneToday ? '✓ Done today' : 'Check In'}
@@ -897,6 +1032,11 @@
             if (e.target === modal) {
                 closeHabitModal();
             }
+            
+            const checkinModal = document.getElementById('checkinModal');
+            if (e.target === checkinModal) {
+                closeCheckinModal();
+            }
         });
         
         // Initialize color picker
@@ -1201,9 +1341,209 @@
             alert('Delete functionality - coming in next story!');
         }
         
-        // Check in habit (placeholder)
-        async function checkInHabit(habitId) {
-            alert('Check-in functionality - coming in next story!');
+        // Check-in state
+        let checkInHabitId = null;
+        let checkInRating = null;
+        let checkInMood = null;
+        let longPressTimer = null;
+        
+        // Check in habit (simple click)
+        async function checkInHabit(habitId, event) {
+            // Prevent simple check-in if this was triggered during long-press detection
+            if (event && event.type === 'mousedown') {
+                return; // Let the long-press handler deal with it
+            }
+            
+            try {
+                const response = await fetch(`/echo/api/habits/${habitId}/check`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({})
+                });
+                
+                if (!response.ok) {
+                    const error = await response.json();
+                    throw new Error(error.error || `HTTP ${response.status}`);
+                }
+                
+                const updatedHabit = await response.json();
+                
+                // Show success toast with streak
+                showToast(`Habit checked! 🔥 Streak: ${updatedHabit.streak?.current || 0}`, 'success');
+                
+                // Refresh habits list
+                await loadHabits();
+                
+                // Add pulse animation to the updated card
+                setTimeout(() => {
+                    const card = event?.target?.closest('.habit-card');
+                    if (card) {
+                        card.classList.add('pulse');
+                        setTimeout(() => card.classList.remove('pulse'), 500);
+                    }
+                }, 100);
+                
+            } catch (error) {
+                console.error('Failed to check in:', error);
+                showToast('Failed to check in: ' + error.message, 'error');
+            }
+        }
+        
+        // Show check-in detail modal
+        function showCheckInDetailModal(habitId) {
+            checkInHabitId = habitId;
+            checkInRating = null;
+            checkInMood = null;
+            
+            // Reset form
+            document.getElementById('checkinNote').value = '';
+            
+            // Reset rating stars
+            document.querySelectorAll('.rating-star').forEach(star => {
+                star.classList.remove('active');
+            });
+            
+            // Reset mood buttons
+            document.querySelectorAll('.mood-btn').forEach(btn => {
+                btn.classList.remove('selected');
+            });
+            
+            // Show modal
+            const modal = document.getElementById('checkinModal');
+            modal.classList.add('active');
+            lucide.createIcons();
+        }
+        
+        // Close check-in detail modal
+        function closeCheckinModal() {
+            const modal = document.getElementById('checkinModal');
+            modal.classList.remove('active');
+            checkInHabitId = null;
+            checkInRating = null;
+            checkInMood = null;
+        }
+        
+        // Select rating
+        function selectRating(rating) {
+            checkInRating = rating;
+            
+            // Update star display
+            document.querySelectorAll('.rating-star').forEach((star, index) => {
+                if (index < rating) {
+                    star.classList.add('active');
+                } else {
+                    star.classList.remove('active');
+                }
+            });
+        }
+        
+        // Select mood
+        function selectMood(mood) {
+            checkInMood = mood;
+            
+            // Update mood button display
+            document.querySelectorAll('.mood-btn').forEach(btn => {
+                if (btn.dataset.mood === mood) {
+                    btn.classList.add('selected');
+                } else {
+                    btn.classList.remove('selected');
+                }
+            });
+        }
+        
+        // Submit check-in with details
+        async function submitCheckInDetail() {
+            if (!checkInHabitId) {
+                showToast('No habit selected', 'error');
+                return;
+            }
+            
+            const submitBtn = document.getElementById('submitCheckinBtn');
+            submitBtn.disabled = true;
+            
+            try {
+                const note = document.getElementById('checkinNote').value.trim();
+                
+                // Build request body with optional fields
+                const body = {};
+                if (note) body.note = note;
+                if (checkInRating) body.rating = checkInRating;
+                if (checkInMood) body.mood = checkInMood;
+                
+                const response = await fetch(`/echo/api/habits/${checkInHabitId}/check`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(body)
+                });
+                
+                if (!response.ok) {
+                    const error = await response.json();
+                    throw new Error(error.error || `HTTP ${response.status}`);
+                }
+                
+                const updatedHabit = await response.json();
+                
+                // Show success toast with streak
+                showToast(`Habit checked! 🔥 Streak: ${updatedHabit.streak?.current || 0}`, 'success');
+                
+                // Close modal
+                closeCheckinModal();
+                
+                // Refresh habits list
+                await loadHabits();
+                
+            } catch (error) {
+                console.error('Failed to check in:', error);
+                showToast('Failed to check in: ' + error.message, 'error');
+            } finally {
+                submitBtn.disabled = false;
+            }
+        }
+        
+        // Handle long-press for check-in detail modal
+        function handleCheckInButtonPress(habitId, event, isMouseEvent) {
+            // Prevent default context menu on right-click
+            if (event.type === 'contextmenu') {
+                event.preventDefault();
+                showCheckInDetailModal(habitId);
+                return;
+            }
+            
+            // For touch/mouse press, start long-press timer
+            if (event.type === 'mousedown' || event.type === 'touchstart') {
+                event.preventDefault();
+                
+                longPressTimer = setTimeout(() => {
+                    showCheckInDetailModal(habitId);
+                    longPressTimer = null;
+                }, 500); // 500ms for long-press
+            }
+        }
+        
+        // Handle release of check-in button
+        function handleCheckInButtonRelease(habitId, event) {
+            if (event.type === 'mouseup' || event.type === 'touchend') {
+                // If long-press timer is still running, it was a short press
+                if (longPressTimer) {
+                    clearTimeout(longPressTimer);
+                    longPressTimer = null;
+                    
+                    // Perform simple check-in
+                    checkInHabit(habitId, event);
+                }
+            }
+        }
+        
+        // Cancel long-press if moved away
+        function handleCheckInButtonCancel() {
+            if (longPressTimer) {
+                clearTimeout(longPressTimer);
+                longPressTimer = null;
+            }
         }
         
         // Show error message
diff --git a/dashboard/tests/test_habits_frontend.py b/dashboard/tests/test_habits_frontend.py
index 4bedc5d..fb77e78 100644
--- a/dashboard/tests/test_habits_frontend.py
+++ b/dashboard/tests/test_habits_frontend.py
@@ -4,6 +4,7 @@ Story US-006: Frontend - Page structure, layout, and navigation link
 Story US-007: Frontend - Habit card component
 Story US-008: Frontend - Create habit modal with all options
 Story US-009: Frontend - Edit habit modal
+Story US-010: Frontend - Check-in interaction (click and long-press)
 """
 
 import sys
@@ -748,6 +749,253 @@ def test_typecheck_us009():
     
     print("✓ Test 44: Typecheck passes (edit modal fully implemented)")
 
+def test_checkin_simple_click():
+    """Test 45: Simple click on check-in button sends POST request"""
+    habits_path = Path(__file__).parent.parent / 'habits.html'
+    content = habits_path.read_text()
+    
+    # Check that checkInHabit function exists and does POST
+    assert 'function checkInHabit' in content or 'async function checkInHabit' in content, \
+        "checkInHabit function should be defined"
+    
+    checkin_start = content.find('function checkInHabit')
+    checkin_end = content.find('\n        }', checkin_start + 500)
+    checkin_func = content[checkin_start:checkin_end]
+    
+    assert "fetch(`/echo/api/habits/${habitId}/check`" in checkin_func or \
+           'fetch(`/echo/api/habits/${habitId}/check`' in checkin_func, \
+        "Should POST to /echo/api/habits/{id}/check"
+    assert "method: 'POST'" in checkin_func, "Should use POST method"
+    
+    print("✓ Test 45: Simple click sends POST to check-in endpoint")
+
+def test_checkin_detail_modal_structure():
+    """Test 46: Check-in detail modal exists with note, rating, and mood fields"""
+    habits_path = Path(__file__).parent.parent / 'habits.html'
+    content = habits_path.read_text()
+    
+    # Check modal exists
+    assert 'id="checkinModal"' in content, "Should have check-in detail modal"
+    assert 'Check-In Details' in content or 'Check-in Details' in content, \
+        "Modal should have title 'Check-In Details'"
+    
+    # Check for note textarea
+    assert 'id="checkinNote"' in content, "Should have note textarea"
+    assert '<textarea' in content, "Should have textarea element"
+    
+    # Check for rating stars
+    assert 'rating-star' in content, "Should have rating star elements"
+    assert 'selectRating' in content, "Should have selectRating function"
+    
+    # Check for mood buttons
+    assert 'mood-btn' in content, "Should have mood button elements"
+    assert 'selectMood' in content, "Should have selectMood function"
+    assert '😊' in content and '😐' in content and '😞' in content, \
+        "Should have happy, neutral, and sad emojis"
+    
+    print("✓ Test 46: Check-in detail modal has note, rating, and mood fields")
+
+def test_checkin_long_press_handler():
+    """Test 47: Long-press (mobile) and right-click (desktop) handlers exist"""
+    habits_path = Path(__file__).parent.parent / 'habits.html'
+    content = habits_path.read_text()
+    
+    # Check for long-press handling functions
+    assert 'handleCheckInButtonPress' in content, \
+        "Should have handleCheckInButtonPress function"
+    assert 'handleCheckInButtonRelease' in content, \
+        "Should have handleCheckInButtonRelease function"
+    
+    # Check for contextmenu event (right-click)
+    assert "contextmenu" in content, "Should handle contextmenu event for right-click"
+    
+    # Check for touch/mouse events
+    assert "mousedown" in content, "Should handle mousedown event"
+    assert "mouseup" in content, "Should handle mouseup event"
+    assert "touchstart" in content or "touch" in content, \
+        "Should handle touch events for mobile"
+    
+    # Check for long-press timer
+    assert 'longPressTimer' in content, "Should track long-press timer"
+    assert '500' in content, "Should use 500ms delay for long-press"
+    
+    print("✓ Test 47: Long-press and right-click handlers exist")
+
+def test_checkin_detail_modal_functions():
+    """Test 48: Modal functions (show, close, selectRating, selectMood) are defined"""
+    habits_path = Path(__file__).parent.parent / 'habits.html'
+    content = habits_path.read_text()
+    
+    # Check modal control functions
+    assert 'function showCheckInDetailModal' in content, \
+        "Should have showCheckInDetailModal function"
+    assert 'function closeCheckinModal' in content, \
+        "Should have closeCheckinModal function"
+    
+    # Check selection functions
+    assert 'function selectRating' in content, "Should have selectRating function"
+    assert 'function selectMood' in content, "Should have selectMood function"
+    
+    # Check submit function
+    assert 'function submitCheckInDetail' in content or 'async function submitCheckInDetail' in content, \
+        "Should have submitCheckInDetail function"
+    
+    print("✓ Test 48: Check-in modal functions are defined")
+
+def test_checkin_detail_submit():
+    """Test 49: Detail modal submit sends note, rating, and mood"""
+    habits_path = Path(__file__).parent.parent / 'habits.html'
+    content = habits_path.read_text()
+    
+    # Find submitCheckInDetail function
+    submit_start = content.find('function submitCheckInDetail')
+    submit_end = content.find('\n        }', submit_start + 1000)
+    submit_func = content[submit_start:submit_end]
+    
+    # Check it builds body with optional fields
+    assert 'body.note' in submit_func or 'if (note)' in submit_func, \
+        "Should add note to body if provided"
+    assert 'body.rating' in submit_func or 'checkInRating' in submit_func, \
+        "Should add rating to body if provided"
+    assert 'body.mood' in submit_func or 'checkInMood' in submit_func, \
+        "Should add mood to body if provided"
+    
+    # Check it POSTs to API
+    assert "fetch(`/echo/api/habits/" in submit_func, "Should POST to API"
+    assert "/check`" in submit_func, "Should POST to check endpoint"
+    
+    print("✓ Test 49: Detail modal submit includes optional fields")
+
+def test_checkin_toast_with_streak():
+    """Test 50: Toast notification shows 'Habit checked! 🔥 Streak: X'"""
+    habits_path = Path(__file__).parent.parent / 'habits.html'
+    content = habits_path.read_text()
+    
+    # Check for toast with streak message
+    assert 'Habit checked!' in content, "Should show 'Habit checked!' message"
+    assert '🔥' in content, "Should include fire emoji in streak message"
+    assert 'Streak:' in content, "Should show streak count"
+    
+    # Check that streak value comes from API response
+    checkin_start = content.find('function checkInHabit')
+    checkin_area = content[checkin_start:checkin_start+2000]
+    
+    assert 'updatedHabit' in checkin_area or 'await response.json()' in checkin_area, \
+        "Should get updated habit from response"
+    assert 'streak' in checkin_area, "Should access streak from response"
+    
+    print("✓ Test 50: Toast shows 'Habit checked! 🔥 Streak: X'")
+
+def test_checkin_button_disabled_after():
+    """Test 51: Check-in button becomes disabled with 'Done today' after check-in"""
+    habits_path = Path(__file__).parent.parent / 'habits.html'
+    content = habits_path.read_text()
+    
+    # Check that renderHabitCard uses isCheckedToday to disable button
+    assert 'isCheckedToday(habit)' in content, \
+        "Should check if habit is checked today"
+    
+    # Check button uses disabled attribute based on condition
+    assert 'isDoneToday ? \'disabled\' : \'\'' in content or \
+           '${isDoneToday ? \'disabled\' : \'\'}' in content or \
+           'disabled' in content, \
+        "Button should have conditional disabled attribute"
+    
+    # Check button text changes
+    assert '✓ Done today' in content or 'Done today' in content, \
+        "Button should show 'Done today' when disabled"
+    assert 'Check In' in content, "Button should show 'Check In' when enabled"
+    
+    print("✓ Test 51: Button becomes disabled with 'Done today' after check-in")
+
+def test_checkin_pulse_animation():
+    """Test 52: Pulse animation plays on card after successful check-in"""
+    habits_path = Path(__file__).parent.parent / 'habits.html'
+    content = habits_path.read_text()
+    
+    # Check for pulse animation CSS
+    assert '@keyframes pulse' in content, "Should define pulse animation"
+    assert 'transform: scale' in content, "Pulse should use scale transform"
+    assert '.pulse' in content, "Should have pulse CSS class"
+    
+    # Check that checkInHabit adds pulse class
+    checkin_start = content.find('function checkInHabit')
+    checkin_area = content[checkin_start:checkin_start+2000]
+    
+    assert 'pulse' in checkin_area or 'classList.add' in checkin_area, \
+        "Should add pulse class to card after check-in"
+    
+    print("✓ Test 52: Pulse animation defined and applied")
+
+def test_checkin_prevent_context_menu():
+    """Test 53: Right-click prevents default context menu"""
+    habits_path = Path(__file__).parent.parent / 'habits.html'
+    content = habits_path.read_text()
+    
+    # Check for preventDefault on contextmenu
+    press_handler_start = content.find('function handleCheckInButtonPress')
+    press_handler_end = content.find('\n        }', press_handler_start + 1000)
+    press_handler = content[press_handler_start:press_handler_end]
+    
+    assert 'contextmenu' in press_handler, "Should check for contextmenu event"
+    assert 'preventDefault()' in press_handler, "Should call preventDefault on right-click"
+    
+    print("✓ Test 53: Right-click prevents default context menu")
+
+def test_checkin_event_listeners_attached():
+    """Test 54: Event listeners are attached to check-in buttons in renderHabits"""
+    habits_path = Path(__file__).parent.parent / 'habits.html'
+    content = habits_path.read_text()
+    
+    # Find renderHabits function
+    render_start = content.find('function renderHabits()')
+    render_end = content.find('\n        }', render_start + 2000)
+    render_func = content[render_start:render_end]
+    
+    # Check that event listeners are attached
+    assert 'addEventListener' in render_func, \
+        "Should attach event listeners after rendering"
+    assert 'contextmenu' in render_func or 'contextmenu' in content[render_end:render_end+1000], \
+        "Should attach contextmenu listener"
+    assert 'mousedown' in render_func or 'mousedown' in content[render_end:render_end+1000], \
+        "Should attach mousedown listener"
+    
+    # Check that we iterate through habits to attach listeners
+    assert 'habits.forEach' in render_func or 'for' in render_func, \
+        "Should iterate through habits to attach listeners"
+    
+    print("✓ Test 54: Event listeners attached in renderHabits")
+
+def test_typecheck_us010():
+    """Test 55: Typecheck passes - all check-in functions defined"""
+    habits_path = Path(__file__).parent.parent / 'habits.html'
+    content = habits_path.read_text()
+    
+    # Check all required functions are defined
+    required_functions = [
+        'checkInHabit',
+        'showCheckInDetailModal',
+        'closeCheckinModal',
+        'selectRating',
+        'selectMood',
+        'submitCheckInDetail',
+        'handleCheckInButtonPress',
+        'handleCheckInButtonRelease',
+        'handleCheckInButtonCancel'
+    ]
+    
+    for func in required_functions:
+        assert f'function {func}' in content or f'async function {func}' in content, \
+            f"{func} should be defined"
+    
+    # Check state variables
+    assert 'let checkInHabitId' in content, "checkInHabitId should be declared"
+    assert 'let checkInRating' in content, "checkInRating should be declared"
+    assert 'let checkInMood' in content, "checkInMood should be declared"
+    assert 'let longPressTimer' in content, "longPressTimer should be declared"
+    
+    print("✓ Test 55: Typecheck passes (all check-in functions and variables defined)")
+
 def run_all_tests():
     """Run all tests in sequence"""
     tests = [
@@ -799,9 +1047,21 @@ def run_all_tests():
         test_edit_modal_close_resets_state,
         test_edit_modal_no_console_errors,
         test_typecheck_us009,
+        # US-010 tests
+        test_checkin_simple_click,
+        test_checkin_detail_modal_structure,
+        test_checkin_long_press_handler,
+        test_checkin_detail_modal_functions,
+        test_checkin_detail_submit,
+        test_checkin_toast_with_streak,
+        test_checkin_button_disabled_after,
+        test_checkin_pulse_animation,
+        test_checkin_prevent_context_menu,
+        test_checkin_event_listeners_attached,
+        test_typecheck_us010,
     ]
     
-    print(f"\nRunning {len(tests)} frontend tests for US-006, US-007, US-008, and US-009...\n")
+    print(f"\nRunning {len(tests)} frontend tests for US-006, US-007, US-008, US-009, and US-010...\n")
     
     failed = []
     for test in tests:
