fix: resolved i18n gaps, a11y violations, and layout inconsistencies

Author: Cyneric

.gitignore

@@ -34,12 +34,17 @@ yarn-error.log*
 pnpm-debug.log*
 
 # Local configurations
+.github/prompts/
+.ui-design/
 *.local.md
+.opencode
+openspec
 .cursor
 .claude
+skills/
 .codex
 .roo
-skills/
+.agent
 
 # Environment
 .env

src/renderer/components/layout/StartupSplash.tsx

@@ -1,6 +1,12 @@
 /**
  * @file src/renderer/components/layout/StartupSplash.tsx
  *
+ * @created 07.03.2026
+ * @modified 16.03.2026
+ *
+ * @author Christian Blank <aidrelay@proton.me>
+ * @copyright 2026
+ *
  * @description Full-screen startup splash overlay with a milestone progress
  * bar and loading text.
  */

src/renderer/components/rules/RuleEditor.tsx

@@ -2,7 +2,7 @@
  * @file src/renderer/components/rules/RuleEditor.tsx
  *
  * @created 07.03.2026
- * @modified 08.03.2026
+ * @modified 16.03.2026
  *
  * @author Christian Blank <aidrelay@proton.me>
  * @copyright 2026
@@ -14,9 +14,10 @@
  * the rules Zustand store.
  */
 
-import { useState, useCallback } from 'react'
+import { useState, useCallback, useEffect } from 'react'
 import { X } from 'lucide-react'
 import { toast } from 'sonner'
+import { useTranslation } from 'react-i18next'
 import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
