From 03e5f9f9b414f87bd6f8dfbd01de9834a07f57a3 Mon Sep 17 00:00:00 2001
From: pyr0ball <pyroballpcs@gmail.com>
Date: Wed, 8 Apr 2026 15:23:19 -0700
Subject: [PATCH] fix: guard null failure_reason render, fix mid-quality test
 description
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add v-if guard on failure-reason <p> so null renders no element (not literal "null")
- Clarify mid-quality test description: score is 0.4 to <0.7 (exclusive upper bound)
- Add test: renders nothing for failure_reason when null (+1 → 14 SftCard tests)
---
 web/src/components/SftCard.test.ts | 8 +++++++-
 web/src/components/SftCard.vue     | 2 +-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/web/src/components/SftCard.test.ts b/web/src/components/SftCard.test.ts
index c579d3f..6834987 100644
--- a/web/src/components/SftCard.test.ts
+++ b/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)
+  })
 })
diff --git a/web/src/components/SftCard.vue b/web/src/components/SftCard.vue
index 36cff08..f0ac2d1 100644
--- a/web/src/components/SftCard.vue
+++ b/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">