web/src/components/SftCard.test.ts

@@ -52,7 +52,7 @@ describe('SftCard', () => {
     expect(w.find('[data-testid="quality-chip"]').classes()).toContain('quality-low')
   })
 
-  it('quality chip has mid-quality class when score 0.4-0.7', () => {
+  it('quality chip has mid-quality class when score is 0.4 to <0.7', () => {
     const w = mount(SftCard, { props: { item: MID_QUALITY_ITEM } })
     expect(w.find('[data-testid="quality-chip"]').classes()).toContain('quality-mid')
   })
@@ -89,4 +89,10 @@ describe('SftCard', () => {
     const w = mount(SftCard, { props: { item: LOW_QUALITY_ITEM, correcting: true } })
     expect(w.find('[data-testid="correction-area"]').exists()).toBe(true)
   })
+
+  it('renders nothing for failure reason when null', () => {
+    const item = { ...LOW_QUALITY_ITEM, failure_reason: null }
+    const w = mount(SftCard, { props: { item } })
+    expect(w.find('.failure-reason').exists()).toBe(false)
+  })
 })

web/src/components/SftCard.vue

@@ -17,7 +17,7 @@
     </div>
 
     <!-- Failure reason -->
-    <p class="failure-reason">{{ item.failure_reason }}</p>
+    <p v-if="item.failure_reason" class="failure-reason">{{ item.failure_reason }}</p>
 
     <!-- Prompt (collapsible) -->
     <div class="prompt-section">