I18n translation

.env.example

@@ -1 +1 @@
-VITE_API_URL=http://localhost:8080
+VITE_API_URL=http://localhost:8090/api

.eslintrc.cjs

@@ -5,32 +5,30 @@ module.exports = {
     browser: true,
     es2021: true,
   },
-  extends: [
-    'eslint:recommended',
-    'plugin:vue/vue3-recommended',
-    'plugin:@typescript-eslint/recommended',
-    'prettier',
-  ],
-  parser: 'vue-eslint-parser',
+  extends: ["eslint:recommended", "plugin:vue/vue3-recommended", "plugin:@typescript-eslint/recommended", "prettier"],
+  parser: "vue-eslint-parser",
   parserOptions: {
-    ecmaVersion: 'latest',
-    parser: '@typescript-eslint/parser',
-    sourceType: 'module',
+    ecmaVersion: "latest",
+    parser: "@typescript-eslint/parser",
+    sourceType: "module",
   },
-  plugins: ['vue', '@typescript-eslint'],
+  plugins: ["vue", "@typescript-eslint"],
   rules: {
-    'vue/multi-word-component-names': 'off',
-    '@typescript-eslint/no-explicit-any': 'off',
-    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
-    'vue/max-attributes-per-line': 'off',
-    'vue/singleline-html-element-content-newline': 'off',
-    'vue/html-self-closing': ['warn', {
-      html: { void: 'any', normal: 'always', component: 'always' },
-      svg: 'always',
-      math: 'always',
-    }],
-    'vue/attributes-order': 'off',
-    'vue/require-default-prop': 'off',
-    'vue/use-v-on-exact': 'off',
+    "vue/multi-word-component-names": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
+    "vue/max-attributes-per-line": "off",
+    "vue/singleline-html-element-content-newline": "off",
+    "vue/html-self-closing": [
+      "warn",
+      {
+        html: { void: "any", normal: "always", component: "always" },
+        svg: "always",
+        math: "always",
+      },
+    ],
+    "vue/attributes-order": "off",
+    "vue/require-default-prop": "off",
+    "vue/use-v-on-exact": "off",
   },
 };

.github/workflows/ci.yml

@@ -16,8 +16,8 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
-          cache: 'npm'
+          node-version: "20"
+          cache: "npm"
 
       - name: Install dependencies
         run: npm ci
@@ -37,8 +37,8 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
-          cache: 'npm'
+          node-version: "20"
+          cache: "npm"
 
       - name: Install dependencies
         run: npm ci
@@ -55,8 +55,8 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
-          cache: 'npm'
+          node-version: "20"
+          cache: "npm"
 
       - name: Install dependencies
         run: npm ci
@@ -74,8 +74,8 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
-          cache: 'npm'
+          node-version: "20"
+          cache: "npm"
 
       - name: Install dependencies
         run: npm ci

README.md

@@ -32,6 +32,7 @@ FlatRun UI provides a user-friendly dashboard for managing Docker deployments th
 ## Development
 
 ### Prerequisites
+
 - Node.js 18+ and npm
 
 ### Setup
@@ -75,9 +76,11 @@ Create a `.env.local` file to configure the API connection:
 
 ```bash
 # FlatRun Agent API URL
-VITE_API_URL=http://localhost:8090
+VITE_API_URL=http://localhost:8090/api
 ```
 
+`VITE_API_URL` must include the `/api` prefix used by the agent routes.
+
 For production deployments:
 
 ```bash
@@ -101,8 +104,8 @@ If running the UI on a different domain/port than the agent, ensure the agent's
 api:
   enable_cors: true
   allowed_origins:
-    - http://localhost:5173  # Development
-    - https://your-ui-domain.com  # Production
+    - http://localhost:5173 # Development
+    - https://your-ui-domain.com # Production
 ```
 
 ## Available Scripts
@@ -160,16 +163,19 @@ EXPOSE 80
 ## Troubleshooting
 
 ### Cannot connect to agent
+
 - Verify the agent is running: `systemctl status flatrun-agent`
 - Check `VITE_API_URL` is correct in your `.env.local`
 - Ensure CORS is configured if running on different domains
 
 ### Authentication fails
+
 - Verify the API key matches the agent's configuration
 - Check browser console for specific error messages
 - Ensure JWT secret is properly set in agent config
 
 ### UI shows no deployments
+
 - Confirm the agent's `deployments_path` is accessible
 - Check that deployments have valid `docker-compose.yml` files
 

index.html

@@ -1,9 +1,9 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <link rel="icon" type="image/svg+xml" href="/src/assets/flatrun-icon-black.svg">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/assets/flatrun-icon-black.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Flatrun - Container Orchestration</title>
   </head>
   <body>

package.json

@@ -37,6 +37,7 @@
     "primevue": "^3.50.0",
     "vue": "^3.4.21",
     "vue-codemirror": "^6.1.1",
+    "vue-i18n": "^9.14.5",
     "vue-router": "^4.3.0"
   },
   "devDependencies": {

src/components/BackupsTab.test.ts

@@ -200,7 +200,7 @@ describe("BackupsTab", () => {
 
       const statusBadge = wrapper.find(".backup-status");
       expect(statusBadge.exists()).toBe(true);
-      expect(statusBadge.text()).toBe("completed");
+      expect(statusBadge.text().toLowerCase()).toBe("completed");
     });
 
     it("displays component badges", async () => {