feat: add vue-i18n infrastructure and externalize all UI strings (A11Y-03)

Set up vue-i18n with English locale file containing 500+ keys organized
by view namespace. All 15 views converted to use t() calls instead of
hardcoded strings. Infrastructure ready for community translations.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

neode-ui/src/views/ContainerAppDetails.vue

@@ -8,18 +8,18 @@
         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
         </svg>
-        Back
+        {{ t('containerDetails.back') }}
       </button>
       
       <div class="flex items-start justify-between">
         <div>
           <h1 class="text-3xl font-bold text-white mb-2">{{ appName }}</h1>
-          <p class="text-white/70">Container details and management</p>
+          <p class="text-white/70">{{ t('containerDetails.subtitle') }}</p>
         </div>
         <ContainerStatus 
           v-if="container"
-          :state="container.state as any"
-          :health="healthStatus as any"
+          :state="container.state as ContainerStateValue"
+          :health="healthStatus as HealthStatusValue"
         />
       </div>
     </div>
@@ -41,22 +41,22 @@
     <div v-else-if="container" key="content" class="space-y-6">
       <!-- Container Info Card -->
       <div class="glass-card p-6">
-        <h2 class="text-xl font-semibold text-white mb-4">Container Information</h2>
+        <h2 class="text-xl font-semibold text-white mb-4">{{ t('containerDetails.containerInfo') }}</h2>
         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
           <div>
-            <span class="text-sm text-white/60">Container ID</span>
+            <span class="text-sm text-white/60">{{ t('containerDetails.containerId') }}</span>
             <p class="text-white/90 font-mono text-sm mt-1">{{ container.id }}</p>
           </div>
           <div>
-            <span class="text-sm text-white/60">Image</span>
+            <span class="text-sm text-white/60">{{ t('containerDetails.image') }}</span>
             <p class="text-white/90 text-sm mt-1">{{ container.image }}</p>
           </div>
           <div>
-            <span class="text-sm text-white/60">State</span>
+            <span class="text-sm text-white/60">{{ t('containerDetails.state') }}</span>
             <p class="text-white/90 text-sm mt-1 capitalize">{{ container.state }}</p>
           </div>
           <div>
-            <span class="text-sm text-white/60">Created</span>
+            <span class="text-sm text-white/60">{{ t('containerDetails.created') }}</span>
             <p class="text-white/90 text-sm mt-1">{{ formatDate(container.created) }}</p>
           </div>
         </div>
@@ -64,7 +64,7 @@
 
       <!-- Actions Card -->
       <div class="glass-card p-6">
-        <h2 class="text-xl font-semibold text-white mb-4">Actions</h2>
+        <h2 class="text-xl font-semibold text-white mb-4">{{ t('containerDetails.actions') }}</h2>
         <div class="flex gap-4">
           <button
             v-if="container.state !== 'running'"
@@ -72,7 +72,7 @@
             :disabled="actionLoading"
             class="px-6 py-3 glass-button rounded-lg font-medium text-white/90 hover:text-white transition-colors disabled:opacity-50"
           >
-            Start Container
+            {{ t('containerDetails.startContainer') }}
           </button>
           <button
             v-else
@@ -80,21 +80,21 @@
             :disabled="actionLoading"
             class="px-6 py-3 glass-button rounded-lg font-medium text-white/90 hover:text-white transition-colors disabled:opacity-50"
           >
-            Stop Container
+            {{ t('containerDetails.stopContainer') }}
           </button>
           <button
             @click="handleRestart"
             :disabled="actionLoading || container.state !== 'running'"
             class="px-6 py-3 glass-button rounded-lg font-medium text-white/90 hover:text-white transition-colors disabled:opacity-50"
           >
-            Restart
+            {{ t('common.restart') }}
           </button>
           <button
             @click="handleRemove"
             :disabled="actionLoading"
             class="px-6 py-3 glass-button rounded-lg font-medium text-red-400/90 hover:text-red-400 transition-colors disabled:opacity-50"
           >
-            Remove
+            {{ t('common.remove') }}
           </button>
         </div>
       </div>
@@ -102,21 +102,21 @@
       <!-- Logs Card -->
       <div class="glass-card p-6">
         <div class="flex items-center justify-between mb-4">
