fix: Hide AI Repair button in config tab

Co-authored-by: Alois Klink <alois@aloisklink.com>

package.json

@@ -115,7 +115,7 @@
     ]
   },
   "engines": {
-    "node": ">=20.19.1"
+    "node": ">=20.19.0"
   },
   "packageManager": "pnpm@10.10.0+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39",
   "pnpm": {

src/lib/components/Editor.svelte

@@ -32,20 +32,25 @@
           <ExclamationCircleIcon class="size-6 text-destructive" aria-hidden="true" />
           <div class="flex flex-col">
             <p>Syntax error</p>
-            {#if env.isEnabledMermaidChartLinks}
+            {#if env.isEnabledMermaidChartLinks && $stateStore.editorMode === 'code'}
-              <p class="text-xs text-white/60">Create a free account to repair with AI</p>
+              <p class="text-xs text-white/60" data-testid={TID.aiHelpText}>
+                Create a free account to repair with AI
+              </p>
             {/if}
           </div>
         </div>
+        {#if $stateStore.editorMode === 'code'}
           <McWrapper>
             <Button
               variant="accent"
               size="sm"
+              data-testid={TID.aiRepairButton}
               href={$urlsStore.mermaidChart({ medium: 'ai_repair' }).save}>
               <MermaidChartIcon />
               AI Repair
             </Button>
           </McWrapper>
+        {/if}
       </div>
       <output class="max-h-32 overflow-auto bg-muted p-2" name="mermaid-error" for="editor">
         <pre>{$stateStore.error?.toString()}</pre>

src/lib/constants.ts

@@ -1,4 +1,6 @@
 export const TID = {
+  aiHelpText: 'ai-help-text',
+  aiRepairButton: 'ai-repair-button',
   copyMarkdown: 'copy-markdown',
   diagramDocumentationButton: 'diagram-documentation-button',
   downloadPNG: 'download-PNG',

tests/errorDisplay.spec.ts

@@ -0,0 +1,34 @@
+import { test } from './test';
+
+test.describe('Error display tests', () => {
+  test('should show AI Repair button for syntax errors in Code tab', async ({ editPage }) => {
+    // Enter code with syntax error
+    await editPage.clearEditor();
+    await editPage.typeInEditor('graph TD\nA --> B -->');
+
+    // Verify error is displayed
+    await editPage.checkError('Syntax error');
+
+    // Verify AI Repair button and help text is shown in Code tab
+    await editPage.checkAIHelperVisibility(true);
+  });
+
+  test('should not show AI Repair button for errors in Config tab', async ({ editPage }) => {
+    // First enter valid diagram
+    await editPage.clearEditor();
+    await editPage.typeInEditor('graph TD\nA --> B');
+
+    // Switch to Config tab
+    await editPage.setEditorMode('Config');
+
+    // Enter invalid JSON in config
+    await editPage.clearEditor();
+    await editPage.typeInEditor('{\n  "theme": "default",\n  invalid json');
+
+    // Verify error is displayed
+    await editPage.checkError('Syntax error');
+
+    // Verify AI Repair button and help text is NOT shown in Config tab
+    await editPage.checkAIHelperVisibility(false);
+  });
+});

tests/test.ts

@@ -103,6 +103,13 @@ export class EditorPage {
       `Switch to ${theme === 'light' ? 'dark' : 'light'} theme`
     );
   }
+
+  async checkAIHelperVisibility(shouldBeVisible: boolean) {
+    const button = this.page.getByTestId(TID.aiRepairButton);
+    const helpText = this.page.getByTestId(TID.aiHelpText);
+    await expect(button)[shouldBeVisible ? 'toBeVisible' : 'toBeHidden']();
+    await expect(helpText)[shouldBeVisible ? 'toBeVisible' : 'toBeHidden']();
+  }
 }
 
 export const test = base.extend<{ editPage: EditorPage }>({