From 0e44b30f5908326b2643c398b597cf07eceef401 Mon Sep 17 00:00:00 2001
From: Train Chen <train981316@gmail.com>
Date: Thu, 11 Jun 2026 17:43:46 +0200
Subject: [PATCH] fix(braindump): soft, retryable error UX when sort fails
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Lovable's mobile test caught the previous error UX surfacing raw
engineer-speak ("Edge Function returned a non-2xx status code") under
the Sort CTA when the todo-triage call failed. For an ADHD-friendly
app that's the worst possible failure mode — it reads as "you broke
it" rather than "the network blinked."

What changes:

- The user-facing message is now a soft, bilingual line:
  "Couldn't sort right now." (6 languages).
- A Try again button replaces the silent dead-end, so the user
  doesn't have to back out of BrainDump to retry.
- The raw error/data still get logged via console.error so debugging
  stays trivial; only the human-facing copy is softened.
- The Sort CTA itself stays where it is — failure doesn't reset
  session state, so the count and items remain. Retrying picks up
  exactly where the attempt left off.

Not in this PR (separate work):
- Redeploying the todo-triage edge function so the eisenhower branch
  is actually live on production Supabase. That's what's causing the
  failure to be observed in the first place; user runs
  `npx supabase functions deploy todo-triage`.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/components/journal/BrainDumpScreen.tsx | 42 +++++++++++++++++++---
 1 file changed, 38 insertions(+), 4 deletions(-)

diff --git a/src/components/journal/BrainDumpScreen.tsx b/src/components/journal/BrainDumpScreen.tsx
index 23516e0..aa05dd0 100644
--- a/src/components/journal/BrainDumpScreen.tsx
+++ b/src/components/journal/BrainDumpScreen.tsx
@@ -115,7 +115,12 @@ export function BrainDumpScreen({ onBack, onAfterSort }: BrainDumpScreenProps) {
       });
 
       if (error || !data?.classifications || !Array.isArray(data.classifications)) {
-        setSortError(error?.message || 'Classification failed');
+        // Log the raw failure so debugging stays straightforward — but show
+        // the user a soft, ADHD-friendly line, not the engineer-speak from
+        // supabase-js ("Edge Function returned a non-2xx status code") or a
+        // backend validation slug. The retry affordance is rendered below.
+        console.error('[braindump.sort] classification failed', { error, data });
+        setSortError('failed');
         setClassifying(false);
         return;
       }
@@ -266,9 +271,38 @@ export function BrainDumpScreen({ onBack, onAfterSort }: BrainDumpScreenProps) {
               )}
             </Button>
             {sortError && (
-              <p className="text-destructive text-xs mt-2 text-center" data-testid="braindump-sort-error">
-                {sortError}
-              </p>
+              <div
+                className="mt-3 p-3 rounded-lg bg-muted/40 border border-border/50"
+                data-testid="braindump-sort-error"
+              >
+                <p className="text-sm text-foreground text-center mb-2">
+                  {t({
+                    fr: "Je n'ai pas pu trier maintenant.",
+                    en: "Couldn't sort right now.",
+                    es: 'No pude clasificar ahora mismo.',
+                    ja: '今は分類できませんでした。',
+                    'zh-Hans': '现在没能完成分类。',
+                    'zh-Hant': '現在沒能完成分類。',
+                  }).primary}
+                </p>
+                <Button
+                  data-testid="braindump-sort-retry"
+                  onClick={startSort}
+                  variant="outline"
+                  size="sm"
+                  className="w-full"
+                  disabled={classifying}
+                >
+                  {t({
+                    fr: 'Réessayer',
+                    en: 'Try again',
+                    es: 'Reintentar',
+                    ja: 'もう一度',
+                    'zh-Hans': '再试一次',
+                    'zh-Hant': '再試一次',
+                  }).primary}
+                </Button>
+              </div>
             )}
           </div>
         )}