From 7a96a934bf099ea6981909da3ad9b0ccd9a59f85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Mon, 15 Jun 2026 01:20:49 +0200
Subject: [PATCH 1/4] refactor(import): derive the CSV example header from the
 shared column list
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The downloadable CSV example pinned its header as an inline string literal
while csv-measurements.ts exported CSV_EXAMPLE_COLUMNS as the documented
single source of truth for that order — so the two could silently drift.
Derive the example header from the constant; the column order now has one
owner and the previously unused export is wired in.
---
 src/components/settings/import-panel.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/settings/import-panel.tsx b/src/components/settings/import-panel.tsx
index 2c0f8a1b0..efd05b62b 100644
--- a/src/components/settings/import-panel.tsx
+++ b/src/components/settings/import-panel.tsx
@@ -45,6 +45,7 @@ import { queryKeys } from "@/lib/query-keys";
 import { useTranslations } from "@/lib/i18n/context";
 import { cn } from "@/lib/utils";
 import { apiFetchRaw, apiGet } from "@/lib/api/api-fetch";
+import { CSV_EXAMPLE_COLUMNS } from "@/lib/import/csv-measurements";
 
 // ─────────────────────────── Section wrapper ───────────────────────────
 
@@ -641,7 +642,7 @@ function JsonImportCard() {
  * drift. Exported so a test can assert it stays a valid header.
  */
 export const EXAMPLE_CSV = [
-  "type,value,unit,measuredAt,glucoseContext,notes,externalId",
+  CSV_EXAMPLE_COLUMNS.join(","),
   "WEIGHT,80.5,kg,2026-05-01T08:00:00Z,,morning,",
   "BLOOD_GLUCOSE,5.3,mmol/L,2026-05-01T08:05:00+02:00,FASTING,,meter-001",
   "BLOOD_PRESSURE_SYS,120,mmHg,2026-05-01T08:05:00+02:00,,,",

From 5a62d04651abb250a23c2d962bf5a0397bda4b3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Mon, 15 Jun 2026 01:21:10 +0200
Subject: [PATCH 2/4] fix(import): use the success token for import success
 ticks

The three import success check-icons hardcoded text-emerald-500, bypassing
the semantic text-success token every other surface uses. The token is
AA-tuned per theme (a darker green in light mode) where emerald-500 is a
single fixed value, so the import ticks sat off-tone in light mode and could
fall short of the AA bar the light tokens are tuned for. Swap to text-success
to match the integration-card family.
---
 src/components/settings/import-panel.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/settings/import-panel.tsx b/src/components/settings/import-panel.tsx
index efd05b62b..f30fad3f8 100644
--- a/src/components/settings/import-panel.tsx
+++ b/src/components/settings/import-panel.tsx
@@ -322,7 +322,7 @@ function AppleHealthImportCard() {
             className="text-foreground flex items-start gap-2 text-xs"
           >
             <CheckCircle2
-              className="mt-0.5 h-3.5 w-3.5 shrink-0 text-emerald-500"
+              className="text-success mt-0.5 h-3.5 w-3.5 shrink-0"
               aria-hidden="true"
             />
             <span>
@@ -568,7 +568,7 @@ function JsonImportCard() {
             className="text-foreground flex items-start gap-2 text-xs"
           >
             <CheckCircle2
-              className="mt-0.5 h-3.5 w-3.5 shrink-0 text-emerald-500"
+              className="text-success mt-0.5 h-3.5 w-3.5 shrink-0"
               aria-hidden="true"
             />
             <span>
@@ -791,7 +791,7 @@ function CsvImportCard() {
           <div data-testid="import-csv-result" className="space-y-1.5">
             <p className="text-foreground flex items-start gap-2 text-xs">
               <CheckCircle2
-                className="mt-0.5 h-3.5 w-3.5 shrink-0 text-emerald-500"
+                className="text-success mt-0.5 h-3.5 w-3.5 shrink-0"
                 aria-hidden="true"
               />
               <span>

From c6beba22290134b899407b125d0a170e20725df5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Mon, 15 Jun 2026 01:21:35 +0200
Subject: [PATCH 3/4] fix(import): keep the import cards on the SPA and balance
 the trio
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The JSON and CSV cards linked to the in-app docs with a raw anchor, so
tapping the schema link triggered a full-page reload that discarded an
in-progress paste or upload in the sibling card; route them through the
Next Link instead. The three import cards also dropped to a two-column grid
at md, orphaning the CSV card alone on a second row — add a three-column
track at xl so the set reads as one family.
---
 src/components/settings/import-panel.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/settings/import-panel.tsx b/src/components/settings/import-panel.tsx
index f30fad3f8..c87efaee1 100644
--- a/src/components/settings/import-panel.tsx
+++ b/src/components/settings/import-panel.tsx
@@ -26,6 +26,7 @@
  */
 
 import { useCallback, useId, useRef, useState } from "react";
+import Link from "next/link";
 import { useQuery } from "@tanstack/react-query";
 import {
   AlertCircle,
@@ -67,7 +68,7 @@ export function ImportPanel() {
           {t("settings.sections.export.import.description")}
         </p>
       </div>
-      <div className="grid gap-4 md:grid-cols-2">
+      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
         <AppleHealthImportCard />
         <JsonImportCard />
         <CsvImportCard />
@@ -553,12 +554,12 @@ function JsonImportCard() {
 
       <p className="text-muted-foreground text-xs">
         {t("settings.sections.export.import.json.schemaHint")}{" "}
-        <a
+        <Link
           href="/docs/integrations/data-import"
           className="text-primary underline underline-offset-2"
         >
           {t("settings.sections.export.import.json.docsLink")}
-        </a>
+        </Link>
       </p>
 
       <div aria-live="polite" className="space-y-2">
@@ -778,12 +779,12 @@ function CsvImportCard() {
 
       <p className="text-muted-foreground text-xs">
         {t("settings.sections.export.import.csv.schemaHint")}{" "}
-        <a
+        <Link
           href="/docs/integrations/data-import"
           className="text-primary underline underline-offset-2"
         >
           {t("settings.sections.export.import.csv.docsLink")}
-        </a>
+        </Link>
       </p>
 
       <div aria-live="polite" className="space-y-2">

From 9f960a59d0da4d11d8e6b7bba610ac97ee95417a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Mon, 15 Jun 2026 01:21:45 +0200
Subject: [PATCH 4/4] feat(import): show character counts and a Preview busy
 state

The JSON and CSV paste boxes now cap input at the 16 MB body ceiling the
routes enforce and show a live character count beneath each, so an over-long
paste is bounded with feedback instead of silently rejected at submit. The
CSV Preview button also renders the same spinner the Import button does while
a dry-run is in flight, with motion-reduce honoured, so the tap no longer
looks inert on a slow preview.
---
 messages/de.json                         |  1 +
 messages/en.json                         |  1 +
 messages/es.json                         |  1 +
 messages/fr.json                         |  1 +
 messages/it.json                         |  1 +
 messages/pl.json                         |  1 +
 src/components/settings/import-panel.tsx | 24 ++++++++++++++++++++++++
 7 files changed, 30 insertions(+)

diff --git a/messages/de.json b/messages/de.json
index 1d1ba962d..025a470ec 100644
--- a/messages/de.json
+++ b/messages/de.json
@@ -4006,6 +4006,7 @@
         "import": {
           "heading": "Import",
           "description": "Importiere Daten aus einem Apple-Health-Export oder einer JSON-Datei. Bereits vorhandene Einträge werden übersprungen, ein erneuter Import ist also unbedenklich.",
+          "charCount": "{used} / {max} Zeichen",
           "appleHealth": {
             "title": "Apple Health",
             "description": "Lade die export.zip aus der Health-App auf dem iPhone hoch (Profil → Alle Gesundheitsdaten exportieren).",
diff --git a/messages/en.json b/messages/en.json
index 3a8b08b12..b66c2383d 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -4006,6 +4006,7 @@
         "import": {
           "heading": "Import",
           "description": "Bring data into HealthLog from an Apple Health export, a JSON file, or a CSV. Imports skip rows that already exist, so re-running one is safe.",
+          "charCount": "{used} / {max} characters",
           "appleHealth": {
             "title": "Apple Health",
             "description": "Upload the export.zip from the Health app on iPhone (Profile → Export All Health Data).",
diff --git a/messages/es.json b/messages/es.json
index 210c603ad..2c51a68b8 100644
--- a/messages/es.json
+++ b/messages/es.json
@@ -4006,6 +4006,7 @@
         "import": {
           "heading": "Importar",
           "description": "Importa datos a HealthLog desde una exportación de Apple Health o un archivo JSON. La importación omite las filas que ya existen, así que repetirla es seguro.",
+          "charCount": "{used} / {max} caracteres",
           "appleHealth": {
             "title": "Apple Health",
             "description": "Sube el archivo export.zip de la app Salud del iPhone (Perfil → Exportar todos los datos de salud).",
diff --git a/messages/fr.json b/messages/fr.json
index e73f56d89..72f2d8a54 100644
--- a/messages/fr.json
+++ b/messages/fr.json
@@ -4006,6 +4006,7 @@
         "import": {
           "heading": "Import",
           "description": "Importez des données dans HealthLog depuis un export Apple Santé ou un fichier JSON. L'import ignore les lignes déjà présentes : le relancer est sans risque.",
+          "charCount": "{used} / {max} caractères",
           "appleHealth": {
             "title": "Apple Santé",
             "description": "Importez le fichier export.zip de l'app Santé sur iPhone (Profil → Exporter toutes les données de santé).",
diff --git a/messages/it.json b/messages/it.json
index 5e20abdb5..73ca38434 100644
--- a/messages/it.json
+++ b/messages/it.json
@@ -4006,6 +4006,7 @@
         "import": {
           "heading": "Importa",
           "description": "Importa dati in HealthLog da un'esportazione di Apple Salute o da un file JSON. L'importazione salta le righe già presenti, quindi ripeterla è sicuro.",
+          "charCount": "{used} / {max} caratteri",
           "appleHealth": {
             "title": "Apple Salute",
             "description": "Carica il file export.zip dall'app Salute su iPhone (Profilo → Esporta tutti i dati sanitari).",
diff --git a/messages/pl.json b/messages/pl.json
index f62178eb5..8270e74a9 100644
--- a/messages/pl.json
+++ b/messages/pl.json
@@ -4006,6 +4006,7 @@
         "import": {
           "heading": "Import",
           "description": "Zaimportuj dane do HealthLog z eksportu Apple Health lub pliku JSON. Import pomija wiersze, które już istnieją, więc ponowne uruchomienie jest bezpieczne.",
+          "charCount": "{used} / {max} znaków",
           "appleHealth": {
             "title": "Apple Health",
             "description": "Prześlij plik export.zip z aplikacji Zdrowie na iPhonie (Profil → Eksportuj wszystkie dane zdrowotne).",
diff --git a/src/components/settings/import-panel.tsx b/src/components/settings/import-panel.tsx
index c87efaee1..879237ceb 100644
--- a/src/components/settings/import-panel.tsx
+++ b/src/components/settings/import-panel.tsx
@@ -48,6 +48,13 @@ import { cn } from "@/lib/utils";
 import { apiFetchRaw, apiGet } from "@/lib/api/api-fetch";
 import { CSV_EXAMPLE_COLUMNS } from "@/lib/import/csv-measurements";
 
+/**
+ * Upper bound for the paste textareas, mirroring the 16 MB server-side body
+ * ceiling on `/api/import` and `/api/import/csv`. Caps an accidental over-paste
+ * before it ever reaches the route and feeds the live character counter.
+ */
+const MAX_PASTE_CHARS = 16 * 1024 * 1024;
+
 // ─────────────────────────── Section wrapper ───────────────────────────
 
 export function ImportPanel() {
@@ -537,10 +544,17 @@ function JsonImportCard() {
           value={text}
           onChange={(e) => setText(e.target.value)}
           rows={5}
+          maxLength={MAX_PASTE_CHARS}
           spellCheck={false}
           placeholder='{"measurements":[…],"moodEntries":[…]}'
           className="font-mono text-xs"
         />
+        <p className="text-muted-foreground text-right text-xs tabular-nums">
+          {t("settings.sections.export.import.charCount", {
+            used: text.length,
+            max: MAX_PASTE_CHARS,
+          })}
+        </p>
       </div>
 
       <input
@@ -762,10 +776,17 @@ function CsvImportCard() {
           value={text}
           onChange={(e) => setText(e.target.value)}
           rows={5}
+          maxLength={MAX_PASTE_CHARS}
           spellCheck={false}
           placeholder="type,value,unit,measuredAt,…"
           className="font-mono text-xs"
         />
+        <p className="text-muted-foreground text-right text-xs tabular-nums">
+          {t("settings.sections.export.import.charCount", {
+            used: text.length,
+            max: MAX_PASTE_CHARS,
+          })}
+        </p>
       </div>
 
       <input
@@ -865,6 +886,9 @@ function CsvImportCard() {
           onClick={() => void send(true)}
           data-testid="import-csv-preview"
         >
+          {busy && (
+            <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+          )}
           {t("settings.sections.export.import.csv.preview")}
         </Button>
         <Button