@@ -51,18 +52,27 @@ const RuleEditor = ({ rule, onClose }: RuleEditorProps) => {
   const [activeTab, setActiveTab] = useState<Tab>('details')
   const [saving, setSaving] = useState(false)
   const [content, setContent] = useState(rule?.content ?? '')
+  const { t } = useTranslation()
 
   const { create, update } = useRulesStore()
   const tokenEstimate = useTokenEstimate(content)
 
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [onClose])
+
   const handleContentChange = useCallback((newContent: string) => {
     setContent(newContent)
   }, [])
 
   const handleDetailsSubmit = useCallback(
     async (data: Omit<CreateRuleInput, 'content'>) => {
       if (!content.trim()) {
-        toast.error('Rule content cannot be empty')
+        toast.error(t('ruleEditor.contentRequired'))
         return
       }
 
@@ -87,7 +97,7 @@ const RuleEditor = ({ rule, onClose }: RuleEditorProps) => {
         setSaving(false)
       }
     },
-    [content, rule, create, update, onClose],
+    [content, rule, create, update, onClose, t],
   )
 
   return (
@@ -105,13 +115,21 @@ const RuleEditor = ({ rule, onClose }: RuleEditorProps) => {
         className="fixed inset-y-0 right-0 z-50 w-full max-w-2xl flex flex-col bg-background border-l border-border shadow-xl"
         role="dialog"
         aria-modal="true"
-        aria-label={rule ? `Edit rule: ${rule.name}` : 'Add rule'}
+        aria-label={
+          rule
+            ? t('ruleEditor.editTitleWithName', { name: rule.name })
+            : t('ruleEditor.createTitle')
+        }
         data-testid="rule-editor"
       >
         {/* Header */}
         <header className="flex items-center justify-between px-6 py-4 border-b border-border">
           <div className="flex items-center gap-3">
-            <h2 className="font-semibold text-base">{rule ? `Edit: ${rule.name}` : 'Add rule'}</h2>
+            <h2 className="font-semibold text-base">
+              {rule
+                ? t('ruleEditor.editTitleWithName', { name: rule.name })
+                : t('ruleEditor.createTitle')}
+            </h2>
             {tokenEstimate > 0 && (
               <span
                 className={cn(
@@ -131,13 +149,13 @@ const RuleEditor = ({ rule, onClose }: RuleEditorProps) => {
                 variant="ghost"
                 size="icon"
                 onClick={onClose}
-                aria-label="Close editor"
+                aria-label={t('ruleEditor.close')}
                 data-testid="rule-editor-close"
               >
                 <X size={18} />
               </Button>
             </TooltipTrigger>
-            <TooltipContent>Close</TooltipContent>
+            <TooltipContent>{t('ruleEditor.close')}</TooltipContent>
           </Tooltip>
         </header>
 
@@ -156,14 +174,14 @@ const RuleEditor = ({ rule, onClose }: RuleEditorProps) => {
               className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent"
               data-testid="rule-editor-tab-details"
             >
-              Details
+              {t('ruleEditor.tabDetails')}
             </TabsTrigger>
             <TabsTrigger
               value="content"
               className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent"
               data-testid="rule-editor-tab-content"
             >
-              Content
+              {t('ruleEditor.tabContent')}
             </TabsTrigger>
           </TabsList>
           <TabsContent value="details" className="flex-1 overflow-y-auto px-6 py-5 mt-0">
@@ -190,14 +208,14 @@ const RuleEditor = ({ rule, onClose }: RuleEditorProps) => {
               onClick={onClose}
               data-testid="rule-editor-content-cancel"
             >
-              Cancel
+              {t('ruleEditor.cancel')}
             </Button>
             <Button
               type="button"
               onClick={() => setActiveTab('details')}
               data-testid="rule-editor-content-next"
             >
-              {rule ? 'Save changes' : 'Continue to details →'}
+              {t('ruleEditor.continueToDetails')}
             </Button>
           </footer>
         )}

src/renderer/components/servers/ServerEditor.tsx

@@ -2,7 +2,7 @@
  * @file src/renderer/components/servers/ServerEditor.tsx
  *
  * @created 07.03.2026
- * @modified 08.03.2026
+ * @modified 16.03.2026
  *
  * @author Christian Blank <aidrelay@proton.me>
  * @copyright 2026
@@ -13,9 +13,10 @@
  * `serversCreate` or `serversUpdate` from the servers Zustand store.
  */
 
-import { useState, useCallback } from 'react'
+import { useState, useCallback, useEffect } from 'react'
 import { X } from 'lucide-react'
 import { toast } from 'sonner'
+import { useTranslation } from 'react-i18next'
 import { Button } from '@/components/ui/button'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
@@ -47,9 +48,18 @@ const ServerEditor = ({ server, onClose }: ServerEditorProps) => {
   const [activeTab, setActiveTab] = useState<Tab>('form')
   const [saving, setSaving] = useState(false)
   const [formState, setFormState] = useState<McpServer | undefined>(server)
+  const { t } = useTranslation()
 
   const { create, update } = useServersStore()
 
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [onClose])
+
   const handleFormSubmit = useCallback(
     async (data: CreateServerInput & { secretEnvKeys: string[] }) => {
       setSaving(true)
@@ -104,13 +114,19 @@ const ServerEditor = ({ server, onClose }: ServerEditorProps) => {
         className="fixed inset-y-0 right-0 z-50 w-full max-w-xl flex flex-col bg-background border-l border-border shadow-xl"
         role="dialog"
         aria-modal="true"
-        aria-label={server ? `Edit MCP Server: ${server.name}` : 'Add MCP Server'}
+        aria-label={
+          server
+            ? t('serverForm.editTitleWithName', { name: server.name })
+            : t('serverForm.createTitle')
+        }
         data-testid="server-editor"
       >
         {/* Header */}
         <header className="flex items-center justify-between px-6 py-4 border-b border-border">
           <h2 className="font-semibold text-base">
-            {server ? `Edit MCP Server: ${server.name}` : 'Add MCP Server'}
+            {server
+              ? t('serverForm.editTitleWithName', { name: server.name })
+              : t('serverForm.createTitle')}
           </h2>
           <Tooltip>
             <TooltipTrigger asChild>
@@ -119,13 +135,13 @@ const ServerEditor = ({ server, onClose }: ServerEditorProps) => {
                 variant="ghost"
                 size="icon"
                 onClick={onClose}
-                aria-label="Close editor"
+                aria-label={t('serverForm.close')}
                 data-testid="server-editor-close"
               >
                 <X size={18} />
               </Button>
             </TooltipTrigger>
-            <TooltipContent>Close</TooltipContent>
+            <TooltipContent>{t('serverForm.close')}</TooltipContent>
           </Tooltip>
         </header>
 
@@ -144,14 +160,14 @@ const ServerEditor = ({ server, onClose }: ServerEditorProps) => {
               className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent"
               data-testid="server-editor-tab-form"
             >
-              Form
+              {t('serverForm.tabForm')}
             </TabsTrigger>
             <TabsTrigger
               value="json"
               className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent"
               data-testid="server-editor-tab-json"
             >
-              JSON
+              {t('serverForm.tabJson')}
             </TabsTrigger>
           </TabsList>
           <TabsContent value="form" className="flex-1 overflow-y-auto px-6 py-5 mt-0">
@@ -187,7 +203,7 @@ const ServerEditor = ({ server, onClose }: ServerEditorProps) => {
         {activeTab === 'json' && (
           <footer className="flex justify-end gap-2 px-6 py-4 border-t border-border">
             <Button type="button" variant="outline" onClick={onClose}>
-              Cancel
+              {t('serverForm.cancel')}
             </Button>
             <Button
               type="button"
@@ -208,7 +224,11 @@ const ServerEditor = ({ server, onClose }: ServerEditorProps) => {
               disabled={saving || !formState?.name || !formState?.command}
               data-testid="server-editor-json-save"
             >
-              {saving ? 'Saving…' : server ? 'Save changes' : 'Add MCP Server'}
+              {saving
+                ? t('serverForm.saving')
+                : server
+                  ? t('serverForm.saveChanges')
+                  : t('serverForm.addServer')}
             </Button>
           </footer>
         )}

src/renderer/i18n/de.json

@@ -231,7 +231,12 @@
     "cancel": "Abbrechen",
     "viewJson": "JSON anzeigen",
     "viewForm": "Formular anzeigen",
-    "close": "Schließen"
+    "close": "Schließen",
+    "tabForm": "Formular",
+    "tabJson": "JSON",
+    "editTitleWithName": "MCP-Server bearbeiten: {{name}}",
+    "saveChanges": "Änderungen speichern",
+    "addServer": "MCP-Server hinzufügen"
   },
   "envEditor": {
     "addVariable": "Variable hinzufügen",
@@ -325,7 +330,9 @@
     "tabDetails": "Details",
     "tabContent": "Inhalt",
     "saveChanges": "Änderungen speichern",
-    "continueToDetails": "Weiter zu Details →"
+    "continueToDetails": "Weiter zu Details →",
+    "editTitleWithName": "Bearbeiten: {{name}}",
+    "contentRequired": "Regelinhalt darf nicht leer sein"
   },
   "profiles": {
     "title": "Profile",
@@ -397,7 +404,8 @@
     "collapseDetails": "Details einklappen",
     "expandDetails": "Details ausklappen",
     "showDetails": "Anzeigen",
-    "hideDetails": "Verbergen"
+    "hideDetails": "Verbergen",
+    "loadFailed": "Aktivitätsprotokoll konnte nicht geladen werden"
   },
   "clients": {
     "title": "Clients",

src/renderer/i18n/en.json

@@ -231,7 +231,12 @@
     "cancel": "Cancel",
     "viewJson": "View JSON",
     "viewForm": "View form",
-    "close": "Close"
+    "close": "Close",
+    "tabForm": "Form",
+    "tabJson": "JSON",
+    "editTitleWithName": "Edit MCP Server: {{name}}",
+    "saveChanges": "Save changes",
+    "addServer": "Add MCP Server"
   },
   "envEditor": {
     "addVariable": "Add variable",
@@ -325,7 +330,9 @@
     "tabDetails": "Details",
     "tabContent": "Content",
     "saveChanges": "Save changes",
-    "continueToDetails": "Continue to details →"
+    "continueToDetails": "Continue to details →",
+    "editTitleWithName": "Edit: {{name}}",
+    "contentRequired": "Rule content cannot be empty"
   },
   "profiles": {
     "title": "Profiles",
@@ -397,7 +404,8 @@
     "collapseDetails": "Collapse details",
     "expandDetails": "Expand details",
     "showDetails": "Show",
-    "hideDetails": "Hide"
+    "hideDetails": "Hide",
+    "loadFailed": "Failed to load activity log"
   },
   "clients": {
     "title": "Clients",

src/renderer/pages/ActivityLogPage.tsx

@@ -2,7 +2,7 @@
  * @file src/renderer/pages/ActivityLogPage.tsx
  *
  * @created 07.03.2026
- * @modified 10.03.2026
+ * @modified 16.03.2026
  *
  * @author Christian Blank <aidrelay@proton.me>
  * @copyright 2026
@@ -15,6 +15,7 @@
 
 import { useState, useEffect, useCallback } from 'react'
 import { RefreshCw } from 'lucide-react'
+import { toast } from 'sonner'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
@@ -59,11 +60,12 @@ const ActivityLogPage = () => {
       const results = await logService.query(filters)
       setEntries(results)
     } catch (err) {
-      console.error('Failed to load activity log:', err)
+      const message = err instanceof Error ? err.message : t('common.error')
+      toast.error(t('activityLog.loadFailed'), { description: message })
     } finally {
       setLoading(false)
     }
-  }, [actionFilter, clientFilter, sinceFilter])
+  }, [actionFilter, clientFilter, sinceFilter, t])
 
   useEffect(() => {
     void fetchEntries()