-          <h2 class="text-xl font-semibold text-white">Logs</h2>
+          <h2 class="text-xl font-semibold text-white">{{ t('containerDetails.logs') }}</h2>
           <button
             @click="refreshLogs"
             :disabled="logsLoading"
             class="px-4 py-2 glass-button rounded text-sm font-medium text-white/90 hover:text-white transition-colors disabled:opacity-50"
           >
-            Refresh
+            {{ t('common.refresh') }}
           </button>
         </div>
         <div class="bg-black/40 rounded-lg p-4 font-mono text-sm text-white/80 max-h-96 overflow-y-auto">
           <div v-if="logsLoading" class="text-center py-4 text-white/60">
-            Loading logs...
+            {{ t('containerDetails.loadingLogs') }}
           </div>
           <div v-else-if="logs.length === 0" class="text-center py-4 text-white/60">
-            No logs available
+            {{ t('containerDetails.noLogs') }}
           </div>
           <div v-else>
             <div v-for="(log, index) in logs" :key="index" class="mb-1">
@@ -133,12 +133,18 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 import { useContainerStore } from '@/stores/container'
+import { type ContainerStatus as ContainerStatusData } from '@/api/container-client'
 import ContainerStatus from '@/components/ContainerStatus.vue'
 
+type ContainerStateValue = 'created' | 'running' | 'stopped' | 'exited' | 'paused' | 'unknown'
+type HealthStatusValue = 'healthy' | 'unhealthy' | 'unknown' | 'starting'
+
 const route = useRoute()
 const router = useRouter()
 const store = useContainerStore()
+const { t } = useI18n()
 
 const appId = computed(() => route.params.id as string)
 const appName = computed(() => {
@@ -148,7 +154,7 @@ const appName = computed(() => {
     .join(' ')
 })
 
-const container = ref<any>(null)
+const container = ref<ContainerStatusData | null>(null)
 const logs = ref<string[]>([])
 const loading = ref(false)
 const logsLoading = ref(false)
@@ -169,7 +175,7 @@ async function loadContainer() {
     const status = await store.getContainerStatus(appId.value)
     container.value = status
   } catch (e) {
-    error.value = e instanceof Error ? e.message : 'Failed to load container'
+    error.value = e instanceof Error ? e.message : t('common.error')
   } finally {
     loading.value = false
   }
@@ -180,7 +186,7 @@ async function loadLogs() {
   try {
     logs.value = await store.getContainerLogs(appId.value, 100)
   } catch (e) {
-    console.error('Failed to load logs:', e)
+    if (import.meta.env.DEV) console.error('Failed to load logs:', e)
   } finally {
     logsLoading.value = false
   }
@@ -202,7 +208,7 @@ async function handleStart() {
     await loadContainer()
     await loadHealthStatus()
   } catch (e) {
-    error.value = e instanceof Error ? e.message : 'Failed to start container'
+    error.value = e instanceof Error ? e.message : t('common.error')
   } finally {
     actionLoading.value = false
   }
@@ -214,7 +220,7 @@ async function handleStop() {
     await store.stopContainer(appId.value)
     await loadContainer()
   } catch (e) {
-    error.value = e instanceof Error ? e.message : 'Failed to stop container'
+    error.value = e instanceof Error ? e.message : t('common.error')
   } finally {
     actionLoading.value = false
   }
@@ -229,14 +235,14 @@ async function handleRestart() {
     await loadContainer()
     await loadHealthStatus()
   } catch (e) {
-    error.value = e instanceof Error ? e.message : 'Failed to restart container'
+    error.value = e instanceof Error ? e.message : t('common.error')
   } finally {
     actionLoading.value = false
   }
 }
 
 async function handleRemove() {
-  if (!confirm(`Are you sure you want to remove ${appName.value}? This will delete the container and all its data.`)) {
+  if (!confirm(t('apps.uninstallConfirm', { name: appName.value }))) {
     return
   }
   
@@ -245,7 +251,7 @@ async function handleRemove() {
     await store.removeContainer(appId.value)
     router.push('/dashboard/apps')
   } catch (e) {
-    error.value = e instanceof Error ? e.message : 'Failed to remove container'
+    error.value = e instanceof Error ? e.message : t('common.error')
   } finally {
     actionLoading.value = false
   }