diff --git a/.claude/commands/documentar.md b/.claude/commands/documentar.md
index 1e9cf57..1807d16 100644
--- a/.claude/commands/documentar.md
+++ b/.claude/commands/documentar.md
@@ -41,6 +41,8 @@ markdown_extensions:
   - tables
   - toc:
       permalink: true
+  - attr_list
+  - md_in_html
 
 extra_javascript:
   - https://unpkg.com/mermaid@10/dist/mermaid.min.js
@@ -108,6 +110,68 @@ docs/
     └── arquitetura.md              ← diagrama Mermaid + descrição de componentes
 ```
 
+## Screenshots do frontend
+
+A documentação **deve incluir prints reais da interface**. Siga este processo:
+
+### 1. Verificar se o frontend está rodando
+
+Antes de tirar screenshots, verifique se o frontend já está acessível em `http://localhost:5173`. Use a ferramenta `browser_navigate` para navegar até a URL e `browser_take_screenshot` para capturar.
+
+Se o frontend não estiver rodando, inicie com:
+
+```bash
+docker compose up frontend -d
+```
+
+Aguarde alguns segundos e verifique novamente.
+
+### 2. Screenshots a capturar
+
+Salve todos os screenshots em `docs/assets/screenshots/`. Crie a pasta se não existir. Use os nomes de arquivo abaixo (exatos, sem espaços):
+
+| Arquivo                          | O que capturar                                                                 |
+|----------------------------------|--------------------------------------------------------------------------------|
+| `visao-geral.png`                | A interface completa com painel lateral + canvas (domínio ecommerce carregado) |
+| `modal-ia.png`                   | O modal de geração com IA aberto, com provider e prompt preenchidos            |
+| `diagrama-relacional.png`        | O canvas com um diagrama relacional com pelo menos 3 tabelas conectadas        |
+| `catalogo-faker.png`             | O painel do catálogo Faker aberto                                              |
+| `yaml-exportado.png`             | A aba de YAML exportado com código visível                                     |
+| `run-generator.png`              | O modal "Run Generator" / painel de execução aberto                            |
+
+### 3. Como tirar os screenshots
+
+Use a sequência de ferramentas MCP de browser:
+
+1. `browser_navigate` → `http://localhost:5173`
+2. `browser_take_screenshot` → salva a visão geral
+3. Para abrir modais: use `browser_click` no botão correspondente, depois `browser_take_screenshot`
+4. Para carregar um domínio: use `browser_select_option` ou `browser_click` no seletor de domínio
+
+Após cada screenshot, salve o arquivo em `docs/assets/screenshots/<nome>.png` usando a ferramenta `Write` com o conteúdo binário retornado, **ou** use `browser_take_screenshot` com o parâmetro de caminho de saída se disponível.
+
+### 4. Referenciar nas páginas
+
+Após salvar os screenshots, referencie-os nas páginas correspondentes do MkDocs:
+
+- `docs/frontend/visao-geral.md` → `![Visão geral da interface](../assets/screenshots/visao-geral.png)`
+- `docs/frontend/ia.md` → `![Modal de geração com IA](../assets/screenshots/modal-ia.png)`
+- `docs/frontend/diagrama.md` → `![Diagrama relacional](../assets/screenshots/diagrama-relacional.png)`
+- `docs/frontend/faker.md` → `![Catálogo Faker](../assets/screenshots/catalogo-faker.png)`
+- `docs/frontend/yaml.md` → `![YAML exportado](../assets/screenshots/yaml-exportado.png)`
+
+Posicione cada imagem logo após o primeiro parágrafo introdutório da página, antes do detalhamento.
+
+### 5. Se o frontend não puder ser iniciado
+
+Se após tentar subir com Docker o frontend ainda não estiver acessível, registre no chat:
+
+> "Frontend indisponível para screenshots. As páginas de interface foram documentadas sem capturas de tela. Execute `docker compose up frontend` e rode `/documentar` novamente para adicionar os prints."
+
+Não bloqueie a geração do restante da documentação por causa dos screenshots — eles são adicionais, não bloqueantes.
+
+---
+
 ## O que ler antes de escrever
 
 Leia os arquivos abaixo para entender o estado atual do projeto antes de escrever qualquer coisa:
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 8df1797..c93fde2 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -2,7 +2,7 @@ name: CI
 
 on:
   push:
-    branches-ignore: []   # runs on all branches including main
+    branches-ignore: ["main"]
   pull_request:
     branches: ["main"]
 
@@ -10,7 +10,6 @@ jobs:
   lint:
     name: Lint & Format
     runs-on: ubuntu-latest
-    if: github.ref_name != 'main'
     steps:
       - uses: actions/checkout@v4
 
@@ -26,7 +25,6 @@ jobs:
     name: Tests
     runs-on: ubuntu-latest
     needs: lint
-    if: github.ref_name != 'main'
     steps:
       - uses: actions/checkout@v4
 
@@ -52,11 +50,31 @@ jobs:
           files: coverage.xml
           fail_ci_if_error: false
 
+  frontend-test:
+    name: Frontend Tests
+    runs-on: ubuntu-latest
+    needs: lint
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+          cache-dependency-path: src/dataforge/frontend/package-lock.json
+
+      - name: Install dependencies
+        run: npm ci
+        working-directory: src/dataforge/frontend
+
+      - name: Run tests
+        run: npm test
+        working-directory: src/dataforge/frontend
+
   build:
     name: Build Package
     runs-on: ubuntu-latest
-    needs: test
-    if: github.ref_name != 'main'
+    needs: [test, frontend-test]
     steps:
       - uses: actions/checkout@v4
 
@@ -76,8 +94,8 @@ jobs:
   open-pr:
     name: Open PR to main
     runs-on: ubuntu-latest
-    needs: [lint, test]
-    if: github.event_name == 'push' && github.ref_name != 'main'
+    needs: [lint, test, frontend-test]
+    if: github.event_name == 'push'
     permissions:
       pull-requests: write
       contents: read
@@ -104,68 +122,3 @@ jobs:
               --title "feat: merge ${BRANCH} into main (v${VERSION})" \
               --body-file /tmp/pr_body.md
           fi
-
-  docs:
-    name: Deploy Docs
-    runs-on: ubuntu-latest
-    if: github.event_name == 'push' && github.ref_name == 'main'
-    permissions:
-      contents: write
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - uses: actions/setup-python@v5
-        with:
-          python-version: "3.12"
-
-      - name: Install MkDocs
-        run: pip install mkdocs mkdocs-material
-
-      - name: Deploy to GitHub Pages
-        run: mkdocs gh-deploy --force
-
-  release:
-    name: Release
-    runs-on: ubuntu-latest
-    if: github.event_name == 'push' && github.ref_name == 'main'
-    permissions:
-      contents: write
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Read version from pyproject.toml
-        id: version
-        run: |
-          VERSION=$(grep -m1 '^version' pyproject.toml | sed 's/.*"\(.*\)"/\1/')
-          echo "value=$VERSION" >> "$GITHUB_OUTPUT"
-          echo "tag=v$VERSION" >> "$GITHUB_OUTPUT"
-
-      - name: Check if tag already exists
-        id: tag_check
-        run: |
-          if git ls-remote --tags origin "refs/tags/${{ steps.version.outputs.tag }}" | grep -q .; then
-            echo "exists=true" >> "$GITHUB_OUTPUT"
-          else
-            echo "exists=false" >> "$GITHUB_OUTPUT"
-          fi
-
-      - name: Create git tag
-        if: steps.tag_check.outputs.exists == 'false'
-        run: |
-          git config user.name "github-actions[bot]"
-          git config user.email "github-actions[bot]@users.noreply.github.com"
-          git tag "${{ steps.version.outputs.tag }}"
-          git push origin "${{ steps.version.outputs.tag }}"
-
-      - name: Create GitHub Release
-        if: steps.tag_check.outputs.exists == 'false'
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: |
-          gh release create "${{ steps.version.outputs.tag }}" \
-            --title "Dataforge ${{ steps.version.outputs.tag }}" \
-            --generate-notes
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
new file mode 100644
index 0000000..17dadd2
--- /dev/null
+++ b/.github/workflows/release.yml
@@ -0,0 +1,69 @@
+name: Release
+
+on:
+  push:
+    branches: ["main"]
+
+jobs:
+  docs:
+    name: Deploy Docs
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-python@v5
+        with:
+          python-version: "3.12"
+
+      - name: Install MkDocs
+        run: pip install mkdocs mkdocs-material
+
+      - name: Deploy to GitHub Pages
+        run: mkdocs gh-deploy --force
+
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Read version from pyproject.toml
+        id: version
+        run: |
+          VERSION=$(grep -m1 '^version' pyproject.toml | sed 's/.*"\(.*\)"/\1/')
+          echo "value=$VERSION" >> "$GITHUB_OUTPUT"
+          echo "tag=v$VERSION" >> "$GITHUB_OUTPUT"
+
+      - name: Check if tag already exists
+        id: tag_check
+        run: |
+          if git ls-remote --tags origin "refs/tags/${{ steps.version.outputs.tag }}" | grep -q .; then
+            echo "exists=true" >> "$GITHUB_OUTPUT"
+          else
+            echo "exists=false" >> "$GITHUB_OUTPUT"
+          fi
+
+      - name: Create git tag
+        if: steps.tag_check.outputs.exists == 'false'
+        run: |
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+          git tag "${{ steps.version.outputs.tag }}"
+          git push origin "${{ steps.version.outputs.tag }}"
+
+      - name: Create GitHub Release
+        if: steps.tag_check.outputs.exists == 'false'
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          gh release create "${{ steps.version.outputs.tag }}" \
+            --title "Dataforge ${{ steps.version.outputs.tag }}" \
+            --generate-notes
diff --git a/.gitignore b/.gitignore
index 6ea852e..000c12d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -195,6 +195,7 @@ pyrightconfig.json
 # End of https://www.toptal.com/developers/gitignore/api/python,visualstudiocode
 # Dataforge specific
 output/
+data/
 credentials/*
 !credentials/*.example
 !credentials/*.example.json
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 37db7d2..5e4bc09 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -14,3 +14,10 @@ repos:
         language: system
         pass_filenames: false
         always_run: true
+
+      - id: frontend-test
+        name: vitest (frontend)
+        entry: bash -c 'cd src/dataforge/frontend && npm test'
+        language: system
+        pass_filenames: false
+        files: ^src/dataforge/frontend/src/.*\.(ts|tsx)$
diff --git a/docker-compose.yml b/docker-compose.yml
index 60f9e9b..0325400 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -20,6 +20,8 @@ services:
       # Volume nomeado protege o node_modules Linux do build
       # (impede que o mount acima sobrescreva com binários Windows do host)
       - frontend_node_modules:/app/src/dataforge/frontend/node_modules
+      # Dados persistidos: usuários, env-keys, JWT secret
+      - ./data:/app/data
     environment:
       - PYTHONPATH=/app/src
     restart: unless-stopped
diff --git a/docs/assets/screenshots/catalogo-faker.png b/docs/assets/screenshots/catalogo-faker.png
new file mode 100644
index 0000000..587caed
Binary files /dev/null and b/docs/assets/screenshots/catalogo-faker.png differ
diff --git a/docs/assets/screenshots/diagrama-relacional.png b/docs/assets/screenshots/diagrama-relacional.png
new file mode 100644
index 0000000..4881024
Binary files /dev/null and b/docs/assets/screenshots/diagrama-relacional.png differ
diff --git a/docs/assets/screenshots/modal-ia.png b/docs/assets/screenshots/modal-ia.png
new file mode 100644
index 0000000..13e37ca
Binary files /dev/null and b/docs/assets/screenshots/modal-ia.png differ
diff --git a/docs/assets/screenshots/run-generator.png b/docs/assets/screenshots/run-generator.png
new file mode 100644
index 0000000..4dddffd
Binary files /dev/null and b/docs/assets/screenshots/run-generator.png differ
diff --git a/docs/assets/screenshots/visao-geral.png b/docs/assets/screenshots/visao-geral.png
new file mode 100644
index 0000000..2c79d68
Binary files /dev/null and b/docs/assets/screenshots/visao-geral.png differ
diff --git a/docs/assets/screenshots/yaml-exportado.png b/docs/assets/screenshots/yaml-exportado.png
new file mode 100644
index 0000000..b871fef
Binary files /dev/null and b/docs/assets/screenshots/yaml-exportado.png differ
diff --git a/docs/avancado/arquitetura.md b/docs/avancado/arquitetura.md
index 981a902..b564d64 100644
--- a/docs/avancado/arquitetura.md
+++ b/docs/avancado/arquitetura.md
@@ -14,10 +14,13 @@ flowchart LR
         UI --> SW
     end
 
-    subgraph Server["Servidor Vite / Backend Python"]
-        API_SCHEMAS[GET /api/schemas\nGET /api/schemas/:nome\nPUT /api/schemas/:nome\nDELETE /api/schemas/:nome]
+    subgraph Server["Servidor Vite (Node.js)"]
+        API_AUTH[POST /api/auth/register\nPOST /api/auth/login]
+        API_SCHEMAS[GET /api/schemas\nPOST /api/save-schema]
         API_AI[POST /api/ai-generate\nPOST /api/ai-models]
         API_DB[POST /api/test-db-connection]
+        API_CLI[POST /api/run-cli\nPOST /api/stop-cli\nGET /api/run-history]
+        API_SCHED[GET /api/schedules\nPOST /api/schedules]
     end
 
     subgraph Core["Core Python"]
@@ -45,9 +48,12 @@ flowchart LR
         OLLAMA[Ollama local]
     end
 
+    UI -- HTTP --> API_AUTH
     UI -- HTTP --> API_SCHEMAS
     UI -- HTTP --> API_AI
     UI -- HTTP --> API_DB
+    UI -- HTTP --> API_CLI
+    UI -- HTTP --> API_SCHED
     API_AI --> ANTHROPIC
     API_AI --> OPENAI
     API_AI --> GOOGLE
@@ -81,17 +87,27 @@ flowchart LR
 
 ### Servidor (vite.config.ts)
 
-O servidor de desenvolvimento do Vite expõe endpoints de API via proxy ou plugin. Os endpoints disponíveis são:
+O servidor de desenvolvimento do Vite expõe endpoints de API via plugin. Os endpoints disponíveis são:
 
 | Endpoint | Método | Descrição |
 |----------|--------|-----------|
+| `/api/auth/register` | POST | Registra novo usuário |
+| `/api/auth/login` | POST | Autentica usuário e retorna JWT |
+| `/api/auth/me` | GET | Retorna dados do usuário autenticado |
 | `/api/schemas` | GET | Lista schemas disponíveis |
-| `/api/schemas/:nome` | GET | Retorna o YAML de um schema |
-| `/api/schemas/:nome` | PUT | Salva um schema no servidor |
-| `/api/schemas/:nome` | DELETE | Remove um schema do servidor |
+| `/api/save-schema` | POST | Salva schema no servidor |
 | `/api/ai-generate` | POST | Gera schema via IA |
 | `/api/ai-models` | POST | Lista modelos disponíveis para o provider |
 | `/api/test-db-connection` | POST | Testa uma connection string SQL |
+| `/api/run-cli` | POST | Executa o CLI com os parâmetros fornecidos |
+| `/api/stop-cli` | POST | Para a execução do CLI em andamento |
+| `/api/run-history` | GET | Lista o histórico de execuções |
+| `/api/schedules` | GET | Lista execuções agendadas |
+| `/api/schedules` | POST | Cria uma nova execução agendada |
+| `/api/credential-profiles` | GET/POST | Gerencia perfis de credenciais cloud |
+| `/api/profile/env-keys` | GET/POST/DELETE | Gerencia chaves de API salvas por usuário |
+| `/api/capabilities` | GET | Retorna capacidades disponíveis no servidor |
+| `/api/browse-folder` | GET | Navega pelo sistema de arquivos do servidor |
 
 ### Core Python
 
diff --git a/docs/cli/referencia.md b/docs/cli/referencia.md
index b77b463..3e08972 100644
--- a/docs/cli/referencia.md
+++ b/docs/cli/referencia.md
@@ -35,9 +35,11 @@ Gera datasets e opcionalmente escreve em arquivos, faz upload para nuvem ou carr
 | `--db-url` | | — | string | Connection string SQLAlchemy para carga SQL |
 | `--if-exists` | | `replace` | choice | O que fazer se a tabela SQL já existir: `replace`, `append` ou `fail` |
 | `--db-schema` | | — | string | Schema do banco de destino |
+| `--partition-date-granularity` | | — | string | Trunca valores de data nas partições: `granularidade` ou `tabela:granularidade`. Opções: `year` (→ YYYY) ou `month` (→ YYYY-MM) (repetível) |
 | `--recurrence` | `-R` | — | float | Intervalo em segundos entre batches (modo contínuo) |
 | `--count` | | `0` | int | Número de batches no modo recorrente (`0` = infinito) |
 | `--increment` | | — | string | Desloca valores de coluna a cada batch: `tabela:coluna:passo[:unidade]` (repetível) |
+| `--workers` | | `16` | int | Máximo de threads paralelas para escrita particionada |
 
 ### Unidades para `--increment`
 
diff --git a/docs/frontend/diagrama.md b/docs/frontend/diagrama.md
index b7506e9..95b976c 100644
--- a/docs/frontend/diagrama.md
+++ b/docs/frontend/diagrama.md
@@ -2,6 +2,8 @@
 
 O canvas central da interface exibe as tabelas do schema como nós interativos conectados por setas que representam as chaves estrangeiras.
 
+![Diagrama relacional](../assets/screenshots/diagrama-relacional.png)
+
 ## Tecnologia
 
 O diagrama é construído com **ReactFlow**. Cada tabela é um nó do tipo `tableNode` (componente customizado) e cada FK é uma aresta animada.
diff --git a/docs/frontend/faker.md b/docs/frontend/faker.md
index 57720a7..18e6147 100644
--- a/docs/frontend/faker.md
+++ b/docs/frontend/faker.md
@@ -2,6 +2,8 @@
 
 O **Faker Browser** é um painel de busca visual com todos os métodos do Faker disponíveis na interface. Ele permite explorar e aplicar provedores de dados diretamente às colunas do schema.
 
+![Catálogo Faker](../assets/screenshots/catalogo-faker.png)
+
 ## Acessando
 
 Clique no botão **Faker Browser** na barra de ações. O painel lateral é aberto com campo de busca e listagem por categoria.
diff --git a/docs/frontend/ia.md b/docs/frontend/ia.md
index 7dd3042..01c8c89 100644
--- a/docs/frontend/ia.md
+++ b/docs/frontend/ia.md
@@ -2,6 +2,8 @@
 
 O recurso **AI Generate** permite descrever um domínio de negócio em linguagem natural e gerar automaticamente o schema YAML com tabelas, colunas, tipos de dados e relações.
 
+![Modal de geração com IA](../assets/screenshots/modal-ia.png)
+
 ## Fluxo completo
 
 ```mermaid
diff --git a/docs/frontend/visao-geral.md b/docs/frontend/visao-geral.md
index dcc4074..a84d057 100644
--- a/docs/frontend/visao-geral.md
+++ b/docs/frontend/visao-geral.md
@@ -2,6 +2,14 @@
 
 A interface visual roda em `http://localhost:5173` e é a forma principal de uso do Dataforge. Ela permite criar schemas, configurar a geração e executar o CLI sem sair do navegador.
 
+![Visão geral da interface](../assets/screenshots/visao-geral.png)
+
+## Autenticação
+
+O acesso à interface requer login. Na primeira vez, crie uma conta pela aba **Create Account** na tela de login. O servidor registra as credenciais localmente em `users.json` (dentro do container/projeto). Após autenticar, um JWT é salvo no `localStorage` com a chave `dataforge_auth` e enviado em todas as chamadas de API.
+
+Para sair, clique no ícone de usuário no canto superior direito e selecione **Sign Out**.
+
 ## Tecnologias
 
 - **React** com TypeScript
diff --git a/docs/frontend/yaml.md b/docs/frontend/yaml.md
index 1dd00c3..80eea1c 100644
--- a/docs/frontend/yaml.md
+++ b/docs/frontend/yaml.md
@@ -2,6 +2,8 @@
 
 A interface permite exportar o schema atual como YAML e importar um arquivo YAML existente para o canvas.
 
+![YAML exportado](../assets/screenshots/yaml-exportado.png)
+
 ## Exportar YAML (Preview)
 
 O botão **Preview YAML** gera o YAML do schema atual e exibe no painel lateral.
diff --git a/docs/saida/particionamento.md b/docs/saida/particionamento.md
index 9da1e19..dfc1dff 100644
--- a/docs/saida/particionamento.md
+++ b/docs/saida/particionamento.md
@@ -77,5 +77,50 @@ O layout Hive-style é reconhecido diretamente por:
 - **DuckDB** — `read_parquet("output/ecommerce/orders/**/*.parquet", hive_partitioning=true)`
 - **dbt** — uso como source com partições
 
+## Granularidade de data nas partições
+
+Quando a coluna de partição contém datas, os valores brutos como `2024-03-15` geram muitas subpastas. Use `--partition-date-granularity` para truncar esses valores:
+
+| Granularidade | Formato gerado | Exemplo de pasta |
+|---------------|----------------|------------------|
+| `year` | `YYYY` | `created_at=2024` |
+| `month` | `YYYY-MM` | `created_at=2024-03` |
+
+```bash
+# Particionar orders por mês
+docker compose run --rm cli generate -d ecommerce -f parquet \
+  --partition-by "orders:created_at" \
+  --partition-date-granularity "orders:month"
+
+# Aplicar granularidade anual a todas as tabelas
+docker compose run --rm cli generate -d ecommerce -f parquet \
+  --partition-by created_at \
+  --partition-date-granularity year
+```
+
+Layout de saída com `--partition-date-granularity month`:
+
+```
+output/
+└── ecommerce/
+    └── orders/
+        ├── created_at=2023-01/
+        │   └── orders.parquet
+        ├── created_at=2023-02/
+        │   └── orders.parquet
+        └── created_at=2024-12/
+            └── orders.parquet
+```
+
+## Paralelismo na escrita
+
+Por padrão, a escrita de partições usa até 16 threads em paralelo. Ajuste com `--workers`:
+
+```bash
+docker compose run --rm cli generate -d ecommerce -f parquet \
+  --partition-by "orders:status" \
+  --workers 4
+```
+
 !!! tip "Colunas de data"
     Particionar por uma coluna de data (`created_at`, `transaction_date`) é o padrão mais comum para datasets temporais. Combine com o modo recorrente e `--increment` para simular pipelines incrementais.
diff --git a/pyproject.toml b/pyproject.toml
index 22ada9b..8adb3dd 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,6 +1,6 @@
 [project]
 name = "dataforge"
-version = "0.1.8"
+version = "0.1.9"
 description = "Synthetic relational dataset generator for data engineering studies"
 authors = [
     {name = "Carlos Oliveira", email = "papodedados@gmail.com"}
diff --git a/src/dataforge/cli.py b/src/dataforge/cli.py
index 03f5f9b..4a2be5a 100644
--- a/src/dataforge/cli.py
+++ b/src/dataforge/cli.py
@@ -358,7 +358,8 @@ def _append_csv(
                 dest_dir = out_path / dataset_name / name / f"{partition_by}={safe_val}"
                 dest_dir.mkdir(parents=True, exist_ok=True)
                 path = dest_dir / f"{name}.csv"
-                group.to_csv(path, mode="a", index=False, header=not path.exists())
+                write_header = not path.exists() or path.stat().st_size == 0
+                group.to_csv(path, mode="a", index=False, header=write_header)
                 click.echo(f"  [csv/append] {path} (+{len(group)} rows)")
                 written.append(
                     (path, f"{dataset_name}/{name}/{partition_by}={safe_val}/{path.name}")
@@ -367,7 +368,8 @@ def _append_csv(
             dest_dir = out_path / dataset_name / name
             dest_dir.mkdir(parents=True, exist_ok=True)
             path = dest_dir / f"{name}.csv"
-            df.to_csv(path, mode="a", index=False, header=not path.exists())
+            write_header = not path.exists() or path.stat().st_size == 0
+            df.to_csv(path, mode="a", index=False, header=write_header)
             click.echo(f"  [csv/append] {path} (+{len(df)} rows)")
             written.append((path, f"{dataset_name}/{name}/{path.name}"))
     return written
diff --git a/src/dataforge/frontend/package-lock.json b/src/dataforge/frontend/package-lock.json
index 41932a4..805abea 100644
--- a/src/dataforge/frontend/package-lock.json
+++ b/src/dataforge/frontend/package-lock.json
@@ -9,28 +9,83 @@
       "version": "0.0.0",
       "dependencies": {
         "dagre": "^0.8.5",
+        "i18next": "^26.0.4",
+        "i18next-browser-languagedetector": "^8.2.1",
         "lucide-react": "^1.8.0",
         "react": "^19.2.4",
         "react-dom": "^19.2.4",
+        "react-i18next": "^17.0.2",
         "reactflow": "^11.11.4",
         "yaml": "^2.8.3"
       },
       "devDependencies": {
         "@eslint/js": "^9.39.4",
+        "@testing-library/jest-dom": "^6.9.1",
+        "@testing-library/react": "^16.3.2",
+        "@testing-library/user-event": "^14.6.1",
         "@types/dagre": "^0.7.54",
         "@types/node": "^24.12.2",
         "@types/react": "^19.2.14",
         "@types/react-dom": "^19.2.3",
         "@vitejs/plugin-react": "^6.0.1",
+        "@vitest/coverage-v8": "^4.1.4",
         "eslint": "^9.39.4",
         "eslint-plugin-react-hooks": "^7.0.1",
         "eslint-plugin-react-refresh": "^0.5.2",
         "globals": "^17.4.0",
+        "jsdom": "^29.0.2",
         "typescript": "~6.0.2",
         "typescript-eslint": "^8.58.0",
-        "vite": "^8.0.4"
+        "vite": "^8.0.4",
+        "vitest": "^4.1.4"
       }
     },
+    "node_modules/@adobe/css-tools": {
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.4.tgz",
+      "integrity": "sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@asamuzakjp/css-color": {
+      "version": "5.1.10",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-5.1.10.tgz",
+      "integrity": "sha512-02OhhkKtgNRuicQ/nF3TRnGsxL9wp0r3Y7VlKWyOHHGmGyvXv03y+PnymU8FKFJMTjIr1Bk8U2g1HWSLrpAHww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/css-calc": "^3.1.1",
+        "@csstools/css-color-parser": "^4.0.2",
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@asamuzakjp/dom-selector": {
+      "version": "7.0.9",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/dom-selector/-/dom-selector-7.0.9.tgz",
+      "integrity": "sha512-r3ElRr7y8ucyN2KdICwGsmj19RoN13CLCa/pvGydghWK6ZzeKQ+TcDjVdtEZz2ElpndM5jXw//B9CEee0mWnVg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/nwsapi": "^2.3.9",
+        "bidi-js": "^1.0.3",
+        "css-tree": "^3.2.1",
+        "is-potential-custom-element-name": "^1.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@asamuzakjp/nwsapi": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/nwsapi/-/nwsapi-2.3.9.tgz",
+      "integrity": "sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.29.0",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
@@ -223,6 +278,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",
+      "integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.28.6",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
@@ -271,6 +335,169 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@bcoe/v8-coverage": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-1.0.2.tgz",
+      "integrity": "sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@bramus/specificity": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/@bramus/specificity/-/specificity-2.4.2.tgz",
+      "integrity": "sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "css-tree": "^3.0.0"
+      },
+      "bin": {
+        "specificity": "bin/cli.js"
+      }
+    },
+    "node_modules/@csstools/color-helpers": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-6.0.2.tgz",
+      "integrity": "sha512-LMGQLS9EuADloEFkcTBR3BwV/CGHV7zyDxVRtVDTwdI2Ca4it0CCVTT9wCkxSgokjE5Ho41hEPgb8OEUwoXr6Q==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/@csstools/css-calc": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-3.2.0.tgz",
+      "integrity": "sha512-bR9e6o2BDB12jzN/gIbjHa5wLJ4UjD1CB9pM7ehlc0ddk6EBz+yYS1EV2MF55/HUxrHcB/hehAyt5vhsA3hx7w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-color-parser": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-4.1.0.tgz",
+      "integrity": "sha512-U0KhLYmy2GVj6q4T3WaAe6NPuFYCPQoE3b0dRGxejWDgcPp8TP7S5rVdM5ZrFaqu4N67X8YaPBw14dQSYx3IyQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/color-helpers": "^6.0.2",
+        "@csstools/css-calc": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.0.tgz",
+      "integrity": "sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-syntax-patches-for-csstree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.1.3.tgz",
+      "integrity": "sha512-SH60bMfrRCJF3morcdk57WklujF4Jr/EsQUzqkarfHXEFcAR1gg7fS/chAE922Sehgzc1/+Tz5H3Ypa1HiEKrg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "peerDependencies": {
+        "css-tree": "^3.2.1"
+      },
+      "peerDependenciesMeta": {
+        "css-tree": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-4.0.0.tgz",
+      "integrity": "sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
     "node_modules/@emnapi/core": {
       "version": "1.9.2",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.2.tgz",
@@ -462,6 +689,24 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@exodus/bytes": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.15.0.tgz",
+      "integrity": "sha512-UY0nlA+feH81UGSHv92sLEPLCeZFjXOuHhrIo0HQydScuQc8s0A7kL/UdgwgDq8g8ilksmuoF35YVTNphV2aBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@noble/hashes": "^1.8.0 || ^2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@noble/hashes": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -959,6 +1204,103 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@testing-library/dom": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
+      "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "picocolors": "1.1.1",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@testing-library/jest-dom": {
+      "version": "6.9.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.9.1.tgz",
+      "integrity": "sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@adobe/css-tools": "^4.4.0",
+        "aria-query": "^5.0.0",
+        "css.escape": "^1.5.1",
+        "dom-accessibility-api": "^0.6.3",
+        "picocolors": "^1.1.1",
+        "redent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/dom-accessibility-api": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz",
+      "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@testing-library/react": {
+      "version": "16.3.2",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.3.2.tgz",
+      "integrity": "sha512-XU5/SytQM+ykqMnAnvB2umaJNIOsLF3PVv//1Ew4CTcpz0/BRyy/af40qqrt7SjKpDdT1saBMc42CUok5gaw+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": "^10.0.0",
+        "@types/react": "^18.0.0 || ^19.0.0",
+        "@types/react-dom": "^18.0.0 || ^19.0.0",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@testing-library/user-event": {
+      "version": "14.6.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.6.1.tgz",
+      "integrity": "sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": ">=7.21.4"
+      }
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.1",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
@@ -970,6 +1312,25 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/aria-query": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
+      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@types/chai": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
+      "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/deep-eql": "*",
+        "assertion-error": "^2.0.1"
+      }
+    },
     "node_modules/@types/d3": {
       "version": "7.4.3",
       "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
@@ -1230,6 +1591,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/deep-eql": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+      "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -1601,69 +1969,263 @@
         }
       }
     },
-    "node_modules/acorn": {
-      "version": "8.16.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
-      "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
+    "node_modules/@vitest/coverage-v8": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-4.1.4.tgz",
+      "integrity": "sha512-x7FptB5oDruxNPDNY2+S8tCh0pcq7ymCe1gTHcsp733jYjrJl8V1gMUlVysuCD9Kz46Xz9t1akkv08dPcYDs1w==",
       "dev": true,
       "license": "MIT",
-      "bin": {
-        "acorn": "bin/acorn"
+      "dependencies": {
+        "@bcoe/v8-coverage": "^1.0.2",
+        "@vitest/utils": "4.1.4",
+        "ast-v8-to-istanbul": "^1.0.0",
+        "istanbul-lib-coverage": "^3.2.2",
+        "istanbul-lib-report": "^3.0.1",
+        "istanbul-reports": "^3.2.0",
+        "magicast": "^0.5.2",
+        "obug": "^2.1.1",
+        "std-env": "^4.0.0-rc.1",
+        "tinyrainbow": "^3.1.0"
       },
-      "engines": {
-        "node": ">=0.4.0"
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@vitest/browser": "4.1.4",
+        "vitest": "4.1.4"
+      },
+      "peerDependenciesMeta": {
+        "@vitest/browser": {
+          "optional": true
+        }
       }
     },
-    "node_modules/acorn-jsx": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
-      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+    "node_modules/@vitest/expect": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.4.tgz",
+      "integrity": "sha512-iPBpra+VDuXmBFI3FMKHSFXp3Gx5HfmSCE8X67Dn+bwephCnQCaB7qWK2ldHa+8ncN8hJU8VTMcxjPpyMkUjww==",
       "dev": true,
       "license": "MIT",
-      "peerDependencies": {
-        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      "dependencies": {
+        "@standard-schema/spec": "^1.1.0",
+        "@types/chai": "^5.2.2",
+        "@vitest/spy": "4.1.4",
+        "@vitest/utils": "4.1.4",
+        "chai": "^6.2.2",
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
       }
     },
-    "node_modules/ajv": {
-      "version": "6.14.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz",
-      "integrity": "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==",
+    "node_modules/@vitest/mocker": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.1.4.tgz",
+      "integrity": "sha512-R9HTZBhW6yCSGbGQnDnH3QHfJxokKN4KB+Yvk9Q1le7eQNYwiCyKxmLmurSpFy6BzJanSLuEUDrD+j97Q+ZLPg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
+        "@vitest/spy": "4.1.4",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.21"
       },
       "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
       }
     },
-    "node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+    "node_modules/@vitest/pretty-format": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.1.4.tgz",
+      "integrity": "sha512-ddmDHU0gjEUyEVLxtZa7xamrpIefdEETu3nZjWtHeZX4QxqJ7tRxSteHVXJOcr8jhiLoGAhkK4WJ3WqBpjx42A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
+        "tinyrainbow": "^3.1.0"
       },
       "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+        "url": "https://opencollective.com/vitest"
       }
     },
-    "node_modules/argparse": {
-      "version": "2.0.1",
+    "node_modules/@vitest/runner": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.1.4.tgz",
+      "integrity": "sha512-xTp7VZ5aXP5ZJrn15UtJUWlx6qXLnGtF6jNxHepdPHpMfz/aVPx+htHtgcAL2mDXJgKhpoo2e9/hVJsIeFbytQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "4.1.4",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.1.4.tgz",
+      "integrity": "sha512-MCjCFgaS8aZz+m5nTcEcgk/xhWv0rEH4Yl53PPlMXOZ1/Ka2VcZU6CJ+MgYCZbcJvzGhQRjVrGQNZqkGPttIKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.1.4",
+        "@vitest/utils": "4.1.4",
+        "magic-string": "^0.30.21",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.1.4.tgz",
+      "integrity": "sha512-XxNdAsKW7C+FLydqFJLb5KhJtl3PGCMmYwFRfhvIgxJvLSXhhVI1zM8f1qD3Zg7RCjTSzDVyct6sghs9UEgBEQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.1.4.tgz",
+      "integrity": "sha512-13QMT+eysM5uVGa1rG4kegGYNp6cnQcsTc67ELFbhNLQO+vgsygtYJx2khvdt4gVQqSSpC/KT5FZZxUpP3Oatw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.1.4",
+        "convert-source-map": "^2.0.0",
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
+      "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz",
+      "integrity": "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true,
       "license": "Python-2.0"
     },
+    "node_modules/aria-query": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/ast-v8-to-istanbul": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/ast-v8-to-istanbul/-/ast-v8-to-istanbul-1.0.0.tgz",
+      "integrity": "sha512-1fSfIwuDICFA4LKkCzRPO7F0hzFf0B7+Xqrl27ynQaa+Rh0e1Es0v6kWHPott3lU10AyAr7oKHa65OppjLn3Rg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.31",
+        "estree-walker": "^3.0.3",
+        "js-tokens": "^10.0.0"
+      }
+    },
+    "node_modules/ast-v8-to-istanbul/node_modules/js-tokens": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-10.0.0.tgz",
+      "integrity": "sha512-lM/UBzQmfJRo9ABXbPWemivdCW8V2G8FHaHdypQaIy523snUjog0W71ayWXTjiR+ixeMyVHN2XcpnTd/liPg/Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1684,6 +2246,16 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/bidi-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
+      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "require-from-string": "^2.0.2"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.13",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.13.tgz",
@@ -1760,6 +2332,16 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/chai": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
+      "integrity": "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -1832,6 +2414,27 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-tree": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
+      "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.27.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/css.escape": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
+      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/csstype": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
@@ -1954,6 +2557,20 @@
         "lodash": "^4.17.15"
       }
     },
+    "node_modules/data-urls": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-7.0.0.tgz",
+      "integrity": "sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-mimetype": "^5.0.0",
+        "whatwg-url": "^16.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -1972,6 +2589,13 @@
         }
       }
     },
+    "node_modules/decimal.js": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
+      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -1979,6 +2603,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
@@ -1989,6 +2623,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/dom-accessibility-api": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
+      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.334",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.334.tgz",
@@ -1996,6 +2638,26 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/entities": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/es-module-lexer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.0.0.tgz",
+      "integrity": "sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/escalade": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
@@ -2193,6 +2855,16 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -2203,6 +2875,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/expect-type": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.3.0.tgz",
+      "integrity": "sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -2380,6 +3062,75 @@
         "hermes-estree": "0.25.1"
       }
     },
+    "node_modules/html-encoding-sniffer": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-6.0.0.tgz",
+      "integrity": "sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@exodus/bytes": "^1.6.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/html-escaper": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
+      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "license": "MIT",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
+    "node_modules/i18next": {
+      "version": "26.0.4",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-26.0.4.tgz",
+      "integrity": "sha512-gXF7U9bfioXPLv7mw8Qt2nfO7vij5MyINvPgVv99pX3fL1Y01pw2mKBFrlYpRxRCl2wz3ISenj6VsMJT2isfuA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://www.locize.com/i18next"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.locize.com"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2"
+      },
+      "peerDependencies": {
+        "typescript": "^5 || ^6"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/i18next-browser-languagedetector": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.2.1.tgz",
+      "integrity": "sha512-bZg8+4bdmaOiApD7N7BPT9W8MLZG+nPTOFlLiJiT8uzKXFjhxw4v2ierCXOwB5sFDMtuA5G4kgYZ0AznZxQ/cw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -2417,6 +3168,16 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/indent-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -2440,6 +3201,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -2447,6 +3215,45 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/istanbul-lib-coverage": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz",
+      "integrity": "sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/istanbul-lib-report": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz",
+      "integrity": "sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "istanbul-lib-coverage": "^3.0.0",
+        "make-dir": "^4.0.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/istanbul-reports": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.2.0.tgz",
+      "integrity": "sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "html-escaper": "^2.0.0",
+        "istanbul-lib-report": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -2467,7 +3274,58 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
-    "node_modules/jsesc": {
+    "node_modules/jsdom": {
+      "version": "29.0.2",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-29.0.2.tgz",
+      "integrity": "sha512-9VnGEBosc/ZpwyOsJBCQ/3I5p7Q5ngOY14a9bf5btenAORmZfDse1ZEheMiWcJ3h81+Fv7HmJFdS0szo/waF2w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/css-color": "^5.1.5",
+        "@asamuzakjp/dom-selector": "^7.0.6",
+        "@bramus/specificity": "^2.4.2",
+        "@csstools/css-syntax-patches-for-csstree": "^1.1.1",
+        "@exodus/bytes": "^1.15.0",
+        "css-tree": "^3.2.1",
+        "data-urls": "^7.0.0",
+        "decimal.js": "^10.6.0",
+        "html-encoding-sniffer": "^6.0.0",
+        "is-potential-custom-element-name": "^1.0.1",
+        "lru-cache": "^11.2.7",
+        "parse5": "^8.0.0",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^6.0.1",
+        "undici": "^7.24.5",
+        "w3c-xmlserializer": "^5.0.0",
+        "webidl-conversions": "^8.0.1",
+        "whatwg-mimetype": "^5.0.0",
+        "whatwg-url": "^16.0.1",
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "canvas": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jsdom/node_modules/lru-cache": {
+      "version": "11.3.5",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.3.5.tgz",
+      "integrity": "sha512-NxVFwLAnrd9i7KUBxC4DrUhmgjzOs+1Qm50D3oF1/oL+r1NpZ4gA7xvG0/zJ8evR7zIKn4vLf7qTNduWFtCrRw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/jsesc": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
       "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
@@ -2847,6 +3705,85 @@
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/lz-string": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "lz-string": "bin/bin.js"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/magicast": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/magicast/-/magicast-0.5.2.tgz",
+      "integrity": "sha512-E3ZJh4J3S9KfwdjZhe2afj6R9lGIN5Pher1pF39UGrXRqq/VDaGVIGN13BjHd2u8B61hArAGOnso7nBOouW3TQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.0",
+        "@babel/types": "^7.29.0",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/make-dir": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",
+      "integrity": "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.5.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/make-dir/node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/mdn-data": {
+      "version": "2.27.1",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
+      "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/min-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
@@ -2900,6 +3837,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/obug": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.1.tgz",
+      "integrity": "sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/sxzz",
+        "https://opencollective.com/debug"
+      ],
+      "license": "MIT"
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -2963,6 +3911,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse5": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.0.tgz",
+      "integrity": "sha512-9m4m5GSgXjL4AjumKzq1Fgfp3Z8rsvjRNbnkVwfu2ImRqE5D0LnY2QfDen18FSY9C573YU5XxSapdHZTZ2WolA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -2983,6 +3944,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -3042,6 +4010,36 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/pretty-format/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -3073,6 +4071,41 @@
         "react": "^19.2.5"
       }
     },
+    "node_modules/react-i18next": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-17.0.2.tgz",
+      "integrity": "sha512-shBftH2vaTWK2Bsp7FiL+cevx3xFJlvFxmsDFQSrJc+6twHkP0tv/bGa01VVWzpreUVVwU+3Hev5iFqRg65RwA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2",
+        "html-parse-stringify": "^3.0.1",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "peerDependencies": {
+        "i18next": ">= 26.0.1",
+        "react": ">= 16.8.0",
+        "typescript": "^5 || ^6"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/reactflow": {
       "version": "11.11.4",
       "resolved": "https://registry.npmjs.org/reactflow/-/reactflow-11.11.4.tgz",
@@ -3091,6 +4124,30 @@
         "react-dom": ">=17"
       }
     },
+    "node_modules/redent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
+      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "indent-string": "^4.0.0",
+        "strip-indent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -3142,6 +4199,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/saxes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=v12.22.7"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
@@ -3181,6 +4251,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/siginfo": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -3191,6 +4268,33 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/std-env": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-4.0.0.tgz",
+      "integrity": "sha512-zUMPtQ/HBY3/50VbpkupYHbRroTRZJPRLvreamgErJVys0ceuzMkD44J/QjqhHjOzK42GQ3QZIeFG1OYfOtKqQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/strip-indent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "min-indent": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -3217,6 +4321,30 @@
         "node": ">=8"
       }
     },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinybench": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
+      "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyexec": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.1.1.tgz",
+      "integrity": "sha512-VKS/ZaQhhkKFMANmAOhhXVoIfBXblQxGX1myCQ2faQrfmobMftXeJPcZGp0gS07ocvGJWDLZGyOZDadDBqYIJg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.16",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
@@ -3234,6 +4362,62 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/tinyrainbow": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.1.0.tgz",
+      "integrity": "sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tldts": {
+      "version": "7.0.28",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-7.0.28.tgz",
+      "integrity": "sha512-+Zg3vWhRUv8B1maGSTFdev9mjoo8Etn2Ayfs4cnjlD3CsGkxXX4QyW3j2WJ0wdjYcYmy7Lx2RDsZMhgCWafKIw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tldts-core": "^7.0.28"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "7.0.28",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-7.0.28.tgz",
+      "integrity": "sha512-7W5Efjhsc3chVdFhqtaU0KtK32J37Zcr9RKtID54nG+tIpcY79CQK/veYPODxtD/LJ4Lue66jvrQzIX2Z2/pUQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tough-cookie": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-6.0.1.tgz",
+      "integrity": "sha512-LktZQb3IeoUWB9lqR5EWTHgW/VTITCXg4D21M+lvybRVdylLrRMnqaIONLVb5mav8vM19m44HIcGq4qASeu2Qw==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tldts": "^7.0.5"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-6.0.0.tgz",
+      "integrity": "sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/ts-api-utils": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.5.0.tgz",
@@ -3272,7 +4456,7 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-6.0.2.tgz",
       "integrity": "sha512-bGdAIrZ0wiGDo5l8c++HWtbaNCWTS4UTv7RaTH/ThVIgjkveJt83m74bBHMJkuCbslY8ixgLBVZJIOiQlQTjfQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -3306,6 +4490,16 @@
         "typescript": ">=4.8.4 <6.1.0"
       }
     },
+    "node_modules/undici": {
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-7.25.0.tgz",
+      "integrity": "sha512-xXnp4kTyor2Zq+J1FfPI6Eq3ew5h6Vl0F/8d9XU5zZQf1tX9s2Su1/3PiMmUANFULpmksxkClamIZcaUqryHsQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.18.1"
+      }
+    },
     "node_modules/undici-types": {
       "version": "7.16.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
@@ -3441,6 +4635,153 @@
         }
       }
     },
+    "node_modules/vitest": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.4.tgz",
+      "integrity": "sha512-tFuJqTxKb8AvfyqMfnavXdzfy3h3sWZRWwfluGbkeR7n0HUev+FmNgZ8SDrRBTVrVCjgH5cA21qGbCffMNtWvg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/expect": "4.1.4",
+        "@vitest/mocker": "4.1.4",
+        "@vitest/pretty-format": "4.1.4",
+        "@vitest/runner": "4.1.4",
+        "@vitest/snapshot": "4.1.4",
+        "@vitest/spy": "4.1.4",
+        "@vitest/utils": "4.1.4",
+        "es-module-lexer": "^2.0.0",
+        "expect-type": "^1.3.0",
+        "magic-string": "^0.30.21",
+        "obug": "^2.1.1",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3",
+        "std-env": "^4.0.0-rc.1",
+        "tinybench": "^2.9.0",
+        "tinyexec": "^1.0.2",
+        "tinyglobby": "^0.2.15",
+        "tinyrainbow": "^3.1.0",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0",
+        "why-is-node-running": "^2.3.0"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
+      "engines": {
+        "node": "^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@opentelemetry/api": "^1.9.0",
+        "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
+        "@vitest/browser-playwright": "4.1.4",
+        "@vitest/browser-preview": "4.1.4",
+        "@vitest/browser-webdriverio": "4.1.4",
+        "@vitest/coverage-istanbul": "4.1.4",
+        "@vitest/coverage-v8": "4.1.4",
+        "@vitest/ui": "4.1.4",
+        "happy-dom": "*",
+        "jsdom": "*",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@vitest/browser-playwright": {
+          "optional": true
+        },
+        "@vitest/browser-preview": {
+          "optional": true
+        },
+        "@vitest/browser-webdriverio": {
+          "optional": true
+        },
+        "@vitest/coverage-istanbul": {
+          "optional": true
+        },
+        "@vitest/coverage-v8": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        },
+        "vite": {
+          "optional": false
+        }
+      }
+    },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/w3c-xmlserializer": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-8.0.1.tgz",
+      "integrity": "sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-5.0.0.tgz",
+      "integrity": "sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/whatwg-url": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-16.0.1.tgz",
+      "integrity": "sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@exodus/bytes": "^1.11.0",
+        "tr46": "^6.0.0",
+        "webidl-conversions": "^8.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -3457,6 +4798,23 @@
         "node": ">= 8"
       }
     },
+    "node_modules/why-is-node-running": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "siginfo": "^2.0.0",
+        "stackback": "0.0.2"
+      },
+      "bin": {
+        "why-is-node-running": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
@@ -3467,6 +4825,23 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/xml-name-validator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
diff --git a/src/dataforge/frontend/package.json b/src/dataforge/frontend/package.json
index 0538caf..5f7759d 100644
--- a/src/dataforge/frontend/package.json
+++ b/src/dataforge/frontend/package.json
@@ -8,29 +8,41 @@
     "typecheck": "tsc --noEmit",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
     "dagre": "^0.8.5",
+    "i18next": "^26.0.4",
+    "i18next-browser-languagedetector": "^8.2.1",
     "lucide-react": "^1.8.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
+    "react-i18next": "^17.0.2",
     "reactflow": "^11.11.4",
     "yaml": "^2.8.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.4",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/dagre": "^0.7.54",
     "@types/node": "^24.12.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/coverage-v8": "^4.1.4",
     "eslint": "^9.39.4",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.5.2",
     "globals": "^17.4.0",
+    "jsdom": "^29.0.2",
     "typescript": "~6.0.2",
     "typescript-eslint": "^8.58.0",
-    "vite": "^8.0.4"
+    "vite": "^8.0.4",
+    "vitest": "^4.1.4"
   }
 }
diff --git a/src/dataforge/frontend/src/App.tsx b/src/dataforge/frontend/src/App.tsx
index 2244996..8f7bc86 100644
--- a/src/dataforge/frontend/src/App.tsx
+++ b/src/dataforge/frontend/src/App.tsx
@@ -1,9 +1,196 @@
 import React, { useState, useRef, useCallback, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import dagre from 'dagre';
 import ReactFlow, { Background, Controls, ConnectionLineType, useNodesState, useEdgesState, MarkerType } from 'reactflow';
 import type { Edge, Node } from 'reactflow';
 import 'reactflow/dist/style.css'; // ReactFlow v11 has no non-dist CSS export — necessary exception
-import { Plus, Download, FileJson, Trash2, Key, Link as LinkIcon, X, Network, Play, BookOpen, Search, Sparkles } from 'lucide-react';
+import { Plus, Download, FileJson, Trash2, Key, Link as LinkIcon, X, Network, Play, BookOpen, Search, Sparkles, Clock, History, CheckCircle, XCircle, Loader, ChevronDown, ChevronUp, User, LogOut, Eye, EyeOff, Pencil, Check } from 'lucide-react';
+
+// ── EnvKeyPicker ──────────────────────────────────────────────────────────────
+// Renders a select of available profile env-keys.
+// value = key NAME (e.g. "AWS_ACCESS_KEY_ID"), not the secret value.
+interface EnvKeyPickerProps {
+  label: string;
+  value: string;
+  onChange: (keyName: string) => void;
+  envKeys: Record<string, string>;
+  onOpenProfile: () => void;
+  hint?: string; // expected key name shown as placeholder hint
+}
+
+function EnvKeyPicker({ label, value, onChange, envKeys, onOpenProfile, hint }: EnvKeyPickerProps) {
+  const { t } = useTranslation();
+  const keys = Object.keys(envKeys);
+  const resolved = value ? envKeys[value] : undefined;
+  const missing = value && !resolved;
+
+  return (
+    <div>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.4rem' }}>
+        <label style={{ fontSize: '0.82rem', color: 'var(--text-main)' }}>{label}</label>
+        <button type="button" onClick={onOpenProfile}
+          style={{ background: 'none', border: 'none', color: '#60a5fa', cursor: 'pointer', fontSize: '0.7rem', padding: 0, display: 'flex', alignItems: 'center', gap: '0.2rem' }}>
+          <User size={10} /> {keys.length === 0 ? t('profile.addKeysInProfile') : value ? t('profile.manageProfile') : t('profile.pickFromProfile')}
+        </button>
+      </div>
+
+      {keys.length === 0 ? (
+        <div style={{ padding: '0.55rem 0.75rem', borderRadius: '7px', border: '1px dashed rgba(255,255,255,0.12)', background: 'rgba(255,255,255,0.03)', color: 'var(--text-subtle)', fontSize: '0.8rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+          <Key size={12} />
+          {t('profile.noKeysYet')}{' '}
+          <button type="button" onClick={onOpenProfile} style={{ background: 'none', border: 'none', color: '#60a5fa', cursor: 'pointer', fontSize: '0.8rem', padding: 0, textDecoration: 'underline' }}>
+            {t('profile.addOne')}
+          </button>
+        </div>
+      ) : (
+        <>
+          <select
+            value={value}
+            onChange={e => onChange(e.target.value)}
+            style={{
+              width: '100%', padding: '0.5rem 0.75rem', borderRadius: '7px',
+              border: `1px solid ${missing ? 'rgba(239,68,68,0.4)' : value ? 'rgba(20,184,166,0.35)' : 'rgba(255,255,255,0.12)'}`,
+              background: missing ? 'rgba(239,68,68,0.07)' : value ? 'rgba(20,184,166,0.07)' : 'rgba(255,255,255,0.04)',
+              color: value ? 'white' : 'var(--text-subtle)', fontSize: '0.83rem', cursor: 'pointer',
+            }}
+          >
+            <option value="" style={{ color: 'black' }}>{hint ? t('profile.selectHint', { hint }) : t('profile.selectKey')}</option>
+            {keys.map(k => (
+              <option key={k} value={k} style={{ color: 'black' }}>{k}</option>
+            ))}
+          </select>
+          {value && (
+            <div style={{ marginTop: '0.3rem', fontSize: '0.7rem', color: resolved ? '#2dd4bf' : '#f87171', display: 'flex', alignItems: 'center', gap: '0.3rem' }}>
+              {resolved
+                ? <><CheckCircle size={10} /> {t('profile.resolved')} · {resolved.length > 4 ? resolved.slice(0, 4) + '••••' : '••••'}</>
+                : <><XCircle size={10} /> {t('profile.keyNotFound', { value })}</>}
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+// ── Auth ──────────────────────────────────────────────────────────────────────
+const AUTH_STORAGE_KEY = 'dataforge_auth';
+
+function loadAuth(): { token: string; username: string } | null {
+  try { return JSON.parse(localStorage.getItem(AUTH_STORAGE_KEY) || 'null'); } catch { return null; }
+}
+function saveAuth(token: string, username: string) {
+  localStorage.setItem(AUTH_STORAGE_KEY, JSON.stringify({ token, username }));
+}
+function clearAuth() {
+  localStorage.removeItem(AUTH_STORAGE_KEY);
+}
+
+function authHeaders(token: string) {
+  return { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` };
+}
+
+// ── LoginScreen ───────────────────────────────────────────────────────────────
+function LoginScreen({ onAuth }: { onAuth: (token: string, username: string) => void }) {
+  const { t } = useTranslation();
+  const [mode, setMode] = useState<'login' | 'register'>('login');
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [showPw, setShowPw] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+    try {
+      const endpoint = mode === 'login' ? '/api/auth/login' : '/api/auth/register';
+      const res = await fetch(endpoint, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username: username.trim(), password }),
+      });
+      const data = await res.json();
+      if (!res.ok) { setError(data.error || t('auth.somethingWentWrong')); return; }
+      saveAuth(data.token, data.username);
+      onAuth(data.token, data.username);
+    } catch (e: any) {
+      setError(e.message || t('auth.networkError'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--bg-base)' }}>
+      <div className="glass-panel animated-scale" style={{ width: '380px', maxWidth: '95vw', padding: '2rem', background: 'rgba(9,12,20,0.97)', border: '1px solid rgba(255,255,255,0.08)', borderTopColor: 'rgba(255,255,255,0.14)' }}>
+        {/* Logo */}
+        <div style={{ textAlign: 'center', marginBottom: '1.75rem' }}>
+          <img src="/logo-icon.png" alt="Dataforge" style={{ height: '52px', marginBottom: '0.75rem' }} />
+          <div style={{ fontFamily: 'var(--font-display)', fontSize: '1.8rem', fontWeight: 800, letterSpacing: '-0.02em' }}>
+            Data<span style={{ color: 'var(--primary)' }}>forge</span>
+          </div>
+          <div style={{ fontSize: '0.72rem', color: 'var(--text-subtle)', textTransform: 'uppercase', letterSpacing: '0.1em', marginTop: '0.2rem' }}>{t('auth.subtitle')}</div>
+        </div>
+
+        {/* Tabs */}
+        <div style={{ display: 'flex', gap: '0.5rem', marginBottom: '1.5rem', background: 'rgba(255,255,255,0.04)', borderRadius: '8px', padding: '0.25rem' }}>
+          {(['login', 'register'] as const).map(m => (
+            <button key={m} onClick={() => { setMode(m); setError(''); }}
+              style={{ flex: 1, padding: '0.45rem', borderRadius: '6px', border: 'none', cursor: 'pointer', fontSize: '0.875rem', fontWeight: 600, transition: 'all 0.15s',
+                background: mode === m ? 'rgba(34,211,238,0.15)' : 'transparent',
+                color: mode === m ? 'var(--primary)' : 'var(--text-muted)' }}>
+              {m === 'login' ? t('auth.signIn') : t('auth.createAccount')}
+            </button>
+          ))}
+        </div>
+
+        <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: '0.875rem' }}>
+          <div>
+            <label style={{ display: 'block', marginBottom: '0.35rem', fontSize: '0.8rem', color: 'var(--text-main)' }}>{t('auth.username')}</label>
+            <input
+              autoFocus
+              value={username}
+              onChange={e => setUsername(e.target.value)}
+              placeholder={t('auth.usernamePlaceholder')}
+              style={{ width: '100%', padding: '0.6rem 0.75rem' }}
+              disabled={loading}
+            />
+          </div>
+          <div>
+            <label style={{ display: 'block', marginBottom: '0.35rem', fontSize: '0.8rem', color: 'var(--text-main)' }}>{t('auth.password')}</label>
+            <div style={{ position: 'relative' }}>
+              <input
+                type={showPw ? 'text' : 'password'}
+                value={password}
+                onChange={e => setPassword(e.target.value)}
+                placeholder={t('auth.passwordPlaceholder')}
+                style={{ width: '100%', padding: '0.6rem 2.5rem 0.6rem 0.75rem' }}
+                disabled={loading}
+              />
+              <button type="button" onClick={() => setShowPw(v => !v)}
+                style={{ position: 'absolute', right: '0.6rem', top: '50%', transform: 'translateY(-50%)', background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-muted)', padding: '0.2rem', display: 'flex' }}>
+                {showPw ? <EyeOff size={15} /> : <Eye size={15} />}
+              </button>
+            </div>
+          </div>
+
+          {error && (
+            <div style={{ padding: '0.6rem 0.75rem', background: 'rgba(239,68,68,0.1)', border: '1px solid rgba(239,68,68,0.3)', borderRadius: '6px', color: '#fca5a5', fontSize: '0.82rem' }}>
+              {error}
+            </div>
+          )}
+
+          <button type="submit" disabled={loading || !username.trim() || !password}
+            className="btn-success"
+            style={{ marginTop: '0.25rem', padding: '0.65rem', fontSize: '0.9rem', fontWeight: 700, opacity: (loading || !username.trim() || !password) ? 0.5 : 1, cursor: (loading || !username.trim() || !password) ? 'not-allowed' : 'pointer' }}>
+            {loading ? <Loader size={16} style={{ animation: 'spin 1s linear infinite' }} /> : t(mode === 'login' ? 'auth.signIn' : 'auth.createAccount')}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}
 
 const FAKER_CATALOG: { category: string; color: string; methods: { name: string; example: string }[] }[] = [
   { category: 'Person', color: '#60a5fa', methods: [
@@ -166,7 +353,73 @@ function isDateColumn(col: Column): boolean {
 }
 
 
-export default function App() {
+function AppMain({ auth, onLogout }: { auth: { token: string; username: string }; onLogout: () => void }) {
+  const { t, i18n } = useTranslation();
+  // ── Profile / env-keys state ───────────────────────────────────────────────
+  const [showProfilePanel, setShowProfilePanel] = useState(false);
+  const [envKeys, setEnvKeys] = useState<Record<string, string>>({});
+  const [envPreviewVisible, setEnvPreviewVisible] = useState(false);
+  const [envKeyForm, setEnvKeyForm] = useState({ key: '', value: '' });
+  const [envKeyError, setEnvKeyError] = useState('');
+  const [envKeyLoading, setEnvKeyLoading] = useState(false);
+  const [showEnvValue, setShowEnvValue] = useState<Record<string, boolean>>({});
+  const [editingEnvKey, setEditingEnvKey] = useState<string | null>(null);
+  const [editingEnvValue, setEditingEnvValue] = useState('');
+
+  const handleSaveEditEnvKey = async () => {
+    if (!editingEnvKey) return;
+    setEnvKeyLoading(true);
+    try {
+      const res = await fetch('/api/profile/env-keys', {
+        method: 'POST',
+        headers: authHeaders(auth.token),
+        body: JSON.stringify({ key: editingEnvKey, value: editingEnvValue }),
+      });
+      if (res.ok) { setEditingEnvKey(null); setEditingEnvValue(''); await fetchEnvKeys(); }
+    } finally {
+      setEnvKeyLoading(false);
+    }
+  };
+
+  const fetchEnvKeys = useCallback(async () => {
+    try {
+      const res = await fetch('/api/profile/env-keys', { headers: { Authorization: `Bearer ${auth.token}` } });
+      if (res.ok) setEnvKeys(await res.json());
+    } catch { /* ignore */ }
+  }, [auth.token]);
+
+  useEffect(() => { fetchEnvKeys(); }, [fetchEnvKeys]);
+
+  const handleAddEnvKey = async () => {
+    setEnvKeyError('');
+    const k = envKeyForm.key.trim();
+    const v = envKeyForm.value;
+    if (!k) { setEnvKeyError('Key name is required.'); return; }
+    setEnvKeyLoading(true);
+    try {
+      const res = await fetch('/api/profile/env-keys', {
+        method: 'POST',
+        headers: authHeaders(auth.token),
+        body: JSON.stringify({ key: k, value: v }),
+      });
+      const data = await res.json();
+      if (!res.ok) { setEnvKeyError(data.error || 'Failed to save key.'); return; }
+      setEnvKeyForm({ key: '', value: '' });
+      await fetchEnvKeys();
+    } catch (e: any) {
+      setEnvKeyError(e.message || String(e));
+    } finally {
+      setEnvKeyLoading(false);
+    }
+  };
+
+  const handleDeleteEnvKey = async (keyName: string) => {
+    await fetch(`/api/profile/env-keys/${encodeURIComponent(keyName)}`, {
+      method: 'DELETE', headers: { Authorization: `Bearer ${auth.token}` },
+    });
+    await fetchEnvKeys();
+  };
+
   const [domain, setDomain] = useState("custom");
   const [tables, setTables] = useState<Table[]>([]);
   const [generatedYaml, setGeneratedYaml] = useState<string>('');
@@ -305,7 +558,7 @@ export default function App() {
         position: { x: window.innerWidth / 2 - 100, y: window.innerHeight / 2 - 100 }
       }
     ]);
-    setSelectedTableId(newId);
+    setSelectedTableId(tableId);
   };
 
   const generateSchema = () => {
@@ -350,8 +603,8 @@ export default function App() {
                 source: sourceTable.id,
                 target: targetTable.id,
                 animated: true,
-                style: { stroke: '#ec4899', strokeWidth: 2 },
-                markerEnd: { type: MarkerType.ArrowClosed, color: '#ec4899' }
+                style: { stroke: 'var(--accent)', strokeWidth: 2 },
+                markerEnd: { type: MarkerType.ArrowClosed, color: '#fb923c' }
               });
             }
           }
@@ -504,11 +757,7 @@ export default function App() {
     { key: 'ollama',    label: 'Ollama',        color: '#94a3b8', keyPlaceholder: '',               modelPlaceholder: 'e.g. llama3.2' },
   ] as const;
 
-  const AI_DEFAULT_PROMPT = `E-commerce with 4 tables:
-- customers: full name, email, phone, city, country, registration date
-- products: name, category (Electronics/Clothing/Books/Home/Sports), price (10–2000), stock quantity
-- orders: linked to customer, order date (last 2 years), status (pending/processing/shipped/delivered/cancelled), total amount
-- order_items: linked to order and product, quantity (1–10), unit price`;
+  const AI_DEFAULT_PROMPT = t('ai.defaultPrompt');
 
   const [aiModal, setAiModal] = useState(false);
   const [aiProvider, setAiProvider] = useState<string>(() => loadAiConfig().provider || 'anthropic');
@@ -522,7 +771,8 @@ export default function App() {
   const [aiError, setAiError] = useState('');
 
   const currentProviderMeta = AI_PROVIDERS.find(p => p.key === aiProvider) ?? AI_PROVIDERS[0];
-  const currentApiKey = aiApiKeys[aiProvider] ?? '';
+  const currentApiKeyRef  = aiApiKeys[aiProvider] ?? '';           // env key name selected
+  const currentApiKey     = envKeys[currentApiKeyRef] ?? '';       // resolved value
   const currentModel = aiModels[aiProvider] ?? '';
   const availableModels = aiAvailableModels[aiProvider] ?? [];
 
@@ -551,19 +801,18 @@ export default function App() {
   const handleAiGenerate = async () => {
     setAiError('');
     const isOllama = aiProvider === 'ollama';
-    if (!currentApiKey.trim() && !isOllama) { setAiError('API key is required.'); return; }
-    if (!aiPrompt.trim()) { setAiError('Describe the domain you want to generate.'); return; }
+    if (!currentApiKey.trim() && !isOllama) { setAiError(t('ai.apiKeyRequired')); return; }
+    if (!aiPrompt.trim()) { setAiError(t('ai.describeTheDomain')); return; }
     setAiLoading(true);
     try {
-      const savedKeys = { ...aiApiKeys };
+      const savedKeys = { ...aiApiKeys }; // stores key NAMES
       const savedModels = { ...aiModels };
-      if (currentApiKey.trim()) savedKeys[aiProvider] = currentApiKey.trim();
       if (currentModel.trim()) savedModels[aiProvider] = currentModel.trim();
       localStorage.setItem(AI_KEY_STORAGE, JSON.stringify({ provider: aiProvider, apiKeys: savedKeys, models: savedModels }));
       const res = await fetch('/api/ai-generate', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ provider: aiProvider, apiKey: currentApiKey.trim(), model: currentModel.trim() || undefined, prompt: aiPrompt }),
+        body: JSON.stringify({ provider: aiProvider, apiKey: currentApiKey.trim(), model: currentModel.trim() || undefined, prompt: `${t('ai.langInstruction')}\n\n${aiPrompt}` }),
       });
       const data = await res.json();
       if (!res.ok || data.error) {
@@ -596,8 +845,8 @@ export default function App() {
 
   const handleDeleteDomain = () => {
     showConfirm(
-      'Delete schema',
-      `Remove "${domain}" permanently? This cannot be undone.`,
+      t('save.deleteSchema'),
+      t('save.deleteConfirm', { domain }),
       async () => {
         await fetch(`/api/schemas/${domain}`, { method: 'DELETE' });
         window.location.reload();
@@ -620,7 +869,7 @@ export default function App() {
         body: JSON.stringify({ yamlStr, name }),
       });
       const data = await res.json();
-      if (!data.success) { setSaveError(data.error || 'Save failed.'); return; }
+      if (!data.success) { setSaveError(data.error || t('save.saveFailed')); return; }
       setSaveModal(false);
       setSaveName('');
       window.location.reload();
@@ -629,6 +878,416 @@ export default function App() {
     }
   };
 
+  // ── Schedule types ──────────────────────────────────────────────────────────
+  interface ScheduleDef {
+    id: string;
+    name: string;
+    cronExpression: string;
+    enabled: boolean;
+    config: Record<string, any>;
+    createdAt: string;
+  }
+  interface RunRecord {
+    id: string;
+    scheduleId: string;
+    scheduleName: string;
+    triggeredBy: 'cron' | 'manual';
+    startedAt: string;
+    finishedAt: string | null;
+    status: 'running' | 'success' | 'error';
+    output: string;
+    exitCode: number | null;
+  }
+
+  // ── Schedule state ──────────────────────────────────────────────────────────
+  const [showSchedulesPanel, setShowSchedulesPanel] = useState(false);
+  const [showHistoryPanel, setShowHistoryPanel] = useState(false);
+  const [schedulesLoadError, setSchedulesLoadError] = useState('');
+  const [scheduleDefs, setScheduleDefs] = useState<ScheduleDef[]>([]);
+  const [runHistory, setRunHistory] = useState<RunRecord[]>([]);
+  const [historyOutput, setHistoryOutput] = useState<RunRecord | null>(null);
+  const [showScheduleForm, setShowScheduleForm] = useState(false);
+  const [editingSchedule, setEditingSchedule] = useState<ScheduleDef | null>(null);
+
+  type SchedDest = 'local' | 'cloud' | 'database';
+
+  // ── Schedule builder mode ───────────────────────────────────────────────────
+  const [schedBuilderMode, setSchedBuilderMode] = useState<'visual' | 'cron'>('visual');
+  const [schedVisual, setSchedVisual] = useState({ minute: '0', hour: '9', day: '*', month: '*' });
+
+  const visualToCron = (v: typeof schedVisual) =>
+    `${v.minute} ${v.hour} ${v.day} ${v.month} *`;
+
+  const applyVisual = (next: Partial<typeof schedVisual>) => {
+    const merged = { ...schedVisual, ...next };
+    setSchedVisual(merged);
+    setSchedForm(f => ({ ...f, cronExpression: visualToCron(merged) }));
+  };
+
+  const MONTHS = ['*','1','2','3','4','5','6','7','8','9','10','11','12'];
+  const MONTH_NAMES: Record<string,string> = { '*':'Every month','1':'January','2':'February','3':'March','4':'April','5':'May','6':'June','7':'July','8':'August','9':'September','10':'October','11':'November','12':'December' };
+  const DAYS_OF_MONTH = ['*', ...Array.from({length:31},(_,i)=>String(i+1))];
+
+  const [schedForm, setSchedForm] = useState<{
+    name: string;
+    cronExpression: string;
+    destination: SchedDest;
+    formats: string[];
+    outputDir: string;
+    rows: string;
+    jsonMode: string;
+    uploadTarget: string;
+    bucket: string;
+    prefix: string;
+    dbUrl: string;
+    ifExists: string;
+    dbSchema: string;
+    tablesToInclude: string[];
+    cloudCreds: { gcsJson: string; s3AccessKey: string; s3SecretKey: string; s3Region: string; azureConnStr: string };
+    dateAnchors: { table: string; column: string; offsetDays: string }[];
+  }>({
+    name: '',
+    cronExpression: '0 9 * * *',
+    destination: 'local',
+    formats: ['csv'],
+    outputDir: 'output',
+    rows: '',
+    jsonMode: 'flat',
+    uploadTarget: 'gcs',
+    bucket: '',
+    prefix: 'datasets/',
+    dbUrl: '',
+    ifExists: 'append',
+    dbSchema: '',
+    tablesToInclude: [],
+    cloudCreds: { gcsJson: '', s3AccessKey: '', s3SecretKey: '', s3Region: 'us-east-1', azureConnStr: '' },
+    dateAnchors: [],
+  });
+  const [schedSaving, setSchedSaving] = useState(false);
+  const [schedError, setSchedError] = useState('');
+
+  const fetchSchedules = async () => {
+    setSchedulesLoadError('');
+    try {
+      const res = await fetch('/api/schedules', { headers: { Authorization: `Bearer ${auth?.token}` } });
+      const data = await res.json();
+      if (Array.isArray(data)) {
+        setScheduleDefs(data);
+      } else {
+        const msg = data?.error ?? `HTTP ${res.status}`;
+        setSchedulesLoadError(msg);
+        console.error('[schedules] unexpected response:', data);
+      }
+    } catch (e: any) {
+      setSchedulesLoadError(e?.message ?? 'Network error');
+      console.error('[schedules] fetch error:', e);
+    }
+  };
+
+  const fetchHistory = async () => {
+    try {
+      const res = await fetch('/api/run-history?limit=100', { headers: { Authorization: `Bearer ${auth?.token}` } });
+      const data = await res.json();
+      if (Array.isArray(data)) setRunHistory(data);
+      else console.error('[run-history] unexpected response:', data);
+    } catch (e) {
+      console.error('[run-history] fetch error:', e);
+    }
+  };
+
+  const handleSaveSchedule = async () => {
+    setSchedError('');
+    setSchedSaving(true);
+    try {
+      const yamlStr = SchemaWriter.generateYaml(domain, tables);
+      const config = {
+        yamlStr,
+        tables: schedForm.tablesToInclude.length > 0 ? schedForm.tablesToInclude : undefined,
+        rows: schedForm.rows !== '' ? parseInt(schedForm.rows) : undefined,
+        formats: schedForm.formats,
+        outputDir: schedForm.destination === 'local' ? schedForm.outputDir : undefined,
+        uploadTarget: schedForm.destination === 'cloud' ? schedForm.uploadTarget : undefined,
+        bucket: schedForm.bucket.trim() || undefined,
+        prefix: schedForm.prefix.trim() || undefined,
+        jsonMode: schedForm.jsonMode,
+        dbUrl: schedForm.destination === 'database' ? schedForm.dbUrl.trim() || undefined : undefined,
+        ifExists: schedForm.ifExists,
+        dbSchema: schedForm.dbSchema.trim() || undefined,
+        cloudCreds: schedForm.destination === 'cloud' ? schedForm.cloudCreds : undefined,
+        dateAnchors: schedForm.dateAnchors
+          .filter(a => a.table && a.column && a.offsetDays !== '')
+          .map(a => ({ table: a.table, column: a.column, offsetDays: parseInt(a.offsetDays) })),
+      };
+
+      const url = editingSchedule ? `/api/schedules/${editingSchedule.id}` : '/api/schedules';
+      const method = editingSchedule ? 'PUT' : 'POST';
+      const res = await fetch(url, {
+        method,
+        headers: authHeaders(auth.token),
+        body: JSON.stringify({ name: schedForm.name.trim(), cronExpression: schedForm.cronExpression.trim(), config }),
+      });
+      const data = await res.json();
+      if (!res.ok) { setSchedError(data.error || 'Save failed'); return; }
+      setShowScheduleForm(false);
+      setEditingSchedule(null);
+      fetchSchedules();
+    } catch (e: any) {
+      setSchedError(e.message || String(e));
+    } finally {
+      setSchedSaving(false);
+    }
+  };
+
+  const handleToggleSchedule = async (s: ScheduleDef) => {
+    await fetch(`/api/schedules/${s.id}`, {
+      method: 'PUT',
+      headers: authHeaders(auth.token),
+      body: JSON.stringify({ enabled: !s.enabled }),
+    });
+    fetchSchedules();
+  };
+
+  const handleDeleteSchedule = async (s: ScheduleDef) => {
+    showConfirm(t('schedule.deleteConfirmTitle', { name: s.name }), t('schedule.deleteConfirmMessage'), async () => {
+      await fetch(`/api/schedules/${s.id}`, { method: 'DELETE', headers: { Authorization: `Bearer ${auth.token}` } });
+      fetchSchedules();
+    });
+  };
+
+  const handleRunNow = async (s: ScheduleDef) => {
+    await fetch(`/api/schedules/${s.id}/run`, { method: 'POST', headers: { Authorization: `Bearer ${auth.token}` } });
+    setTimeout(() => fetchHistory(), 500);
+  };
+
+  type RegistryProvider = 'dockerhub' | 'ghcr' | 'gcr' | 'ecr' | 'acr' | 'custom';
+  const [renderImageUrl, setRenderImageUrl] = useState('docker.io/ckoliveira/dataforge:latest');
+  const [renderRegistry, setRenderRegistry] = useState<RegistryProvider>('dockerhub');
+  const [renderRegistryInputs, setRenderRegistryInputs] = useState({
+    dockerhubUser: '',
+    dockerhubImage: 'dataforge',
+    dockerhubTag: 'latest',
+    ghcrUser: '',
+    ghcrImage: 'dataforge',
+    ghcrTag: 'latest',
+    gcrProject: '',
+    gcrImage: 'dataforge',
+    gcrTag: 'latest',
+    ecrAccount: '',
+    ecrRegion: 'us-east-1',
+    ecrImage: 'dataforge',
+    ecrTag: 'latest',
+    acrRegistry: '',
+    acrImage: 'dataforge',
+    acrTag: 'latest',
+    customUrl: '',
+  });
+  const [showRenderExport, setShowRenderExport] = useState<ScheduleDef | null>(null);
+
+  const REGISTRY_META: Record<RegistryProvider, { label: string; color: string; buildUrl: (i: typeof renderRegistryInputs) => string; loginCmd: string; pushCmd: (url: string) => string }> = {
+    dockerhub: {
+      label: 'Docker Hub',
+      color: '#2496ed',
+      buildUrl: i => `docker.io/${i.dockerhubUser || '<username>'}/${i.dockerhubImage}:${i.dockerhubTag}`,
+      loginCmd: 'docker login',
+      pushCmd: url => `docker build -t ${url} .\ndocker push ${url}`,
+    },
+    ghcr: {
+      label: 'GitHub Container Registry',
+      color: '#6e5494',
+      buildUrl: i => `ghcr.io/${i.ghcrUser || '<github-user>'}/${i.ghcrImage}:${i.ghcrTag}`,
+      loginCmd: 'echo $GITHUB_TOKEN | docker login ghcr.io -u <username> --password-stdin',
+      pushCmd: url => `docker build -t ${url} .\ndocker push ${url}`,
+    },
+    gcr: {
+      label: 'Google Container Registry',
+      color: '#4285f4',
+      buildUrl: i => `gcr.io/${i.gcrProject || '<project-id>'}/${i.gcrImage}:${i.gcrTag}`,
+      loginCmd: 'gcloud auth configure-docker',
+      pushCmd: url => `docker build -t ${url} .\ndocker push ${url}`,
+    },
+    ecr: {
+      label: 'AWS ECR',
+      color: '#ff9900',
+      buildUrl: i => `${i.ecrAccount || '<account-id>'}.dkr.ecr.${i.ecrRegion}.amazonaws.com/${i.ecrImage}:${i.ecrTag}`,
+      loginCmd: 'aws ecr get-login-password --region <region> | docker login --username AWS --password-stdin <account>.dkr.ecr.<region>.amazonaws.com',
+      pushCmd: url => `docker build -t ${url} .\ndocker push ${url}`,
+    },
+    acr: {
+      label: 'Azure Container Registry',
+      color: '#0089d6',
+      buildUrl: i => `${i.acrRegistry || '<registry>'}.azurecr.io/${i.acrImage}:${i.acrTag}`,
+      loginCmd: 'az acr login --name <registry>',
+      pushCmd: url => `docker build -t ${url} .\ndocker push ${url}`,
+    },
+    custom: {
+      label: 'Custom URL',
+      color: 'var(--text-muted)',
+      buildUrl: i => i.customUrl || '<registry-url>/image:tag',
+      loginCmd: 'docker login <registry-host>',
+      pushCmd: url => `docker build -t ${url} .\ndocker push ${url}`,
+    },
+  };
+
+  const computedImageUrl = (): string => {
+    const m = REGISTRY_META[renderRegistry];
+    return m.buildUrl(renderRegistryInputs);
+  };
+
+  const buildRenderYaml = (s: ScheduleDef, imageUrl: string): string => {
+    const cfg = s.config;
+    const fmt = (cfg.formats ?? ['csv']).join(' --format ');
+    const cmdParts = [
+      'dataset-gen generate',
+      '--domain custom',
+      '--config /app/schedule.yaml',
+      `--format ${fmt}`,
+    ];
+    if (cfg.rows) cmdParts.push(`--rows ${cfg.rows}`);
+    if (cfg.tables?.length) cmdParts.push(...cfg.tables.map((t: string) => `--tables ${t}`));
+    if (cfg.uploadTarget) {
+      cmdParts.push(`--upload ${cfg.uploadTarget}`);
+      cmdParts.push('--bucket ${CLOUD_BUCKET}');
+      cmdParts.push('--prefix ${CLOUD_PREFIX}');
+    }
+    if (cfg.dbUrl) cmdParts.push('--db-url ${DB_URL}');
+    if (cfg.dateAnchors?.length) {
+      for (const a of cfg.dateAnchors) {
+        cmdParts.push(`--increment ${a.table}:${a.column}:${a.offsetDays}:days`);
+      }
+    }
+
+    const envVars: string[] = [
+      `      - key: PYTHONPATH\n        value: /app/src`,
+    ];
+    if (cfg.uploadTarget) {
+      envVars.push(`      - key: CLOUD_BUCKET\n        value: "${cfg.bucket ?? ''}"`);
+      envVars.push(`      - key: CLOUD_PREFIX\n        value: "${cfg.prefix ?? 'datasets/'}"`);
+      if (cfg.uploadTarget === 'gcs') {
+        envVars.push(`      # GCS: add GOOGLE_APPLICATION_CREDENTIALS via Secret Group`);
+      } else if (cfg.uploadTarget === 's3') {
+        envVars.push(`      - key: AWS_ACCESS_KEY_ID\n        sync: false`);
+        envVars.push(`      - key: AWS_SECRET_ACCESS_KEY\n        sync: false`);
+      } else if (cfg.uploadTarget === 'azure') {
+        envVars.push(`      - key: AZURE_STORAGE_CONNECTION_STRING\n        sync: false`);
+      }
+    }
+    if (cfg.dbUrl) {
+      envVars.push(`      - key: DB_URL\n        sync: false  # set in Render dashboard`);
+    }
+
+    return `# Render Blueprint — generated from schedule "${s.name}"
+# Docs: https://render.com/docs/blueprint-spec
+
+services:
+  - type: cron
+    name: ${s.name.toLowerCase().replace(/\s+/g, '-')}
+    image:
+      url: ${imageUrl}
+    schedule: "${s.cronExpression}"
+    dockerCommand: >-
+      ${cmdParts.join(' \\\n        ')}
+    envVars:
+${envVars.join('\n')}
+`;
+  };
+
+  const handleDownloadRenderYaml = (s: ScheduleDef, imageUrl: string) => {
+    const content = buildRenderYaml(s, imageUrl);
+    const blob = new Blob([content], { type: 'text/yaml' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `render-${s.name.toLowerCase().replace(/\s+/g, '-')}.yaml`;
+    a.click();
+    URL.revokeObjectURL(url);
+    setShowRenderExport(null);
+  };
+
+  const openEditSchedule = (s: ScheduleDef) => {
+    setEditingSchedule(s);
+    const cfg = s.config;
+    setSchedForm({
+      name: s.name,
+      cronExpression: s.cronExpression,
+      destination: cfg.uploadTarget ? 'cloud' : cfg.dbUrl ? 'database' : 'local',
+      formats: cfg.formats ?? ['csv'],
+      outputDir: cfg.outputDir ?? 'output',
+      rows: cfg.rows != null ? String(cfg.rows) : '',
+      jsonMode: cfg.jsonMode ?? 'flat',
+      uploadTarget: cfg.uploadTarget ?? 'gcs',
+      bucket: cfg.bucket ?? '',
+      prefix: cfg.prefix ?? 'datasets/',
+      dbUrl: cfg.dbUrl ?? '',
+      ifExists: cfg.ifExists ?? 'append',
+      dbSchema: cfg.dbSchema ?? '',
+      tablesToInclude: cfg.tables ?? [],
+      cloudCreds: cfg.cloudCreds ?? { gcsJson: '', s3AccessKey: '', s3SecretKey: '', s3Region: 'us-east-1', azureConnStr: '' },
+      dateAnchors: (cfg.dateAnchors ?? []).map((a: any) => ({ ...a, offsetDays: String(a.offsetDays) })),
+    });
+    setSchedError('');
+    // sync visual builder from cron expression
+    const parts = s.cronExpression.trim().split(/\s+/);
+    if (parts.length >= 4) setSchedVisual({ minute: parts[0], hour: parts[1], day: parts[2], month: parts[3] });
+    setSchedBuilderMode('visual');
+    setShowScheduleForm(true);
+  };
+
+  const openNewSchedule = () => {
+    setEditingSchedule(null);
+    setSchedVisual({ minute: '0', hour: '9', day: '*', month: '*' });
+    setSchedBuilderMode('visual');
+    setSchedForm({
+      name: '',
+      cronExpression: '0 9 * * *',
+      destination: 'local',
+      formats: ['csv'],
+      outputDir: 'output',
+      rows: '',
+      jsonMode: 'flat',
+      uploadTarget: 'gcs',
+      bucket: '',
+      prefix: 'datasets/',
+      dbUrl: '',
+      ifExists: 'append',
+      dbSchema: '',
+      tablesToInclude: [],
+      cloudCreds: { gcsJson: '', s3AccessKey: '', s3SecretKey: '', s3Region: 'us-east-1', azureConnStr: '' },
+      dateAnchors: [],
+    });
+    setSchedError('');
+    setShowScheduleForm(true);
+  };
+
+  const cronDescription = (expr: string): string => {
+    const parts = expr.trim().split(/\s+/);
+    if (parts.length !== 5) return '';
+    const [min, hr, dom, mon, dow] = parts;
+    if (dom === '*' && mon === '*' && dow === '*') {
+      if (hr === '*' && min === '*') return 'Every minute';
+      if (hr === '*') return `Every hour at :${min.padStart(2,'0')}`;
+      const hrN = parseInt(hr); const minN = parseInt(min);
+      if (!isNaN(hrN) && !isNaN(minN)) {
+        const ap = hrN >= 12 ? 'PM' : 'AM';
+        const h = hrN % 12 || 12;
+        const m = String(minN).padStart(2,'0');
+        return `Every day at ${h}:${m} ${ap} UTC`;
+      }
+    }
+    if (dow !== '*' && dom === '*' && mon === '*') {
+      const days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
+      const d = days[parseInt(dow)];
+      if (d) {
+        const hrN = parseInt(hr); const minN = parseInt(min);
+        if (!isNaN(hrN) && !isNaN(minN)) {
+          const ap = hrN >= 12 ? 'PM' : 'AM';
+          const h = hrN % 12 || 12;
+          return `Every ${d} at ${h}:${String(minN).padStart(2,'0')} ${ap} UTC`;
+        }
+      }
+    }
+    return '';
+  };
+
   const [showRunPanel, setShowRunPanel] = useState(false);
   const [showRunHelp, setShowRunHelp] = useState(false);
   const [canBrowseFolder, setCanBrowseFolder] = useState(false);
@@ -668,6 +1327,9 @@ export default function App() {
     await fetch(`/api/credential-profiles/${encodeURIComponent(name)}`, { method: 'DELETE' });
     fetchCredProfiles();
   };
+  const RUN_CREDS_STORAGE = 'dataforge_run_creds';
+  const loadRunCreds = () => { try { return JSON.parse(localStorage.getItem(RUN_CREDS_STORAGE) || '{}'); } catch { return {}; } };
+
   const [runConfig, setRunConfig] = useState<{
     formats: string[],
     destination: 'local' | 'cloud' | 'database',
@@ -708,7 +1370,7 @@ export default function App() {
     partitionDateGranularity: {},
     jsonMode: 'flat',
     seed: '',
-    dbUrl: '',
+    dbUrl: loadRunCreds().dbUrl ?? '',
     ifExists: 'replace',
     dbSchema: '',
     recurrence: '',
@@ -718,15 +1380,62 @@ export default function App() {
     increments: [],
     workers: '16',
     cloudCreds: {
-      gcsJson: '',
-      s3AccessKey: '',
-      s3SecretKey: '',
-      s3Region: 'us-east-1',
-      azureConnStr: '',
+      gcsJson:      loadRunCreds().cloudCreds?.gcsJson      ?? '',
+      s3AccessKey:  loadRunCreds().cloudCreds?.s3AccessKey  ?? '',
+      s3SecretKey:  loadRunCreds().cloudCreds?.s3SecretKey  ?? '',
+      s3Region:     loadRunCreds().cloudCreds?.s3Region     ?? 'us-east-1',
+      azureConnStr: loadRunCreds().cloudCreds?.azureConnStr ?? '',
     },
   });
   const computedDbUrl = dbAdvanced ? runConfig.dbUrl : buildDbUrl(dbForm);
 
+
+  // ── Persist credential key refs to localStorage ────────────────────────────
+  useEffect(() => {
+    localStorage.setItem(RUN_CREDS_STORAGE, JSON.stringify({ dbUrl: runConfig.dbUrl, cloudCreds: runConfig.cloudCreds }));
+  }, [runConfig.dbUrl, runConfig.cloudCreds]);
+
+  // ── Sync env-keys → auto-select key NAMES (not values) in AI / Cloud / DB ───
+  // Fields store the env key NAME (e.g. "AWS_ACCESS_KEY_ID"); values resolved at send time.
+  useEffect(() => {
+    if (Object.keys(envKeys).length === 0) return;
+
+    // AI: auto-select the first matching key name for each provider (only if not already set)
+    const aiKeyMap: Record<string, string> = {
+      ANTHROPIC_API_KEY: 'anthropic', OPENAI_API_KEY: 'openai',
+      GOOGLE_API_KEY: 'google',       GEMINI_API_KEY: 'google',
+      GROQ_API_KEY: 'groq',           MISTRAL_API_KEY: 'mistral',
+      TOGETHER_API_KEY: 'together',
+    };
+    setAiApiKeys(prev => {
+      const next = { ...prev };
+      for (const [envVar, provider] of Object.entries(aiKeyMap)) {
+        if (envKeys[envVar] && !next[provider]) next[provider] = envVar; // store the NAME
+      }
+      return next;
+    });
+
+    // Cloud: auto-select key names (only if field is empty)
+    const defaultCloudNames: Partial<Record<string, string>> = {
+      s3AccessKey: envKeys['AWS_ACCESS_KEY_ID']                    ? 'AWS_ACCESS_KEY_ID'                    : undefined,
+      s3SecretKey: envKeys['AWS_SECRET_ACCESS_KEY']                 ? 'AWS_SECRET_ACCESS_KEY'                 : undefined,
+      s3Region:    envKeys['AWS_DEFAULT_REGION']                    ? 'AWS_DEFAULT_REGION'
+                 : envKeys['AWS_REGION']                            ? 'AWS_REGION'                            : undefined,
+      gcsJson:     envKeys['GCS_JSON']                              ? 'GCS_JSON'
+                 : envKeys['GOOGLE_APPLICATION_CREDENTIALS_JSON']   ? 'GOOGLE_APPLICATION_CREDENTIALS_JSON'   : undefined,
+      azureConnStr: envKeys['AZURE_STORAGE_CONNECTION_STRING']      ? 'AZURE_STORAGE_CONNECTION_STRING'       : undefined,
+    };
+    setRunConfig(r => {
+      const creds = { ...r.cloudCreds };
+      for (const [field, name] of Object.entries(defaultCloudNames)) {
+        if (name && !(r.cloudCreds as any)[field]) (creds as any)[field] = name;
+      }
+      const dbUrl = !r.dbUrl && envKeys['DATABASE_URL'] ? 'DATABASE_URL' : r.dbUrl;
+      return { ...r, cloudCreds: creds, dbUrl };
+    });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [envKeys]);
+
   const [runLogs, setRunLogs] = useState('');
   const [isRunning, setIsRunning] = useState(false);
   const runAbortRef = useRef<AbortController | null>(null);
@@ -754,7 +1463,9 @@ export default function App() {
           partitionDateGranularity: Object.keys(runConfig.partitionDateGranularity).length > 0 ? runConfig.partitionDateGranularity : undefined,
           jsonMode: runConfig.jsonMode,
           seed: runConfig.seed !== '' ? parseInt(runConfig.seed) : undefined,
-          dbUrl: runConfig.destination === 'database' ? computedDbUrl || undefined : undefined,
+          dbUrl: runConfig.destination === 'database'
+            ? (dbAdvanced ? (envKeys[runConfig.dbUrl] ?? runConfig.dbUrl) : computedDbUrl) || undefined
+            : undefined,
           ifExists: runConfig.ifExists,
           dbSchema: runConfig.dbSchema || undefined,
           recurrence: runConfig.recurrence !== '' ? parseFloat(runConfig.recurrence) : undefined,
@@ -763,7 +1474,13 @@ export default function App() {
           columns: runConfig.columnsFilter.trim() ? runConfig.columnsFilter.trim().split('\n').filter(Boolean) : undefined,
           increments: runConfig.increments.filter(i => i.table && i.column && i.step !== ''),
           workers: runConfig.workers !== '' ? parseInt(runConfig.workers) : 16,
-          cloudCreds: runConfig.destination === 'cloud' ? runConfig.cloudCreds : undefined,
+          cloudCreds: runConfig.destination === 'cloud' ? {
+            gcsJson:      envKeys[runConfig.cloudCreds.gcsJson]      ?? runConfig.cloudCreds.gcsJson,
+            s3AccessKey:  envKeys[runConfig.cloudCreds.s3AccessKey]  ?? '',
+            s3SecretKey:  envKeys[runConfig.cloudCreds.s3SecretKey]  ?? '',
+            s3Region:     envKeys[runConfig.cloudCreds.s3Region]     ?? runConfig.cloudCreds.s3Region,
+            azureConnStr: envKeys[runConfig.cloudCreds.azureConnStr] ?? '',
+          } : undefined,
         })
       });
 
@@ -787,26 +1504,25 @@ export default function App() {
             if (msg.type === 'cmd' || msg.type === 'out') {
               setRunLogs(prev => prev + msg.text);
             } else if (msg.type === 'done') {
-              const statusLine = msg.stopped ? '\n⏹ Stopped.' : msg.success ? '\n✓ Done.' : '\n✗ Failed.';
+              const statusLine = msg.stopped ? '\n' + t('run.stopped') : msg.success ? '\n' + t('run.done') : '\n' + t('run.failed');
               setRunLogs(prev => prev + statusLine);
-              setIsRunning(false);
             }
           } catch {}
         }
       }
     } catch (e: any) {
       if ((e as DOMException).name !== 'AbortError') {
-        setRunLogs(prev => prev + `\nConnection Error: ${e.message || String(e)}`);
+        setRunLogs(prev => prev + `\n${t('run.connectionError')} ${e.message || String(e)}`);
       }
-      setIsRunning(false);
     } finally {
+      setIsRunning(false);
       runAbortRef.current = null;
     }
   };
 
   const handleStopCli = async () => {
     await fetch('/api/stop-cli', { method: 'POST' });
-    setRunLogs(prev => prev + '\n⏹ Stop requested…');
+    setRunLogs(prev => prev + '\n' + t('run.stopRequested'));
   };
 
   // Sync position changes back to tables state dynamically when nodes are dragged
@@ -825,7 +1541,7 @@ export default function App() {
           <span style={{ fontFamily: 'var(--font-display)', fontSize: '2rem', fontWeight: 800, letterSpacing: '-0.02em', color: 'var(--text-main)' }}>
             Data<span style={{ color: 'var(--primary)' }}>forge</span>
           </span>
-          <span style={{ fontFamily: 'var(--font-body)', fontSize: '0.72rem', fontWeight: 500, letterSpacing: '0.1em', color: 'var(--text-subtle)', textTransform: 'uppercase' }}>Synthetic Dataset Generator</span>
+          <span style={{ fontFamily: 'var(--font-body)', fontSize: '0.72rem', fontWeight: 500, letterSpacing: '0.1em', color: 'var(--text-subtle)', textTransform: 'uppercase' }}>{t('auth.subtitle')}</span>
         </div>
         <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: '1rem' }}>
           <span style={{ fontFamily: 'var(--font-mono)', fontSize: '0.72rem', color: 'var(--text-subtle)', background: 'rgba(34,211,238,0.06)', border: '1px solid rgba(34,211,238,0.12)', borderRadius: '999px', padding: '0.2rem 0.75rem', letterSpacing: '0.04em' }}>
@@ -839,7 +1555,7 @@ export default function App() {
               <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
               <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
             </svg>
-            Docs
+            {t('nav.docs')}
           </a>
           <a href="https://github.com/ckoliveiraa/DataForge" target="_blank" rel="noopener noreferrer"
             style={{ display: 'flex', alignItems: 'center', gap: '0.4rem', color: 'var(--text-muted)', textDecoration: 'none', fontSize: '0.85rem', transition: 'color var(--duration-base) var(--ease-out)' }}
@@ -855,15 +1571,70 @@ export default function App() {
                 .51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48
                 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
             </svg>
-            GitHub
+            {t('nav.github')}
           </a>
+
+          {/* User badge */}
+          <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', borderLeft: '1px solid rgba(255,255,255,0.08)', paddingLeft: '1rem', marginLeft: '0.25rem' }}>
+            {/* Language toggle */}
+            <div
+              onClick={() => i18n.changeLanguage(i18n.language === 'pt-BR' ? 'en' : 'pt-BR')}
+              title={t('common.language')}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                background: 'rgba(255,255,255,0.06)',
+                border: '1px solid rgba(255,255,255,0.12)',
+                borderRadius: '999px',
+                padding: '0.18rem',
+                cursor: 'pointer',
+                position: 'relative',
+                gap: '0.1rem',
+                userSelect: 'none',
+              }}
+            >
+              {(['pt-BR', 'en'] as const).map(lang => (
+                <span key={lang} style={{
+                  position: 'relative',
+                  padding: '0.2rem 0.55rem',
+                  fontSize: '0.75rem',
+                  fontWeight: 700,
+                  color: i18n.language === lang ? 'var(--primary)' : 'var(--text-muted)',
+                  background: i18n.language === lang ? 'rgba(34,211,238,0.18)' : 'transparent',
+                  border: i18n.language === lang ? '1px solid rgba(34,211,238,0.35)' : '1px solid transparent',
+                  borderRadius: '999px',
+                  transition: 'color 0.2s, background 0.2s',
+                  letterSpacing: '0.02em',
+                  fontFamily: 'var(--font-display)',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '0.25rem',
+                  whiteSpace: 'nowrap',
+                }}>
+                  <span style={{ fontSize: '0.75rem', lineHeight: 1 }}>{lang === 'pt-BR' ? '🇧🇷' : '🇺🇸'}</span>
+                  {lang === 'pt-BR' ? 'PT-BR' : 'EN'}
+                </span>
+              ))}
+            </div>
+            <button
+              onClick={() => setShowProfilePanel(true)}
+              style={{ display: 'flex', alignItems: 'center', gap: '0.4rem', background: 'rgba(34,211,238,0.08)', border: '1px solid rgba(34,211,238,0.18)', borderRadius: '999px', padding: '0.3rem 0.7rem', cursor: 'pointer', color: 'var(--primary)', fontSize: '0.8rem', fontWeight: 600, transition: 'background 0.15s' }}
+              onMouseEnter={e => (e.currentTarget.style.background = 'rgba(34,211,238,0.15)')}
+              onMouseLeave={e => (e.currentTarget.style.background = 'rgba(34,211,238,0.08)')}>
+              <User size={14} />
+              {auth.username}
+            </button>
+            <button onClick={onLogout} className="btn-icon" title={t('nav.signOut')} aria-label={t('nav.signOut')} style={{ color: 'var(--text-muted)' }}>
+              <LogOut size={16} />
+            </button>
+          </div>
         </div>
       </header>
 
       <div className="glass-panel" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '1rem', marginBottom: '1rem' }}>
         <div style={{ flex: 1, marginRight: '2rem', display: 'flex', gap: '1rem', alignItems: 'center' }}>
           <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-             <label style={{margin: 0, paddingRight: '0.5rem'}}>Domain:</label>
+             <label style={{margin: 0, paddingRight: '0.5rem'}}>{t('nav.domain')}</label>
              <select value={domain} onChange={handleDomainChange} style={{width: 'auto', padding: '0.5rem'}}>
                {validDomains.map((d: string) => <option key={d} value={d}>{d}</option>)}
              </select>
@@ -878,21 +1649,24 @@ export default function App() {
              )}
           </div>
           <button className="btn-primary" onClick={addTable} style={{ padding: '0.5rem 1rem' }}>
-            <Plus size={16} /> Add Table
+            <Plus size={16} /> {t('nav.addTable')}
+          </button>
+          <button className="btn-secondary" onClick={() => fileInputRef.current?.click()} style={{ padding: '0.5rem 1rem' }} title="Load schema from a .yaml/.yml file">
+            <BookOpen size={16} /> {t('nav.loadYaml')}
           </button>
           <button
             className="btn-accent"
             onClick={() => { setAiError(''); setAiModal(true); }}
             style={{ padding: '0.5rem 1rem' }}
           >
-            <Sparkles size={16} /> AI Generate
+            <Sparkles size={16} /> {t('nav.aiGenerate')}
           </button>
         </div>
         
         <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
           {tables.length > 0 && (
              <button className="btn-secondary" onClick={onLayout} style={{ padding: '0.5rem 1rem' }}>
-               <Network size={16} /> Auto Layout
+               <Network size={16} /> {t('nav.autoLayout')}
              </button>
           )}
           <input
@@ -904,23 +1678,35 @@ export default function App() {
           />
           {tables.length > 0 && (
              <button className="btn-secondary" onClick={generateSchema} style={{ padding: '0.5rem 1rem' }}>
-               <FileJson size={16} /> Preview YAML
+               <FileJson size={16} /> {t('nav.previewYaml')}
              </button>
           )}
           {tables.length > 0 && (
              <button className="btn-warning" onClick={() => { setSaveName(domain !== 'custom' ? domain : ''); setSaveError(''); setSaveModal(true); }} style={{ padding: '0.5rem 1rem' }}>
-               <Download size={16} /> Save as Default
+               <Download size={16} /> {t('nav.saveAsDefault')}
              </button>
           )}
           {tables.length > 0 && (
              <button className="btn-success" onClick={() => setShowRunPanel(true)} style={{ padding: '0.5rem 1rem' }}>
-               <Play size={16} /> Run Generator
+               <Play size={16} /> {t('nav.runGenerator')}
              </button>
           )}
+          <div style={{ position: 'relative', display: 'inline-flex' }}>
+            <button className="btn-secondary" disabled style={{ padding: '0.5rem 1rem', opacity: 0.4, cursor: 'not-allowed' }}>
+              <Clock size={16} /> {t('nav.schedules')}
+            </button>
+            <span style={{ position: 'absolute', top: '-8px', right: '-8px', background: 'var(--primary)', color: '#000', fontSize: '0.6rem', fontWeight: 700, padding: '2px 5px', borderRadius: '999px', letterSpacing: '0.03em', textTransform: 'uppercase', pointerEvents: 'none', whiteSpace: 'nowrap' }}>{t('nav.comingSoon')}</span>
+          </div>
+          <div style={{ position: 'relative', display: 'inline-flex' }}>
+            <button className="btn-secondary" disabled style={{ padding: '0.5rem 1rem', opacity: 0.4, cursor: 'not-allowed' }}>
+              <History size={16} /> {t('nav.history')}
+            </button>
+            <span style={{ position: 'absolute', top: '-8px', right: '-8px', background: 'var(--primary)', color: '#000', fontSize: '0.6rem', fontWeight: 700, padding: '2px 5px', borderRadius: '999px', letterSpacing: '0.03em', textTransform: 'uppercase', pointerEvents: 'none', whiteSpace: 'nowrap' }}>{t('nav.comingSoon')}</span>
+          </div>
         </div>
       </div>
 
-      <div style={{ flex: 1, position: 'relative', borderRadius: '12px', overflow: 'hidden', border: '1px solid rgba(148, 163, 184, 0.2)', display: 'flex' }}>
+      <div style={{ flex: 1, position: 'relative', borderRadius: '12px', overflow: 'hidden', border: '1px solid var(--border-mid)', display: 'flex' }}>
 
         
         <div style={{ flex: 1, height: '100%', position: 'relative' }}>
@@ -972,31 +1758,31 @@ export default function App() {
             boxShadow: '-8px 0 32px rgba(0,0,0,0.5)'
           }}>
             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem' }}>
-              <h2 style={{ fontSize: '1.25rem', margin: 0 }}>Edit Table</h2>
+              <h2 style={{ fontSize: '1.25rem', margin: 0 }}>{t('schema.editTable')}</h2>
               <div style={{ display: 'flex', gap: '0.5rem' }}>
                 <button
                   onClick={() => onRemoveTable(selectedTable.id)}
                   className="btn-icon-danger"
-                  aria-label="Delete table"
+                  aria-label={t('schema.deleteTable')}
                 >
                   <Trash2 size={16}/>
                 </button>
-                <button onClick={() => setSelectedTableId(null)} className="btn-icon" aria-label="Close panel">
+                <button onClick={() => setSelectedTableId(null)} className="btn-icon" aria-label={t('schema.closePanel')}>
                   <X size={16}/>
                 </button>
               </div>
             </div>
 
             <div className="form-group">
-              <label>Table Name</label>
-              <input 
-                type="text" 
-                value={selectedTable.name} 
-                onChange={e => onUpdateTable(selectedTable.id, 'name', e.target.value)} 
+              <label>{t('schema.tableName')}</label>
+              <input
+                type="text"
+                value={selectedTable.name}
+                onChange={e => onUpdateTable(selectedTable.id, 'name', e.target.value)}
               />
             </div>
             <div className="form-group">
-              <label>Rows Count</label>
+              <label>{t('schema.rowsCount')}</label>
               <input 
                 type="number" 
                 value={selectedTable.rows} 
@@ -1007,31 +1793,31 @@ export default function App() {
 
             <div style={{ marginTop: '2rem' }}>
               <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
-                <h3 style={{ fontSize: '1.1rem', margin: 0 }}>Columns</h3>
+                <h3 style={{ fontSize: '1.1rem', margin: 0 }}>{t('schema.columns')}</h3>
                 <button className="btn-secondary" onClick={() => onAddColumn(selectedTable.id)} style={{ padding: '0.25rem 0.75rem', fontSize: '0.85rem' }}>
-                  <Plus size={14} /> Add
+                  <Plus size={14} /> {t('schema.add')}
                 </button>
               </div>
 
               <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
                 {selectedTable.columns.length === 0 ? (
-                  <div style={{ textAlign: 'center', padding: '1rem', color: '#94a3b8', border: '1px dashed rgba(148, 163, 184, 0.2)', borderRadius: '8px' }}>
-                    No columns defined.
+                  <div style={{ textAlign: 'center', padding: '1rem', color: 'var(--text-muted)', border: '1px dashed var(--border-mid)', borderRadius: '8px' }}>
+                    {t('schema.noColumnsDefined')}
                   </div>
                 ) : (
                   selectedTable.columns.map(col => (
-                    <div key={col.id} style={{ background: 'rgba(255, 255, 255, 0.03)', border: '1px solid rgba(148, 163, 184, 0.1)', borderRadius: '8px', padding: '1rem' }}>
+                    <div key={col.id} style={{ background: 'rgba(255, 255, 255, 0.03)', border: '1px solid var(--border-color)', borderRadius: '8px', padding: '1rem' }}>
                       <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
-                        <input 
-                          value={col.name} 
+                        <input
+                          value={col.name}
                           onChange={(e) => onUpdateColumn(selectedTable.id, col.id, 'name', e.target.value)}
-                          placeholder="Column Name"
+                          placeholder={t('schema.columnName')}
                           style={{ flex: 1, marginRight: '0.5rem', padding: '0.5rem' }}
                         />
                         <button
                           onClick={() => onRemoveColumn(selectedTable.id, col.id)}
                           className="btn-icon-danger"
-                          aria-label="Remove column"
+                          aria-label={t('schema.removeColumn')}
                         >
                           <Trash2 size={16}/>
                         </button>
@@ -1039,7 +1825,7 @@ export default function App() {
 
                       <div style={{ display: 'flex', gap: '0.5rem', marginBottom: '1rem' }}>
                         <div style={{ flex: 1 }}>
-                          <label style={{ fontSize: '0.75rem', color: '#94a3b8' }}>Type</label>
+                          <label style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>{t('schema.type')}</label>
                           <select 
                             value={col.dtype} 
                             onChange={(e) => onUpdateColumn(selectedTable.id, col.id, 'dtype', e.target.value)}
@@ -1049,14 +1835,14 @@ export default function App() {
                           </select>
                         </div>
                         <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
-                          <label style={{ fontSize: '0.75rem', color: '#94a3b8', marginBottom: '0.5rem' }}>Nullable</label>
+                          <label style={{ fontSize: '0.75rem', color: 'var(--text-muted)', marginBottom: '0.5rem' }}>{t('schema.nullable')}</label>
                           <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
                             <label style={{ display: 'flex', alignItems: 'center', gap: '0.4rem', cursor: 'pointer' }}>
                               <input
                                 type="checkbox"
                                 checked={parseFloat(col.nullable as any) > 0}
                                 onChange={e => onUpdateColumn(selectedTable.id, col.id, 'nullable', e.target.checked ? '0.5' : '0')}
-                                style={{ width: '1rem', height: '1rem', accentColor: '#38bdf8', cursor: 'pointer' }}
+                                style={{ width: '1rem', height: '1rem', accentColor: 'var(--primary)', cursor: 'pointer' }}
                               />
                             </label>
                             {parseFloat(col.nullable as any) > 0 ? (
@@ -1072,10 +1858,10 @@ export default function App() {
                                   }}
                                   style={{ width: '52px', padding: '0.3rem 0.4rem', fontSize: '0.8rem', textAlign: 'center' }}
                                 />
-                                <span style={{ fontSize: '0.8rem', color: '#38bdf8' }}>%</span>
+                                <span style={{ fontSize: '0.8rem', color: 'var(--primary)' }}>%</span>
                               </div>
                             ) : (
-                              <span style={{ fontSize: '0.8rem', color: '#475569' }}>No</span>
+                              <span style={{ fontSize: '0.8rem', color: 'var(--text-subtle)' }}>{t('schema.no')}</span>
                             )}
                           </div>
                         </div>
@@ -1084,20 +1870,20 @@ export default function App() {
                       {['int', 'float', 'date'].includes(col.dtype) && (
                         <div style={{ display: 'flex', gap: '0.5rem', marginBottom: '1rem' }}>
                           <div style={{ flex: 1, minWidth: 0 }}>
-                            <label style={{ fontSize: '0.75rem', color: '#94a3b8' }}>Min</label>
+                            <label style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>{t('schema.min')}</label>
                             <input
                               value={col.min}
                               onChange={e => onUpdateColumn(selectedTable.id, col.id, 'min', e.target.value)}
-                              placeholder={col.dtype === 'date' ? 'e.g. -1y' : 'e.g. 0'}
+                              placeholder={col.dtype === 'date' ? t('schema.datePlaceholderMin') : t('schema.numericPlaceholderMin')}
                               style={{ padding: '0.5rem', width: '100%', boxSizing: 'border-box' }}
                             />
                           </div>
                           <div style={{ flex: 1, minWidth: 0 }}>
-                            <label style={{ fontSize: '0.75rem', color: '#94a3b8' }}>Max</label>
+                            <label style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>{t('schema.max')}</label>
                             <input
                               value={col.max}
                               onChange={e => onUpdateColumn(selectedTable.id, col.id, 'max', e.target.value)}
-                              placeholder={col.dtype === 'date' ? 'e.g. today' : 'e.g. 100'}
+                              placeholder={col.dtype === 'date' ? t('schema.datePlaceholderMax') : t('schema.numericPlaceholderMax')}
                               style={{ padding: '0.5rem', width: '100%', boxSizing: 'border-box' }}
                             />
                           </div>
@@ -1110,13 +1896,13 @@ export default function App() {
                             onClick={() => { onUpdateColumn(selectedTable.id, col.id, 'choices', []); }}
                             style={{ flex: 1, padding: '0.3rem', fontSize: '0.75rem', borderRadius: '4px', border: `1px solid ${col.choices.length === 0 ? 'rgba(34,211,238,0.4)' : 'transparent'}`, cursor: 'pointer', background: col.choices.length === 0 ? 'rgba(34,211,238,0.12)' : 'rgba(255,255,255,0.05)', color: col.choices.length === 0 ? 'var(--primary)' : 'var(--text-muted)' }}
                           >
-                            Faker Method
+                            {t('schema.fakerMethod')}
                           </button>
                           <button
                             onClick={() => { onUpdateColumn(selectedTable.id, col.id, 'fakerProvider', ''); onUpdateColumn(selectedTable.id, col.id, 'choices', col.choices.length === 0 ? [''] : col.choices); }}
                             style={{ flex: 1, padding: '0.3rem', fontSize: '0.75rem', borderRadius: '4px', border: `1px solid ${col.choices.length > 0 ? 'rgba(251,146,60,0.4)' : 'transparent'}`, cursor: 'pointer', background: col.choices.length > 0 ? 'rgba(251,146,60,0.12)' : 'rgba(255,255,255,0.05)', color: col.choices.length > 0 ? 'var(--accent)' : 'var(--text-muted)' }}
                           >
-                            Custom List
+                            {t('schema.customList')}
                           </button>
                         </div>
 
@@ -1133,18 +1919,18 @@ export default function App() {
                                   }}
                                   onFocus={() => setFakerDropdown({ tableId: selectedTable.id, colId: col.id })}
                                   onBlur={() => setTimeout(() => setFakerDropdown(null), 150)}
-                                  placeholder="e.g. phone_number"
+                                  placeholder={t('schema.fakerMethodPlaceholder')}
                                   style={{ padding: '0.5rem', paddingRight: '1.8rem' }}
                                 />
                                 {col.fakerProvider && (
                                   <button onClick={() => onUpdateColumn(selectedTable.id, col.id, 'fakerProvider', '')}
-                                    style={{ position: 'absolute', right: '0.4rem', top: '50%', transform: 'translateY(-50%)', background: 'none', border: 'none', color: '#64748b', cursor: 'pointer', padding: 0 }}>
+                                    style={{ position: 'absolute', right: '0.4rem', top: '50%', transform: 'translateY(-50%)', background: 'none', border: 'none', color: 'var(--text-muted)', cursor: 'pointer', padding: 0 }}>
                                     <X size={12} />
                                   </button>
                                 )}
                               </div>
                               <button
-                                title="Browse all faker methods"
+                                title={t('schema.browseAllFakerMethods')}
                                 onClick={() => { setFakerSearch(''); setFakerBrowser({ tableId: selectedTable.id, colId: col.id }); }}
                                 style={{ padding: '0.4rem 0.6rem', background: 'rgba(34,211,238,0.08)', border: '1px solid rgba(34,211,238,0.2)', borderRadius: '6px', color: 'var(--primary)', cursor: 'pointer', flexShrink: 0 }}>
                                 <BookOpen size={15} />
@@ -1163,7 +1949,7 @@ export default function App() {
                                       style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', width: '100%', padding: '0.45rem 0.75rem', background: 'none', border: 'none', borderBottom: '1px solid rgba(255,255,255,0.04)', cursor: 'pointer', textAlign: 'left' }}>
                                       <span style={{ fontSize: '0.65rem', background: `${m.color}22`, color: m.color, borderRadius: '3px', padding: '0.1rem 0.35rem', flexShrink: 0 }}>{m.category}</span>
                                       <span style={{ fontSize: '0.82rem', color: 'var(--text-main)', fontFamily: 'var(--font-mono)' }}>{m.name}</span>
-                                      <span style={{ fontSize: '0.72rem', color: '#475569', marginLeft: 'auto', flexShrink: 0 }}>{m.example}</span>
+                                      <span style={{ fontSize: '0.72rem', color: 'var(--text-subtle)', marginLeft: 'auto', flexShrink: 0 }}>{m.example}</span>
                                     </button>
                                   ))}
                                 </div>
@@ -1185,7 +1971,7 @@ export default function App() {
                             </div>
                             <input
                               type="text"
-                              placeholder="Type a value and press Enter"
+                              placeholder={t('schema.typeValueAndEnter')}
                               style={{ padding: '0.35rem 0.5rem', fontSize: '0.8rem', background: 'transparent', border: '1px dashed rgba(139,92,246,0.3)', borderRadius: '4px', color: 'white', width: '100%' }}
                               onKeyDown={e => {
                                 if (e.key === 'Enter' || e.key === ',') {
@@ -1198,7 +1984,7 @@ export default function App() {
                                 }
                               }}
                             />
-                            <p style={{ margin: '0.35rem 0 0', fontSize: '0.7rem', color: '#64748b' }}>Press Enter or comma to add</p>
+                            <p style={{ margin: '0.35rem 0 0', fontSize: '0.7rem', color: 'var(--text-muted)' }}>{t('schema.pressEnterOrComma')}</p>
                           </div>
                         )}
                       </div>
@@ -1206,32 +1992,32 @@ export default function App() {
                       <div style={{ display: 'flex', gap: '1.5rem', marginBottom: '1rem' }}>
                         <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer', fontSize: '0.85rem' }}>
                           <input type="checkbox" checked={col.isPrimaryKey} onChange={(e) => onUpdateColumn(selectedTable.id, col.id, 'isPrimaryKey', e.target.checked)} />
-                          <Key size={14} color="#eab308"/> Primary Key
+                          <Key size={14} color="#eab308"/> {t('schema.primaryKey')}
                         </label>
                         <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer', fontSize: '0.85rem' }}>
                           <input type="checkbox" checked={col.isForeignKey} onChange={(e) => onUpdateColumn(selectedTable.id, col.id, 'isForeignKey', e.target.checked)} />
-                          <LinkIcon size={14} color="#ec4899"/> Foreign Key
+                          <LinkIcon size={14} color="var(--accent)"/> {t('schema.foreignKey')}
                         </label>
                       </div>
 
                       {col.isForeignKey && (
-                        <div style={{ background: 'rgba(236, 72, 153, 0.05)', padding: '0.75rem', borderRadius: '6px', border: '1px solid rgba(236, 72, 153, 0.2)' }}>
+                        <div style={{ background: 'var(--accent-glow)', padding: '0.75rem', borderRadius: '6px', border: '1px solid rgba(251,146,60,0.25)' }}>
                           <div style={{ marginBottom: '0.5rem' }}>
-                            <label style={{ fontSize: '0.75rem', color: '#ec4899' }}>Reference Table Name</label>
-                            <input 
-                              type="text" 
-                              value={col.fkTable} 
-                              onChange={e => onUpdateColumn(selectedTable.id, col.id, 'fkTable', e.target.value)} 
-                              style={{ padding: '0.5rem', border: '1px solid rgba(236, 72, 153, 0.3)' }}
+                            <label style={{ fontSize: '0.75rem', color: 'var(--accent)' }}>{t('schema.refTableName')}</label>
+                            <input
+                              type="text"
+                              value={col.fkTable}
+                              onChange={e => onUpdateColumn(selectedTable.id, col.id, 'fkTable', e.target.value)}
+                              style={{ padding: '0.5rem', border: '1px solid rgba(251,146,60,0.3)' }}
                             />
                           </div>
                           <div>
-                            <label style={{ fontSize: '0.75rem', color: '#ec4899' }}>Reference Column Name</label>
-                            <input 
-                              type="text" 
-                              value={col.fkColumn} 
-                              onChange={e => onUpdateColumn(selectedTable.id, col.id, 'fkColumn', e.target.value)} 
-                              style={{ padding: '0.5rem', border: '1px solid rgba(236, 72, 153, 0.3)' }}
+                            <label style={{ fontSize: '0.75rem', color: 'var(--accent)' }}>{t('schema.refColumnName')}</label>
+                            <input
+                              type="text"
+                              value={col.fkColumn}
+                              onChange={e => onUpdateColumn(selectedTable.id, col.id, 'fkColumn', e.target.value)}
+                              style={{ padding: '0.5rem', border: '1px solid rgba(251,146,60,0.3)' }}
                             />
                           </div>
                         </div>
@@ -1250,8 +2036,8 @@ export default function App() {
         <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.8)', backdropFilter: 'blur(6px)', zIndex: 200, display: 'flex', alignItems: 'center', justifyContent: 'center' }} onClick={() => setShowRunHelp(false)}>
           <div style={{ width: '560px', maxWidth: '95vw', maxHeight: '85vh', overflowY: 'auto', background: 'rgba(9,12,20,0.98)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '12px', padding: '1.5rem' }} onClick={e => e.stopPropagation()}>
             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.25rem' }}>
-              <h3 style={{ margin: 0, color: '#e2e8f0', fontSize: '1rem' }}>Run Generator — Field Reference</h3>
-              <button onClick={() => setShowRunHelp(false)} style={{ background: 'none', border: 'none', color: '#64748b', cursor: 'pointer', fontSize: '1.1rem', lineHeight: 1 }}>✕</button>
+              <h3 style={{ margin: 0, color: 'var(--text-main)', fontSize: '1rem' }}>{t('run.fieldReference')}</h3>
+              <button onClick={() => setShowRunHelp(false)} style={{ background: 'none', border: 'none', color: 'var(--text-muted)', cursor: 'pointer', fontSize: '1.1rem', lineHeight: 1 }}>✕</button>
             </div>
             {([
               { section: 'Format', fields: [
@@ -1283,11 +2069,11 @@ export default function App() {
               ]},
             ] as { section: string; fields: { name: string; desc: string }[] }[]).map(({ section, fields }) => (
               <div key={section} style={{ marginBottom: '1.25rem' }}>
-                <p style={{ margin: '0 0 0.6rem', fontSize: '0.7rem', textTransform: 'uppercase', letterSpacing: '0.08em', color: '#475569' }}>{section}</p>
+                <p style={{ margin: '0 0 0.6rem', fontSize: '0.7rem', textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--text-subtle)' }}>{section}</p>
                 {fields.map(({ name, desc }) => (
-                  <div key={name} style={{ marginBottom: '0.75rem', paddingLeft: '0.75rem', borderLeft: '2px solid rgba(96,165,250,0.2)' }}>
-                    <p style={{ margin: '0 0 0.2rem', fontSize: '0.82rem', color: '#93c5fd', fontWeight: 600 }}>{name}</p>
-                    <p style={{ margin: 0, fontSize: '0.78rem', color: '#94a3b8', lineHeight: 1.5, whiteSpace: 'pre-line' }}>{desc}</p>
+                  <div key={name} style={{ marginBottom: '0.75rem', paddingLeft: '0.75rem', borderLeft: '2px solid rgba(34,211,238,0.2)' }}>
+                    <p style={{ margin: '0 0 0.2rem', fontSize: '0.82rem', color: 'var(--primary)', fontWeight: 600 }}>{name}</p>
+                    <p style={{ margin: 0, fontSize: '0.78rem', color: 'var(--text-muted)', lineHeight: 1.5, whiteSpace: 'pre-line' }}>{desc}</p>
                   </div>
                 ))}
               </div>
@@ -1301,9 +2087,9 @@ export default function App() {
         <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.72)', backdropFilter: 'blur(6px)', zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
           <div className="glass-panel animated-scale" style={{ width: '580px', maxWidth: '95vw', padding: '1.5rem', background: 'rgba(9, 12, 20, 0.97)', border: '1px solid rgba(255,255,255,0.08)', borderTopColor: 'rgba(255,255,255,0.12)' }}>
             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
-              <h2 style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: '1.2rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}><Play size={18} color="var(--success)"/> Run Generator</h2>
+              <h2 style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: '1.2rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}><Play size={18} color="var(--success)"/> {t('run.title')}</h2>
               <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
-                <button onClick={() => setShowRunHelp(true)} style={{ background: 'rgba(148,163,184,0.1)', border: '1px solid rgba(148,163,184,0.2)', borderRadius: '6px', color: '#94a3b8', cursor: 'pointer', fontSize: '0.78rem', padding: '0.25rem 0.6rem', display: 'flex', alignItems: 'center', gap: '0.3rem' }}>? Help</button>
+                <button onClick={() => setShowRunHelp(true)} style={{ background: 'rgba(255,255,255,0.05)', border: '1px solid var(--border-mid)', borderRadius: '6px', color: 'var(--text-muted)', cursor: 'pointer', fontSize: '0.78rem', padding: '0.25rem 0.6rem', display: 'flex', alignItems: 'center', gap: '0.3rem' }}>? Help</button>
                 <button onClick={() => setShowRunPanel(false)} className="btn-icon" aria-label="Close run panel"><X size={18}/></button>
               </div>
             </div>
@@ -1312,7 +2098,7 @@ export default function App() {
 
               {/* Formats + JSON mode */}
               {runConfig.destination !== 'database' && <div style={{ borderBottom: '1px solid rgba(148,163,184,0.15)', paddingBottom: '1rem' }}>
-                <p style={{ margin: '0 0 0.75rem', fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.05em', color: '#64748b' }}>Format</p>
+                <p style={{ margin: '0 0 0.75rem', fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.05em', color: 'var(--text-subtle)' }}>{t('run.format')}</p>
                 <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
                   {(['csv', 'json', 'parquet', 'avro'] as const).map(fmt => {
                     const active = runConfig.formats.includes(fmt);
@@ -1324,7 +2110,7 @@ export default function App() {
                             : [...runConfig.formats, fmt];
                           setRunConfig(r => ({ ...r, formats: next.length > 0 ? next : [fmt] }));
                         }}
-                        style={{ padding: '0.35rem 0.85rem', borderRadius: '6px', border: `1px solid ${active ? '#10b981' : 'rgba(255,255,255,0.1)'}`, background: active ? 'rgba(16,185,129,0.15)' : 'rgba(255,255,255,0.05)', color: active ? '#10b981' : '#94a3b8', cursor: 'pointer', fontSize: '0.85rem', fontWeight: active ? 600 : 400 }}>
+                        style={{ padding: '0.35rem 0.85rem', borderRadius: '6px', border: `1px solid ${active ? 'var(--success)' : 'var(--border-color)'}`, background: active ? 'rgba(74,222,128,0.12)' : 'rgba(255,255,255,0.05)', color: active ? 'var(--success)' : 'var(--text-muted)', cursor: 'pointer', fontSize: '0.85rem', fontWeight: active ? 600 : 400 }}>
                         {fmt.toUpperCase()}
                       </button>
                     );
@@ -1332,16 +2118,16 @@ export default function App() {
                 </div>
                 {runConfig.formats.includes('json') && (
                   <div style={{ marginTop: '0.75rem' }}>
-                    <label style={{ display: 'block', marginBottom: '0.5rem', color: '#cbd5e1', fontSize: '0.85rem' }}>JSON Mode</label>
+                    <label style={{ display: 'block', marginBottom: '0.5rem', color: 'var(--text-main)', fontSize: '0.85rem' }}>{t('run.jsonMode')}</label>
                     <select value={runConfig.jsonMode} onChange={e => setRunConfig(r => ({...r, jsonMode: e.target.value}))} style={{ width: '100%', padding: '0.5rem', background: 'rgba(255,255,255,0.05)', color: 'white', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '6px' }}>
-                      <option value="flat" style={{color: 'black'}}>Flat (NDJSON)</option>
-                      <option value="nested" style={{color: 'black'}}>Nested</option>
+                      <option value="flat" style={{color: 'black'}}>{t('run.flat')}</option>
+                      <option value="nested" style={{color: 'black'}}>{t('run.nested')}</option>
                     </select>
                   </div>
                 )}
                 <div style={{ display: 'flex', gap: '1rem', marginTop: '0.75rem' }}>
                   <div style={{ flex: 1 }}>
-                    <label style={{ display: 'block', marginBottom: '0.5rem', color: '#cbd5e1', fontSize: '0.85rem' }}>Rows Override <span style={{ color: '#64748b' }}>(optional)</span></label>
+                    <label style={{ display: 'block', marginBottom: '0.5rem', color: 'var(--text-main)', fontSize: '0.85rem' }}>{t('run.rowsOverride')} <span style={{ color: 'var(--text-muted)' }}>({t('ai.optional')})</span></label>
                     <input type="number" value={runConfig.rows} onChange={e => setRunConfig(r => ({...r, rows: e.target.value}))} style={{ width: '100%', padding: '0.5rem' }} placeholder="e.g. 5000" min="1" />
                   </div>
                 </div>
@@ -1349,18 +2135,18 @@ export default function App() {
 
               {/* Destination */}
               <div style={{ borderBottom: '1px solid rgba(148,163,184,0.15)', paddingBottom: '1rem' }}>
-                <p style={{ margin: '0 0 0.75rem', fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.05em', color: '#64748b' }}>Destination</p>
+                <p style={{ margin: '0 0 0.75rem', fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.05em', color: 'var(--text-subtle)' }}>{t('run.destination')}</p>
                 <div style={{ display: 'flex', gap: '0.5rem', marginBottom: '1rem' }}>
                   {([
-                    { key: 'local', label: 'Local', color: '#60a5fa' },
-                    { key: 'cloud', label: 'Cloud', color: '#a78bfa' },
-                    { key: 'database', label: 'Database', color: '#f59e0b' },
+                    { key: 'local', label: t('run.local'), color: '#60a5fa' },
+                    { key: 'cloud', label: t('run.cloud'), color: '#a78bfa' },
+                    { key: 'database', label: t('run.database'), color: '#f59e0b' },
                   ] as const).map(({ key, label, color }) => {
                     const active = runConfig.destination === key;
                     return (
                       <button key={key} type="button"
                         onClick={() => setRunConfig(r => ({ ...r, destination: key }))}
-                        style={{ flex: 1, padding: '0.5rem', borderRadius: '8px', border: `1px solid ${active ? color : 'rgba(255,255,255,0.1)'}`, background: active ? `${color}18` : 'rgba(255,255,255,0.04)', color: active ? color : '#64748b', cursor: 'pointer', fontSize: '0.9rem', fontWeight: active ? 700 : 400, transition: 'all 0.15s' }}>
+                        style={{ flex: 1, padding: '0.5rem', borderRadius: '8px', border: `1px solid ${active ? color : 'var(--border-color)'}`, background: active ? `${color}18` : 'rgba(255,255,255,0.04)', color: active ? color : 'var(--text-muted)', cursor: 'pointer', fontSize: '0.9rem', fontWeight: active ? 700 : 400, transition: 'all 0.15s' }}>
                         {label}
                       </button>
                     );
@@ -1370,7 +2156,7 @@ export default function App() {
                 {/* Local */}
                 {runConfig.destination === 'local' && (
                   <div>
-                    <label style={{ display: 'block', marginBottom: '0.5rem', color: '#cbd5e1', fontSize: '0.85rem' }}>Output Directory</label>
+                    <label style={{ display: 'block', marginBottom: '0.5rem', color: 'var(--text-main)', fontSize: '0.85rem' }}>{t('run.outputDirectory')}</label>
                     <div style={{ display: 'flex', gap: '0.5rem' }}>
                       <input type="text" value={runConfig.outputDir} onChange={e => setRunConfig(r => ({...r, outputDir: e.target.value}))} style={{ flex: 1, padding: '0.5rem' }} placeholder="e.g. output" />
                       {canBrowseFolder && <button
@@ -1389,7 +2175,7 @@ export default function App() {
                           }
                         }}
                         title="Browse folder"
-                        style={{ padding: '0.5rem 0.75rem', borderRadius: '6px', border: '1px solid rgba(255,255,255,0.15)', background: 'rgba(255,255,255,0.07)', color: '#94a3b8', cursor: 'pointer', fontSize: '1rem', whiteSpace: 'nowrap' }}
+                        style={{ padding: '0.5rem 0.75rem', borderRadius: '6px', border: '1px solid rgba(255,255,255,0.15)', background: 'rgba(255,255,255,0.07)', color: 'var(--text-muted)', cursor: 'pointer', fontSize: '1rem', whiteSpace: 'nowrap' }}
                       >
                         📁
                       </button>}
@@ -1404,17 +2190,17 @@ export default function App() {
                     {/* Saved credential profiles */}
                     {credProfiles.filter(p => p.provider === runConfig.uploadTarget).length > 0 && (
                       <div>
-                        <label style={{ display: 'block', marginBottom: '0.4rem', color: '#cbd5e1', fontSize: '0.85rem' }}>Saved Credentials</label>
+                        <label style={{ display: 'block', marginBottom: '0.4rem', color: 'var(--text-main)', fontSize: '0.85rem' }}>{t('run.savedCredentials')}</label>
                         <div style={{ display: 'flex', flexDirection: 'column', gap: '0.3rem' }}>
                           {credProfiles.filter(p => p.provider === runConfig.uploadTarget).map(p => (
                             <div key={p.name} style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', background: 'rgba(255,255,255,0.04)', borderRadius: '6px', padding: '0.4rem 0.6rem', border: '1px solid rgba(255,255,255,0.08)' }}>
                               <button type="button" onClick={() => handleLoadCredProfile(p.name)}
-                                style={{ flex: 1, background: 'none', border: 'none', color: '#e2e8f0', fontSize: '0.82rem', cursor: 'pointer', textAlign: 'left', padding: 0 }}>
+                                style={{ flex: 1, background: 'none', border: 'none', color: 'var(--text-main)', fontSize: '0.82rem', cursor: 'pointer', textAlign: 'left', padding: 0 }}>
                                 {p.name}
-                                <span style={{ marginLeft: '0.5rem', color: '#475569', fontSize: '0.72rem' }}>{p.provider.toUpperCase()}</span>
+                                <span style={{ marginLeft: '0.5rem', color: 'var(--text-subtle)', fontSize: '0.72rem' }}>{p.provider.toUpperCase()}</span>
                               </button>
                               <button type="button" onClick={() => handleDeleteCredProfile(p.name)}
-                                style={{ background: 'none', border: 'none', color: '#475569', cursor: 'pointer', fontSize: '0.85rem', padding: '0 0.2rem' }}
+                                style={{ background: 'none', border: 'none', color: 'var(--text-subtle)', cursor: 'pointer', fontSize: '0.85rem', padding: '0 0.2rem' }}
                                 title="Remove">✕</button>
                             </div>
                           ))}
@@ -1424,22 +2210,22 @@ export default function App() {
 
                     {/* Provider */}
                     <div>
-                      <label style={{ display: 'block', marginBottom: '0.5rem', color: '#cbd5e1', fontSize: '0.85rem' }}>Provider</label>
+                      <label style={{ display: 'block', marginBottom: '0.5rem', color: 'var(--text-main)', fontSize: '0.85rem' }}>{t('run.cloudProvider')}</label>
                       <select value={runConfig.uploadTarget} onChange={e => setRunConfig(r => ({...r, uploadTarget: e.target.value}))} style={{ width: '100%', padding: '0.5rem', background: 'rgba(255,255,255,0.05)', color: 'white', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '6px' }}>
-                        <option value="gcs" style={{color: 'black'}}>Google Cloud Storage</option>
-                        <option value="s3" style={{color: 'black'}}>AWS S3</option>
-                        <option value="azure" style={{color: 'black'}}>Azure Blob Storage</option>
+                        <option value="gcs" style={{color: 'black'}}>{t('run.gcs')}</option>
+                        <option value="s3" style={{color: 'black'}}>{t('run.s3')}</option>
+                        <option value="azure" style={{color: 'black'}}>{t('run.azure')}</option>
                       </select>
                     </div>
 
                     {/* Bucket + Prefix */}
                     <div style={{ display: 'flex', gap: '1rem' }}>
                       <div style={{ flex: 1 }}>
-                        <label style={{ display: 'block', marginBottom: '0.5rem', color: '#cbd5e1', fontSize: '0.85rem' }}>Bucket / Container</label>
+                        <label style={{ display: 'block', marginBottom: '0.5rem', color: 'var(--text-main)', fontSize: '0.85rem' }}>{t('run.bucketName')}</label>
                         <input type="text" value={runConfig.bucket} onChange={e => setRunConfig(r => ({...r, bucket: e.target.value}))} style={{ width: '100%', padding: '0.5rem' }} placeholder="e.g. my-data-lake" />
                       </div>
                       <div style={{ flex: 1 }}>
-                        <label style={{ display: 'block', marginBottom: '0.5rem', color: '#cbd5e1', fontSize: '0.85rem' }}>Prefix</label>
+                        <label style={{ display: 'block', marginBottom: '0.5rem', color: 'var(--text-main)', fontSize: '0.85rem' }}>{t('run.prefix')}</label>
                         <input type="text" value={runConfig.prefix} onChange={e => setRunConfig(r => ({...r, prefix: e.target.value}))} style={{ width: '100%', padding: '0.5rem' }} placeholder="e.g. datasets/" />
                       </div>
                     </div>
@@ -1447,7 +2233,7 @@ export default function App() {
                     {/* Credentials — per provider */}
                     <div style={{ borderTop: '1px solid rgba(255,255,255,0.06)', paddingTop: '0.75rem' }}>
                       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.6rem' }}>
-                        <p style={{ margin: 0, fontSize: '0.72rem', textTransform: 'uppercase', letterSpacing: '0.06em', color: '#475569' }}>Credentials</p>
+                        <p style={{ margin: 0, fontSize: '0.72rem', textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--text-subtle)' }}>Credentials</p>
                         {showSaveCredInput ? (
                           <div style={{ display: 'flex', gap: '0.4rem', alignItems: 'center' }}>
                             <input
@@ -1460,57 +2246,55 @@ export default function App() {
                               style={{ padding: '0.25rem 0.5rem', fontSize: '0.78rem', background: 'rgba(255,255,255,0.07)', border: '1px solid rgba(255,255,255,0.15)', borderRadius: '5px', color: 'white', width: '130px' }}
                             />
                             <button type="button" onClick={handleSaveCredProfile}
-                              style={{ padding: '0.25rem 0.5rem', fontSize: '0.75rem', background: 'rgba(16,185,129,0.15)', border: '1px solid rgba(16,185,129,0.3)', borderRadius: '5px', color: '#10b981', cursor: 'pointer' }}>
+                              style={{ padding: '0.25rem 0.5rem', fontSize: '0.75rem', background: 'rgba(16,185,129,0.15)', border: '1px solid rgba(16,185,129,0.3)', borderRadius: '5px', color: 'var(--success)', cursor: 'pointer' }}>
                               Save
                             </button>
                             <button type="button" onClick={() => setShowSaveCredInput(false)}
-                              style={{ background: 'none', border: 'none', color: '#475569', cursor: 'pointer', fontSize: '0.85rem' }}>✕</button>
+                              style={{ background: 'none', border: 'none', color: 'var(--text-subtle)', cursor: 'pointer', fontSize: '0.85rem' }}>✕</button>
                           </div>
                         ) : (
                           <button type="button" onClick={() => setShowSaveCredInput(true)}
-                            style={{ background: 'none', border: 'none', color: '#64748b', fontSize: '0.75rem', cursor: 'pointer', textDecoration: 'underline', padding: 0 }}>
+                            style={{ background: 'none', border: 'none', color: 'var(--text-muted)', fontSize: '0.75rem', cursor: 'pointer', textDecoration: 'underline', padding: 0 }}>
                             Save credentials
                           </button>
                         )}
                       </div>
 
                       {runConfig.uploadTarget === 'gcs' && (
-                        <div>
-                          <label style={{ display: 'block', marginBottom: '0.5rem', color: '#cbd5e1', fontSize: '0.85rem' }}>Service Account JSON</label>
-                          <textarea
-                            value={runConfig.cloudCreds.gcsJson}
-                            onChange={e => setRunConfig(r => ({...r, cloudCreds: {...r.cloudCreds, gcsJson: e.target.value}}))}
-                            rows={5}
-                            placeholder={'{\n  "type": "service_account",\n  "project_id": "...",\n  ...\n}'}
-                            style={{ width: '100%', padding: '0.5rem', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '6px', color: 'white', resize: 'vertical', fontSize: '0.78rem', fontFamily: 'monospace', boxSizing: 'border-box' }}
-                          />
-                        </div>
+                        <EnvKeyPicker
+                          label="Service Account JSON"
+                          value={runConfig.cloudCreds.gcsJson}
+                          onChange={name => setRunConfig(r => ({...r, cloudCreds: {...r.cloudCreds, gcsJson: name}}))}
+                          envKeys={envKeys}
+                          onOpenProfile={() => setShowProfilePanel(true)}
+                          hint="GCS_JSON"
+                        />
                       )}
 
                       {runConfig.uploadTarget === 's3' && (
-                        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
+                        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
                           <div style={{ display: 'flex', gap: '0.75rem' }}>
                             <div style={{ flex: 1 }}>
-                              <label style={{ display: 'block', marginBottom: '0.4rem', color: '#cbd5e1', fontSize: '0.85rem' }}>Access Key ID</label>
-                              <input type="text" value={runConfig.cloudCreds.s3AccessKey} onChange={e => setRunConfig(r => ({...r, cloudCreds: {...r.cloudCreds, s3AccessKey: e.target.value}}))} style={{ width: '100%', padding: '0.5rem', boxSizing: 'border-box' }} placeholder="AKIA..." />
+                              <EnvKeyPicker label="Access Key ID" value={runConfig.cloudCreds.s3AccessKey}
+                                onChange={name => setRunConfig(r => ({...r, cloudCreds: {...r.cloudCreds, s3AccessKey: name}}))}
+                                envKeys={envKeys} onOpenProfile={() => setShowProfilePanel(true)} hint="AWS_ACCESS_KEY_ID" />
                             </div>
                             <div style={{ flex: 1 }}>
-                              <label style={{ display: 'block', marginBottom: '0.4rem', color: '#cbd5e1', fontSize: '0.85rem' }}>Secret Access Key</label>
-                              <input type="password" value={runConfig.cloudCreds.s3SecretKey} onChange={e => setRunConfig(r => ({...r, cloudCreds: {...r.cloudCreds, s3SecretKey: e.target.value}}))} style={{ width: '100%', padding: '0.5rem', boxSizing: 'border-box' }} placeholder="••••••••" />
+                              <EnvKeyPicker label="Secret Access Key" value={runConfig.cloudCreds.s3SecretKey}
+                                onChange={name => setRunConfig(r => ({...r, cloudCreds: {...r.cloudCreds, s3SecretKey: name}}))}
+                                envKeys={envKeys} onOpenProfile={() => setShowProfilePanel(true)} hint="AWS_SECRET_ACCESS_KEY" />
                             </div>
                           </div>
-                          <div style={{ flex: 1 }}>
-                            <label style={{ display: 'block', marginBottom: '0.4rem', color: '#cbd5e1', fontSize: '0.85rem' }}>Region</label>
-                            <input type="text" value={runConfig.cloudCreds.s3Region} onChange={e => setRunConfig(r => ({...r, cloudCreds: {...r.cloudCreds, s3Region: e.target.value}}))} style={{ width: '100%', padding: '0.5rem', boxSizing: 'border-box' }} placeholder="us-east-1" />
-                          </div>
+                          <EnvKeyPicker label="Region" value={runConfig.cloudCreds.s3Region}
+                            onChange={name => setRunConfig(r => ({...r, cloudCreds: {...r.cloudCreds, s3Region: name}}))}
+                            envKeys={envKeys} onOpenProfile={() => setShowProfilePanel(true)} hint="AWS_DEFAULT_REGION" />
                         </div>
                       )}
 
                       {runConfig.uploadTarget === 'azure' && (
-                        <div>
-                          <label style={{ display: 'block', marginBottom: '0.5rem', color: '#cbd5e1', fontSize: '0.85rem' }}>Connection String</label>
-                          <input type="password" value={runConfig.cloudCreds.azureConnStr} onChange={e => setRunConfig(r => ({...r, cloudCreds: {...r.cloudCreds, azureConnStr: e.target.value}}))} style={{ width: '100%', padding: '0.5rem', boxSizing: 'border-box' }} placeholder="DefaultEndpointsProtocol=https;AccountName=...;AccountKey=...;EndpointSuffix=core.windows.net" />
-                        </div>
+                        <EnvKeyPicker label="Connection String" value={runConfig.cloudCreds.azureConnStr}
+                          onChange={name => setRunConfig(r => ({...r, cloudCreds: {...r.cloudCreds, azureConnStr: name}}))}
+                          envKeys={envKeys} onOpenProfile={() => setShowProfilePanel(true)} hint="AZURE_STORAGE_CONNECTION_STRING" />
                       )}
                     </div>
                   </div>
@@ -1523,19 +2307,19 @@ export default function App() {
                     {/* Saved connections */}
                     {savedConns.length > 0 && (
                       <div>
-                        <label style={{ display: 'block', marginBottom: '0.4rem', color: '#cbd5e1', fontSize: '0.85rem' }}>Saved Connections</label>
+                        <label style={{ display: 'block', marginBottom: '0.4rem', color: 'var(--text-main)', fontSize: '0.85rem' }}>{t('run.savedConnections')}</label>
                         <div style={{ display: 'flex', flexDirection: 'column', gap: '0.3rem' }}>
                           {savedConns.map(conn => (
                             <div key={conn.name} style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', background: 'rgba(255,255,255,0.04)', borderRadius: '6px', padding: '0.4rem 0.6rem', border: '1px solid rgba(255,255,255,0.08)' }}>
                               <button type="button" onClick={() => handleLoadConn(conn)}
-                                style={{ flex: 1, background: 'none', border: 'none', color: '#e2e8f0', fontSize: '0.82rem', cursor: 'pointer', textAlign: 'left', padding: 0 }}>
+                                style={{ flex: 1, background: 'none', border: 'none', color: 'var(--text-main)', fontSize: '0.82rem', cursor: 'pointer', textAlign: 'left', padding: 0 }}>
                                 {conn.name}
-                                <span style={{ marginLeft: '0.5rem', color: '#475569', fontSize: '0.72rem' }}>
+                                <span style={{ marginLeft: '0.5rem', color: 'var(--text-subtle)', fontSize: '0.72rem' }}>
                                   {conn.advanced ? conn.advancedUrl.replace(/:([^:@]+)@/, ':***@') : `${conn.form.type}://${conn.form.host}/${conn.form.database}`}
                                 </span>
                               </button>
                               <button type="button" onClick={() => handleDeleteConn(conn.name)}
-                                style={{ background: 'none', border: 'none', color: '#475569', cursor: 'pointer', fontSize: '0.85rem', padding: '0 0.2rem', lineHeight: 1 }}
+                                style={{ background: 'none', border: 'none', color: 'var(--text-subtle)', cursor: 'pointer', fontSize: '0.85rem', padding: '0 0.2rem', lineHeight: 1 }}
                                 title="Remove">✕</button>
                             </div>
                           ))}
@@ -1557,15 +2341,15 @@ export default function App() {
                             style={{ flex: 1, padding: '0.3rem 0.5rem', fontSize: '0.8rem', background: 'rgba(255,255,255,0.07)', border: '1px solid rgba(255,255,255,0.15)', borderRadius: '5px', color: 'white' }}
                           />
                           <button type="button" onClick={handleSaveConn}
-                            style={{ padding: '0.3rem 0.6rem', fontSize: '0.78rem', background: 'rgba(16,185,129,0.15)', border: '1px solid rgba(16,185,129,0.3)', borderRadius: '5px', color: '#10b981', cursor: 'pointer' }}>
+                            style={{ padding: '0.3rem 0.6rem', fontSize: '0.78rem', background: 'rgba(16,185,129,0.15)', border: '1px solid rgba(16,185,129,0.3)', borderRadius: '5px', color: 'var(--success)', cursor: 'pointer' }}>
                             Save
                           </button>
                           <button type="button" onClick={() => setShowSaveInput(false)}
-                            style={{ background: 'none', border: 'none', color: '#475569', cursor: 'pointer', fontSize: '0.85rem' }}>✕</button>
+                            style={{ background: 'none', border: 'none', color: 'var(--text-subtle)', cursor: 'pointer', fontSize: '0.85rem' }}>✕</button>
                         </div>
                       ) : (
                         <button type="button" onClick={() => setShowSaveInput(true)}
-                          style={{ background: 'none', border: 'none', color: '#64748b', fontSize: '0.75rem', cursor: 'pointer', textDecoration: 'underline', padding: 0 }}>
+                          style={{ background: 'none', border: 'none', color: 'var(--text-muted)', fontSize: '0.75rem', cursor: 'pointer', textDecoration: 'underline', padding: 0 }}>
                           Save connection
                         </button>
                       )}
@@ -1576,7 +2360,7 @@ export default function App() {
                       <>
                         {/* DB Type */}
                         <div>
-                          <label style={{ display: 'block', marginBottom: '0.5rem', color: '#cbd5e1', fontSize: '0.85rem' }}>Database Type</label>
+                          <label style={{ display: 'block', marginBottom: '0.5rem', color: 'var(--text-main)', fontSize: '0.85rem' }}>{t('run.databaseType')}</label>
                           <div style={{ display: 'flex', gap: '0.5rem' }}>
                             {(['postgresql', 'mysql', 'sqlite'] as const).map(t => {
                               const active = dbForm.type === t;
@@ -1584,7 +2368,7 @@ export default function App() {
                               return (
                                 <button key={t} type="button"
                                   onClick={() => { setDbForm(f => ({ ...f, type: t, port: DB_PORT_DEFAULTS[t] })); setDbTestStatus('idle'); }}
-                                  style={{ flex: 1, padding: '0.4rem', borderRadius: '6px', border: `1px solid ${active ? colors[t] : 'rgba(255,255,255,0.1)'}`, background: active ? `${colors[t]}18` : 'rgba(255,255,255,0.04)', color: active ? colors[t] : '#64748b', cursor: 'pointer', fontSize: '0.8rem', fontWeight: active ? 700 : 400, transition: 'all 0.15s', textTransform: 'capitalize' }}>
+                                  style={{ flex: 1, padding: '0.4rem', borderRadius: '6px', border: `1px solid ${active ? colors[t] : 'var(--border-color)'}`, background: active ? `${colors[t]}18` : 'rgba(255,255,255,0.04)', color: active ? colors[t] : 'var(--text-muted)', cursor: 'pointer', fontSize: '0.8rem', fontWeight: active ? 700 : 400, transition: 'all 0.15s', textTransform: 'capitalize' }}>
                                   {t === 'postgresql' ? 'PostgreSQL' : t === 'mysql' ? 'MySQL' : 'SQLite'}
                                 </button>
                               );
@@ -1595,7 +2379,7 @@ export default function App() {
                         {/* SQLite: apenas caminho do arquivo */}
                         {dbForm.type === 'sqlite' ? (
                           <div>
-                            <label style={{ display: 'block', marginBottom: '0.5rem', color: '#cbd5e1', fontSize: '0.85rem' }}>File Path</label>
+                            <label style={{ display: 'block', marginBottom: '0.5rem', color: 'var(--text-main)', fontSize: '0.85rem' }}>File Path</label>
                             <input type="text" value={dbForm.database}
                               onChange={e => { setDbForm(f => ({ ...f, database: e.target.value })); setDbTestStatus('idle'); }}
                               style={{ width: '100%', padding: '0.5rem' }} placeholder="e.g. output/data.db" />
@@ -1605,13 +2389,13 @@ export default function App() {
                             {/* Host + Port */}
                             <div style={{ display: 'flex', gap: '0.75rem' }}>
                               <div style={{ flex: 3 }}>
-                                <label style={{ display: 'block', marginBottom: '0.5rem', color: '#cbd5e1', fontSize: '0.85rem' }}>Host</label>
+                                <label style={{ display: 'block', marginBottom: '0.5rem', color: 'var(--text-main)', fontSize: '0.85rem' }}>{t('run.host')}</label>
                                 <input type="text" value={dbForm.host}
                                   onChange={e => { setDbForm(f => ({ ...f, host: e.target.value })); setDbTestStatus('idle'); }}
                                   style={{ width: '100%', padding: '0.5rem' }} placeholder="e.g. localhost" />
                               </div>
                               <div style={{ flex: 1 }}>
-                                <label style={{ display: 'block', marginBottom: '0.5rem', color: '#cbd5e1', fontSize: '0.85rem' }}>Port</label>
+                                <label style={{ display: 'block', marginBottom: '0.5rem', color: 'var(--text-main)', fontSize: '0.85rem' }}>{t('run.port')}</label>
                                 <input type="text" value={dbForm.port}
                                   onChange={e => { setDbForm(f => ({ ...f, port: e.target.value })); setDbTestStatus('idle'); }}
                                   style={{ width: '100%', padding: '0.5rem' }} placeholder="5432" />
@@ -1620,7 +2404,7 @@ export default function App() {
 
                             {/* Database name */}
                             <div>
-                              <label style={{ display: 'block', marginBottom: '0.5rem', color: '#cbd5e1', fontSize: '0.85rem' }}>Database</label>
+                              <label style={{ display: 'block', marginBottom: '0.5rem', color: 'var(--text-main)', fontSize: '0.85rem' }}>Database</label>
                               <input type="text" value={dbForm.database}
                                 onChange={e => { setDbForm(f => ({ ...f, database: e.target.value })); setDbTestStatus('idle'); }}
                                 style={{ width: '100%', padding: '0.5rem' }} placeholder="e.g. mydb" />
@@ -1629,13 +2413,13 @@ export default function App() {
                             {/* User + Password */}
                             <div style={{ display: 'flex', gap: '0.75rem' }}>
                               <div style={{ flex: 1 }}>
-                                <label style={{ display: 'block', marginBottom: '0.5rem', color: '#cbd5e1', fontSize: '0.85rem' }}>User</label>
+                                <label style={{ display: 'block', marginBottom: '0.5rem', color: 'var(--text-main)', fontSize: '0.85rem' }}>{t('run.username')}</label>
                                 <input type="text" value={dbForm.user}
                                   onChange={e => { setDbForm(f => ({ ...f, user: e.target.value })); setDbTestStatus('idle'); }}
                                   style={{ width: '100%', padding: '0.5rem' }} placeholder="e.g. admin" />
                               </div>
                               <div style={{ flex: 1 }}>
-                                <label style={{ display: 'block', marginBottom: '0.5rem', color: '#cbd5e1', fontSize: '0.85rem' }}>Password</label>
+                                <label style={{ display: 'block', marginBottom: '0.5rem', color: 'var(--text-main)', fontSize: '0.85rem' }}>{t('run.password')}</label>
                                 <div style={{ position: 'relative' }}>
                                   <input
                                     type={showDbPassword ? 'text' : 'password'}
@@ -1645,7 +2429,7 @@ export default function App() {
                                     placeholder="••••••••"
                                   />
                                   <button type="button" onClick={() => setShowDbPassword(v => !v)}
-                                    style={{ position: 'absolute', right: '0.5rem', top: '50%', transform: 'translateY(-50%)', background: 'none', border: 'none', color: '#64748b', cursor: 'pointer', fontSize: '0.85rem', padding: 0 }}>
+                                    style={{ position: 'absolute', right: '0.5rem', top: '50%', transform: 'translateY(-50%)', background: 'none', border: 'none', color: 'var(--text-muted)', cursor: 'pointer', fontSize: '0.85rem', padding: 0 }}>
                                     {showDbPassword ? '🙈' : '👁'}
                                   </button>
                                 </div>
@@ -1656,23 +2440,16 @@ export default function App() {
 
                         {/* Connection string preview */}
                         {computedDbUrl && (
-                          <div style={{ background: 'rgba(0,0,0,0.25)', borderRadius: '6px', padding: '0.5rem 0.75rem', fontSize: '0.72rem', color: '#64748b', wordBreak: 'break-all', fontFamily: 'monospace' }}>
+                          <div style={{ background: 'rgba(0,0,0,0.25)', borderRadius: '6px', padding: '0.5rem 0.75rem', fontSize: '0.72rem', color: 'var(--text-muted)', wordBreak: 'break-all', fontFamily: 'monospace' }}>
                             {computedDbUrl.replace(/:([^:@]+)@/, ':***@')}
                           </div>
                         )}
                       </>
                     ) : (
-                      /* Advanced: connection string manual */
-                      <div>
-                        <label style={{ display: 'block', marginBottom: '0.5rem', color: '#cbd5e1', fontSize: '0.85rem' }}>Connection String</label>
-                        <input
-                          type="text"
-                          value={runConfig.dbUrl}
-                          onChange={e => { setRunConfig(r => ({...r, dbUrl: e.target.value})); setDbTestStatus('idle'); setDbTestError(''); }}
-                          style={{ width: '100%', padding: '0.5rem' }}
-                          placeholder="postgresql+psycopg2://user:pass@host:5432/db"
-                        />
-                      </div>
+                      /* Advanced: connection string via env key ref */
+                      <EnvKeyPicker label="Connection String (URL)" value={runConfig.dbUrl}
+                        onChange={name => { setRunConfig(r => ({...r, dbUrl: name})); setDbTestStatus('idle'); setDbTestError(''); }}
+                        envKeys={envKeys} onOpenProfile={() => setShowProfilePanel(true)} hint="DATABASE_URL" />
                     )}
 
                     {/* Test Connection */}
@@ -1687,7 +2464,7 @@ export default function App() {
                             borderRadius: '6px',
                             border: '1px solid rgba(255,255,255,0.15)',
                             background: dbTestStatus === 'ok' ? 'rgba(16,185,129,0.15)' : dbTestStatus === 'error' ? 'rgba(239,68,68,0.15)' : 'rgba(255,255,255,0.06)',
-                            color: dbTestStatus === 'ok' ? '#10b981' : dbTestStatus === 'error' ? '#ef4444' : '#94a3b8',
+                            color: dbTestStatus === 'ok' ? 'var(--success)' : dbTestStatus === 'error' ? 'var(--danger)' : 'var(--text-muted)',
                             cursor: !computedDbUrl.trim() || dbTestStatus === 'testing' ? 'not-allowed' : 'pointer',
                             fontSize: '0.8rem',
                             whiteSpace: 'nowrap',
@@ -1695,7 +2472,7 @@ export default function App() {
                             opacity: !computedDbUrl.trim() ? 0.5 : 1,
                           }}
                         >
-                          {dbTestStatus === 'testing' ? '...' : dbTestStatus === 'ok' ? '✓ Connected' : dbTestStatus === 'error' ? '✗ Failed' : 'Test Connection'}
+                          {dbTestStatus === 'testing' ? t('run.testing') : dbTestStatus === 'ok' ? t('run.connected') : dbTestStatus === 'error' ? t('run.failed') : t('run.testConnection')}
                         </button>
                       </div>
                       {dbTestStatus === 'error' && dbTestError && (
@@ -1709,7 +2486,7 @@ export default function App() {
                     {/* If exists + Schema */}
                     <div style={{ display: 'flex', gap: '1rem' }}>
                       <div style={{ flex: 1 }}>
-                        <label style={{ display: 'block', marginBottom: '0.5rem', color: '#cbd5e1', fontSize: '0.85rem' }}>If Table Exists</label>
+                        <label style={{ display: 'block', marginBottom: '0.5rem', color: 'var(--text-main)', fontSize: '0.85rem' }}>{t('run.ifTableExists')}</label>
                         <select value={runConfig.ifExists} onChange={e => setRunConfig(r => ({...r, ifExists: e.target.value}))} style={{ width: '100%', padding: '0.5rem', background: 'rgba(255,255,255,0.05)', color: 'white', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '6px' }}>
                           <option value="replace" style={{color: 'black'}}>Replace</option>
                           <option value="append" style={{color: 'black'}}>Append</option>
@@ -1717,7 +2494,7 @@ export default function App() {
                         </select>
                       </div>
                       <div style={{ flex: 1 }}>
-                        <label style={{ display: 'block', marginBottom: '0.5rem', color: '#cbd5e1', fontSize: '0.85rem' }}>DB Schema <span style={{ color: '#64748b' }}>(optional)</span></label>
+                        <label style={{ display: 'block', marginBottom: '0.5rem', color: 'var(--text-main)', fontSize: '0.85rem' }}>{t('run.dbSchema')} <span style={{ color: 'var(--text-muted)' }}>({t('common.optional')})</span></label>
                         <input type="text" value={runConfig.dbSchema} onChange={e => setRunConfig(r => ({...r, dbSchema: e.target.value}))} style={{ width: '100%', padding: '0.5rem' }} placeholder="e.g. public" />
                       </div>
                     </div>
@@ -1727,24 +2504,24 @@ export default function App() {
 
               {/* Reproducibility */}
               <div style={{ borderBottom: '1px solid rgba(148,163,184,0.15)', paddingBottom: '1rem' }}>
-                <p style={{ margin: '0 0 0.75rem', fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.05em', color: '#64748b' }}>Reproducibility</p>
+                <p style={{ margin: '0 0 0.75rem', fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.05em', color: 'var(--text-muted)' }}>{t('run.reproducibility')}</p>
                 <div>
-                  <label style={{ display: 'block', marginBottom: '0.5rem', color: '#cbd5e1', fontSize: '0.85rem' }}>Random Seed <span style={{ color: '#64748b' }}>(optional)</span></label>
-                  <input type="number" value={runConfig.seed} onChange={e => setRunConfig(r => ({...r, seed: e.target.value}))} style={{ width: '100%', padding: '0.5rem' }} placeholder="e.g. 42" />
+                  <label style={{ display: 'block', marginBottom: '0.5rem', color: 'var(--text-main)', fontSize: '0.85rem' }}>{t('run.seed')} <span style={{ color: 'var(--text-muted)' }}>({t('common.optional')})</span></label>
+                  <input type="number" value={runConfig.seed} onChange={e => setRunConfig(r => ({...r, seed: e.target.value}))} style={{ width: '100%', padding: '0.5rem' }} placeholder={t('run.seedPlaceholder')} />
                 </div>
               </div>
 
               {/* Recurrence */}
               <div>
-                <p style={{ margin: '0 0 0.75rem', fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.05em', color: '#64748b' }}>Recurrence</p>
+                <p style={{ margin: '0 0 0.75rem', fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.05em', color: 'var(--text-muted)' }}>{t('run.recurrence')}</p>
                 <div style={{ display: 'flex', gap: '1rem' }}>
                   <div style={{ flex: 1 }}>
-                    <label style={{ display: 'block', marginBottom: '0.5rem', color: '#cbd5e1', fontSize: '0.85rem' }}>Interval (seconds) <span style={{ color: '#64748b' }}>(optional)</span></label>
-                    <input type="number" value={runConfig.recurrence} onChange={e => setRunConfig(r => ({...r, recurrence: e.target.value}))} style={{ width: '100%', padding: '0.5rem' }} placeholder="e.g. 60" min="1" />
+                    <label style={{ display: 'block', marginBottom: '0.5rem', color: 'var(--text-main)', fontSize: '0.85rem' }}>{t('run.intervalSeconds')} <span style={{ color: 'var(--text-muted)' }}>({t('common.optional')})</span></label>
+                    <input type="number" value={runConfig.recurrence} onChange={e => setRunConfig(r => ({...r, recurrence: e.target.value}))} style={{ width: '100%', padding: '0.5rem' }} placeholder={t('run.intervalPlaceholder')} min="1" />
                   </div>
                   {runConfig.recurrence && (
                     <div style={{ flex: 1 }}>
-                      <label style={{ display: 'block', marginBottom: '0.5rem', color: '#cbd5e1', fontSize: '0.85rem' }}>Batch Limit <span style={{ color: '#64748b' }}>(0 = infinite)</span></label>
+                      <label style={{ display: 'block', marginBottom: '0.5rem', color: 'var(--text-main)', fontSize: '0.85rem' }}>{t('run.batchLimit')} <span style={{ color: 'var(--text-muted)' }}>(0 = {t('run.infinite')})</span></label>
                       <input type="number" value={runConfig.count} onChange={e => setRunConfig(r => ({...r, count: e.target.value}))} style={{ width: '100%', padding: '0.5rem' }} placeholder="0" min="0" />
                     </div>
                   )}
@@ -1754,7 +2531,7 @@ export default function App() {
                 {runConfig.recurrence && (
                   <div style={{ marginTop: '1rem' }}>
                     <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
-                      <label style={{ color: '#cbd5e1', fontSize: '0.85rem' }}>Column Increments <span style={{ color: '#64748b' }}>(shift values per batch)</span></label>
+                      <label style={{ color: 'var(--text-main)', fontSize: '0.85rem' }}>{t('run.columnIncrements')} <span style={{ color: 'var(--text-muted)' }}>({t('run.shiftPerBatch')})</span></label>
                       <button type="button"
                         onClick={() => setRunConfig(r => ({ ...r, increments: [...r.increments, { table: tables[0]?.name || '', column: '', step: '1', unit: 'days' }] }))}
                         style={{ padding: '0.2rem 0.6rem', background: 'rgba(96,165,250,0.12)', border: '1px solid rgba(96,165,250,0.3)', borderRadius: '5px', color: '#60a5fa', cursor: 'pointer', fontSize: '0.78rem' }}>
@@ -1764,19 +2541,19 @@ export default function App() {
                     {runConfig.increments.map((inc, idx) => (
                       <div key={idx} style={{ display: 'flex', gap: '0.4rem', alignItems: 'center', marginBottom: '0.4rem' }}>
                         <select value={inc.table} onChange={e => { const next = [...runConfig.increments]; next[idx] = { ...next[idx], table: e.target.value, column: '' }; setRunConfig(r => ({ ...r, increments: next })); }}
-                          style={{ flex: '1.2', padding: '0.35rem 0.4rem', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '6px', color: '#e2e8f0', fontSize: '0.8rem' }}>
+                          style={{ flex: '1.2', padding: '0.35rem 0.4rem', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '6px', color: 'var(--text-main)', fontSize: '0.8rem' }}>
                           <option value="">table</option>
                           {tables.map(t => <option key={t.id} value={t.name} style={{ color: 'black' }}>{t.name}</option>)}
                         </select>
                         <select value={inc.column} onChange={e => { const next = [...runConfig.increments]; next[idx] = { ...next[idx], column: e.target.value }; setRunConfig(r => ({ ...r, increments: next })); }}
-                          style={{ flex: '1.5', padding: '0.35rem 0.4rem', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '6px', color: inc.column ? '#e2e8f0' : '#475569', fontSize: '0.8rem' }}>
+                          style={{ flex: '1.5', padding: '0.35rem 0.4rem', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '6px', color: inc.column ? 'var(--text-main)' : 'var(--text-subtle)', fontSize: '0.8rem' }}>
                           <option value="">column</option>
                           {(tables.find(t => t.name === inc.table)?.columns || []).map(c => <option key={c.id} value={c.name} style={{ color: 'black' }}>{c.name}</option>)}
                         </select>
                         <input type="number" value={inc.step} onChange={e => { const next = [...runConfig.increments]; next[idx] = { ...next[idx], step: e.target.value }; setRunConfig(r => ({ ...r, increments: next })); }}
-                          style={{ width: '56px', padding: '0.35rem 0.4rem', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '6px', color: '#e2e8f0', fontSize: '0.8rem' }} placeholder="step" />
+                          style={{ width: '56px', padding: '0.35rem 0.4rem', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '6px', color: 'var(--text-main)', fontSize: '0.8rem' }} placeholder="step" />
                         <select value={inc.unit} onChange={e => { const next = [...runConfig.increments]; next[idx] = { ...next[idx], unit: e.target.value }; setRunConfig(r => ({ ...r, increments: next })); }}
-                          style={{ flex: '1', padding: '0.35rem 0.4rem', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '6px', color: '#e2e8f0', fontSize: '0.8rem' }}>
+                          style={{ flex: '1', padding: '0.35rem 0.4rem', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '6px', color: 'var(--text-main)', fontSize: '0.8rem' }}>
                           <option value="days" style={{ color: 'black' }}>days</option>
                           <option value="hours" style={{ color: 'black' }}>hours</option>
                           <option value="weeks" style={{ color: 'black' }}>weeks</option>
@@ -1794,10 +2571,10 @@ export default function App() {
 
               {/* Filters */}
               <div style={{ borderBottom: '1px solid rgba(148,163,184,0.15)', paddingBottom: '1rem' }}>
-                <p style={{ margin: '0 0 0.75rem', fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.05em', color: '#64748b' }}>Filters <span style={{ color: '#475569', textTransform: 'none', letterSpacing: 0 }}>(optional)</span></p>
+                <p style={{ margin: '0 0 0.75rem', fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.05em', color: 'var(--text-muted)' }}>{t('run.filters')} <span style={{ color: 'var(--text-subtle)', textTransform: 'none', letterSpacing: 0 }}>({t('common.optional')})</span></p>
                 {tables.length > 0 && (
                   <div style={{ marginBottom: '0.75rem' }}>
-                    <label style={{ display: 'block', marginBottom: '0.5rem', color: '#cbd5e1', fontSize: '0.85rem' }}>Include Tables <span style={{ color: '#64748b' }}>(default: all)</span></label>
+                    <label style={{ display: 'block', marginBottom: '0.5rem', color: 'var(--text-main)', fontSize: '0.85rem' }}>{t('run.includeTables')} <span style={{ color: 'var(--text-muted)' }}>({t('run.defaultAll')})</span></label>
                     <div style={{ display: 'flex', gap: '0.4rem', flexWrap: 'wrap' }}>
                       {tables.map(t => {
                         const active = runConfig.tablesToInclude.includes(t.name);
@@ -1809,20 +2586,20 @@ export default function App() {
                                 : [...runConfig.tablesToInclude, t.name];
                               setRunConfig(r => ({ ...r, tablesToInclude: next }));
                             }}
-                            style={{ padding: '0.25rem 0.65rem', borderRadius: '5px', border: `1px solid ${active ? '#60a5fa' : 'rgba(255,255,255,0.1)'}`, background: active ? 'rgba(96,165,250,0.15)' : 'rgba(255,255,255,0.04)', color: active ? '#60a5fa' : '#64748b', cursor: 'pointer', fontSize: '0.8rem', fontWeight: active ? 600 : 400 }}>
+                            style={{ padding: '0.25rem 0.65rem', borderRadius: '5px', border: `1px solid ${active ? 'var(--primary)' : 'var(--border-color)'}`, background: active ? 'var(--primary-glow)' : 'rgba(255,255,255,0.04)', color: active ? 'var(--primary)' : 'var(--text-muted)', cursor: 'pointer', fontSize: '0.8rem', fontWeight: active ? 600 : 400 }}>
                             {t.name}
                           </button>
                         );
                       })}
                     </div>
                     {runConfig.tablesToInclude.length > 0 && (
-                      <button type="button" onClick={() => setRunConfig(r => ({ ...r, tablesToInclude: [] }))} style={{ marginTop: '0.35rem', background: 'none', border: 'none', color: '#475569', cursor: 'pointer', fontSize: '0.75rem' }}>Clear selection (use all)</button>
+                      <button type="button" onClick={() => setRunConfig(r => ({ ...r, tablesToInclude: [] }))} style={{ marginTop: '0.35rem', background: 'none', border: 'none', color: 'var(--text-subtle)', cursor: 'pointer', fontSize: '0.75rem' }}>{t('run.clearSelection')}</button>
                     )}
                   </div>
                 )}
                 {tables.length > 0 && (
                   <div style={{ marginBottom: '0.75rem' }}>
-                    <label style={{ display: 'block', marginBottom: '0.5rem', color: '#cbd5e1', fontSize: '0.85rem' }}>Partition By <span style={{ color: '#64748b' }}>(per table — Hive-style)</span></label>
+                    <label style={{ display: 'block', marginBottom: '0.5rem', color: 'var(--text-main)', fontSize: '0.85rem' }}>{t('run.partitionBy')} <span style={{ color: 'var(--text-muted)' }}>({t('run.perTableHive')})</span></label>
                     <div style={{ display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
                       {tables.map(t => {
                         const col = runConfig.partitionByTable[t.name] || '';
@@ -1832,7 +2609,7 @@ export default function App() {
                         return (
                           <div key={t.id} style={{ display: 'flex', flexDirection: 'column', gap: '0.3rem' }}>
                             <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-                              <span style={{ width: '120px', fontSize: '0.8rem', color: '#94a3b8', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flexShrink: 0 }}>{t.name}</span>
+                              <span style={{ width: '120px', fontSize: '0.8rem', color: 'var(--text-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flexShrink: 0 }}>{t.name}</span>
                               <select
                                 value={col}
                                 onChange={e => {
@@ -1844,7 +2621,7 @@ export default function App() {
                                   if (!val) delete nextGran[t.name];
                                   setRunConfig(r => ({ ...r, partitionByTable: next, partitionDateGranularity: nextGran }));
                                 }}
-                                style={{ flex: 1, padding: '0.35rem 0.5rem', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '6px', color: col ? '#e2e8f0' : '#475569', fontSize: '0.82rem' }}
+                                style={{ flex: 1, padding: '0.35rem 0.5rem', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '6px', color: col ? 'var(--text-main)' : 'var(--text-subtle)', fontSize: '0.82rem' }}
                               >
                                 <option value="">— no partition —</option>
                                 {t.columns.map(c => (
@@ -1867,14 +2644,14 @@ export default function App() {
                                       borderRadius: '4px',
                                       border: gran === opt.value ? '1px solid #6366f1' : '1px solid rgba(255,255,255,0.08)',
                                       background: gran === opt.value ? 'rgba(99,102,241,0.2)' : 'rgba(255,255,255,0.03)',
-                                      color: gran === opt.value ? '#a5b4fc' : '#475569',
+                                      color: gran === opt.value ? 'var(--primary)' : 'var(--text-subtle)',
                                       fontSize: '0.75rem',
                                       cursor: 'pointer',
                                     }}
                                   >{opt.label}</button>
                                 ))}
                                 {gran && (
-                                  <span style={{ fontSize: '0.72rem', color: '#475569', fontFamily: 'monospace' }}>
+                                  <span style={{ fontSize: '0.72rem', color: 'var(--text-subtle)', fontFamily: 'monospace' }}>
                                     {col}={gran === 'year' ? '2024' : '2024-04'}/
                                   </span>
                                 )}
@@ -1888,7 +2665,7 @@ export default function App() {
                 )}
                 {Object.values(runConfig.partitionByTable).some(v => v) && (
                   <div>
-                    <label style={{ display: 'block', marginBottom: '0.5rem', color: '#cbd5e1', fontSize: '0.85rem' }}>Partition Workers <span style={{ color: '#64748b' }}>(parallel threads)</span></label>
+                    <label style={{ display: 'block', marginBottom: '0.5rem', color: 'var(--text-main)', fontSize: '0.85rem' }}>Partition Workers <span style={{ color: 'var(--text-muted)' }}>(parallel threads)</span></label>
                     <input type="number" value={runConfig.workers} onChange={e => setRunConfig(r => ({...r, workers: e.target.value}))} style={{ width: '100%', padding: '0.5rem' }} placeholder="16" min="1" />
                     {(() => {
                       const w = parseInt(runConfig.workers);
@@ -1912,7 +2689,7 @@ export default function App() {
               {(() => {
                 const validationError =
                   runConfig.destination === 'cloud' && !runConfig.bucket.trim()
-                    ? 'Bucket / Container is required for cloud upload.'
+                    ? t('run.bucketRequired')
                     : null;
                 return validationError ? (
                   <p style={{ margin: '0 0 0.5rem', fontSize: '0.78rem', color: '#f87171', display: 'flex', alignItems: 'center', gap: '0.4rem' }}>
@@ -1926,13 +2703,13 @@ export default function App() {
                 return (
               <div style={{ display: 'flex', gap: '0.6rem' }}>
                 <button className="btn-primary" onClick={handleRunCli} disabled={disabled}
-                  style={{ flex: 1, padding: '0.75rem', background: '#10b981', borderColor: '#10b981', fontSize: '1rem', opacity: disabled ? 0.5 : 1, cursor: disabled ? 'not-allowed' : 'pointer' }}>
-                  {isRunning ? 'Running…' : 'Execute Dataforge CLI'}
+                  style={{ flex: 1, padding: '0.75rem', background: 'var(--success)', borderColor: 'var(--success)', fontSize: '1rem', opacity: disabled ? 0.5 : 1, cursor: disabled ? 'not-allowed' : 'pointer' }}>
+                  {isRunning ? t('run.running') : t('run.execute')}
                 </button>
                 {isRunning && (
                   <button onClick={handleStopCli}
                     style={{ padding: '0.75rem 1.25rem', background: 'rgba(239,68,68,0.12)', border: '1px solid rgba(239,68,68,0.4)', borderRadius: '8px', color: '#f87171', fontSize: '1rem', cursor: 'pointer', fontWeight: 600, whiteSpace: 'nowrap' }}>
-                    ⏹ Stop
+                    {t('run.stop')}
                   </button>
                 )}
               </div>
@@ -1952,24 +2729,24 @@ export default function App() {
 
             {/* Header */}
             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.5rem' }}>
-              <h2 style={{ margin: 0, fontSize: '1.15rem', color: '#e2e8f0', display: 'flex', alignItems: 'center', gap: '0.55rem' }}>
-                <Sparkles size={18} color="#a78bfa" /> AI Generate Domain
+              <h2 style={{ margin: 0, fontSize: '1.15rem', color: 'var(--text-main)', display: 'flex', alignItems: 'center', gap: '0.55rem' }}>
+                <Sparkles size={18} color="#a78bfa" /> {t('ai.title')}
               </h2>
-              <button onClick={() => !aiLoading && setAiModal(false)} style={{ background: 'transparent', border: 'none', color: '#64748b', cursor: 'pointer' }}><X size={18} /></button>
+              <button onClick={() => !aiLoading && setAiModal(false)} style={{ background: 'transparent', border: 'none', color: 'var(--text-muted)', cursor: 'pointer' }}><X size={18} /></button>
             </div>
-            <p style={{ margin: '0 0 1.25rem', fontSize: '0.82rem', color: '#475569', lineHeight: 1.5 }}>
-              Describe the domain you need — the AI generates a full YAML schema with tables, types, and relationships.
+            <p style={{ margin: '0 0 1.25rem', fontSize: '0.82rem', color: 'var(--text-subtle)', lineHeight: 1.5 }}>
+              {t('ai.description')}
             </p>
 
             {/* Provider grid */}
             <div style={{ marginBottom: '1.1rem' }}>
-              <label style={{ display: 'block', marginBottom: '0.5rem', fontSize: '0.78rem', color: '#64748b', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Provider</label>
+              <label style={{ display: 'block', marginBottom: '0.5rem', fontSize: '0.78rem', color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>{t('ai.provider')}</label>
               <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '0.4rem' }}>
                 {AI_PROVIDERS.map(({ key, label, color }) => {
                   const active = aiProvider === key;
                   return (
                     <button key={key} type="button" onClick={() => { setAiProvider(key); setAiError(''); }}
-                      style={{ padding: '0.5rem 0.3rem', borderRadius: '8px', border: `1px solid ${active ? color : 'rgba(255,255,255,0.08)'}`, background: active ? `${color}20` : 'rgba(255,255,255,0.03)', color: active ? color : '#64748b', cursor: 'pointer', fontSize: '0.8rem', fontWeight: active ? 700 : 400, transition: 'all 0.12s', textAlign: 'center' }}>
+                      style={{ padding: '0.5rem 0.3rem', borderRadius: '8px', border: `1px solid ${active ? color : 'var(--border-color)'}`, background: active ? `${color}20` : 'rgba(255,255,255,0.03)', color: active ? color : 'var(--text-muted)', cursor: 'pointer', fontSize: '0.8rem', fontWeight: active ? 700 : 400, transition: 'all 0.12s', textAlign: 'center' }}>
                       {label}
                     </button>
                   );
@@ -1980,19 +2757,13 @@ export default function App() {
             {/* API Key */}
             {aiProvider !== 'ollama' && (
               <div style={{ marginBottom: '0.75rem' }}>
-                <label style={{ display: 'block', marginBottom: '0.5rem', fontSize: '0.78rem', color: '#64748b', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
-                  API Key <span style={{ color: '#334155', textTransform: 'none', letterSpacing: 0 }}>(saved in browser)</span>
-                </label>
-                <input
-                  type="password"
-                  value={currentApiKey}
-                  onChange={e => {
-                    setAiApiKeys(prev => ({ ...prev, [aiProvider]: e.target.value }));
-                    setAiAvailableModels(prev => ({ ...prev, [aiProvider]: [] }));
-                    setAiModelsError('');
-                  }}
-                  placeholder={currentProviderMeta.keyPlaceholder}
-                  style={{ width: '100%', padding: '0.55rem 0.75rem', background: 'rgba(255,255,255,0.05)', border: `1px solid ${currentApiKey ? 'rgba(255,255,255,0.18)' : 'rgba(255,255,255,0.1)'}`, borderRadius: '7px', color: 'white', fontSize: '0.85rem', boxSizing: 'border-box' }}
+                <EnvKeyPicker
+                  label="API Key"
+                  value={currentApiKeyRef}
+                  onChange={name => { setAiApiKeys(prev => ({ ...prev, [aiProvider]: name })); setAiAvailableModels(prev => ({ ...prev, [aiProvider]: [] })); setAiModelsError(''); }}
+                  envKeys={envKeys}
+                  onOpenProfile={() => { setAiModal(false); setShowProfilePanel(true); }}
+                  hint={{ anthropic: 'ANTHROPIC_API_KEY', openai: 'OPENAI_API_KEY', google: 'GOOGLE_API_KEY', groq: 'GROQ_API_KEY', mistral: 'MISTRAL_API_KEY', together: 'TOGETHER_API_KEY' }[aiProvider]}
                 />
               </div>
             )}
@@ -2000,15 +2771,15 @@ export default function App() {
             {/* Model */}
             <div style={{ marginBottom: '1rem' }}>
               <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.5rem' }}>
-                <label style={{ fontSize: '0.78rem', color: '#64748b', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
-                  Model <span style={{ color: '#334155', textTransform: 'none', letterSpacing: 0 }}>{aiProvider === 'ollama' ? '(required)' : '(optional)'}</span>
+                <label style={{ fontSize: '0.78rem', color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+                  {t('ai.model')} <span style={{ color: '#334155', textTransform: 'none', letterSpacing: 0 }}>{aiProvider === 'ollama' ? `(${t('ai.required')})` : `(${t('ai.optional')})`}</span>
                 </label>
                 <button type="button" onClick={handleLoadModels}
                   disabled={aiModelsLoading || (!currentApiKey.trim() && aiProvider !== 'ollama')}
                   style={{ background: 'none', border: '1px solid rgba(96,165,250,0.3)', borderRadius: '5px', color: '#60a5fa', cursor: 'pointer', fontSize: '0.72rem', padding: '0.2rem 0.6rem', display: 'flex', alignItems: 'center', gap: '0.35rem', opacity: (!currentApiKey.trim() && aiProvider !== 'ollama') ? 0.35 : 1, minHeight: 'unset' }}>
                   {aiModelsLoading
-                    ? <><span style={{ display: 'inline-block', width: '10px', height: '10px', border: '1.5px solid rgba(255,255,255,0.2)', borderTopColor: '#60a5fa', borderRadius: '50%', animation: 'spin 0.7s linear infinite' }} /> Loading…</>
-                    : '⟳ Load available models'}
+                    ? <><span style={{ display: 'inline-block', width: '10px', height: '10px', border: '1.5px solid rgba(255,255,255,0.2)', borderTopColor: '#60a5fa', borderRadius: '50%', animation: 'spin 0.7s linear infinite' }} /> {t('ai.loading')}</>
+                    : t('ai.loadModels')}
                 </button>
               </div>
 
@@ -2018,7 +2789,7 @@ export default function App() {
                   onChange={e => setAiModels(prev => ({ ...prev, [aiProvider]: e.target.value }))}
                   style={{ width: '100%', padding: '0.55rem 0.75rem', background: 'rgba(15,23,42,0.8)', border: '1px solid rgba(255,255,255,0.18)', borderRadius: '7px', color: 'white', fontSize: '0.85rem', boxSizing: 'border-box' }}
                 >
-                  <option value="" style={{ color: 'black' }}>— select a model —</option>
+                  <option value="" style={{ color: 'black' }}>{t('ai.selectModel')}</option>
                   {availableModels.map(m => <option key={m} value={m} style={{ color: 'black' }}>{m}</option>)}
                 </select>
               ) : (
@@ -2039,22 +2810,22 @@ export default function App() {
             {/* Prompt */}
             <div style={{ marginBottom: '1rem' }}>
               <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.5rem' }}>
-                <label style={{ fontSize: '0.78rem', color: '#64748b', textTransform: 'uppercase', letterSpacing: '0.05em' }}>What dataset do you need?</label>
+                <label style={{ fontSize: '0.78rem', color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>{t('ai.whatDataset')}</label>
                 <button type="button" onClick={() => setAiPrompt(AI_DEFAULT_PROMPT)}
-                  style={{ background: 'none', border: 'none', color: '#475569', cursor: 'pointer', fontSize: '0.72rem', textDecoration: 'underline', padding: 0 }}>
-                  Reset to example
+                  style={{ background: 'none', border: 'none', color: 'var(--text-subtle)', cursor: 'pointer', fontSize: '0.72rem', textDecoration: 'underline', padding: 0 }}>
+                  {t('ai.resetToExample')}
                 </button>
               </div>
               <textarea
                 value={aiPrompt}
                 onChange={e => setAiPrompt(e.target.value)}
                 rows={7}
-                placeholder="Describe your domain in plain language — table names, columns, relationships, value ranges, categories..."
-                style={{ width: '100%', padding: '0.65rem 0.75rem', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '7px', color: '#e2e8f0', resize: 'vertical', fontSize: '0.84rem', lineHeight: 1.6, boxSizing: 'border-box', fontFamily: 'inherit' }}
+                placeholder={t('ai.promptPlaceholder')}
+                style={{ width: '100%', padding: '0.65rem 0.75rem', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '7px', color: 'var(--text-main)', resize: 'vertical', fontSize: '0.84rem', lineHeight: 1.6, boxSizing: 'border-box', fontFamily: 'inherit' }}
               />
               <p style={{ margin: '0.4rem 0 0', fontSize: '0.72rem', color: '#334155', display: 'flex', alignItems: 'center', gap: '0.35rem' }}>
-                <span style={{ color: '#475569' }}>⚙</span>
-                The YAML format specification and a reference example are automatically sent to the AI — you only need to describe the data.
+                <span style={{ color: 'var(--text-subtle)' }}>⚙</span>
+                {t('ai.promptHelp')}
               </p>
             </div>
 
@@ -2064,18 +2835,18 @@ export default function App() {
 
             <div style={{ display: 'flex', gap: '0.75rem' }}>
               <button type="button" onClick={() => !aiLoading && setAiModal(false)}
-                style={{ flex: 1, padding: '0.65rem', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.09)', borderRadius: '8px', color: '#64748b', cursor: aiLoading ? 'not-allowed' : 'pointer', fontSize: '0.9rem' }}>
-                Cancel
+                style={{ flex: 1, padding: '0.65rem', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.09)', borderRadius: '8px', color: 'var(--text-muted)', cursor: aiLoading ? 'not-allowed' : 'pointer', fontSize: '0.9rem' }}>
+                {t('common.cancel')}
               </button>
               <button type="button" onClick={handleAiGenerate} disabled={aiLoading}
                 style={{ flex: 2, padding: '0.65rem', background: aiLoading ? 'rgba(139,92,246,0.25)' : 'linear-gradient(135deg, #7c3aed, #2563eb)', border: 'none', borderRadius: '8px', color: 'white', fontWeight: 700, cursor: aiLoading ? 'not-allowed' : 'pointer', fontSize: '0.95rem', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.5rem' }}>
                 {aiLoading ? (
                   <>
                     <span style={{ display: 'inline-block', width: '14px', height: '14px', border: '2px solid rgba(255,255,255,0.25)', borderTopColor: 'white', borderRadius: '50%', animation: 'spin 0.7s linear infinite' }} />
-                    Generating…
+                    {t('ai.generating')}
                   </>
                 ) : (
-                  <><Sparkles size={16} /> Generate Schema</>
+                  <><Sparkles size={16} /> {t('ai.generateSchema')}</>
                 )}
               </button>
             </div>
@@ -2090,36 +2861,36 @@ export default function App() {
           <div style={{ width: '400px', maxWidth: '90vw', background: 'rgba(15,23,42,0.98)', border: '1px solid rgba(148,163,184,0.25)', borderRadius: '12px', padding: '1.5rem', boxShadow: '0 24px 64px rgba(0,0,0,0.6)' }}
             onClick={e => e.stopPropagation()}>
             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.25rem' }}>
-              <h2 style={{ margin: 0, fontSize: '1.1rem', color: '#e2e8f0', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-                <Download size={16} color="#f59e0b" /> Save as Default Schema
+              <h2 style={{ margin: 0, fontSize: '1.1rem', color: 'var(--text-main)', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                <Download size={16} color="#f59e0b" /> {t('save.title')}
               </h2>
-              <button onClick={() => setSaveModal(false)} style={{ background: 'transparent', border: 'none', color: '#64748b', cursor: 'pointer' }}><X size={18} /></button>
+              <button onClick={() => setSaveModal(false)} style={{ background: 'transparent', border: 'none', color: 'var(--text-muted)', cursor: 'pointer' }}><X size={18} /></button>
             </div>
-            <p style={{ margin: '0 0 1rem', fontSize: '0.85rem', color: '#94a3b8' }}>
-              The schema will be saved to <code style={{ color: '#f59e0b', fontSize: '0.8rem' }}>src/dataforge/schemas/</code> and appear in the Domain selector after reload.
+            <p style={{ margin: '0 0 1rem', fontSize: '0.85rem', color: 'var(--text-muted)' }}>
+              {t('save.description')}
             </p>
             <div className="form-group" style={{ marginBottom: '0.5rem' }}>
-              <label>Schema Name</label>
+              <label>{t('save.schemaName')}</label>
               <input
                 autoFocus
                 type="text"
                 value={saveName}
                 onChange={e => { setSaveName(e.target.value); setSaveError(''); }}
                 onKeyDown={e => e.key === 'Enter' && handleSaveSchema()}
-                placeholder="e.g. my_schema"
+                placeholder={t('save.schemaNamePlaceholder')}
                 style={{ textTransform: 'lowercase' }}
               />
             </div>
-            <p style={{ margin: '0.25rem 0 1rem', fontSize: '0.72rem', color: '#475569' }}>
-              Lowercase letters, numbers, hyphens and underscores only.
+            <p style={{ margin: '0.25rem 0 1rem', fontSize: '0.72rem', color: 'var(--text-subtle)' }}>
+              {t('save.schemaNameHelp')}
             </p>
             {saveError && (
               <p style={{ margin: '0 0 0.75rem', fontSize: '0.8rem', color: '#f87171', background: 'rgba(248,113,113,0.08)', border: '1px solid rgba(248,113,113,0.2)', borderRadius: '6px', padding: '0.5rem 0.75rem' }}>{saveError}</p>
             )}
             <div style={{ display: 'flex', gap: '0.75rem' }}>
-              <button className="btn-secondary" onClick={() => setSaveModal(false)} style={{ flex: 1, padding: '0.6rem' }}>Cancel</button>
+              <button className="btn-secondary" onClick={() => setSaveModal(false)} style={{ flex: 1, padding: '0.6rem' }}>{t('common.cancel')}</button>
               <button onClick={handleSaveSchema} style={{ flex: 2, padding: '0.6rem', background: '#f59e0b', border: 'none', borderRadius: '8px', color: 'black', fontWeight: 600, cursor: 'pointer', fontSize: '0.9rem' }}>
-                Save & Reload
+                {t('save.saveAndReload')}
               </button>
             </div>
           </div>
@@ -2136,18 +2907,18 @@ export default function App() {
             {/* Header */}
             <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', padding: '1.25rem 1.5rem', borderBottom: '1px solid rgba(148,163,184,0.15)' }}>
               <BookOpen size={18} color="#60a5fa" />
-              <h2 style={{ margin: 0, fontSize: '1.1rem', color: '#e2e8f0' }}>Faker Method Browser</h2>
+              <h2 style={{ margin: 0, fontSize: '1.1rem', color: 'var(--text-main)' }}>{t('faker.title')}</h2>
               <div style={{ flex: 1, position: 'relative', marginLeft: '0.5rem' }}>
-                <Search size={14} style={{ position: 'absolute', left: '0.6rem', top: '50%', transform: 'translateY(-50%)', color: '#64748b' }} />
+                <Search size={14} style={{ position: 'absolute', left: '0.6rem', top: '50%', transform: 'translateY(-50%)', color: 'var(--text-muted)' }} />
                 <input
                   autoFocus
                   value={fakerSearch}
                   onChange={e => setFakerSearch(e.target.value)}
-                  placeholder="Search methods..."
+                  placeholder={t('faker.searchPlaceholder')}
                   style={{ width: '100%', padding: '0.4rem 0.75rem 0.4rem 2rem', background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(148,163,184,0.2)', borderRadius: '6px', color: 'white', fontSize: '0.875rem' }}
                 />
               </div>
-              <button onClick={() => setFakerBrowser(null)} className="btn-icon" aria-label="Close browser">
+              <button onClick={() => setFakerBrowser(null)} className="btn-icon" aria-label={t('faker.close')}>
                 <X size={18} />
               </button>
             </div>
@@ -2176,8 +2947,8 @@ export default function App() {
                           onMouseEnter={e => (e.currentTarget.style.background = `${cat.color}22`)}
                           onMouseLeave={e => (e.currentTarget.style.background = `${cat.color}0f`)}
                         >
-                          <span style={{ fontSize: '0.8rem', color: '#e2e8f0', fontFamily: 'monospace', fontWeight: 500 }}>{m.name}</span>
-                          <span style={{ fontSize: '0.68rem', color: '#64748b', marginTop: '0.1rem' }}>{m.example}</span>
+                          <span style={{ fontSize: '0.8rem', color: 'var(--text-main)', fontFamily: 'monospace', fontWeight: 500 }}>{m.name}</span>
+                          <span style={{ fontSize: '0.68rem', color: 'var(--text-muted)', marginTop: '0.1rem' }}>{m.example}</span>
                         </button>
                       ))}
                     </div>
@@ -2189,6 +2960,441 @@ export default function App() {
         </div>
       )}
 
+      {/* ── Schedules Panel ────────────────────────────────────────────────── */}
+      {showSchedulesPanel && (
+        <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.72)', backdropFilter: 'blur(6px)', zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          <div className="glass-panel animated-scale" style={{ width: '660px', maxWidth: '95vw', padding: '1.5rem', background: 'rgba(9,12,20,0.97)', border: '1px solid rgba(255,255,255,0.08)', borderTopColor: 'rgba(255,255,255,0.12)', maxHeight: '90vh', display: 'flex', flexDirection: 'column' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
+              <h2 style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: '1.2rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}><Clock size={18} color="var(--primary)"/> {t('schedule.title')}</h2>
+              <div style={{ display: 'flex', gap: '0.5rem' }}>
+                <button className="btn-success" onClick={openNewSchedule} style={{ padding: '0.35rem 0.85rem', fontSize: '0.85rem' }}><Plus size={14}/> {t('schedule.newSchedule')}</button>
+                <button onClick={() => { setShowSchedulesPanel(false); setShowScheduleForm(false); }} className="btn-icon" aria-label="Close"><X size={18}/></button>
+              </div>
+            </div>
+
+            <div style={{ overflowY: 'auto', flex: 1 }}>
+              {/* Schedule Form */}
+              {showScheduleForm && (
+                <div className="glass-panel" style={{ marginBottom: '1rem', padding: '1rem', border: '1px solid rgba(34,211,238,0.2)' }}>
+                  <h3 style={{ margin: '0 0 1rem', fontSize: '0.95rem', color: 'var(--primary)' }}>{editingSchedule ? t('schedule.editSchedule') : t('schedule.newSchedule')}</h3>
+                  <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+                    {/* Name */}
+                    <div>
+                      <label style={{ display: 'block', marginBottom: '0.35rem', color: 'var(--text-main)', fontSize: '0.82rem' }}>Name</label>
+                      <input value={schedForm.name} onChange={e => setSchedForm(f => ({ ...f, name: e.target.value }))} placeholder={t('schedule.namePlaceholder')} style={{ width: '100%', padding: '0.5rem' }} />
+                    </div>
+                    {/* Schedule builder */}
+                    <div>
+                      {/* Mode toggle */}
+                      <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.75rem' }}>
+                        <label style={{ color: 'var(--text-main)', fontSize: '0.82rem', fontWeight: 600 }}>{t('schedule.schedule')}</label>
+                        <div style={{ display: 'flex', borderRadius: '6px', overflow: 'hidden', border: '1px solid rgba(255,255,255,0.1)', marginLeft: 'auto' }}>
+                          {(['visual','cron'] as const).map(m => (
+                            <button key={m} type="button"
+                              onClick={() => setSchedBuilderMode(m)}
+                              style={{ padding: '0.25rem 0.7rem', fontSize: '0.75rem', background: schedBuilderMode === m ? 'rgba(34,211,238,0.18)' : 'transparent', color: schedBuilderMode === m ? 'var(--primary)' : 'var(--text-muted)', border: 'none', cursor: 'pointer', textTransform: 'capitalize' }}>
+                              {m === 'cron' ? t('schedule.cron') : t('schedule.visual')}
+                            </button>
+                          ))}
+                        </div>
+                      </div>
+
+                      {schedBuilderMode === 'visual' ? (
+                        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
+                          {/* Hour + Minute */}
+                          <div style={{ display: 'flex', gap: '0.75rem', alignItems: 'center' }}>
+                            <div style={{ flex: 1 }}>
+                              <label style={{ display: 'block', marginBottom: '0.25rem', color: 'var(--text-muted)', fontSize: '0.77rem' }}>{t('schedule.hourUtc')}</label>
+                              <input type="number" min="0" max="23" value={schedVisual.hour === '*' ? '' : schedVisual.hour}
+                                placeholder="* (any)"
+                                onChange={e => applyVisual({ hour: e.target.value === '' ? '*' : e.target.value })}
+                                style={{ width: '100%', padding: '0.45rem' }} />
+                            </div>
+                            <div style={{ flex: 1 }}>
+                              <label style={{ display: 'block', marginBottom: '0.25rem', color: 'var(--text-muted)', fontSize: '0.77rem' }}>{t('schedule.minute')}</label>
+                              <input type="number" min="0" max="59" value={schedVisual.minute === '*' ? '' : schedVisual.minute}
+                                placeholder="* (any)"
+                                onChange={e => applyVisual({ minute: e.target.value === '' ? '*' : e.target.value })}
+                                style={{ width: '100%', padding: '0.45rem' }} />
+                            </div>
+                          </div>
+                          {/* Day + Month */}
+                          <div style={{ display: 'flex', gap: '0.75rem', alignItems: 'center' }}>
+                            <div style={{ flex: 1 }}>
+                              <label style={{ display: 'block', marginBottom: '0.25rem', color: 'var(--text-muted)', fontSize: '0.77rem' }}>{t('schedule.day')}</label>
+                              <select value={schedVisual.day} onChange={e => applyVisual({ day: e.target.value })}
+                                style={{ width: '100%', padding: '0.45rem', background: 'var(--bg-input, #0d1117)', color: 'var(--text-main)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '4px' }}>
+                                {DAYS_OF_MONTH.map(d => <option key={d} value={d}>{d === '*' ? '* (every day)' : `Day ${d}`}</option>)}
+                              </select>
+                            </div>
+                            <div style={{ flex: 1 }}>
+                              <label style={{ display: 'block', marginBottom: '0.25rem', color: 'var(--text-muted)', fontSize: '0.77rem' }}>{t('schedule.month')}</label>
+                              <select value={schedVisual.month} onChange={e => applyVisual({ month: e.target.value })}
+                                style={{ width: '100%', padding: '0.45rem', background: 'var(--bg-input, #0d1117)', color: 'var(--text-main)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '4px' }}>
+                                {MONTHS.map(m => <option key={m} value={m}>{MONTH_NAMES[m]}</option>)}
+                              </select>
+                            </div>
+                          </div>
+                          {/* Preview */}
+                          <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', padding: '0.45rem 0.65rem', background: 'rgba(34,211,238,0.06)', borderRadius: '6px', border: '1px solid rgba(34,211,238,0.12)' }}>
+                            <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--primary)', fontSize: '0.82rem' }}>{schedForm.cronExpression}</span>
+                            {cronDescription(schedForm.cronExpression) && <span style={{ color: 'var(--success)', fontSize: '0.77rem' }}>— {cronDescription(schedForm.cronExpression)}</span>}
+                          </div>
+                        </div>
+                      ) : (
+                        <div>
+                          <label style={{ display: 'block', marginBottom: '0.35rem', color: 'var(--text-muted)', fontSize: '0.77rem' }}>Cron Expression (UTC)</label>
+                          <input value={schedForm.cronExpression} onChange={e => setSchedForm(f => ({ ...f, cronExpression: e.target.value }))} placeholder="0 9 * * *" style={{ width: '100%', padding: '0.5rem', fontFamily: 'var(--font-mono)' }} />
+                          {cronDescription(schedForm.cronExpression) && (
+                            <p style={{ margin: '0.25rem 0 0', fontSize: '0.77rem', color: 'var(--success)' }}>↳ {cronDescription(schedForm.cronExpression)}</p>
+                          )}
+                          <p style={{ margin: '0.25rem 0 0', fontSize: '0.75rem', color: 'var(--text-subtle)' }}>Common: <code style={{color:'var(--primary)'}}>0 9 * * *</code> (daily 9am) · <code style={{color:'var(--primary)'}}>0 * * * *</code> (hourly) · <code style={{color:'var(--primary)'}}>0 9 * * 1</code> (weekly Mon)</p>
+                        </div>
+                      )}
+                    </div>
+                    {/* Tables */}
+                    {tables.length > 0 && (
+                      <div>
+                        <label style={{ display: 'block', marginBottom: '0.35rem', color: 'var(--text-main)', fontSize: '0.82rem' }}>Tables to include <span style={{ color: 'var(--text-muted)' }}>(empty = all)</span></label>
+                        <div style={{ display: 'flex', gap: '0.4rem', flexWrap: 'wrap' }}>
+                          {tables.map(t => {
+                            const active = schedForm.tablesToInclude.includes(t.name);
+                            return (
+                              <button key={t.id} type="button"
+                                onClick={() => setSchedForm(f => ({ ...f, tablesToInclude: active ? f.tablesToInclude.filter(n => n !== t.name) : [...f.tablesToInclude, t.name] }))}
+                                style={{ padding: '0.25rem 0.65rem', borderRadius: '6px', border: `1px solid ${active ? 'var(--success)' : 'var(--border-color)'}`, background: active ? 'rgba(74,222,128,0.12)' : 'rgba(255,255,255,0.05)', color: active ? 'var(--success)' : 'var(--text-muted)', cursor: 'pointer', fontSize: '0.8rem' }}>
+                                {t.name}
+                              </button>
+                            );
+                          })}
+                        </div>
+                      </div>
+                    )}
+                    {/* Rows */}
+                    <div>
+                      <label style={{ display: 'block', marginBottom: '0.35rem', color: 'var(--text-main)', fontSize: '0.82rem' }}>Rows per table <span style={{ color: 'var(--text-muted)' }}>(optional)</span></label>
+                      <input type="number" value={schedForm.rows} onChange={e => setSchedForm(f => ({ ...f, rows: e.target.value }))} placeholder="Use schema default" style={{ width: '160px', padding: '0.5rem' }} min="1" />
+                    </div>
+                    {/* Format */}
+                    <div>
+                      <label style={{ display: 'block', marginBottom: '0.35rem', color: 'var(--text-main)', fontSize: '0.82rem' }}>Format</label>
+                      <div style={{ display: 'flex', gap: '0.4rem' }}>
+                        {(['csv','json','parquet','avro'] as const).map(fmt => {
+                          const active = schedForm.formats.includes(fmt);
+                          return (
+                            <button key={fmt} type="button"
+                              onClick={() => setSchedForm(f => { const next = active ? f.formats.filter(x => x !== fmt) : [...f.formats, fmt]; return { ...f, formats: next.length > 0 ? next : [fmt] }; })}
+                              style={{ padding: '0.25rem 0.65rem', borderRadius: '6px', border: `1px solid ${active ? 'var(--success)' : 'var(--border-color)'}`, background: active ? 'rgba(74,222,128,0.12)' : 'rgba(255,255,255,0.05)', color: active ? 'var(--success)' : 'var(--text-muted)', cursor: 'pointer', fontSize: '0.8rem' }}>
+                              {fmt.toUpperCase()}
+                            </button>
+                          );
+                        })}
+                      </div>
+                    </div>
+                    {/* Destination */}
+                    <div>
+                      <label style={{ display: 'block', marginBottom: '0.35rem', color: 'var(--text-main)', fontSize: '0.82rem' }}>Destination</label>
+                      <div style={{ display: 'flex', gap: '0.4rem', marginBottom: '0.75rem' }}>
+                        {([{key:'local',label:'Local',color:'#60a5fa'},{key:'cloud',label:'Cloud',color:'#a78bfa'},{key:'database',label:'Database',color:'#f59e0b'}] as const).map(({key,label,color}) => {
+                          const active = schedForm.destination === key;
+                          return <button key={key} type="button" onClick={() => setSchedForm(f => ({...f, destination: key}))} style={{ flex:1, padding:'0.4rem', borderRadius:'6px', border:`1px solid ${active?color:'var(--border-color)'}`, background: active?`${color}18`:'rgba(255,255,255,0.04)', color:active?color:'var(--text-muted)', cursor:'pointer', fontSize:'0.85rem', fontWeight:active?700:400 }}>{label}</button>;
+                        })}
+                      </div>
+                      {schedForm.destination === 'local' && (
+                        <input value={schedForm.outputDir} onChange={e => setSchedForm(f => ({...f, outputDir: e.target.value}))} placeholder="./output" style={{ width: '100%', padding: '0.5rem' }} />
+                      )}
+                      {schedForm.destination === 'cloud' && (
+                        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+                          <select value={schedForm.uploadTarget} onChange={e => setSchedForm(f => ({...f, uploadTarget: e.target.value}))} style={{ padding: '0.5rem', background: 'rgba(255,255,255,0.05)', color: 'white', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '6px' }}>
+                            <option value="gcs" style={{color:'black'}}>Google Cloud Storage</option>
+                            <option value="s3" style={{color:'black'}}>Amazon S3</option>
+                            <option value="azure" style={{color:'black'}}>Azure Blob Storage</option>
+                          </select>
+                          <input value={schedForm.bucket} onChange={e => setSchedForm(f => ({...f, bucket: e.target.value}))} placeholder="Bucket name" style={{ padding: '0.5rem' }} />
+                          <input value={schedForm.prefix} onChange={e => setSchedForm(f => ({...f, prefix: e.target.value}))} placeholder="Prefix (datasets/)" style={{ padding: '0.5rem' }} />
+                          {schedForm.uploadTarget === 'gcs' && (
+                            <textarea value={schedForm.cloudCreds.gcsJson} onChange={e => setSchedForm(f => ({...f, cloudCreds: {...f.cloudCreds, gcsJson: e.target.value}}))} placeholder="GCS JSON key (paste content)" rows={3} style={{ padding: '0.5rem', fontFamily: 'var(--font-mono)', fontSize: '0.75rem', resize: 'vertical' }} />
+                          )}
+                          {schedForm.uploadTarget === 's3' && (
+                            <div style={{ display: 'flex', gap: '0.5rem' }}>
+                              <input value={schedForm.cloudCreds.s3AccessKey} onChange={e => setSchedForm(f => ({...f, cloudCreds: {...f.cloudCreds, s3AccessKey: e.target.value}}))} placeholder="Access Key ID" style={{ flex:1, padding: '0.5rem' }} />
+                              <input type="password" value={schedForm.cloudCreds.s3SecretKey} onChange={e => setSchedForm(f => ({...f, cloudCreds: {...f.cloudCreds, s3SecretKey: e.target.value}}))} placeholder="Secret Key" style={{ flex:1, padding: '0.5rem' }} />
+                            </div>
+                          )}
+                          {schedForm.uploadTarget === 'azure' && (
+                            <input type="password" value={schedForm.cloudCreds.azureConnStr} onChange={e => setSchedForm(f => ({...f, cloudCreds: {...f.cloudCreds, azureConnStr: e.target.value}}))} placeholder="Connection string" style={{ padding: '0.5rem' }} />
+                          )}
+                        </div>
+                      )}
+                      {schedForm.destination === 'database' && (
+                        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+                          <input value={schedForm.dbUrl} onChange={e => setSchedForm(f => ({...f, dbUrl: e.target.value}))} placeholder="postgresql+psycopg2://user:pass@host/db" style={{ padding: '0.5rem', fontFamily: 'var(--font-mono)', fontSize: '0.8rem' }} />
+                          <div style={{ display: 'flex', gap: '0.5rem' }}>
+                            <select value={schedForm.ifExists} onChange={e => setSchedForm(f => ({...f, ifExists: e.target.value}))} style={{ flex:1, padding: '0.5rem', background: 'rgba(255,255,255,0.05)', color: 'white', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '6px' }}>
+                              <option value="append" style={{color:'black'}}>append</option>
+                              <option value="replace" style={{color:'black'}}>replace</option>
+                              <option value="fail" style={{color:'black'}}>fail</option>
+                            </select>
+                            <input value={schedForm.dbSchema} onChange={e => setSchedForm(f => ({...f, dbSchema: e.target.value}))} placeholder="DB schema (optional)" style={{ flex:1, padding: '0.5rem' }} />
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                    {/* Date Anchors */}
+                    <div>
+                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.35rem' }}>
+                        <label style={{ color: 'var(--text-main)', fontSize: '0.82rem' }}>{t('schedule.dateAnchors')}</label>
+                        <button type="button" onClick={() => setSchedForm(f => ({...f, dateAnchors: [...f.dateAnchors, {table:'', column:'', offsetDays:'0'}]}))} style={{ background: 'none', border: '1px solid rgba(34,211,238,0.3)', borderRadius: '4px', color: 'var(--primary)', cursor: 'pointer', fontSize: '0.75rem', padding: '0.15rem 0.5rem' }}>{t('schedule.addAnchor')}</button>
+                      </div>
+                      {schedForm.dateAnchors.length === 0 && (
+                        <p style={{ margin: 0, fontSize: '0.75rem', color: 'var(--text-subtle)' }}>{t('schedule.noAnchors')}</p>
+                      )}
+                      {schedForm.dateAnchors.map((anchor, idx) => (
+                        <div key={idx} style={{ display: 'flex', gap: '0.4rem', marginBottom: '0.4rem', alignItems: 'center' }}>
+                          <input value={anchor.table} onChange={e => setSchedForm(f => { const a = [...f.dateAnchors]; a[idx]={...a[idx],table:e.target.value}; return {...f,dateAnchors:a}; })} placeholder="table" style={{ flex:1, padding:'0.4rem', fontSize:'0.8rem' }} list={`anchor-tables-${idx}`} />
+                          <datalist id={`anchor-tables-${idx}`}>{tables.map(t => <option key={t.id} value={t.name}/>)}</datalist>
+                          <input value={anchor.column} onChange={e => setSchedForm(f => { const a = [...f.dateAnchors]; a[idx]={...a[idx],column:e.target.value}; return {...f,dateAnchors:a}; })} placeholder="date column" style={{ flex:1, padding:'0.4rem', fontSize:'0.8rem' }} />
+                          <span style={{ color: 'var(--text-muted)', fontSize: '0.8rem', whiteSpace:'nowrap' }}>today +</span>
+                          <input type="number" value={anchor.offsetDays} onChange={e => setSchedForm(f => { const a = [...f.dateAnchors]; a[idx]={...a[idx],offsetDays:e.target.value}; return {...f,dateAnchors:a}; })} style={{ width:'60px', padding:'0.4rem', fontSize:'0.8rem' }} />
+                          <span style={{ color: 'var(--text-muted)', fontSize: '0.8rem' }}>days</span>
+                          <button type="button" onClick={() => setSchedForm(f => ({...f, dateAnchors: f.dateAnchors.filter((_,i) => i !== idx)}))} style={{ background:'none', border:'none', color:'#ef4444', cursor:'pointer', padding:'0.2rem' }}><X size={14}/></button>
+                        </div>
+                      ))}
+                    </div>
+                    {schedError && <p style={{ margin: 0, color: '#ef4444', fontSize: '0.82rem' }}>{schedError}</p>}
+                    <div style={{ display: 'flex', gap: '0.5rem', justifyContent: 'flex-end' }}>
+                      <button className="btn-secondary" onClick={() => { setShowScheduleForm(false); setEditingSchedule(null); }} style={{ padding: '0.4rem 1rem' }}>{t('common.cancel')}</button>
+                      <button className="btn-success" onClick={handleSaveSchedule} disabled={schedSaving} style={{ padding: '0.4rem 1rem' }}>{schedSaving ? t('schedule.save') + '…' : editingSchedule ? t('schedule.save') : t('schedule.newSchedule')}</button>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Schedule list */}
+              {schedulesLoadError && (
+                <div style={{ padding: '0.75rem 1rem', background: 'rgba(239,68,68,0.1)', border: '1px solid rgba(239,68,68,0.3)', borderRadius: '8px', marginBottom: '0.75rem', color: '#f87171', fontSize: '0.85rem' }}>
+                  Failed to load schedules: <strong>{schedulesLoadError}</strong>
+                  <button onClick={fetchSchedules} style={{ marginLeft: '0.75rem', background: 'none', border: 'none', color: 'var(--primary)', cursor: 'pointer', fontSize: '0.82rem', textDecoration: 'underline' }}>Retry</button>
+                </div>
+              )}
+              {scheduleDefs.length === 0 && !showScheduleForm && !schedulesLoadError && (
+                <div style={{ textAlign: 'center', padding: '2rem', color: 'var(--text-subtle)' }}>
+                  <Clock size={32} style={{ marginBottom: '0.5rem', opacity: 0.4 }} />
+                  <p style={{ margin: 0 }}>No schedules yet. Click "New Schedule" to create one.</p>
+                </div>
+              )}
+              {scheduleDefs.map(s => (
+                <div key={s.id} className="glass-panel" style={{ marginBottom: '0.5rem', padding: '0.75rem 1rem', display: 'flex', alignItems: 'center', gap: '0.75rem', border: `1px solid ${s.enabled ? 'rgba(16,185,129,0.2)' : 'rgba(255,255,255,0.06)'}` }}>
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.2rem' }}>
+                      <span style={{ fontWeight: 600, color: s.enabled ? 'var(--text-main)' : 'var(--text-muted)', fontSize: '0.9rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{s.name}</span>
+                      <span style={{ fontSize: '0.7rem', padding: '0.1rem 0.45rem', borderRadius: '999px', background: s.enabled ? 'rgba(74,222,128,0.12)' : 'rgba(100,116,139,0.15)', color: s.enabled ? 'var(--success)' : 'var(--text-muted)', border: `1px solid ${s.enabled ? 'var(--success-shadow)' : 'rgba(100,116,139,0.3)'}` }}>{s.enabled ? 'active' : 'paused'}</span>
+                    </div>
+                    <div style={{ display: 'flex', gap: '0.75rem', fontSize: '0.75rem', color: 'var(--text-muted)' }}>
+                      <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text-muted)' }}>{s.cronExpression}</span>
+                      {cronDescription(s.cronExpression) && <span>— {cronDescription(s.cronExpression)}</span>}
+                    </div>
+                    <div style={{ fontSize: '0.72rem', color: 'var(--text-subtle)', marginTop: '0.1rem' }}>
+                      {s.config.uploadTarget ? `→ ${s.config.uploadTarget.toUpperCase()} · ${s.config.bucket || 'no bucket'}` : s.config.dbUrl ? `→ DB` : `→ Local (${s.config.outputDir || 'output'})`}
+                      {s.config.formats && <span> · {s.config.formats.join(', ')}</span>}
+                      {s.config.dateAnchors?.length > 0 && <span> · {s.config.dateAnchors.length} date anchor(s)</span>}
+                    </div>
+                  </div>
+                  <div style={{ display: 'flex', gap: '0.35rem', flexShrink: 0 }}>
+                    <button title="Run now" onClick={() => handleRunNow(s)} style={{ background: 'rgba(16,185,129,0.1)', border: '1px solid rgba(16,185,129,0.3)', borderRadius: '6px', color: 'var(--success)', cursor: 'pointer', padding: '0.3rem 0.6rem', fontSize: '0.8rem' }}><Play size={12}/></button>
+                    <button title={s.enabled ? 'Pause' : 'Enable'} onClick={() => handleToggleSchedule(s)} style={{ background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '6px', color: s.enabled ? 'var(--warning)' : 'var(--success)', cursor: 'pointer', padding: '0.3rem 0.6rem', fontSize: '0.8rem' }}>{s.enabled ? '⏸' : '▶'}</button>
+                    <button title="Edit" onClick={() => openEditSchedule(s)} style={{ background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '6px', color: 'var(--text-muted)', cursor: 'pointer', padding: '0.3rem 0.6rem', fontSize: '0.8rem' }}>✏</button>
+                    <button title="Export render.yaml" onClick={() => { setRenderImageUrl('docker.io/ckoliveira/dataforge:latest'); setShowRenderExport(s); }} style={{ background: 'rgba(99,102,241,0.1)', border: '1px solid rgba(99,102,241,0.3)', borderRadius: '6px', color: '#818cf8', cursor: 'pointer', padding: '0.3rem 0.6rem', fontSize: '0.8rem' }}>⬡ Render</button>
+                    <button title="Delete" onClick={() => handleDeleteSchedule(s)} style={{ background: 'rgba(239,68,68,0.08)', border: '1px solid rgba(239,68,68,0.2)', borderRadius: '6px', color: '#ef4444', cursor: 'pointer', padding: '0.3rem 0.6rem', fontSize: '0.8rem' }}><Trash2 size={12}/></button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* ── History Panel ───────────────────────────────────────────────────── */}
+      {showHistoryPanel && (
+        <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.72)', backdropFilter: 'blur(6px)', zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          <div className="glass-panel animated-scale" style={{ width: '720px', maxWidth: '95vw', padding: '1.5rem', background: 'rgba(9,12,20,0.97)', border: '1px solid rgba(255,255,255,0.08)', borderTopColor: 'rgba(255,255,255,0.12)', maxHeight: '90vh', display: 'flex', flexDirection: 'column' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
+              <h2 style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: '1.2rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}><History size={18} color="var(--primary)"/> {t('history.title')}</h2>
+              <div style={{ display: 'flex', gap: '0.5rem' }}>
+                <button onClick={fetchHistory} className="btn-secondary" style={{ padding: '0.35rem 0.75rem', fontSize: '0.82rem' }}>{t('history.refresh')}</button>
+                <button onClick={() => setShowHistoryPanel(false)} className="btn-icon" aria-label="Close"><X size={18}/></button>
+              </div>
+            </div>
+            <div style={{ overflowY: 'auto', flex: 1 }}>
+              {runHistory.length === 0 && (
+                <div style={{ textAlign: 'center', padding: '2rem', color: 'var(--text-subtle)' }}>
+                  <History size={32} style={{ marginBottom: '0.5rem', opacity: 0.4 }} />
+                  <p style={{ margin: 0 }}>No runs yet. Schedule a job or use "Run now".</p>
+                </div>
+              )}
+              {runHistory.map(r => {
+                const dur = r.finishedAt ? ((new Date(r.finishedAt).getTime() - new Date(r.startedAt).getTime()) / 1000).toFixed(1) + 's' : '…';
+                return (
+                  <div key={r.id} style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', padding: '0.6rem 0.75rem', borderBottom: '1px solid rgba(255,255,255,0.05)', cursor: 'pointer' }} onClick={() => setHistoryOutput(r)}>
+                    <div style={{ flexShrink: 0 }}>
+                      {r.status === 'success' && <CheckCircle size={16} color="var(--success)"/>}
+                      {r.status === 'error' && <XCircle size={16} color="#ef4444"/>}
+                      {r.status === 'running' && <Loader size={16} color="#f59e0b"/>}
+                    </div>
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                      <div style={{ fontSize: '0.88rem', color: 'var(--text-main)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.scheduleName}</div>
+                      <div style={{ fontSize: '0.73rem', color: 'var(--text-muted)' }}>
+                        {new Date(r.startedAt).toLocaleString()} · {dur} · <span style={{ color: r.triggeredBy === 'manual' ? '#a78bfa' : '#60a5fa' }}>{r.triggeredBy}</span>
+                      </div>
+                    </div>
+                    <div style={{ fontSize: '0.73rem', color: r.status === 'success' ? 'var(--success)' : r.status === 'error' ? 'var(--danger)' : 'var(--warning)', fontWeight: 600, flexShrink: 0 }}>
+                      {r.status}
+                    </div>
+                    <ChevronDown size={14} color="var(--text-subtle)"/>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* ── Render Export Modal ────────────────────────────────────────────── */}
+      {showRenderExport && (() => {
+        const meta = REGISTRY_META[renderRegistry];
+        const imgUrl = computedImageUrl();
+        const ri = renderRegistryInputs;
+        return (
+          <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.8)', zIndex: 200, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <div className="glass-panel animated-scale" style={{ width: '620px', maxWidth: '95vw', padding: '1.5rem', background: 'rgba(9,12,20,0.99)', border: '1px solid rgba(99,102,241,0.3)', maxHeight: '90vh', display: 'flex', flexDirection: 'column' }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
+                <h3 style={{ margin: 0, color: '#818cf8', fontSize: '1rem' }}>⬡ Export render.yaml — {showRenderExport.name}</h3>
+                <button onClick={() => setShowRenderExport(null)} className="btn-icon" aria-label="Close"><X size={18}/></button>
+              </div>
+
+              <div style={{ overflowY: 'auto', flex: 1, display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+                {/* Registry selector */}
+                <div>
+                  <label style={{ display: 'block', marginBottom: '0.5rem', color: 'var(--text-main)', fontSize: '0.82rem' }}>Container Registry</label>
+                  <div style={{ display: 'flex', gap: '0.4rem', flexWrap: 'wrap' }}>
+                    {(Object.keys(REGISTRY_META) as RegistryProvider[]).map(key => {
+                      const m = REGISTRY_META[key];
+                      const active = renderRegistry === key;
+                      return (
+                        <button key={key} type="button" onClick={() => setRenderRegistry(key)}
+                          style={{ padding: '0.3rem 0.75rem', borderRadius: '6px', border: `1px solid ${active ? m.color : 'var(--border-color)'}`, background: active ? `${m.color}18` : 'rgba(255,255,255,0.04)', color: active ? m.color : 'var(--text-muted)', cursor: 'pointer', fontSize: '0.8rem', fontWeight: active ? 700 : 400 }}>
+                          {m.label}
+                        </button>
+                      );
+                    })}
+                  </div>
+                </div>
+
+                {/* Registry-specific fields */}
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+                  {renderRegistry === 'dockerhub' && (
+                    <div style={{ display: 'flex', gap: '0.5rem' }}>
+                      <div style={{ flex: 1 }}><label style={{ display: 'block', marginBottom: '0.25rem', fontSize: '0.77rem', color: 'var(--text-muted)' }}>Username</label><input value={ri.dockerhubUser} onChange={e => setRenderRegistryInputs(i => ({...i, dockerhubUser: e.target.value}))} placeholder="myuser" style={{ width: '100%', padding: '0.4rem', fontSize: '0.82rem' }}/></div>
+                      <div style={{ flex: 2 }}><label style={{ display: 'block', marginBottom: '0.25rem', fontSize: '0.77rem', color: 'var(--text-muted)' }}>Image</label><input value={ri.dockerhubImage} onChange={e => setRenderRegistryInputs(i => ({...i, dockerhubImage: e.target.value}))} placeholder="dataforge" style={{ width: '100%', padding: '0.4rem', fontSize: '0.82rem' }}/></div>
+                      <div style={{ flex: 1 }}><label style={{ display: 'block', marginBottom: '0.25rem', fontSize: '0.77rem', color: 'var(--text-muted)' }}>Tag</label><input value={ri.dockerhubTag} onChange={e => setRenderRegistryInputs(i => ({...i, dockerhubTag: e.target.value}))} placeholder="latest" style={{ width: '100%', padding: '0.4rem', fontSize: '0.82rem' }}/></div>
+                    </div>
+                  )}
+                  {renderRegistry === 'ghcr' && (
+                    <div style={{ display: 'flex', gap: '0.5rem' }}>
+                      <div style={{ flex: 1 }}><label style={{ display: 'block', marginBottom: '0.25rem', fontSize: '0.77rem', color: 'var(--text-muted)' }}>GitHub User/Org</label><input value={ri.ghcrUser} onChange={e => setRenderRegistryInputs(i => ({...i, ghcrUser: e.target.value}))} placeholder="myorg" style={{ width: '100%', padding: '0.4rem', fontSize: '0.82rem' }}/></div>
+                      <div style={{ flex: 2 }}><label style={{ display: 'block', marginBottom: '0.25rem', fontSize: '0.77rem', color: 'var(--text-muted)' }}>Image</label><input value={ri.ghcrImage} onChange={e => setRenderRegistryInputs(i => ({...i, ghcrImage: e.target.value}))} placeholder="dataforge" style={{ width: '100%', padding: '0.4rem', fontSize: '0.82rem' }}/></div>
+                      <div style={{ flex: 1 }}><label style={{ display: 'block', marginBottom: '0.25rem', fontSize: '0.77rem', color: 'var(--text-muted)' }}>Tag</label><input value={ri.ghcrTag} onChange={e => setRenderRegistryInputs(i => ({...i, ghcrTag: e.target.value}))} placeholder="latest" style={{ width: '100%', padding: '0.4rem', fontSize: '0.82rem' }}/></div>
+                    </div>
+                  )}
+                  {renderRegistry === 'gcr' && (
+                    <div style={{ display: 'flex', gap: '0.5rem' }}>
+                      <div style={{ flex: 2 }}><label style={{ display: 'block', marginBottom: '0.25rem', fontSize: '0.77rem', color: 'var(--text-muted)' }}>GCP Project ID</label><input value={ri.gcrProject} onChange={e => setRenderRegistryInputs(i => ({...i, gcrProject: e.target.value}))} placeholder="my-project" style={{ width: '100%', padding: '0.4rem', fontSize: '0.82rem' }}/></div>
+                      <div style={{ flex: 2 }}><label style={{ display: 'block', marginBottom: '0.25rem', fontSize: '0.77rem', color: 'var(--text-muted)' }}>Image</label><input value={ri.gcrImage} onChange={e => setRenderRegistryInputs(i => ({...i, gcrImage: e.target.value}))} placeholder="dataforge" style={{ width: '100%', padding: '0.4rem', fontSize: '0.82rem' }}/></div>
+                      <div style={{ flex: 1 }}><label style={{ display: 'block', marginBottom: '0.25rem', fontSize: '0.77rem', color: 'var(--text-muted)' }}>Tag</label><input value={ri.gcrTag} onChange={e => setRenderRegistryInputs(i => ({...i, gcrTag: e.target.value}))} placeholder="latest" style={{ width: '100%', padding: '0.4rem', fontSize: '0.82rem' }}/></div>
+                    </div>
+                  )}
+                  {renderRegistry === 'ecr' && (
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+                      <div style={{ display: 'flex', gap: '0.5rem' }}>
+                        <div style={{ flex: 2 }}><label style={{ display: 'block', marginBottom: '0.25rem', fontSize: '0.77rem', color: 'var(--text-muted)' }}>AWS Account ID</label><input value={ri.ecrAccount} onChange={e => setRenderRegistryInputs(i => ({...i, ecrAccount: e.target.value}))} placeholder="123456789012" style={{ width: '100%', padding: '0.4rem', fontSize: '0.82rem' }}/></div>
+                        <div style={{ flex: 2 }}><label style={{ display: 'block', marginBottom: '0.25rem', fontSize: '0.77rem', color: 'var(--text-muted)' }}>Region</label><input value={ri.ecrRegion} onChange={e => setRenderRegistryInputs(i => ({...i, ecrRegion: e.target.value}))} placeholder="us-east-1" style={{ width: '100%', padding: '0.4rem', fontSize: '0.82rem' }}/></div>
+                      </div>
+                      <div style={{ display: 'flex', gap: '0.5rem' }}>
+                        <div style={{ flex: 2 }}><label style={{ display: 'block', marginBottom: '0.25rem', fontSize: '0.77rem', color: 'var(--text-muted)' }}>Image</label><input value={ri.ecrImage} onChange={e => setRenderRegistryInputs(i => ({...i, ecrImage: e.target.value}))} placeholder="dataforge" style={{ width: '100%', padding: '0.4rem', fontSize: '0.82rem' }}/></div>
+                        <div style={{ flex: 1 }}><label style={{ display: 'block', marginBottom: '0.25rem', fontSize: '0.77rem', color: 'var(--text-muted)' }}>Tag</label><input value={ri.ecrTag} onChange={e => setRenderRegistryInputs(i => ({...i, ecrTag: e.target.value}))} placeholder="latest" style={{ width: '100%', padding: '0.4rem', fontSize: '0.82rem' }}/></div>
+                      </div>
+                    </div>
+                  )}
+                  {renderRegistry === 'acr' && (
+                    <div style={{ display: 'flex', gap: '0.5rem' }}>
+                      <div style={{ flex: 2 }}><label style={{ display: 'block', marginBottom: '0.25rem', fontSize: '0.77rem', color: 'var(--text-muted)' }}>Registry name</label><input value={ri.acrRegistry} onChange={e => setRenderRegistryInputs(i => ({...i, acrRegistry: e.target.value}))} placeholder="myregistry" style={{ width: '100%', padding: '0.4rem', fontSize: '0.82rem' }}/></div>
+                      <div style={{ flex: 2 }}><label style={{ display: 'block', marginBottom: '0.25rem', fontSize: '0.77rem', color: 'var(--text-muted)' }}>Image</label><input value={ri.acrImage} onChange={e => setRenderRegistryInputs(i => ({...i, acrImage: e.target.value}))} placeholder="dataforge" style={{ width: '100%', padding: '0.4rem', fontSize: '0.82rem' }}/></div>
+                      <div style={{ flex: 1 }}><label style={{ display: 'block', marginBottom: '0.25rem', fontSize: '0.77rem', color: 'var(--text-muted)' }}>Tag</label><input value={ri.acrTag} onChange={e => setRenderRegistryInputs(i => ({...i, acrTag: e.target.value}))} placeholder="latest" style={{ width: '100%', padding: '0.4rem', fontSize: '0.82rem' }}/></div>
+                    </div>
+                  )}
+                  {renderRegistry === 'custom' && (
+                    <div><label style={{ display: 'block', marginBottom: '0.25rem', fontSize: '0.77rem', color: 'var(--text-muted)' }}>Full image URL</label><input value={ri.customUrl} onChange={e => setRenderRegistryInputs(i => ({...i, customUrl: e.target.value}))} placeholder="registry.example.com/org/dataforge:latest" style={{ width: '100%', padding: '0.4rem', fontFamily: 'var(--font-mono)', fontSize: '0.82rem' }}/></div>
+                  )}
+
+                  {/* Computed URL + push commands */}
+                  <div style={{ background: 'rgba(0,0,0,0.35)', borderRadius: '6px', padding: '0.6rem 0.75rem' }}>
+                    <p style={{ margin: '0 0 0.35rem', fontSize: '0.72rem', color: 'var(--text-subtle)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Image URL</p>
+                    <code style={{ fontSize: '0.8rem', color: meta.color, fontFamily: 'var(--font-mono)' }}>{imgUrl}</code>
+                  </div>
+
+                  <div>
+                    <p style={{ margin: '0 0 0.35rem', fontSize: '0.72rem', color: 'var(--text-subtle)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Comandos para publicar</p>
+                    <pre style={{ margin: 0, padding: '0.6rem 0.75rem', background: 'rgba(0,0,0,0.4)', borderRadius: '6px', fontSize: '0.76rem', fontFamily: 'var(--font-mono)', color: 'var(--text-muted)', whiteSpace: 'pre-wrap' }}>
+{`# 1. Login
+${meta.loginCmd}
+
+# 2. Build e push
+${meta.pushCmd(imgUrl)}`}
+                    </pre>
+                  </div>
+                </div>
+
+                {/* render.yaml preview */}
+                <div>
+                  <label style={{ display: 'block', marginBottom: '0.35rem', color: 'var(--text-main)', fontSize: '0.82rem' }}>Preview render.yaml</label>
+                  <pre style={{ margin: 0, padding: '0.75rem', background: 'rgba(0,0,0,0.5)', borderRadius: '6px', fontSize: '0.73rem', fontFamily: 'var(--font-mono)', color: 'var(--text-muted)', maxHeight: '200px', overflowY: 'auto', whiteSpace: 'pre-wrap' }}>
+                    {buildRenderYaml(showRenderExport, imgUrl)}
+                  </pre>
+                </div>
+              </div>
+
+              <div style={{ display: 'flex', gap: '0.5rem', justifyContent: 'flex-end', marginTop: '1rem', paddingTop: '1rem', borderTop: '1px solid rgba(255,255,255,0.06)' }}>
+                <button className="btn-secondary" onClick={() => setShowRenderExport(null)} style={{ padding: '0.4rem 1rem' }}>Cancel</button>
+                <button
+                  style={{ padding: '0.4rem 1rem', background: 'rgba(99,102,241,0.2)', border: '1px solid rgba(99,102,241,0.4)', borderRadius: '8px', color: '#818cf8', cursor: 'pointer', fontWeight: 600, fontSize: '0.9rem' }}
+                  onClick={() => handleDownloadRenderYaml(showRenderExport, imgUrl)}
+                >
+                  ⬇ Download render.yaml
+                </button>
+              </div>
+            </div>
+          </div>
+        );
+      })()}
+
+      {/* ── Run output viewer ──────────────────────────────────────────────── */}
+      {historyOutput && (
+        <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.8)', zIndex: 200, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          <div className="glass-panel" style={{ width: '700px', maxWidth: '95vw', padding: '1.5rem', background: 'rgba(9,12,20,0.99)', border: '1px solid rgba(255,255,255,0.08)', maxHeight: '85vh', display: 'flex', flexDirection: 'column' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.75rem' }}>
+              <div>
+                <h3 style={{ margin: 0, color: 'var(--text-main)', fontSize: '0.95rem' }}>{historyOutput.scheduleName}</h3>
+                <p style={{ margin: '0.2rem 0 0', fontSize: '0.75rem', color: 'var(--text-muted)' }}>{new Date(historyOutput.startedAt).toLocaleString()} · {historyOutput.triggeredBy} · exit {historyOutput.exitCode ?? '?'}</p>
+              </div>
+              <button onClick={() => setHistoryOutput(null)} className="btn-icon" aria-label="Close"><X size={18}/></button>
+            </div>
+            <pre style={{ flex: 1, overflowY: 'auto', margin: 0, padding: '0.75rem', background: 'rgba(0,0,0,0.4)', borderRadius: '6px', fontSize: '0.78rem', fontFamily: 'var(--font-mono)', color: 'var(--text-muted)', whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>
+              {historyOutput.output || '(no output)'}
+            </pre>
+          </div>
+        </div>
+      )}
+
       {/* Generic confirm/info dialog */}
       {confirmModal && (
         <div className="confirm-overlay" role="dialog" aria-modal="true" aria-labelledby="confirm-title">
@@ -2215,6 +3421,150 @@ export default function App() {
           </div>
         </div>
       )}
+
+      {/* ── Profile Panel ──────────────────────────────────────────────────── */}
+      {showProfilePanel && (
+        <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.72)', backdropFilter: 'blur(6px)', zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          <div className="glass-panel animated-scale" style={{ width: '520px', maxWidth: '95vw', padding: '1.5rem', background: 'rgba(9,12,20,0.97)', border: '1px solid rgba(255,255,255,0.08)', borderTopColor: 'rgba(255,255,255,0.12)', maxHeight: '90vh', display: 'flex', flexDirection: 'column' }}>
+            {/* Header */}
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.25rem' }}>
+              <h2 style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: '1.2rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                <User size={18} color="var(--primary)" /> Profile
+              </h2>
+              <button onClick={() => setShowProfilePanel(false)} className="btn-icon" aria-label="Close"><X size={18} /></button>
+            </div>
+
+            {/* User info */}
+            <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', padding: '0.875rem 1rem', background: 'rgba(34,211,238,0.06)', border: '1px solid rgba(34,211,238,0.14)', borderRadius: '10px', marginBottom: '1.5rem' }}>
+              <div style={{ width: '40px', height: '40px', borderRadius: '50%', background: 'rgba(34,211,238,0.15)', border: '1px solid rgba(34,211,238,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+                <User size={20} color="var(--primary)" />
+              </div>
+              <div>
+                <div style={{ fontWeight: 700, fontSize: '1rem', color: 'var(--text-main)' }}>{auth.username}</div>
+                <div style={{ fontSize: '0.75rem', color: 'var(--text-subtle)', marginTop: '0.1rem' }}>{Object.keys(envKeys).length} key{Object.keys(envKeys).length !== 1 ? 's' : ''} stored</div>
+              </div>
+              <button onClick={onLogout} style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: '0.4rem', background: 'rgba(239,68,68,0.08)', border: '1px solid rgba(239,68,68,0.2)', borderRadius: '6px', color: '#f87171', cursor: 'pointer', fontSize: '0.8rem', padding: '0.35rem 0.75rem' }}>
+                <LogOut size={14} /> Sign out
+              </button>
+            </div>
+
+            {/* Env Keys */}
+            <div style={{ flex: 1, overflowY: 'auto', minHeight: 0 }}>
+              <p style={{ margin: '0 0 0.4rem', fontSize: '0.7rem', textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--text-subtle)', display: 'flex', alignItems: 'center', gap: '0.4rem' }}>
+                <Key size={12} /> Environment Keys (.env)
+              </p>
+              <p style={{ margin: '0 0 0.75rem', fontSize: '0.72rem', color: 'var(--text-subtle)', lineHeight: 1.5 }}>
+                Keys stored here are automatically injected into AI, Cloud, and Database fields.
+                Recognized names: <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text-muted)' }}>ANTHROPIC_API_KEY, OPENAI_API_KEY, GOOGLE_API_KEY, GROQ_API_KEY, MISTRAL_API_KEY, TOGETHER_API_KEY, AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY, AWS_DEFAULT_REGION, GCS_JSON, GOOGLE_APPLICATION_CREDENTIALS_JSON, AZURE_STORAGE_CONNECTION_STRING, DATABASE_URL</span>
+              </p>
+
+              {/* Add form */}
+              <div style={{ display: 'flex', gap: '0.5rem', marginBottom: '1rem', alignItems: 'flex-end' }}>
+                <div style={{ flex: '0 0 160px' }}>
+                  <label style={{ display: 'block', marginBottom: '0.3rem', fontSize: '0.75rem', color: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}>KEY_NAME</label>
+                  <input
+                    value={envKeyForm.key}
+                    onChange={e => setEnvKeyForm(f => ({ ...f, key: e.target.value.toUpperCase().replace(/[^A-Z0-9_]/g, '') }))}
+                    placeholder="AWS_ACCESS_KEY"
+                    style={{ padding: '0.45rem 0.6rem', fontFamily: 'var(--font-mono)', fontSize: '0.8rem', width: '100%' }}
+                  />
+                </div>
+                <div style={{ flex: 1 }}>
+                  <label style={{ display: 'block', marginBottom: '0.3rem', fontSize: '0.75rem', color: 'var(--text-muted)' }}>Value</label>
+                  <input
+                    value={envKeyForm.value}
+                    onChange={e => setEnvKeyForm(f => ({ ...f, value: e.target.value }))}
+                    placeholder="your-secret-value"
+                    style={{ padding: '0.45rem 0.6rem', fontSize: '0.8rem', width: '100%' }}
+                  />
+                </div>
+                <button onClick={handleAddEnvKey} disabled={envKeyLoading || !envKeyForm.key} className="btn-success" style={{ padding: '0.45rem 0.85rem', flexShrink: 0, opacity: (!envKeyForm.key || envKeyLoading) ? 0.5 : 1 }}>
+                  <Plus size={14} />
+                </button>
+              </div>
+              {envKeyError && <p style={{ margin: '0 0 0.75rem', fontSize: '0.78rem', color: '#fca5a5' }}>{envKeyError}</p>}
+
+              {/* Keys list */}
+              {Object.keys(envKeys).length === 0 ? (
+                <div style={{ textAlign: 'center', padding: '2rem', color: 'var(--text-subtle)', fontSize: '0.85rem' }}>
+                  No keys stored yet. Add your first key above.
+                </div>
+              ) : (
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem' }}>
+                  {Object.entries(envKeys).map(([k, v]) => (
+                    <div key={k} style={{ display: 'flex', flexDirection: 'column', gap: '0.35rem', padding: '0.5rem 0.75rem', background: 'rgba(255,255,255,0.03)', border: `1px solid ${editingEnvKey === k ? 'rgba(34,211,238,0.3)' : 'rgba(255,255,255,0.07)'}`, borderRadius: '6px' }}>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                        <span style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8rem', color: '#22d3ee', flex: '0 0 auto', minWidth: '140px' }}>{k}</span>
+                        <span style={{ flex: 1, fontFamily: 'var(--font-mono)', fontSize: '0.78rem', color: 'var(--text-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                          {showEnvValue[k] ? v : '••••••••••••'}
+                        </span>
+                        <button onClick={() => setShowEnvValue(s => ({ ...s, [k]: !s[k] }))} className="btn-icon" style={{ color: 'var(--text-subtle)', padding: '0.2rem' }} aria-label={showEnvValue[k] ? 'Hide' : 'Show'}>
+                          {showEnvValue[k] ? <EyeOff size={13} /> : <Eye size={13} />}
+                        </button>
+                        <button onClick={() => { setEditingEnvKey(editingEnvKey === k ? null : k); setEditingEnvValue(v); }} className="btn-icon" style={{ color: editingEnvKey === k ? 'var(--primary)' : 'var(--text-subtle)', padding: '0.2rem' }} aria-label={`Edit ${k}`}>
+                          <Pencil size={13} />
+                        </button>
+                        <button onClick={() => handleDeleteEnvKey(k)} className="btn-icon-danger" aria-label={`Delete ${k}`} style={{ padding: '0.2rem' }}>
+                          <Trash2 size={13} />
+                        </button>
+                      </div>
+                      {editingEnvKey === k && (
+                        <div style={{ display: 'flex', gap: '0.4rem', alignItems: 'center' }}>
+                          <input
+                            autoFocus
+                            value={editingEnvValue}
+                            onChange={e => setEditingEnvValue(e.target.value)}
+                            onKeyDown={e => { if (e.key === 'Enter') handleSaveEditEnvKey(); if (e.key === 'Escape') setEditingEnvKey(null); }}
+                            placeholder="Novo valor"
+                            style={{ flex: 1, padding: '0.35rem 0.5rem', fontFamily: 'var(--font-mono)', fontSize: '0.78rem' }}
+                          />
+                          <button onClick={handleSaveEditEnvKey} disabled={envKeyLoading} className="btn-success" style={{ padding: '0.35rem 0.6rem', display: 'flex', alignItems: 'center', gap: '0.25rem', fontSize: '0.78rem' }}>
+                            <Check size={13} /> Salvar
+                          </button>
+                          <button onClick={() => setEditingEnvKey(null)} className="btn-secondary" style={{ padding: '0.35rem 0.6rem', fontSize: '0.78rem' }}>
+                            Cancelar
+                          </button>
+                        </div>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            {/* .env preview */}
+            {Object.keys(envKeys).length > 0 && (
+              <div style={{ marginTop: '1rem', paddingTop: '1rem', borderTop: '1px solid rgba(255,255,255,0.06)' }}>
+                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '0.4rem' }}>
+                  <p style={{ margin: 0, fontSize: '0.7rem', color: 'var(--text-subtle)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>.env preview</p>
+                  <button onClick={() => setEnvPreviewVisible(v => !v)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-muted)', display: 'flex', alignItems: 'center', gap: '0.3rem', fontSize: '0.72rem', padding: '0.1rem 0.3rem' }}>
+                    {envPreviewVisible ? <><EyeOff size={13}/> ocultar</> : <><Eye size={13}/> mostrar</>}
+                  </button>
+                </div>
+                <pre style={{ margin: 0, padding: '0.6rem 0.75rem', background: 'rgba(0,0,0,0.4)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: '6px', fontFamily: 'var(--font-mono)', fontSize: '0.75rem', color: 'var(--text-muted)', overflowX: 'auto', maxHeight: '120px', overflowY: 'auto' }}>
+                  {Object.entries(envKeys).map(([k, v]) => `${k}=${envPreviewVisible ? v : '•'.repeat(Math.min(v.length, 20))}`).join('\n')}
+                </pre>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
     </div>
   );
 }
+
+export default function App() {
+  const [auth, setAuth] = useState<{ token: string; username: string } | null>(loadAuth);
+
+  const handleAuth = (token: string, username: string) => {
+    setAuth({ token, username });
+  };
+
+  const handleLogout = () => {
+    clearAuth();
+    setAuth(null);
+  };
+
+  if (!auth) return <LoginScreen onAuth={handleAuth} />;
+  return <AppMain auth={auth} onLogout={handleLogout} />;
+}
diff --git a/src/dataforge/frontend/src/components/TableNode.test.tsx b/src/dataforge/frontend/src/components/TableNode.test.tsx
new file mode 100644
index 0000000..22c64e3
--- /dev/null
+++ b/src/dataforge/frontend/src/components/TableNode.test.tsx
@@ -0,0 +1,80 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import TableNode from './TableNode'
+import type { Column } from '../types/schema'
+
+// reactflow usa web APIs não disponíveis no jsdom
+vi.mock('reactflow', () => ({
+  Handle: ({ type }: { type: string }) => <div data-testid={`handle-${type}`} />,
+  Position: { Left: 'left', Right: 'right' },
+}))
+
+// mock react-i18next — retorna a chave como valor
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}))
+
+const makeColumn = (overrides: Partial<Column> = {}): Column => ({
+  id: 'col-1',
+  name: 'id',
+  dtype: 'int',
+  isPrimaryKey: false,
+  fakerProvider: '',
+  nullable: '0',
+  isForeignKey: false,
+  fkTable: '',
+  fkColumn: '',
+  min: '',
+  max: '',
+  choices: [],
+  ...overrides,
+})
+
+const renderNode = (data: object, selected = false) =>
+  render(<TableNode data={data} selected={selected} />)
+
+describe('TableNode', () => {
+  it('exibe o nome da tabela', () => {
+    renderNode({ name: 'users', rows: 1000, columns: [] })
+    expect(screen.getByText('users')).toBeInTheDocument()
+  })
+
+  it('exibe a quantidade de rows', () => {
+    renderNode({ name: 'orders', rows: 500, columns: [] })
+    expect(screen.getByText('500 common.rows')).toBeInTheDocument()
+  })
+
+  it('exibe "No columns" quando não há colunas', () => {
+    renderNode({ name: 'empty', rows: 100, columns: [] })
+    expect(screen.getByText('schema.noColumns')).toBeInTheDocument()
+  })
+
+  it('exibe as colunas com nome e dtype', () => {
+    const cols = [
+      makeColumn({ name: 'id', dtype: 'int' }),
+      makeColumn({ id: 'col-2', name: 'email', dtype: 'str' }),
+    ]
+    renderNode({ name: 'users', rows: 100, columns: cols })
+    expect(screen.getByText('id')).toBeInTheDocument()
+    expect(screen.getByText('email')).toBeInTheDocument()
+    expect(screen.getByText('int')).toBeInTheDocument()
+    expect(screen.getByText('str')).toBeInTheDocument()
+  })
+
+  it('exibe chave i18n quando name está ausente', () => {
+    renderNode({ name: '', rows: 0, columns: [] })
+    expect(screen.getByText('schema.untitled')).toBeInTheDocument()
+  })
+
+  it('renderiza handles de source e target', () => {
+    renderNode({ name: 'x', rows: 0, columns: [] })
+    expect(screen.getByTestId('handle-target')).toBeInTheDocument()
+    expect(screen.getByTestId('handle-source')).toBeInTheDocument()
+  })
+
+  it('aplica borda ciano quando selected=true', () => {
+    const { container } = renderNode({ name: 'x', rows: 0, columns: [] }, true)
+    const node = container.firstChild as HTMLElement
+    expect(node.style.borderColor).toContain('rgba(34, 211, 238')
+  })
+})
diff --git a/src/dataforge/frontend/src/components/TableNode.tsx b/src/dataforge/frontend/src/components/TableNode.tsx
index 4e8cd6c..417ed67 100644
--- a/src/dataforge/frontend/src/components/TableNode.tsx
+++ b/src/dataforge/frontend/src/components/TableNode.tsx
@@ -1,59 +1,94 @@
 import { Handle, Position } from 'reactflow';
 import { Key, Link as LinkIcon, Database } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 import type { Column } from '../types/schema';
 
 export default function TableNode({ data, selected }: { data: any, selected: boolean }) {
+  const { t } = useTranslation();
   const { name, rows, columns } = data;
 
   return (
-    <div className="table-node" style={{
-      background: selected ? 'rgba(59, 130, 246, 0.15)' : 'rgba(30, 41, 59, 0.85)',
-      backdropFilter: 'blur(12px)',
-      border: `2px solid ${selected ? '#3b82f6' : 'rgba(148, 163, 184, 0.2)'}`,
-      borderRadius: '12px',
+    <div style={{
+      background: selected ? 'rgba(34, 211, 238, 0.08)' : 'var(--bg-card)',
+      backdropFilter: 'blur(16px)',
+      WebkitBackdropFilter: 'blur(16px)',
+      border: `1px solid ${selected ? 'rgba(34, 211, 238, 0.55)' : 'rgba(255,255,255,0.08)'}`,
+      borderTopColor: selected ? 'rgba(34, 211, 238, 0.7)' : 'rgba(255,255,255,0.13)',
+      borderRadius: '14px',
       minWidth: '220px',
-      color: '#f8fafc',
-      fontFamily: 'Inter, sans-serif',
-      boxShadow: selected ? '0 0 15px rgba(59,130,246, 0.3)' : '0 4px 6px -1px rgba(0, 0, 0, 0.2)',
-      transition: 'all 0.2s ease',
-      padding: '0'
+      color: 'var(--text-main)',
+      fontFamily: 'var(--font-body)',
+      boxShadow: selected
+        ? '0 0 0 1px rgba(34,211,238,0.18), 0 0 20px rgba(34,211,238,0.12), 0 8px 32px rgba(0,0,0,0.5)'
+        : '0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 32px rgba(0,0,0,0.4)',
+      transition: 'border-color 180ms cubic-bezier(0,0,0.2,1), box-shadow 180ms cubic-bezier(0,0,0.2,1)',
     }}>
-      <Handle type="target" position={Position.Left} style={{ background: '#3b82f6', width: 10, height: 10, border: '2px solid #1e293b' }} />
+      <Handle
+        type="target"
+        position={Position.Left}
+        style={{ background: 'var(--primary)', width: 10, height: 10, border: '2px solid var(--bg-dark)' }}
+      />
 
       {/* Header */}
-      <div style={{ background: 'rgba(0,0,0,0.2)', padding: '1rem', borderTopLeftRadius: '10px', borderTopRightRadius: '10px', borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontWeight: 700, fontSize: '1.1rem' }}>
-          <Database size={16} color="#3b82f6" />
-          {name || 'Untitled'}
+      <div style={{
+        background: 'rgba(0,0,0,0.18)',
+        padding: '0.75rem 1rem',
+        borderTopLeftRadius: '13px',
+        borderTopRightRadius: '13px',
+        borderBottom: '1px solid rgba(255,255,255,0.06)',
+      }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontWeight: 700, fontSize: '0.95rem', fontFamily: 'var(--font-display)' }}>
+          <Database size={14} color="var(--primary)" />
+          {name || t('schema.untitled')}
         </div>
-        <div style={{ fontSize: '0.75rem', color: '#94a3b8', marginTop: '0.25rem' }}>
-          {rows} rows
+        <div style={{ fontSize: '0.72rem', color: 'var(--text-subtle)', marginTop: '0.2rem', fontFamily: 'var(--font-mono)', letterSpacing: '0.04em' }}>
+          {rows.toLocaleString()} {t('common.rows')}
         </div>
       </div>
 
-      {/* Columns List Visual */}
+      {/* Columns list */}
       <div style={{ padding: '0.5rem' }}>
         {columns.length === 0 ? (
-          <div style={{ fontSize: '0.8rem', color: '#64748b', textAlign: 'center', padding: '1rem' }}>
-            No columns
+          <div style={{ fontSize: '0.78rem', color: 'var(--text-subtle)', textAlign: 'center', padding: '0.75rem' }}>
+            {t('schema.noColumns')}
           </div>
         ) : (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.2rem' }}>
             {columns.map((col: Column) => (
-              <div key={col.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: '0.8rem', padding: '0.35rem 0.5rem', background: 'rgba(255,255,255,0.03)', borderRadius: '6px' }}>
-                <span style={{ fontWeight: col.isPrimaryKey ? 600 : 400, color: col.isPrimaryKey ? '#eab308' : '#e2e8f0', display: 'flex', alignItems: 'center', gap: '4px' }}>
-                  {col.name || 'untitled'} 
-                  {col.isPrimaryKey && <Key size={12} color="#eab308"/>}  
-                  {col.isForeignKey && <LinkIcon size={12} color="#ec4899"/>}
+              <div key={col.id} style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                fontSize: '0.78rem',
+                padding: '0.3rem 0.5rem',
+                background: 'rgba(255,255,255,0.03)',
+                borderRadius: '6px',
+              }}>
+                <span style={{
+                  fontWeight: col.isPrimaryKey ? 600 : 400,
+                  color: col.isPrimaryKey ? 'var(--warning)' : 'var(--text-main)',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '4px',
+                }}>
+                  {col.name || t('schema.untitledColumn')}
+                  {col.isPrimaryKey && <Key size={11} color="var(--warning)" />}
+                  {col.isForeignKey && <LinkIcon size={11} color="var(--accent)" />}
+                </span>
+                <span style={{ color: 'var(--text-muted)', fontSize: '0.72rem', fontFamily: 'var(--font-mono)' }}>
+                  {col.dtype}
                 </span>
-                <span style={{ color: '#94a3b8', fontSize: '0.75rem' }}>{col.dtype}</span>
               </div>
             ))}
           </div>
         )}
       </div>
 
-      <Handle type="source" position={Position.Right} style={{ background: '#ec4899', width: 10, height: 10, border: '2px solid #1e293b' }} />
+      <Handle
+        type="source"
+        position={Position.Right}
+        style={{ background: 'var(--accent)', width: 10, height: 10, border: '2px solid var(--bg-dark)' }}
+      />
     </div>
   );
 }
diff --git a/src/dataforge/frontend/src/i18n/index.ts b/src/dataforge/frontend/src/i18n/index.ts
new file mode 100644
index 0000000..d72fbe4
--- /dev/null
+++ b/src/dataforge/frontend/src/i18n/index.ts
@@ -0,0 +1,27 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+import en from './locales/en.json';
+import ptBR from './locales/pt-BR.json';
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources: {
+      en: { translation: en },
+      'pt-BR': { translation: ptBR },
+    },
+    fallbackLng: 'pt-BR',
+    detection: {
+      order: ['localStorage', 'navigator'],
+      lookupLocalStorage: 'df_lang',
+      caches: ['localStorage'],
+    },
+    interpolation: {
+      escapeValue: false,
+    },
+  });
+
+export default i18n;
diff --git a/src/dataforge/frontend/src/i18n/locales/en.json b/src/dataforge/frontend/src/i18n/locales/en.json
new file mode 100644
index 0000000..41d0a7d
--- /dev/null
+++ b/src/dataforge/frontend/src/i18n/locales/en.json
@@ -0,0 +1,273 @@
+{
+  "auth": {
+    "signIn": "Sign In",
+    "createAccount": "Create Account",
+    "username": "Username",
+    "password": "Password",
+    "usernamePlaceholder": "your_username",
+    "passwordPlaceholder": "••••••••",
+    "somethingWentWrong": "Something went wrong.",
+    "networkError": "Network error.",
+    "subtitle": "Synthetic Dataset Generator"
+  },
+  "nav": {
+    "docs": "Docs",
+    "github": "GitHub",
+    "signOut": "Sign out",
+    "domain": "Domain",
+    "addTable": "Add Table",
+    "loadYaml": "Load YAML",
+    "aiGenerate": "AI Generate",
+    "autoLayout": "Auto Layout",
+    "previewYaml": "Preview YAML",
+    "saveAsDefault": "Save as Default",
+    "runGenerator": "Run Generator",
+    "schedules": "Schedules",
+    "history": "History",
+    "comingSoon": "Coming soon"
+  },
+  "profile": {
+    "addKeysInProfile": "Add keys in Profile →",
+    "manageProfile": "Manage Profile",
+    "pickFromProfile": "Pick from Profile →",
+    "noKeysYet": "No keys in Profile yet.",
+    "addOne": "Add one",
+    "selectKey": "— select a key",
+    "selectHint": "— select (e.g. {{hint}})",
+    "resolved": "resolved",
+    "keyNotFound": "key \"{{value}}\" not found in Profile",
+    "keyNameRequired": "Key name is required.",
+    "failedToSaveKey": "Failed to save key.",
+    "addFirstKeyAbove": "Add your first key above.",
+    "envKeys": "Environment Keys",
+    "keyName": "Key name",
+    "keyValue": "Key value",
+    "addKey": "Add Key",
+    "editKey": "Edit Key",
+    "deleteKey": "Delete key"
+  },
+  "schema": {
+    "editTable": "Edit Table",
+    "deleteTable": "Delete table",
+    "closePanel": "Close panel",
+    "tableName": "Table Name",
+    "rowsCount": "Rows Count",
+    "columns": "Columns",
+    "add": "Add",
+    "noColumnsDefined": "No columns defined.",
+    "columnName": "Column name",
+    "removeColumn": "Remove column",
+    "type": "Type",
+    "nullable": "Nullable",
+    "no": "No",
+    "min": "Min",
+    "max": "Max",
+    "datePlaceholderMin": "e.g. -1y",
+    "datePlaceholderMax": "e.g. today",
+    "numericPlaceholderMin": "e.g. 0",
+    "numericPlaceholderMax": "e.g. 100",
+    "fakerMethod": "Faker Method",
+    "customList": "Custom List",
+    "browseAllFakerMethods": "Browse all faker methods",
+    "fakerMethodPlaceholder": "e.g. phone_number",
+    "primaryKey": "Primary Key",
+    "foreignKey": "Foreign Key",
+    "refTableName": "Reference Table Name",
+    "refColumnName": "Reference Column Name",
+    "typeValueAndEnter": "Type a value and press Enter",
+    "pressEnterOrComma": "Press Enter or comma to add",
+    "untitled": "Untitled",
+    "untitledColumn": "untitled",
+    "noColumns": "No columns"
+  },
+  "save": {
+    "title": "Save as Default Schema",
+    "description": "The schema will be saved to `src/dataforge/schemas/` and appear in the Domain selector after reload.",
+    "schemaName": "Schema Name",
+    "schemaNamePlaceholder": "e.g. my_schema",
+    "schemaNameHelp": "Lowercase letters, numbers, hyphens and underscores only.",
+    "schemaNameError": "Use only lowercase letters, numbers, hyphens and underscores.",
+    "saveAndReload": "Save & Reload",
+    "saveFailed": "Save failed.",
+    "deleteSchema": "Delete schema",
+    "deleteConfirm": "Remove \"{{domain}}\" permanently? This cannot be undone."
+  },
+  "ai": {
+    "title": "AI Generate Domain",
+    "description": "Describe the domain you need — the AI generates a full YAML schema with tables, types, and relationships.",
+    "provider": "Provider",
+    "apiKey": "API Key",
+    "model": "Model",
+    "required": "(required)",
+    "optional": "(optional)",
+    "loadModels": "⟳ Load available models",
+    "loading": "Loading…",
+    "selectModel": "— select a model —",
+    "whatDataset": "What dataset do you need?",
+    "resetToExample": "Reset to example",
+    "promptPlaceholder": "Describe your domain in plain language — table names, columns, relationships, value ranges, categories...",
+    "promptHelp": "The YAML format specification and a reference example are automatically sent to the AI — you only need to describe the data.",
+    "apiKeyRequired": "API key is required.",
+    "describeTheDomain": "Describe the domain you want to generate.",
+    "generateSchema": "Generate Schema",
+    "generating": "Generating…",
+    "defaultPrompt": "E-commerce with 4 tables:\n- customers: full name, email, phone, city, country, registration date\n- products: name, category (Electronics/Clothing/Books/Home/Sports), price (10–2000), stock quantity\n- orders: linked to customer, order date (last 2 years), status (pending/processing/shipped/delivered/cancelled), total amount\n- order_items: linked to order and product, quantity (1–10), unit price",
+    "langInstruction": "Respond in English. Generate all table names, column names, values and descriptions in English."
+  },
+  "run": {
+    "title": "Run Generator",
+    "fieldReference": "Run Generator — Field Reference",
+    "format": "Format",
+    "formatHelp": "Output file format. You can select multiple at once — the generator will write one file per format for each table.",
+    "rowsOverride": "Rows Override",
+    "rowsOverrideHelp": "Override the number of rows defined in the schema for all tables. Leave empty to use the schema defaults.",
+    "destination": "Destination",
+    "local": "Local",
+    "cloud": "Cloud",
+    "database": "Database",
+    "outputDirectory": "Output Directory",
+    "localHelp": "Save generated files to a folder on this machine.",
+    "cloudHelp": "Upload generated files directly to a cloud bucket.",
+    "databaseHelp": "Load generated data directly into a database table.",
+    "cloudProvider": "Cloud Provider",
+    "gcs": "Google Cloud Storage",
+    "s3": "AWS S3",
+    "azure": "Azure Blob Storage",
+    "bucketName": "Bucket Name",
+    "prefix": "Prefix / Path",
+    "savedCredentials": "Saved Credentials",
+    "savedConnections": "Saved Connections",
+    "databaseType": "Database Type",
+    "postgresql": "PostgreSQL",
+    "mysql": "MySQL",
+    "sqlite": "SQLite",
+    "databaseTypeHelp": "Database Type",
+    "hostPort": "Host / Port",
+    "host": "Host",
+    "port": "Port",
+    "databaseName": "Database",
+    "username": "Username",
+    "password": "Password",
+    "testConnection": "Test Connection",
+    "testing": "Testing...",
+    "connected": "✓ Connected",
+    "connectionFailed": "Connection failed.",
+    "customUrl": "Advanced: Custom URL",
+    "databaseUrl": "Database URL",
+    "recurrence": "Recurrence",
+    "intervalHelp": "Interval (seconds)",
+    "batchLimit": "Batch Limit",
+    "batchLimitHelp": "Maximum number of batches to run. Set to 0 for infinite recurrence.",
+    "recurrenceHelp": "When set, the generator runs continuously, producing a new batch of data every N seconds. Press Stop to end the loop.",
+    "seed": "Seed",
+    "seedHelp": "Seed value for random generation.",
+    "columnFilter": "Column Filter",
+    "partitionByTable": "Partition by Table",
+    "dateGranularity": "Date Granularity",
+    "jsonMode": "JSON Mode",
+    "flat": "flat",
+    "nested": "nested",
+    "tables": "Tables",
+    "includeTablesHelp": "Include tables (optional)",
+    "workers": "Workers",
+    "workersWarning": "Above 32 threads only helps with slow network storage (Docker volumes, S3). Local SSD saturates earlier.",
+    "stopped": "⏹ Stopped.",
+    "done": "✓ Done.",
+    "failed": "✗ Failed.",
+    "stopRequested": "⏹ Stop requested…",
+    "connectionError": "Connection Error:",
+    "stop": "⏹ Stop",
+    "run": "Run",
+    "ifTableExists": "If Table Exists",
+    "replace": "replace",
+    "append": "append",
+    "fail": "fail",
+    "s3Region": "S3 Region",
+    "dbSchema": "Database Schema",
+    "tablesToInclude": "Tables to Include",
+    "reproducibility": "Reproducibility",
+    "seedPlaceholder": "e.g. 42",
+    "intervalSeconds": "Interval (seconds)",
+    "intervalPlaceholder": "e.g. 60",
+    "infinite": "infinite",
+    "columnIncrements": "Column Increments",
+    "shiftPerBatch": "shift values per batch",
+    "filters": "Filters",
+    "includeTables": "Include Tables",
+    "defaultAll": "default: all",
+    "clearSelection": "Clear selection (use all)",
+    "partitionBy": "Partition By",
+    "perTableHive": "per table — Hive-style",
+    "bucketRequired": "Bucket / Container is required for cloud upload.",
+    "execute": "Execute Dataforge CLI",
+    "running": "Running…"
+  },
+  "schedule": {
+    "title": "Schedules",
+    "newSchedule": "New Schedule",
+    "close": "Close",
+    "editSchedule": "Edit Schedule",
+    "name": "Name",
+    "namePlaceholder": "e.g. Daily ecommerce",
+    "schedule": "Schedule",
+    "visual": "Visual",
+    "cron": "Cron",
+    "hourUtc": "Hour (UTC)",
+    "anyPlaceholder": "* (any)",
+    "minute": "Minute",
+    "day": "Day",
+    "month": "Month",
+    "everyMonth": "Every month",
+    "months": {
+      "1": "January", "2": "February", "3": "March", "4": "April",
+      "5": "May", "6": "June", "7": "July", "8": "August",
+      "9": "September", "10": "October", "11": "November", "12": "December"
+    },
+    "everyMinute": "Every minute",
+    "everyHourAt": "Every hour at :{{mm}}",
+    "everyDayAt": "Every day at {{time}} UTC",
+    "everyWeekOn": "Every {{day}} at {{time}} UTC",
+    "dateAnchors": "Date Anchors",
+    "addAnchor": "+ Add",
+    "noAnchors": "No anchors. Data will use schema date ranges. Add one to pin a column to today + N days.",
+    "table": "Table",
+    "column": "Column",
+    "offsetDays": "Offset (days)",
+    "rowsPerTable": "Rows per table",
+    "format": "Format",
+    "destination": "Destination",
+    "save": "Save",
+    "saveFailed": "Save failed",
+    "deleteConfirmTitle": "Delete schedule \"{{name}}\"?",
+    "deleteConfirmMessage": "This cannot be undone.",
+    "delete": "Delete",
+    "runNow": "Run Now"
+  },
+  "history": {
+    "title": "Run History",
+    "refresh": "↻ Refresh",
+    "close": "Close"
+  },
+  "faker": {
+    "title": "Faker Method Browser",
+    "searchPlaceholder": "Search methods...",
+    "close": "Close browser"
+  },
+  "common": {
+    "save": "Save",
+    "cancel": "Cancel",
+    "add": "Add",
+    "delete": "Delete",
+    "edit": "Edit",
+    "close": "Close",
+    "confirm": "Confirm",
+    "ok": "OK",
+    "retry": "Retry",
+    "loading": "Loading...",
+    "error": "Error",
+    "success": "Success",
+    "rows": "rows",
+    "language": "Language",
+    "optional": "optional"
+  }
+}
diff --git a/src/dataforge/frontend/src/i18n/locales/pt-BR.json b/src/dataforge/frontend/src/i18n/locales/pt-BR.json
new file mode 100644
index 0000000..b6499e7
--- /dev/null
+++ b/src/dataforge/frontend/src/i18n/locales/pt-BR.json
@@ -0,0 +1,273 @@
+{
+  "auth": {
+    "signIn": "Entrar",
+    "createAccount": "Criar Conta",
+    "username": "Usuário",
+    "password": "Senha",
+    "usernamePlaceholder": "seu_usuario",
+    "passwordPlaceholder": "••••••••",
+    "somethingWentWrong": "Algo deu errado.",
+    "networkError": "Erro de rede.",
+    "subtitle": "Gerador de Dados Sintéticos"
+  },
+  "nav": {
+    "docs": "Docs",
+    "github": "GitHub",
+    "signOut": "Sair",
+    "domain": "Domínio",
+    "addTable": "Nova Tabela",
+    "loadYaml": "Carregar YAML",
+    "aiGenerate": "Gerar com IA",
+    "autoLayout": "Auto Layout",
+    "previewYaml": "Ver YAML",
+    "saveAsDefault": "Salvar Padrão",
+    "runGenerator": "Executar",
+    "schedules": "Agendamentos",
+    "history": "Histórico",
+    "comingSoon": "Em breve"
+  },
+  "profile": {
+    "addKeysInProfile": "Adicionar chaves no Perfil →",
+    "manageProfile": "Gerenciar Perfil",
+    "pickFromProfile": "Escolher do Perfil →",
+    "noKeysYet": "Nenhuma chave no Perfil ainda.",
+    "addOne": "Adicionar",
+    "selectKey": "— selecione uma chave",
+    "selectHint": "— selecione (ex: {{hint}})",
+    "resolved": "resolvida",
+    "keyNotFound": "chave \"{{value}}\" não encontrada no Perfil",
+    "keyNameRequired": "O nome da chave é obrigatório.",
+    "failedToSaveKey": "Falha ao salvar a chave.",
+    "addFirstKeyAbove": "Adicione sua primeira chave acima.",
+    "envKeys": "Variáveis de Ambiente",
+    "keyName": "Nome da chave",
+    "keyValue": "Valor da chave",
+    "addKey": "Adicionar Chave",
+    "editKey": "Editar Chave",
+    "deleteKey": "Remover chave"
+  },
+  "schema": {
+    "editTable": "Editar Tabela",
+    "deleteTable": "Excluir tabela",
+    "closePanel": "Fechar painel",
+    "tableName": "Nome da Tabela",
+    "rowsCount": "Quantidade de Linhas",
+    "columns": "Colunas",
+    "add": "Adicionar",
+    "noColumnsDefined": "Nenhuma coluna definida.",
+    "columnName": "Nome da coluna",
+    "removeColumn": "Remover coluna",
+    "type": "Tipo",
+    "nullable": "Nulo",
+    "no": "Não",
+    "min": "Mín",
+    "max": "Máx",
+    "datePlaceholderMin": "ex: -1y",
+    "datePlaceholderMax": "ex: hoje",
+    "numericPlaceholderMin": "ex: 0",
+    "numericPlaceholderMax": "ex: 100",
+    "fakerMethod": "Método Faker",
+    "customList": "Lista Customizada",
+    "browseAllFakerMethods": "Explorar métodos faker",
+    "fakerMethodPlaceholder": "ex: phone_number",
+    "primaryKey": "Chave Primária",
+    "foreignKey": "Chave Estrangeira",
+    "refTableName": "Tabela de Referência",
+    "refColumnName": "Coluna de Referência",
+    "typeValueAndEnter": "Digite um valor e pressione Enter",
+    "pressEnterOrComma": "Pressione Enter ou vírgula para adicionar",
+    "untitled": "Sem título",
+    "untitledColumn": "sem título",
+    "noColumns": "Sem colunas"
+  },
+  "save": {
+    "title": "Salvar como Schema Padrão",
+    "description": "O schema será salvo em `src/dataforge/schemas/` e aparecerá no seletor de Domínio após recarregar.",
+    "schemaName": "Nome do Schema",
+    "schemaNamePlaceholder": "ex: meu_schema",
+    "schemaNameHelp": "Apenas letras minúsculas, números, hífens e underscores.",
+    "schemaNameError": "Use apenas letras minúsculas, números, hífens e underscores.",
+    "saveAndReload": "Salvar e Recarregar",
+    "saveFailed": "Falha ao salvar.",
+    "deleteSchema": "Excluir schema",
+    "deleteConfirm": "Remover \"{{domain}}\" permanentemente? Esta ação não pode ser desfeita."
+  },
+  "ai": {
+    "title": "Gerar Domínio com IA",
+    "description": "Descreva o domínio que você precisa — a IA gera um schema YAML completo com tabelas, tipos e relacionamentos.",
+    "provider": "Provedor",
+    "apiKey": "Chave de API",
+    "model": "Modelo",
+    "required": "(obrigatório)",
+    "optional": "(opcional)",
+    "loadModels": "⟳ Carregar modelos disponíveis",
+    "loading": "Carregando…",
+    "selectModel": "— selecione um modelo —",
+    "whatDataset": "Que conjunto de dados você precisa?",
+    "resetToExample": "Resetar para exemplo",
+    "promptPlaceholder": "Descreva seu domínio em linguagem natural — nomes de tabelas, colunas, relacionamentos, faixas de valores, categorias...",
+    "promptHelp": "A especificação do formato YAML e um exemplo de referência são enviados automaticamente para a IA — você só precisa descrever os dados.",
+    "apiKeyRequired": "A chave de API é obrigatória.",
+    "describeTheDomain": "Descreva o domínio que deseja gerar.",
+    "generateSchema": "Gerar Schema",
+    "generating": "Gerando…",
+    "defaultPrompt": "E-commerce com 4 tabelas:\n- clientes: nome completo, email, telefone, cidade, estado, data de cadastro\n- produtos: nome, categoria (Eletrônicos/Roupas/Livros/Casa/Esportes), preço (10–2000), quantidade em estoque\n- pedidos: vinculado ao cliente, data do pedido (últimos 2 anos), status (pendente/processando/enviado/entregue/cancelado), valor total\n- itens_pedido: vinculado ao pedido e produto, quantidade (1–10), preço unitário",
+    "langInstruction": "Responda em português. Gere todos os nomes de tabelas, colunas, valores e descrições em português brasileiro."
+  },
+  "run": {
+    "title": "Executar Gerador",
+    "fieldReference": "Executar Gerador — Referência de Campos",
+    "format": "Formato",
+    "formatHelp": "Formato do arquivo de saída. Você pode selecionar múltiplos ao mesmo tempo — o gerador criará um arquivo por formato para cada tabela.",
+    "rowsOverride": "Sobrescrever Linhas",
+    "rowsOverrideHelp": "Sobrescreve o número de linhas definido no schema para todas as tabelas. Deixe vazio para usar os padrões do schema.",
+    "destination": "Destino",
+    "local": "Local",
+    "cloud": "Nuvem",
+    "database": "Banco de Dados",
+    "outputDirectory": "Diretório de Saída",
+    "localHelp": "Salva os arquivos gerados em uma pasta nesta máquina.",
+    "cloudHelp": "Envia os arquivos gerados diretamente para um bucket na nuvem.",
+    "databaseHelp": "Carrega os dados gerados diretamente em uma tabela do banco de dados.",
+    "cloudProvider": "Provedor de Nuvem",
+    "gcs": "Google Cloud Storage",
+    "s3": "AWS S3",
+    "azure": "Azure Blob Storage",
+    "bucketName": "Nome do Bucket",
+    "prefix": "Prefixo / Caminho",
+    "savedCredentials": "Credenciais Salvas",
+    "savedConnections": "Conexões Salvas",
+    "databaseType": "Tipo de Banco",
+    "postgresql": "PostgreSQL",
+    "mysql": "MySQL",
+    "sqlite": "SQLite",
+    "databaseTypeHelp": "Tipo de Banco de Dados",
+    "hostPort": "Host / Porta",
+    "host": "Host",
+    "port": "Porta",
+    "databaseName": "Banco de Dados",
+    "username": "Usuário",
+    "password": "Senha",
+    "testConnection": "Testar Conexão",
+    "testing": "Testando...",
+    "connected": "✓ Conectado",
+    "connectionFailed": "Conexão falhou.",
+    "customUrl": "Avançado: URL Customizada",
+    "databaseUrl": "URL do Banco",
+    "recurrence": "Recorrência",
+    "intervalHelp": "Intervalo (segundos)",
+    "batchLimit": "Limite de Lotes",
+    "batchLimitHelp": "Número máximo de lotes a executar. Defina 0 para recorrência infinita.",
+    "recurrenceHelp": "Quando definido, o gerador roda continuamente, produzindo um novo lote de dados a cada N segundos. Pressione Parar para encerrar.",
+    "seed": "Semente",
+    "seedHelp": "Valor de semente para geração aleatória.",
+    "columnFilter": "Filtro de Colunas",
+    "partitionByTable": "Particionar por Tabela",
+    "dateGranularity": "Granularidade de Data",
+    "jsonMode": "Modo JSON",
+    "flat": "flat",
+    "nested": "nested",
+    "tables": "Tabelas",
+    "includeTablesHelp": "Incluir tabelas (opcional)",
+    "workers": "Workers",
+    "workersWarning": "Acima de 32 threads só ajuda com armazenamento de rede lento (volumes Docker, S3). SSD local satura antes.",
+    "stopped": "⏹ Parado.",
+    "done": "✓ Concluído.",
+    "failed": "✗ Falhou.",
+    "stopRequested": "⏹ Parada solicitada…",
+    "connectionError": "Erro de Conexão:",
+    "stop": "⏹ Parar",
+    "run": "Executar",
+    "ifTableExists": "Se Tabela Existir",
+    "replace": "substituir",
+    "append": "adicionar",
+    "fail": "falhar",
+    "s3Region": "Região S3",
+    "dbSchema": "Schema do Banco",
+    "tablesToInclude": "Tabelas a Incluir",
+    "reproducibility": "Reprodutibilidade",
+    "seedPlaceholder": "ex: 42",
+    "intervalSeconds": "Intervalo (segundos)",
+    "intervalPlaceholder": "ex: 60",
+    "infinite": "infinito",
+    "columnIncrements": "Incrementos de Coluna",
+    "shiftPerBatch": "avança valores por lote",
+    "filters": "Filtros",
+    "includeTables": "Incluir Tabelas",
+    "defaultAll": "padrão: todas",
+    "clearSelection": "Limpar seleção (usar todas)",
+    "partitionBy": "Particionar Por",
+    "perTableHive": "por tabela — estilo Hive",
+    "bucketRequired": "Bucket / Container é obrigatório para upload na nuvem.",
+    "execute": "Executar Dataforge CLI",
+    "running": "Executando…"
+  },
+  "schedule": {
+    "title": "Agendamentos",
+    "newSchedule": "Novo Agendamento",
+    "close": "Fechar",
+    "editSchedule": "Editar Agendamento",
+    "name": "Nome",
+    "namePlaceholder": "ex: E-commerce diário",
+    "schedule": "Agendamento",
+    "visual": "Visual",
+    "cron": "Cron",
+    "hourUtc": "Hora (UTC)",
+    "anyPlaceholder": "* (qualquer)",
+    "minute": "Minuto",
+    "day": "Dia",
+    "month": "Mês",
+    "everyMonth": "Todo mês",
+    "months": {
+      "1": "Janeiro", "2": "Fevereiro", "3": "Março", "4": "Abril",
+      "5": "Maio", "6": "Junho", "7": "Julho", "8": "Agosto",
+      "9": "Setembro", "10": "Outubro", "11": "Novembro", "12": "Dezembro"
+    },
+    "everyMinute": "Cada minuto",
+    "everyHourAt": "Toda hora às :{{mm}}",
+    "everyDayAt": "Todo dia às {{time}} UTC",
+    "everyWeekOn": "Toda {{day}} às {{time}} UTC",
+    "dateAnchors": "Âncoras de Data",
+    "addAnchor": "+ Adicionar",
+    "noAnchors": "Sem âncoras. Os dados usarão os intervalos de data do schema. Adicione uma para vincular uma coluna a hoje + N dias.",
+    "table": "Tabela",
+    "column": "Coluna",
+    "offsetDays": "Offset (dias)",
+    "rowsPerTable": "Linhas por tabela",
+    "format": "Formato",
+    "destination": "Destino",
+    "save": "Salvar",
+    "saveFailed": "Falha ao salvar",
+    "deleteConfirmTitle": "Excluir agendamento \"{{name}}\"?",
+    "deleteConfirmMessage": "Esta ação não pode ser desfeita.",
+    "delete": "Excluir",
+    "runNow": "Executar Agora"
+  },
+  "history": {
+    "title": "Histórico de Execuções",
+    "refresh": "↻ Atualizar",
+    "close": "Fechar"
+  },
+  "faker": {
+    "title": "Explorador de Métodos Faker",
+    "searchPlaceholder": "Buscar métodos...",
+    "close": "Fechar explorador"
+  },
+  "common": {
+    "save": "Salvar",
+    "cancel": "Cancelar",
+    "add": "Adicionar",
+    "delete": "Excluir",
+    "edit": "Editar",
+    "close": "Fechar",
+    "confirm": "Confirmar",
+    "ok": "OK",
+    "retry": "Tentar novamente",
+    "loading": "Carregando...",
+    "error": "Erro",
+    "success": "Sucesso",
+    "rows": "linhas",
+    "language": "Idioma",
+    "optional": "opcional"
+  }
+}
diff --git a/src/dataforge/frontend/src/index.css b/src/dataforge/frontend/src/index.css
index 1a7800d..f04ffeb 100644
--- a/src/dataforge/frontend/src/index.css
+++ b/src/dataforge/frontend/src/index.css
@@ -471,7 +471,7 @@ pre {
   .animated, .animated-scale {
     animation: none;
   }
-  button, input, select {
+  button, input, select, textarea {
     transition: none;
   }
 }
diff --git a/src/dataforge/frontend/src/main.tsx b/src/dataforge/frontend/src/main.tsx
index bef5202..cd81cee 100644
--- a/src/dataforge/frontend/src/main.tsx
+++ b/src/dataforge/frontend/src/main.tsx
@@ -1,6 +1,7 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
+import './i18n'
 import App from './App.tsx'
 
 createRoot(document.getElementById('root')!).render(
diff --git a/src/dataforge/frontend/src/services/SchemaReader.test.ts b/src/dataforge/frontend/src/services/SchemaReader.test.ts
new file mode 100644
index 0000000..037d2d4
--- /dev/null
+++ b/src/dataforge/frontend/src/services/SchemaReader.test.ts
@@ -0,0 +1,152 @@
+import { describe, it, expect } from 'vitest'
+import { SchemaReader } from './SchemaReader'
+
+const BASIC_YAML = `
+domain: ecommerce
+tables:
+  users:
+    rows: 500
+    columns:
+      id:
+        dtype: int
+        primary_key: true
+      name:
+        dtype: str
+        faker_provider: name
+      email:
+        dtype: str
+        nullable: "0.05"
+  orders:
+    rows: 2000
+    columns:
+      id:
+        dtype: int
+        primary_key: true
+      user_id:
+        dtype: int
+        foreign_key:
+          table: users
+          column: id
+      total:
+        dtype: float
+        min: 0
+        max: 9999
+`
+
+describe('SchemaReader.parseYaml', () => {
+  it('lê o domínio corretamente', () => {
+    const schema = SchemaReader.parseYaml(BASIC_YAML)
+    expect(schema.domain).toBe('ecommerce')
+  })
+
+  it('cria a quantidade certa de tabelas', () => {
+    const schema = SchemaReader.parseYaml(BASIC_YAML)
+    expect(schema.tables).toHaveLength(2)
+  })
+
+  it('lê o nome e rows da tabela', () => {
+    const schema = SchemaReader.parseYaml(BASIC_YAML)
+    const users = schema.tables.find(t => t.name === 'users')
+    expect(users).toBeDefined()
+    expect(users!.rows).toBe(500)
+  })
+
+  it('gera IDs únicos para tabelas', () => {
+    const schema = SchemaReader.parseYaml(BASIC_YAML)
+    const ids = schema.tables.map(t => t.id)
+    expect(new Set(ids).size).toBe(ids.length)
+  })
+
+  it('lê colunas corretamente', () => {
+    const schema = SchemaReader.parseYaml(BASIC_YAML)
+    const users = schema.tables.find(t => t.name === 'users')!
+    expect(users.columns).toHaveLength(3)
+  })
+
+  it('detecta primary key', () => {
+    const schema = SchemaReader.parseYaml(BASIC_YAML)
+    const users = schema.tables.find(t => t.name === 'users')!
+    const id = users.columns.find(c => c.name === 'id')!
+    expect(id.isPrimaryKey).toBe(true)
+  })
+
+  it('lê faker_provider', () => {
+    const schema = SchemaReader.parseYaml(BASIC_YAML)
+    const users = schema.tables.find(t => t.name === 'users')!
+    const name = users.columns.find(c => c.name === 'name')!
+    expect(name.fakerProvider).toBe('name')
+  })
+
+  it('lê nullable como string', () => {
+    const schema = SchemaReader.parseYaml(BASIC_YAML)
+    const users = schema.tables.find(t => t.name === 'users')!
+    const email = users.columns.find(c => c.name === 'email')!
+    expect(email.nullable).toBe('0.05')
+  })
+
+  it('detecta foreign key', () => {
+    const schema = SchemaReader.parseYaml(BASIC_YAML)
+    const orders = schema.tables.find(t => t.name === 'orders')!
+    const userId = orders.columns.find(c => c.name === 'user_id')!
+    expect(userId.isForeignKey).toBe(true)
+    expect(userId.fkTable).toBe('users')
+    expect(userId.fkColumn).toBe('id')
+  })
+
+  it('lê min e max como string', () => {
+    const schema = SchemaReader.parseYaml(BASIC_YAML)
+    const orders = schema.tables.find(t => t.name === 'orders')!
+    const total = orders.columns.find(c => c.name === 'total')!
+    expect(total.min).toBe('0')
+    expect(total.max).toBe('9999')
+  })
+
+  it('usa domínio "custom" quando ausente', () => {
+    const schema = SchemaReader.parseYaml('tables:\n  foo:\n    rows: 10\n    columns: {}')
+    expect(schema.domain).toBe('custom')
+  })
+
+  it('lança erro em YAML inválido', () => {
+    expect(() => SchemaReader.parseYaml('{')).toThrow()
+  })
+
+  it('retorna schema vazio para YAML que não é objeto (array)', () => {
+    // YAML.parse de uma lista retorna array — rawObj não é null nem não-objeto,
+    // então parseYaml trata como schema sem tabelas
+    const schema = SchemaReader.parseYaml('- item1\n- item2')
+    expect(schema.tables).toHaveLength(0)
+  })
+
+  it('lança erro com mensagem amigável para chaves duplicadas', () => {
+    const duplicateYaml = `
+tables:
+  users:
+    rows: 10
+    columns:
+      id:
+        dtype: int
+      id:
+        dtype: str
+`
+    expect(() => SchemaReader.parseYaml(duplicateYaml)).toThrow('chaves duplicadas')
+  })
+
+  it('lê choices como array de strings', () => {
+    const yaml = `
+domain: test
+tables:
+  status_table:
+    rows: 100
+    columns:
+      status:
+        dtype: str
+        choices:
+          - active
+          - inactive
+          - pending
+`
+    const schema = SchemaReader.parseYaml(yaml)
+    const col = schema.tables[0].columns.find(c => c.name === 'status')!
+    expect(col.choices).toEqual(['active', 'inactive', 'pending'])
+  })
+})
diff --git a/src/dataforge/frontend/src/services/SchemaWriter.test.ts b/src/dataforge/frontend/src/services/SchemaWriter.test.ts
new file mode 100644
index 0000000..f07ba8b
--- /dev/null
+++ b/src/dataforge/frontend/src/services/SchemaWriter.test.ts
@@ -0,0 +1,153 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import YAML from 'yaml'
+import { SchemaWriter } from './SchemaWriter'
+import type { Table } from '../types/schema'
+
+const makeTable = (overrides: Partial<Table> = {}): Table => ({
+  id: 'table-1',
+  name: 'users',
+  rows: 1000,
+  columns: [],
+  ...overrides,
+})
+
+const makeColumn = (overrides = {}) => ({
+  id: 'col-1',
+  name: 'id',
+  dtype: 'int',
+  isPrimaryKey: false,
+  fakerProvider: '',
+  nullable: '0',
+  isForeignKey: false,
+  fkTable: '',
+  fkColumn: '',
+  min: '',
+  max: '',
+  choices: [],
+  ...overrides,
+})
+
+describe('SchemaWriter.generateYaml', () => {
+  it('inclui o domínio no YAML gerado', () => {
+    const yaml = SchemaWriter.generateYaml('finance', [])
+    const parsed = YAML.parse(yaml)
+    expect(parsed.domain).toBe('finance')
+  })
+
+  it('gera tabela com rows correto', () => {
+    const table = makeTable({ rows: 500 })
+    const yaml = SchemaWriter.generateYaml('test', [table])
+    const parsed = YAML.parse(yaml)
+    expect(parsed.tables.users.rows).toBe(500)
+  })
+
+  it('inclui dtype na coluna', () => {
+    const col = makeColumn({ name: 'email', dtype: 'str' })
+    const table = makeTable({ columns: [col] })
+    const yaml = SchemaWriter.generateYaml('test', [table])
+    const parsed = YAML.parse(yaml)
+    expect(parsed.tables.users.columns.email.dtype).toBe('str')
+  })
+
+  it('emite primary_key quando isPrimaryKey=true', () => {
+    const col = makeColumn({ isPrimaryKey: true })
+    const table = makeTable({ columns: [col] })
+    const yaml = SchemaWriter.generateYaml('test', [table])
+    const parsed = YAML.parse(yaml)
+    expect(parsed.tables.users.columns.id.primary_key).toBe(true)
+  })
+
+  it('não emite primary_key quando isPrimaryKey=false', () => {
+    const col = makeColumn({ isPrimaryKey: false })
+    const table = makeTable({ columns: [col] })
+    const yaml = SchemaWriter.generateYaml('test', [table])
+    const parsed = YAML.parse(yaml)
+    expect(parsed.tables.users.columns.id.primary_key).toBeUndefined()
+  })
+
+  it('emite faker_provider quando preenchido', () => {
+    const col = makeColumn({ name: 'name', fakerProvider: 'name' })
+    const table = makeTable({ columns: [col] })
+    const yaml = SchemaWriter.generateYaml('test', [table])
+    const parsed = YAML.parse(yaml)
+    expect(parsed.tables.users.columns.name.faker_provider).toBe('name')
+  })
+
+  it('não emite faker_provider quando vazio', () => {
+    const col = makeColumn({ fakerProvider: '' })
+    const table = makeTable({ columns: [col] })
+    const yaml = SchemaWriter.generateYaml('test', [table])
+    const parsed = YAML.parse(yaml)
+    expect(parsed.tables.users.columns.id.faker_provider).toBeUndefined()
+  })
+
+  it('emite nullable quando > 0', () => {
+    const col = makeColumn({ nullable: '0.1' })
+    const table = makeTable({ columns: [col] })
+    const yaml = SchemaWriter.generateYaml('test', [table])
+    const parsed = YAML.parse(yaml)
+    expect(parsed.tables.users.columns.id.nullable).toBeCloseTo(0.1)
+  })
+
+  it('não emite nullable quando = 0', () => {
+    const col = makeColumn({ nullable: '0' })
+    const table = makeTable({ columns: [col] })
+    const yaml = SchemaWriter.generateYaml('test', [table])
+    const parsed = YAML.parse(yaml)
+    expect(parsed.tables.users.columns.id.nullable).toBeUndefined()
+  })
+
+  it('emite foreign_key com table e column', () => {
+    const col = makeColumn({ isForeignKey: true, fkTable: 'orders', fkColumn: 'id' })
+    const table = makeTable({ columns: [col] })
+    const yaml = SchemaWriter.generateYaml('test', [table])
+    const parsed = YAML.parse(yaml)
+    expect(parsed.tables.users.columns.id.foreign_key).toEqual({ table: 'orders', column: 'id' })
+  })
+
+  it('emite min e max numéricos como números', () => {
+    const col = makeColumn({ min: '0', max: '100' })
+    const table = makeTable({ columns: [col] })
+    const yaml = SchemaWriter.generateYaml('test', [table])
+    const parsed = YAML.parse(yaml)
+    expect(parsed.tables.users.columns.id.min).toBe(0)
+    expect(parsed.tables.users.columns.id.max).toBe(100)
+  })
+
+  it('emite choices quando preenchido', () => {
+    const col = makeColumn({ name: 'status', choices: ['active', 'inactive'] })
+    const table = makeTable({ columns: [col] })
+    const yaml = SchemaWriter.generateYaml('test', [table])
+    const parsed = YAML.parse(yaml)
+    expect(parsed.tables.users.columns.status.choices).toEqual(['active', 'inactive'])
+  })
+
+  it('gera YAML válido com múltiplas tabelas', () => {
+    const t1 = makeTable({ id: '1', name: 'users' })
+    const t2 = makeTable({ id: '2', name: 'orders' })
+    const yaml = SchemaWriter.generateYaml('ecommerce', [t1, t2])
+    const parsed = YAML.parse(yaml)
+    expect(Object.keys(parsed.tables)).toEqual(['users', 'orders'])
+  })
+})
+
+describe('SchemaWriter.downloadYaml', () => {
+  beforeEach(() => {
+    global.URL.createObjectURL = vi.fn(() => 'blob:mock')
+    global.URL.revokeObjectURL = vi.fn()
+
+    const mockAnchor = { href: '', download: '', click: vi.fn() }
+    vi.spyOn(document, 'createElement').mockReturnValue(mockAnchor as any)
+  })
+
+  it('não faz nada se yaml estiver vazio', () => {
+    const spy = vi.spyOn(document, 'createElement')
+    SchemaWriter.downloadYaml('')
+    expect(spy).not.toHaveBeenCalled()
+  })
+
+  it('cria um anchor e dispara o click', () => {
+    SchemaWriter.downloadYaml('domain: test\n', 'test.yaml')
+    expect(document.createElement).toHaveBeenCalledWith('a')
+  })
+})
diff --git a/src/dataforge/frontend/src/services/SchemaWriter.ts b/src/dataforge/frontend/src/services/SchemaWriter.ts
index a3f0b06..93b6749 100644
--- a/src/dataforge/frontend/src/services/SchemaWriter.ts
+++ b/src/dataforge/frontend/src/services/SchemaWriter.ts
@@ -24,8 +24,8 @@ export class SchemaWriter {
           colDef.nullable = nullProb;
         }
 
-        if (c.min) colDef.min = isNaN(Number(c.min)) ? c.min : Number(c.min);
-        if (c.max) colDef.max = isNaN(Number(c.max)) ? c.max : Number(c.max);
+        if (c.min !== '' && c.min != null) colDef.min = isNaN(Number(c.min)) ? c.min : Number(c.min);
+        if (c.max !== '' && c.max != null) colDef.max = isNaN(Number(c.max)) ? c.max : Number(c.max);
         if (c.choices && c.choices.length > 0) colDef.choices = c.choices;
 
         if (c.isForeignKey && c.fkTable && c.fkColumn) {
diff --git a/src/dataforge/frontend/src/test/setup.ts b/src/dataforge/frontend/src/test/setup.ts
new file mode 100644
index 0000000..c44951a
--- /dev/null
+++ b/src/dataforge/frontend/src/test/setup.ts
@@ -0,0 +1 @@
+import '@testing-library/jest-dom'
diff --git a/src/dataforge/frontend/vite.config.ts b/src/dataforge/frontend/vite.config.ts
index 99067e1..ac23dda 100644
--- a/src/dataforge/frontend/vite.config.ts
+++ b/src/dataforge/frontend/vite.config.ts
@@ -4,6 +4,52 @@ import { spawn, execSync } from 'child_process'
 import { writeFileSync, readFileSync, mkdirSync, existsSync, readdirSync, rmSync } from 'fs'
 import { resolve, join } from 'path'
 import { tmpdir } from 'os'
+import { createHmac, randomBytes, scryptSync, timingSafeEqual } from 'crypto'
+
+// ── Minimal cron scheduler (no external dependency) ───────────────────────────
+interface ScheduledTask { stop(): void }
+
+function _parseCronField(field: string, min: number, max: number): Set<number> {
+  const values = new Set<number>()
+  for (const part of field.split(',')) {
+    if (part === '*') { for (let i = min; i <= max; i++) values.add(i) }
+    else if (part.startsWith('*/')) { const s = parseInt(part.slice(2)); for (let i = min; i <= max; i += s) values.add(i) }
+    else if (part.includes('-')) { const [lo, hi] = part.split('-').map(Number); for (let i = lo; i <= hi; i++) values.add(i) }
+    else { values.add(parseInt(part)) }
+  }
+  return values
+}
+
+function _nextCronTime(expr: string): Date {
+  const [minF, hourF, domF, monF, dowF] = expr.trim().split(/\s+/)
+  const mins  = _parseCronField(minF,  0, 59)
+  const hours = _parseCronField(hourF, 0, 23)
+  const doms  = _parseCronField(domF,  1, 31)
+  const mons  = _parseCronField(monF,  1, 12)
+  const dows  = _parseCronField(dowF,  0, 6)
+  const d = new Date(); d.setUTCSeconds(0, 0); d.setUTCMinutes(d.getUTCMinutes() + 1)
+  for (let i = 0; i < 366 * 24 * 60; i++, d.setUTCMinutes(d.getUTCMinutes() + 1)) {
+    if (mons.has(d.getUTCMonth() + 1) && doms.has(d.getUTCDate()) &&
+        dows.has(d.getUTCDay()) && hours.has(d.getUTCHours()) && mins.has(d.getUTCMinutes()))
+      return new Date(d)
+  }
+  throw new Error(`No next time for cron: ${expr}`)
+}
+
+const cron = {
+  validate(expr: string): boolean { return expr.trim().split(/\s+/).length === 5 },
+  schedule(expr: string, callback: () => void, _opts?: { timezone?: string }): ScheduledTask {
+    let timer: ReturnType<typeof setTimeout> | null = null
+    let stopped = false
+    const scheduleNext = () => {
+      if (stopped) return
+      try { const delay = _nextCronTime(expr).getTime() - Date.now(); timer = setTimeout(() => { if (!stopped) { callback(); scheduleNext() } }, Math.max(0, delay)) }
+      catch { /* invalid expression */ }
+    }
+    scheduleNext()
+    return { stop() { stopped = true; if (timer !== null) clearTimeout(timer) } }
+  }
+}
 
 // Read version from pyproject.toml — single source of truth
 const pyprojectRaw = readFileSync(resolve(__dirname, '../../../pyproject.toml'), 'utf-8')
@@ -12,9 +58,383 @@ const appVersion = pyprojectRaw.match(/^version\s*=\s*"([^"]+)"/m)?.[1] ?? '0.0.
 let activeProcess: ReturnType<typeof spawn> | null = null
 let browseInProgress = false
 
+// ── Schedule types ────────────────────────────────────────────────────────────
+interface DateAnchor {
+  table: string
+  column: string
+  offsetDays: number
+}
+
+interface ScheduleConfig {
+  yamlStr: string
+  tables?: string[]
+  rows?: number
+  formats?: string[]
+  outputDir?: string
+  uploadTarget?: string
+  bucket?: string
+  prefix?: string
+  partitionByTable?: Record<string, string>
+  partitionDateGranularity?: Record<string, string>
+  jsonMode?: string
+  seed?: number | null
+  dbUrl?: string | null
+  ifExists?: string
+  dbSchema?: string | null
+  recurrence?: number | null
+  count?: number | null
+  credentials?: string | null
+  increments?: { table: string; column: string; step: number; unit: string }[]
+  cloudCreds?: Record<string, string>
+  workers?: number
+  dateAnchors?: DateAnchor[]
+}
+
+interface Schedule {
+  id: string
+  name: string
+  cronExpression: string
+  enabled: boolean
+  config: ScheduleConfig
+  createdAt: string
+}
+
+interface RunRecord {
+  id: string
+  scheduleId: string
+  scheduleName: string
+  triggeredBy: 'cron' | 'manual'
+  startedAt: string
+  finishedAt: string | null
+  status: 'running' | 'success' | 'error'
+  output: string
+  exitCode: number | null
+}
+
+// ── Persistence helpers ───────────────────────────────────────────────────────
+const baseAppDir = resolve(__dirname, '../../../')
+const schedulesPath = resolve(baseAppDir, 'output', 'dataforge_schedules.json')
+const historyPath = resolve(baseAppDir, 'output', 'dataforge_history.json')
+
+function readSchedules(): Schedule[] {
+  try {
+    mkdirSync(resolve(baseAppDir, 'output'), { recursive: true })
+    return JSON.parse(readFileSync(schedulesPath, 'utf-8'))
+  } catch { return [] }
+}
+
+function writeSchedules(schedules: Schedule[]): void {
+  mkdirSync(resolve(baseAppDir, 'output'), { recursive: true })
+  writeFileSync(schedulesPath, JSON.stringify(schedules, null, 2), 'utf-8')
+}
+
+function readHistory(): RunRecord[] {
+  try {
+    return JSON.parse(readFileSync(historyPath, 'utf-8'))
+  } catch { return [] }
+}
+
+function writeHistory(runs: RunRecord[]): void {
+  mkdirSync(resolve(baseAppDir, 'output'), { recursive: true })
+  // Keep last 200 entries
+  writeFileSync(historyPath, JSON.stringify(runs.slice(-200), null, 2), 'utf-8')
+}
+
+function newUuid(): string {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+    const r = Math.random() * 16 | 0
+    return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16)
+  })
+}
+
+// ── Auth helpers ──────────────────────────────────────────────────────────────
+const dataDir = resolve(baseAppDir, 'data')
+const jwtSecretPath = resolve(dataDir, 'jwt_secret.txt')
+const usersFilePath = resolve(dataDir, 'users.json')
+
+interface AuthUser { id: string; username: string; passwordHash: string; salt: string; createdAt: string }
+
+function getJwtSecret(): string {
+  try { return readFileSync(jwtSecretPath, 'utf-8').trim() } catch {
+    const secret = randomBytes(32).toString('hex')
+    mkdirSync(dataDir, { recursive: true })
+    writeFileSync(jwtSecretPath, secret, 'utf-8')
+    return secret
+  }
+}
+
+function signToken(payload: Record<string, unknown>): string {
+  const header = Buffer.from(JSON.stringify({ alg: 'HS256', typ: 'JWT' })).toString('base64url')
+  const body = Buffer.from(JSON.stringify({ ...payload, exp: Math.floor(Date.now() / 1000) + 60 * 60 * 24 * 30 })).toString('base64url')
+  const sig = createHmac('sha256', getJwtSecret()).update(`${header}.${body}`).digest('base64url')
+  return `${header}.${body}.${sig}`
+}
+
+function verifyToken(token: string): Record<string, unknown> | null {
+  try {
+    const parts = token.split('.')
+    if (parts.length !== 3) return null
+    const [header, body, sig] = parts
+    const expected = createHmac('sha256', getJwtSecret()).update(`${header}.${body}`).digest('base64url')
+    if (sig.length !== expected.length || !timingSafeEqual(Buffer.from(sig), Buffer.from(expected))) return null
+    const payload = JSON.parse(Buffer.from(body, 'base64url').toString())
+    if (payload.exp && payload.exp < Math.floor(Date.now() / 1000)) return null
+    return payload
+  } catch { return null }
+}
+
+function hashPassword(password: string): { hash: string; salt: string } {
+  const salt = randomBytes(16).toString('hex')
+  const hash = scryptSync(password, salt, 64).toString('hex')
+  return { hash, salt }
+}
+
+function verifyPassword(password: string, hash: string, salt: string): boolean {
+  try {
+    const derived = scryptSync(password, salt, 64)
+    return timingSafeEqual(derived, Buffer.from(hash, 'hex'))
+  } catch { return false }
+}
+
+function readUsers(): Record<string, AuthUser> {
+  try { return JSON.parse(readFileSync(usersFilePath, 'utf-8')) } catch { return {} }
+}
+
+function writeUsers(users: Record<string, AuthUser>): void {
+  mkdirSync(dataDir, { recursive: true })
+  writeFileSync(usersFilePath, JSON.stringify(users, null, 2), 'utf-8')
+}
+
+function envKeysFilePath(username: string): string {
+  return resolve(dataDir, 'users', username, 'env_keys.json')
+}
+
+function readEnvKeys(username: string): Record<string, string> {
+  try { return JSON.parse(readFileSync(envKeysFilePath(username), 'utf-8')) } catch { return {} }
+}
+
+function writeEnvKeys(username: string, keys: Record<string, string>): void {
+  const p = envKeysFilePath(username)
+  mkdirSync(resolve(p, '..'), { recursive: true })
+  writeFileSync(p, JSON.stringify(keys, null, 2), 'utf-8')
+}
+
+function getAuthUser(req: any): { id: string; username: string } | null {
+  const auth = req.headers['authorization']
+  if (!auth?.startsWith('Bearer ')) return null
+  const payload = verifyToken(auth.slice(7))
+  if (!payload || typeof payload.username !== 'string') return null
+  return { id: payload.id as string, username: payload.username }
+}
+
+// ── Core generate runner (shared by /api/run-cli and schedule runner) ─────────
+function buildGenerateArgs(config: ScheduleConfig, targetOut: string, tempSchemaPath: string): { args: string[]; extraEnv: Record<string, string> } {
+  const { yamlStr: _y, ..._ } = config
+  const {
+    formats, rows, tables: tablesToInclude, columns: columnsToInclude,
+    jsonMode, seed, partitionByTable, partitionDateGranularity,
+    uploadTarget, bucket, prefix, cloudCreds, credentials,
+    dbUrl, ifExists, dbSchema,
+    recurrence, count, increments, workers, dateAnchors,
+  } = config
+
+  const args = ['-c', 'from dataforge.cli import cli; cli()', 'generate', '--domain', 'custom', '--config', tempSchemaPath, '--output', targetOut]
+
+  if (rows) args.push('--rows', String(rows))
+
+  const fmtList: string[] = Array.isArray(formats) && formats.length > 0 ? formats : ['csv']
+  for (const fmt of fmtList) args.push('--format', fmt)
+  if (fmtList.includes('json') && jsonMode) args.push('--json-mode', jsonMode)
+
+  if (tablesToInclude && Array.isArray(tablesToInclude)) {
+    for (const t of tablesToInclude) args.push('--tables', t)
+  }
+  if (columnsToInclude && Array.isArray(columnsToInclude)) {
+    for (const c of columnsToInclude) args.push('--columns', c)
+  }
+  if (seed !== undefined && seed !== null && seed !== '') args.push('--seed', String(seed))
+
+  if (partitionByTable && typeof partitionByTable === 'object') {
+    for (const [table, col] of Object.entries(partitionByTable)) {
+      if (col) args.push('--partition-by', `${table}:${col}`)
+    }
+  }
+  if (partitionDateGranularity && typeof partitionDateGranularity === 'object') {
+    for (const [table, gran] of Object.entries(partitionDateGranularity)) {
+      if (gran === 'year' || gran === 'month') args.push('--partition-date-granularity', `${table}:${gran}`)
+    }
+  }
+
+  const extraEnv: Record<string, string> = {}
+  const credentialsDir = resolve(baseAppDir, 'credentials')
+
+  if (uploadTarget) {
+    args.push('--upload', uploadTarget)
+    if (bucket?.trim()) args.push('--bucket', bucket.trim())
+    if (prefix?.trim()) args.push('--prefix', prefix.trim())
+
+    const creds = cloudCreds ?? {}
+    if (uploadTarget === 'gcs') {
+      if (creds['gcsJson']?.trim()) {
+        const tempGcsKey = join(tmpdir(), `df_gcs_key_${Date.now()}.json`)
+        writeFileSync(tempGcsKey, creds['gcsJson'].trim(), 'utf-8')
+        args.push('--credentials', tempGcsKey)
+      } else if (existsSync(credentialsDir)) {
+        const jsonFile = readdirSync(credentialsDir).find(f => f.endsWith('.json'))
+        if (jsonFile) args.push('--credentials', resolve(credentialsDir, jsonFile))
+      }
+    } else if (uploadTarget === 's3') {
+      if (creds['s3AccessKey']?.trim() && creds['s3SecretKey']?.trim()) {
+        const tempAwsCreds = join(tmpdir(), `df_aws_creds_${Date.now()}.ini`)
+        writeFileSync(tempAwsCreds, `[default]\naws_access_key_id = ${creds['s3AccessKey'].trim()}\naws_secret_access_key = ${creds['s3SecretKey'].trim()}\n`, 'utf-8')
+        extraEnv['AWS_SHARED_CREDENTIALS_FILE'] = tempAwsCreds
+        if (creds['s3Region']?.trim()) extraEnv['AWS_DEFAULT_REGION'] = creds['s3Region'].trim()
+      } else if (existsSync(credentialsDir)) {
+        const awsFile = readdirSync(credentialsDir).find(f => f === 'credentials' || f.endsWith('.ini') || f.endsWith('.csv'))
+        if (awsFile) extraEnv['AWS_SHARED_CREDENTIALS_FILE'] = resolve(credentialsDir, awsFile)
+      }
+    } else if (uploadTarget === 'azure') {
+      if (creds['azureConnStr']?.trim()) {
+        extraEnv['AZURE_STORAGE_CONNECTION_STRING'] = creds['azureConnStr'].trim()
+      } else if (existsSync(credentialsDir)) {
+        const azFile = readdirSync(credentialsDir).find(f => f.endsWith('.txt') || f === 'connection_string')
+        if (azFile) extraEnv['AZURE_STORAGE_CONNECTION_STRING'] = readFileSync(resolve(credentialsDir, azFile), 'utf-8').trim()
+      }
+    }
+  }
+
+  if (dbUrl) {
+    args.push('--db-url', dbUrl)
+    if (ifExists) args.push('--if-exists', ifExists)
+    if (dbSchema) args.push('--db-schema', dbSchema)
+  }
+
+  if (recurrence !== undefined && recurrence !== null && recurrence !== '') {
+    args.push('--recurrence', String(recurrence))
+    if (count !== undefined && count !== null && count !== '') args.push('--count', String(count))
+  }
+
+  // Merge dateAnchors into increments: compute offset relative to today
+  const allIncrements = [...(increments ?? [])]
+  if (dateAnchors && dateAnchors.length > 0) {
+    const todayMs = new Date().setHours(0, 0, 0, 0)
+    for (const anchor of dateAnchors) {
+      const targetMs = todayMs + anchor.offsetDays * 86400000
+      const offsetDays = Math.round((targetMs - todayMs) / 86400000)
+      allIncrements.push({ table: anchor.table, column: anchor.column, step: offsetDays, unit: 'days' })
+    }
+  }
+
+  for (const inc of allIncrements) {
+    if (inc.table && inc.column && inc.step !== undefined && inc.step !== null) {
+      args.push('--increment', `${inc.table}:${inc.column}:${inc.step}:${inc.unit || 'days'}`)
+    }
+  }
+
+  if (workers !== undefined && workers !== null) args.push('--workers', String(workers))
+
+  return { args, extraEnv }
+}
+
+// ── Schedule runner ───────────────────────────────────────────────────────────
+function runScheduleJob(schedule: Schedule, triggeredBy: 'cron' | 'manual'): Promise<RunRecord> {
+  return new Promise(resolve_run => {
+    const runId = newUuid()
+    const startedAt = new Date().toISOString()
+
+    const isCloud = !!schedule.config.uploadTarget
+    const isDbOnly = !!schedule.config.dbUrl && !isCloud
+    const useTemp = isCloud || isDbOnly
+    const targetOut = useTemp
+      ? join(tmpdir(), `dataforge_out_${Date.now()}`)
+      : resolve(baseAppDir, schedule.config.outputDir || 'output')
+    mkdirSync(targetOut, { recursive: true })
+
+    const tempSchemaPath = join(tmpdir(), `dataforge_schema_${Date.now()}.yaml`)
+    writeFileSync(tempSchemaPath, schedule.config.yamlStr)
+
+    const { args, extraEnv } = buildGenerateArgs(schedule.config, targetOut, tempSchemaPath)
+
+    const venvPath = resolve(baseAppDir, '.venv', 'Scripts', 'python.exe')
+    const pyExec = existsSync(venvPath) ? venvPath : 'python'
+
+    let output = `$ python ${args.join(' ')}\n`
+
+    const proc = spawn(pyExec, args, {
+      cwd: baseAppDir,
+      env: { ...process.env, PYTHONPATH: resolve(baseAppDir, 'src'), ...extraEnv }
+    })
+
+    proc.stdout.on('data', (chunk: Buffer) => { output += chunk.toString() })
+    proc.stderr.on('data', (chunk: Buffer) => { output += chunk.toString() })
+
+    proc.on('close', (code: number | null) => {
+      if (useTemp) {
+        try { rmSync(targetOut, { recursive: true, force: true }) } catch {}
+      }
+      try { rmSync(tempSchemaPath) } catch {}
+
+      const record: RunRecord = {
+        id: runId,
+        scheduleId: schedule.id,
+        scheduleName: schedule.name,
+        triggeredBy,
+        startedAt,
+        finishedAt: new Date().toISOString(),
+        status: code === 0 ? 'success' : 'error',
+        output,
+        exitCode: code,
+      }
+
+      const history = readHistory()
+      history.push(record)
+      writeHistory(history)
+
+      resolve_run(record)
+    })
+  })
+}
+
+// ── node-cron registry ────────────────────────────────────────────────────────
+const cronTasks = new Map<string, ScheduledTask>()
+
+function registerCronJob(schedule: Schedule): void {
+  unregisterCronJob(schedule.id)
+  if (!schedule.enabled) return
+  if (!cron.validate(schedule.cronExpression)) return
+
+  const task = cron.schedule(schedule.cronExpression, () => {
+    console.log(`[dataforge-cron] Firing schedule "${schedule.name}" (${schedule.id})`)
+    // Re-read schedule from disk in case config was updated
+    const fresh = readSchedules().find(s => s.id === schedule.id)
+    if (fresh && fresh.enabled) {
+      runScheduleJob(fresh, 'cron').then(r => {
+        console.log(`[dataforge-cron] "${schedule.name}" finished — status: ${r.status}`)
+      })
+    }
+  }, { timezone: 'UTC' })
+
+  cronTasks.set(schedule.id, task)
+}
+
+function unregisterCronJob(id: string): void {
+  const existing = cronTasks.get(id)
+  if (existing) {
+    existing.stop()
+    cronTasks.delete(id)
+  }
+}
+
 const cliRunnerPlugin = () => ({
   name: 'cli-runner',
   configureServer(server: any) {
+    // Initialize cron jobs from persisted schedules on server start
+    const initialSchedules = readSchedules()
+    for (const s of initialSchedules) {
+      if (s.enabled) registerCronJob(s)
+    }
+    console.log(`[dataforge-cron] Loaded ${initialSchedules.filter(s => s.enabled).length} active schedule(s)`)
+
     server.middlewares.use(async (req: any, res: any, next: any) => {
       if (req.url === '/api/capabilities' && req.method === 'GET') {
         res.setHeader('Content-Type', 'application/json')
@@ -464,225 +884,340 @@ const cliRunnerPlugin = () => ({
             const modelField = (model && typeof model === 'string' && model.trim()) ? model.trim() : undefined;
 
             // ─── SYSTEM PROMPT (role instructions) ──────────────────────────────────
-            const systemPrompt = `You are a Dataforge schema generator. Dataforge is a synthetic dataset tool.
+            const systemPrompt = `You are a Dataforge schema generator. Dataforge is a synthetic dataset generation tool.
 Your sole task: read the user's dataset description and output a valid Dataforge YAML schema.
-Output ONLY the raw YAML — no prose, no markdown fences, no comments outside the schema.`;
+
+Critical output rules:
+- Output ONLY raw YAML — no markdown fences (\`\`\`), no prose, no explanation, no trailing text.
+- Follow the format spec and rules in the user message exactly.
+- Self-contained dtypes (name, email, phone, city, country, address, company, text, url, currency, iban, bool, int_seq, uuid) never need faker_provider or choices — omit them.
+- dtype: str always needs either choices:[...] or faker_provider:<name> — never omit both.
+- min/max only on int, float, date — never on any other dtype.
+- Every table must have exactly one primary_key column (dtype: int_seq or uuid).`;
 
             // ─── FORMAT SPEC + FEW-SHOT EXAMPLE (injected into every user message) ──
             // Embedding the spec in the user turn guarantees models that ignore system
             // prompts (local Llama, some fine-tunes) still receive the full format.
-            const formatSpec = `Output ONLY valid Dataforge YAML. No markdown, no explanation.
+            const formatSpec = `Output ONLY valid Dataforge YAML. No markdown fences, no explanation, no comments.
 
-STRUCTURE:
-domain: <snake_case>
+════════════════════════════════════════
+STRUCTURE
+════════════════════════════════════════
+domain: <snake_case_name>
 tables:
-  <name>:
+  <table_name>:
     rows: <int>
     columns:
-      <col>:
+      <column_name>:
         dtype: <dtype>
-        primary_key: true        # one PK per table (int_seq or uuid)
-        nullable: 0              # 0.0–1.0
-        faker_provider: <name>   # optional
-        choices: [A, B]          # optional, for enums
-        min: <val>               # optional, for int/float/date
-        max: <val>               # optional
-        foreign_key:             # optional
-          table: <t>
-          column: <col>
-
-DTYPES: int_seq, uuid, int, float, str, bool, date, email, name, phone, address, city, country, company, text, url, currency, iban
-FAKER: name, first_name, last_name, email, phone_number, address, city, postcode, country, company, job, url, user_name, uuid4, date, past_date, future_date, iban, currency_code, pricetag, text, latitude, longitude, ipv4, credit_card_number
-
-RULES (all mandatory):
-
-1. str columns MUST have choices or faker_provider — never plain str alone:
-   BAD:  status: {dtype: str}
-   GOOD: status: {dtype: str, choices: [active, inactive]}
-   GOOD: category: {dtype: str, faker_provider: job}
-
-2. Every table MUST have exactly one primary_key column (dtype: int_seq or uuid).
-   BAD:  two columns with primary_key: true in the same table
-   BAD:  a table with no primary_key at all
-
-3. foreign_key MUST reference the primary_key column of the target table:
-   BAD:  foreign_key: {table: orders, column: status}
-   GOOD: foreign_key: {table: orders, column: id}
-
-4. min/max are only valid for dtype int, float, or date — never for bool, str, email, name, phone, etc.
-   BAD:  email: {dtype: email, min: 1}
-   GOOD: age:   {dtype: int,   min: 18, max: 99}
-
-5. nullable must be a float between 0.0 and 1.0:
-   BAD:  nullable: true
-   BAD:  nullable: 50
-   GOOD: nullable: 0.2
-
-6. domain must be snake_case (lowercase letters, digits, underscores — no spaces, no hyphens):
-   BAD:  domain: My Domain
-   GOOD: domain: my_domain
-
-EXAMPLE:
+        primary_key: true      # exactly one per table; only on int_seq or uuid columns
+        nullable: 0.0          # float 0.0–1.0; omit if not nullable
+        faker_provider: <name> # only for dtype: str when no choices; never on other dtypes
+        choices: [A, B, C]     # only for dtype: str enums; never on other dtypes
+        min: <val>             # only for dtype: int, float, or date
+        max: <val>             # only for dtype: int, float, or date
+        foreign_key:
+          table: <target_table>
+          column: <pk_column_of_target>
+
+════════════════════════════════════════
+DTYPE REFERENCE  (choose exactly one per column)
+════════════════════════════════════════
+SELF-CONTAINED (generate data automatically — do NOT add faker_provider or choices):
+  int_seq   → auto-increment integer (use for primary keys)
+  uuid      → UUID string (use for primary keys)
+  bool      → true/false
+  email     → realistic e-mail address
+  name      → full person name
+  phone     → phone number
+  address   → street address
+  city      → city name
+  country   → country name
+  company   → company name
+  text      → paragraph of text
+  url       → web URL
+  currency  → currency code (e.g. USD, BRL)
+  iban      → bank account number
+
+NUMERIC (support min/max):
+  int       → integer; use min/max to constrain range
+  float     → decimal; use min/max to constrain range
+
+DATE (supports min/max with relative notation: -1y, -6M, -30d, today, +1y):
+  date      → calendar date
+
+NEEDS choices OR faker_provider:
+  str       → MUST always have either choices:[...] or faker_provider:<name>
+
+FAKER PROVIDERS (use only with dtype: str):
+  first_name, last_name, job, user_name, postcode, slug, bothify,
+  catch_phrase, bs, color_name, language_code, locale, ipv4,
+  credit_card_number, latitude, longitude, currency_code, pricetag
+
+════════════════════════════════════════
+RULES  (all are mandatory — violating any will break generation)
+════════════════════════════════════════
+RULE 1 — str MUST have choices or faker_provider:
+  BAD:  status: {dtype: str}
+  GOOD: status: {dtype: str, choices: [active, inactive, suspended]}
+  GOOD: role:   {dtype: str, faker_provider: job}
+
+RULE 2 — Every table needs exactly ONE primary_key (dtype int_seq or uuid):
+  BAD:  table with no primary_key column
+  BAD:  table with two columns having primary_key: true
+  GOOD: id: {dtype: int_seq, primary_key: true}
+
+RULE 3 — foreign_key.column must be the PK column of the referenced table:
+  BAD:  foreign_key: {table: orders, column: status}   # status is not a PK
+  GOOD: foreign_key: {table: orders, column: id}       # id is the PK
+
+RULE 4 — min/max only on int, float, or date — never on bool/str/email/name/phone/etc.:
+  BAD:  email: {dtype: email, min: 1, max: 100}
+  BAD:  status: {dtype: str, min: 0}
+  GOOD: price: {dtype: float, min: 0.5, max: 9999}
+  GOOD: birth_date: {dtype: date, min: -70y, max: -18y}
+
+RULE 5 — nullable must be a decimal between 0.0 and 1.0:
+  BAD:  nullable: true
+  BAD:  nullable: 50%
+  GOOD: nullable: 0.3
+
+RULE 6 — domain must be snake_case:
+  BAD:  domain: My Dataset
+  BAD:  domain: my-dataset
+  GOOD: domain: my_dataset
+
+RULE 7 — Self-contained dtypes (name, email, phone, city, country, address, company, text,
+  url, currency, iban, bool, int_seq, uuid) do NOT need faker_provider or choices.
+  Adding them is wrong and will be ignored or cause errors.
+  BAD:  name_col: {dtype: name, faker_provider: name}
+  BAD:  email_col: {dtype: email, faker_provider: email}
+  GOOD: full_name: {dtype: name}
+  GOOD: contact_email: {dtype: email}
+
+════════════════════════════════════════
+EXAMPLE (copy this style exactly)
+════════════════════════════════════════
 domain: shop
 tables:
   customers:
     rows: 1000
     columns:
-      id: {dtype: int_seq, primary_key: true}
-      name: {dtype: name, faker_provider: name}
-      email: {dtype: email, faker_provider: email}
-      city: {dtype: city, faker_provider: city}
+      id:
+        dtype: int_seq
+        primary_key: true
+      full_name:
+        dtype: name
+      email:
+        dtype: email
+      phone:
+        dtype: phone
+        nullable: 0.1
+      city:
+        dtype: city
+      segment:
+        dtype: str
+        choices: [retail, wholesale, vip]
+      registered_at:
+        dtype: date
+        min: -3y
+        max: today
   orders:
     rows: 5000
     columns:
-      id: {dtype: int_seq, primary_key: true}
-      customer_id: {dtype: int, foreign_key: {table: customers, column: id}}
-      status: {dtype: str, choices: [pending, shipped, delivered, cancelled]}
-      total: {dtype: float, min: 10, max: 2000}
-      created_at: {dtype: date, min: -2y, max: today}
-
+      id:
+        dtype: int_seq
+        primary_key: true
+      customer_id:
+        dtype: int
+        foreign_key:
+          table: customers
+          column: id
+      status:
+        dtype: str
+        choices: [pending, processing, shipped, delivered, cancelled]
+      total:
+        dtype: float
+        min: 5
+        max: 3000
+      discount:
+        dtype: float
+        min: 0
+        max: 500
+        nullable: 0.6
+      note:
+        dtype: text
+        nullable: 0.8
+      created_at:
+        dtype: date
+        min: -2y
+        max: today
+
+════════════════════════════════════════
 DATASET DESCRIPTION:
+════════════════════════════════════════
 `;
 
             // Final message sent as the user turn
             const fullUserMessage = formatSpec + prompt;
 
             // ─── HELPERS ────────────────────────────────────────────────────────────
-            // Builds an OpenAI-compatible chat body, only including "model" if provided
-            const openAIBody = (extraModel?: string) => {
-              const body: Record<string, any> = {
-                max_tokens: 3000,
-                temperature: 0.1,
-                messages: [
-                  { role: 'system', content: systemPrompt },
-                  { role: 'user', content: fullUserMessage },
-                ],
+            // Calls the selected provider with a given user message and returns raw text.
+            const callProvider = async (userMsg: string): Promise<string> => {
+              const openAIMessages = [
+                { role: 'system', content: systemPrompt },
+                { role: 'user', content: userMsg },
+              ];
+              const buildOpenAIBody = (extraModel?: string) => {
+                const body: Record<string, any> = {
+                  max_tokens: 3000,
+                  temperature: 0.1,
+                  messages: openAIMessages,
+                };
+                const m = modelField ?? extraModel;
+                if (m) body.model = m;
+                return body;
+              };
+              const callOpenAICompat = async (baseUrl: string, key: string) => {
+                const response = await fetch(`${baseUrl}/chat/completions`, {
+                  method: 'POST',
+                  headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${key}` },
+                  body: JSON.stringify(buildOpenAIBody()),
+                });
+                if (!response.ok) throw new Error(`API error ${response.status}: ${await response.text()}`);
+                const data: any = await response.json();
+                return (data.choices?.[0]?.message?.content ?? '') as string;
               };
-              const m = modelField ?? extraModel;
-              if (m) body.model = m;
-              return body;
-            };
 
-            const callOpenAICompat = async (baseUrl: string, key: string) => {
-              const response = await fetch(`${baseUrl}/chat/completions`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${key}` },
-                body: JSON.stringify(openAIBody()),
-              });
-              if (!response.ok) throw new Error(`API error ${response.status}: ${await response.text()}`);
-              const data: any = await response.json();
-              return (data.choices?.[0]?.message?.content ?? '') as string;
-            };
+              if (provider === 'anthropic') {
+                const anthropicBody: Record<string, any> = {
+                  max_tokens: 3000,
+                  temperature: 0.1,
+                  system: systemPrompt,
+                  messages: [{ role: 'user', content: userMsg }],
+                };
+                if (modelField) anthropicBody.model = modelField;
+                const response = await fetch('https://api.anthropic.com/v1/messages', {
+                  method: 'POST',
+                  headers: {
+                    'Content-Type': 'application/json',
+                    'x-api-key': apiKey,
+                    'anthropic-version': '2023-06-01',
+                  },
+                  body: JSON.stringify(anthropicBody),
+                });
+                if (!response.ok) throw new Error(`Anthropic API error ${response.status}: ${await response.text()}`);
+                const data: any = await response.json();
+                return data.content?.[0]?.text ?? '';
+
+              } else if (provider === 'openai') {
+                return callOpenAICompat('https://api.openai.com/v1', apiKey);
+
+              } else if (provider === 'google') {
+                if (!modelField) throw new Error('Google requires a model name. Fill in the Model field (e.g. gemini-1.5-flash or gemini-2.0-flash-lite).');
+                const googleModelId = modelField.replace(/^models\//, '');
+                const response = await fetch(
+                  `https://generativelanguage.googleapis.com/v1beta/models/${googleModelId}:generateContent?key=${apiKey}`,
+                  {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                      systemInstruction: { parts: [{ text: systemPrompt }] },
+                      contents: [{ role: 'user', parts: [{ text: userMsg }] }],
+                      generationConfig: { temperature: 0.1, maxOutputTokens: 3000 },
+                    }),
+                  }
+                );
+                if (!response.ok) throw new Error(`Google API error ${response.status}: ${await response.text()}`);
+                const data: any = await response.json();
+                return data.candidates?.[0]?.content?.parts?.[0]?.text ?? '';
 
-            let yamlResult = '';
+              } else if (provider === 'groq') {
+                return callOpenAICompat('https://api.groq.com/openai/v1', apiKey);
 
-            if (provider === 'anthropic') {
-              const anthropicBody: Record<string, any> = {
-                max_tokens: 3000,
-                temperature: 0.1,
-                system: systemPrompt,
-                messages: [{ role: 'user', content: fullUserMessage }],
-              };
-              if (modelField) anthropicBody.model = modelField;
-              const response = await fetch('https://api.anthropic.com/v1/messages', {
-                method: 'POST',
-                headers: {
-                  'Content-Type': 'application/json',
-                  'x-api-key': apiKey,
-                  'anthropic-version': '2023-06-01',
-                },
-                body: JSON.stringify(anthropicBody),
-              });
-              if (!response.ok) throw new Error(`Anthropic API error ${response.status}: ${await response.text()}`);
-              const data: any = await response.json();
-              yamlResult = data.content?.[0]?.text ?? '';
+              } else if (provider === 'mistral') {
+                return callOpenAICompat('https://api.mistral.ai/v1', apiKey);
 
-            } else if (provider === 'openai') {
-              yamlResult = await callOpenAICompat('https://api.openai.com/v1', apiKey);
+              } else if (provider === 'together') {
+                return callOpenAICompat('https://api.together.xyz/v1', apiKey);
 
-            } else if (provider === 'google') {
-              if (!modelField) {
-                res.statusCode = 400;
-                res.setHeader('Content-Type', 'application/json');
-                res.end(JSON.stringify({ error: 'Google requires a model name. Fill in the Model field (e.g. gemini-1.5-flash or gemini-2.0-flash-lite).' }));
-                return;
-              }
-              // Strip any leading "models/" prefix — the URL already includes it
-              const googleModelId = modelField.replace(/^models\//, '');
-              const response = await fetch(
-                `https://generativelanguage.googleapis.com/v1beta/models/${googleModelId}:generateContent?key=${apiKey}`,
-                {
+              } else if (provider === 'ollama') {
+                const response = await fetch('http://localhost:11434/v1/chat/completions', {
                   method: 'POST',
                   headers: { 'Content-Type': 'application/json' },
-                  body: JSON.stringify({
-                    systemInstruction: { parts: [{ text: systemPrompt }] },
-                    contents: [{ role: 'user', parts: [{ text: fullUserMessage }] }],
-                    generationConfig: { temperature: 0.1, maxOutputTokens: 3000 },
-                  }),
-                }
-              );
-              if (!response.ok) throw new Error(`Google API error ${response.status}: ${await response.text()}`);
-              const data: any = await response.json();
-              yamlResult = data.candidates?.[0]?.content?.parts?.[0]?.text ?? '';
+                  body: JSON.stringify(buildOpenAIBody()),
+                });
+                if (!response.ok) throw new Error(`Ollama error ${response.status}: ${await response.text()}`);
+                const data: any = await response.json();
+                return data.choices?.[0]?.message?.content ?? '';
 
-            } else if (provider === 'groq') {
-              yamlResult = await callOpenAICompat('https://api.groq.com/openai/v1', apiKey);
-
-            } else if (provider === 'mistral') {
-              yamlResult = await callOpenAICompat('https://api.mistral.ai/v1', apiKey);
+              } else {
+                throw new Error(`Unknown provider "${provider}".`);
+              }
+            };
 
-            } else if (provider === 'together') {
-              yamlResult = await callOpenAICompat('https://api.together.xyz/v1', apiKey);
+            // Validates the raw YAML string. Returns null on success or an error message.
+            const { parse: parseYaml } = await import('yaml');
+            const validateYaml = (raw: string): string | null => {
+              if (!raw) return 'A IA retornou uma resposta vazia.';
+              try {
+                parseYaml(raw);
+                return null;
+              } catch (e: any) {
+                const msg: string = e?.message ?? String(e);
+                if (msg.includes('Map keys must be unique')) {
+                  const lineMatch = msg.match(/line (\d+)/i);
+                  const location = lineMatch ? ` (linha ${lineMatch[1]})` : '';
+                  return `Colunas com nomes duplicados${location} — use nomes únicos em cada tabela.`;
+                }
+                return `YAML inválido: ${msg}`;
+              }
+            };
 
-            } else if (provider === 'ollama') {
-              const response = await fetch('http://localhost:11434/v1/chat/completions', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(openAIBody()),
-              });
-              if (!response.ok) throw new Error(`Ollama error ${response.status}: ${await response.text()}`);
-              const data: any = await response.json();
-              yamlResult = data.choices?.[0]?.message?.content ?? '';
+            // ─── GENERATION WITH AUTO-RETRY ─────────────────────────────────────────
+            // Up to MAX_RETRIES additional attempts after the first. On each retry the
+            // error and the bad YAML are fed back to the model as correction context.
+            const MAX_RETRIES = 2;
+            let yamlResult = '';
+            let lastValidationError = '';
+            let lastBadYaml = '';
+            let succeeded = false;
+
+            for (let attempt = 0; attempt <= MAX_RETRIES; attempt++) {
+              // On retries, augment the prompt with the error and the bad output.
+              let userMsg = fullUserMessage;
+              if (attempt > 0) {
+                userMsg =
+                  fullUserMessage +
+                  `\n\n════════════════════════════════════════\n` +
+                  `PREVIOUS ATTEMPT ${attempt}/${MAX_RETRIES} PRODUCED INVALID YAML.\n` +
+                  `Error: ${lastValidationError}\n\n` +
+                  `Invalid YAML produced:\n${lastBadYaml}\n\n` +
+                  `Rewrite the ENTIRE schema from scratch, fixing every error listed above.\n` +
+                  `Output ONLY the corrected YAML — no explanation, no markdown fences.\n` +
+                  `════════════════════════════════════════\n`;
+              }
 
-            } else {
-              res.statusCode = 400;
-              res.setHeader('Content-Type', 'application/json');
-              res.end(JSON.stringify({ error: `Unknown provider "${provider}".` }));
-              return;
-            }
+              const raw = await callProvider(userMsg);
+              // Strip markdown code fences if the model adds them despite instructions
+              yamlResult = raw.replace(/^```(?:yaml)?\n?/m, '').replace(/\n?```$/m, '').trim();
 
-            // Strip markdown code fences if present
-            yamlResult = yamlResult.replace(/^```(?:yaml)?\n?/m, '').replace(/\n?```$/m, '').trim();
+              const validationError = validateYaml(yamlResult);
+              if (!validationError) {
+                succeeded = true;
+                break;
+              }
 
-            // Validate YAML before returning — detect duplicate keys and empty output
-            if (!yamlResult) {
-              res.statusCode = 422;
-              res.setHeader('Content-Type', 'application/json');
-              res.end(JSON.stringify({ error: 'A IA retornou uma resposta vazia. Tente reformular seu prompt.' }));
-              return;
+              lastValidationError = validationError;
+              lastBadYaml = yamlResult;
             }
 
-            try {
-              const { parse: parseYaml } = await import('yaml');
-              parseYaml(yamlResult); // throws if invalid (e.g. duplicate keys)
-            } catch (yamlErr: any) {
-              const msg: string = yamlErr?.message ?? String(yamlErr);
-              if (msg.includes('Map keys must be unique')) {
-                const lineMatch = msg.match(/line (\d+)/i);
-                const location = lineMatch ? ` (linha ${lineMatch[1]} do YAML gerado)` : '';
-                res.statusCode = 422;
-                res.setHeader('Content-Type', 'application/json');
-                res.end(JSON.stringify({
-                  error: `A IA gerou colunas com nomes duplicados${location}. Tente gerar novamente — se o problema persistir, adicione ao prompt: "use unique column names in every table".`,
-                  yaml: yamlResult,
-                }));
-                return;
-              }
+            if (!succeeded) {
               res.statusCode = 422;
               res.setHeader('Content-Type', 'application/json');
               res.end(JSON.stringify({
-                error: `O YAML gerado pela IA é inválido: ${msg}`,
-                yaml: yamlResult,
+                error: `A IA não conseguiu gerar um YAML válido após ${MAX_RETRIES + 1} tentativas. Último erro: ${lastValidationError}`,
+                yaml: lastBadYaml,
               }));
               return;
             }
@@ -779,6 +1314,247 @@ DATASET DESCRIPTION:
         return;
       }
 
+      // ── Schedules API ─────────────────────────────────────────────────────
+
+      if (req.url === '/api/schedules' && req.method === 'GET') {
+        if (!getAuthUser(req)) { res.statusCode = 401; res.setHeader('Content-Type', 'application/json'); res.end(JSON.stringify({ error: 'Unauthorized' })); return; }
+        res.setHeader('Content-Type', 'application/json');
+        res.end(JSON.stringify(readSchedules()));
+        return;
+      }
+
+      if (req.url === '/api/schedules' && req.method === 'POST') {
+        let body = '';
+        req.on('data', (chunk: Buffer) => { body += chunk.toString(); });
+        req.on('end', () => {
+          if (!getAuthUser(req)) { res.statusCode = 401; res.setHeader('Content-Type', 'application/json'); res.end(JSON.stringify({ error: 'Unauthorized' })); return; }
+          try {
+            const { name, cronExpression, config } = JSON.parse(body);
+            if (!name?.trim()) { res.statusCode = 400; res.end(JSON.stringify({ error: 'name is required' })); return; }
+            if (!cronExpression?.trim() || !cron.validate(cronExpression.trim())) {
+              res.statusCode = 400; res.end(JSON.stringify({ error: 'Invalid cron expression' })); return;
+            }
+            if (!config?.yamlStr?.trim()) { res.statusCode = 400; res.end(JSON.stringify({ error: 'config.yamlStr is required' })); return; }
+            const schedule: Schedule = {
+              id: newUuid(),
+              name: name.trim(),
+              cronExpression: cronExpression.trim(),
+              enabled: true,
+              config,
+              createdAt: new Date().toISOString(),
+            };
+            const schedules = readSchedules();
+            schedules.push(schedule);
+            writeSchedules(schedules);
+            registerCronJob(schedule);
+            res.setHeader('Content-Type', 'application/json');
+            res.end(JSON.stringify(schedule));
+          } catch (e: any) {
+            res.statusCode = 500; res.end(JSON.stringify({ error: e.message }));
+          }
+        });
+        return;
+      }
+
+      const scheduleIdMatch = req.url?.match(/^\/api\/schedules\/([a-z0-9-]+)$/);
+
+      if (scheduleIdMatch && req.method === 'PUT') {
+        let body = '';
+        req.on('data', (chunk: Buffer) => { body += chunk.toString(); });
+        req.on('end', () => {
+          if (!getAuthUser(req)) { res.statusCode = 401; res.setHeader('Content-Type', 'application/json'); res.end(JSON.stringify({ error: 'Unauthorized' })); return; }
+          try {
+            const id = scheduleIdMatch[1];
+            const patch = JSON.parse(body);
+            let schedules = readSchedules();
+            const idx = schedules.findIndex(s => s.id === id);
+            if (idx === -1) { res.statusCode = 404; res.end(JSON.stringify({ error: 'Not found' })); return; }
+            if (patch.cronExpression && !cron.validate(patch.cronExpression)) {
+              res.statusCode = 400; res.end(JSON.stringify({ error: 'Invalid cron expression' })); return;
+            }
+            schedules[idx] = { ...schedules[idx], ...patch };
+            writeSchedules(schedules);
+            // Re-register (handles enable/disable/expression changes)
+            if (schedules[idx].enabled) {
+              registerCronJob(schedules[idx]);
+            } else {
+              unregisterCronJob(id);
+            }
+            res.setHeader('Content-Type', 'application/json');
+            res.end(JSON.stringify(schedules[idx]));
+          } catch (e: any) {
+            res.statusCode = 500; res.end(JSON.stringify({ error: e.message }));
+          }
+        });
+        return;
+      }
+
+      if (scheduleIdMatch && req.method === 'DELETE') {
+        if (!getAuthUser(req)) { res.statusCode = 401; res.setHeader('Content-Type', 'application/json'); res.end(JSON.stringify({ error: 'Unauthorized' })); return; }
+        const id = scheduleIdMatch[1];
+        let schedules = readSchedules();
+        if (!schedules.find(s => s.id === id)) { res.statusCode = 404; res.end(JSON.stringify({ error: 'Not found' })); return; }
+        unregisterCronJob(id);
+        schedules = schedules.filter(s => s.id !== id);
+        writeSchedules(schedules);
+        res.setHeader('Content-Type', 'application/json');
+        res.end(JSON.stringify({ success: true }));
+        return;
+      }
+
+      const scheduleRunMatch = req.url?.match(/^\/api\/schedules\/([a-z0-9-]+)\/run$/);
+      if (scheduleRunMatch && req.method === 'POST') {
+        if (!getAuthUser(req)) { res.statusCode = 401; res.setHeader('Content-Type', 'application/json'); res.end(JSON.stringify({ error: 'Unauthorized' })); return; }
+        const id = scheduleRunMatch[1];
+        const schedule = readSchedules().find(s => s.id === id);
+        if (!schedule) { res.statusCode = 404; res.end(JSON.stringify({ error: 'Not found' })); return; }
+        // Fire and return immediately with the run ID; client polls /api/run-history
+        const runId = newUuid();
+        const startedAt = new Date().toISOString();
+        res.setHeader('Content-Type', 'application/json');
+        res.end(JSON.stringify({ runId, startedAt }));
+        runScheduleJob(schedule, 'manual').then(r => {
+          console.log(`[dataforge-cron] Manual run "${schedule.name}" finished — status: ${r.status}`);
+        });
+        return;
+      }
+
+      if (req.url?.startsWith('/api/run-history') && req.method === 'GET') {
+        if (!getAuthUser(req)) { res.statusCode = 401; res.setHeader('Content-Type', 'application/json'); res.end(JSON.stringify({ error: 'Unauthorized' })); return; }
+        const urlObj = new URL(req.url, 'http://localhost');
+        const filterScheduleId = urlObj.searchParams.get('scheduleId');
+        const limit = parseInt(urlObj.searchParams.get('limit') ?? '100', 10);
+        let history = readHistory();
+        if (filterScheduleId) history = history.filter(r => r.scheduleId === filterScheduleId);
+        // Return most recent first
+        history = history.slice().reverse().slice(0, limit);
+        res.setHeader('Content-Type', 'application/json');
+        res.end(JSON.stringify(history));
+        return;
+      }
+
+      // ── Auth endpoints ────────────────────────────────────────────────────
+      if (req.url === '/api/auth/register' && req.method === 'POST') {
+        let body = '';
+        req.on('data', (chunk: Buffer) => { body += chunk.toString(); });
+        req.on('end', () => {
+          try {
+            const { username, password } = JSON.parse(body);
+            if (!username?.trim() || !password) {
+              res.statusCode = 400; res.setHeader('Content-Type', 'application/json');
+              res.end(JSON.stringify({ error: 'Username and password are required.' })); return;
+            }
+            const clean = username.trim().toLowerCase();
+            if (!/^[a-z0-9_-]{3,32}$/.test(clean)) {
+              res.statusCode = 400; res.setHeader('Content-Type', 'application/json');
+              res.end(JSON.stringify({ error: 'Username must be 3–32 characters (letters, numbers, _ or -).' })); return;
+            }
+            if (password.length < 6) {
+              res.statusCode = 400; res.setHeader('Content-Type', 'application/json');
+              res.end(JSON.stringify({ error: 'Password must be at least 6 characters.' })); return;
+            }
+            const users = readUsers();
+            if (users[clean]) {
+              res.statusCode = 409; res.setHeader('Content-Type', 'application/json');
+              res.end(JSON.stringify({ error: 'Username already taken.' })); return;
+            }
+            const { hash, salt } = hashPassword(password);
+            const user: AuthUser = { id: newUuid(), username: clean, passwordHash: hash, salt, createdAt: new Date().toISOString() };
+            users[clean] = user;
+            writeUsers(users);
+            const token = signToken({ id: user.id, username: user.username });
+            res.setHeader('Content-Type', 'application/json');
+            res.end(JSON.stringify({ token, username: user.username }));
+          } catch (e: any) {
+            res.statusCode = 500; res.setHeader('Content-Type', 'application/json');
+            res.end(JSON.stringify({ error: e.message || String(e) }));
+          }
+        });
+        return;
+      }
+
+      if (req.url === '/api/auth/login' && req.method === 'POST') {
+        let body = '';
+        req.on('data', (chunk: Buffer) => { body += chunk.toString(); });
+        req.on('end', () => {
+          try {
+            const { username, password } = JSON.parse(body);
+            if (!username?.trim() || !password) {
+              res.statusCode = 400; res.setHeader('Content-Type', 'application/json');
+              res.end(JSON.stringify({ error: 'Username and password are required.' })); return;
+            }
+            const clean = username.trim().toLowerCase();
+            const users = readUsers();
+            const user = users[clean];
+            if (!user || !verifyPassword(password, user.passwordHash, user.salt)) {
+              res.statusCode = 401; res.setHeader('Content-Type', 'application/json');
+              res.end(JSON.stringify({ error: 'Invalid username or password.' })); return;
+            }
+            const token = signToken({ id: user.id, username: user.username });
+            res.setHeader('Content-Type', 'application/json');
+            res.end(JSON.stringify({ token, username: user.username }));
+          } catch (e: any) {
+            res.statusCode = 500; res.setHeader('Content-Type', 'application/json');
+            res.end(JSON.stringify({ error: e.message || String(e) }));
+          }
+        });
+        return;
+      }
+
+      if (req.url === '/api/auth/me' && req.method === 'GET') {
+        const authUser = getAuthUser(req);
+        if (!authUser) { res.statusCode = 401; res.setHeader('Content-Type', 'application/json'); res.end(JSON.stringify({ error: 'Unauthorized' })); return; }
+        res.setHeader('Content-Type', 'application/json');
+        res.end(JSON.stringify({ username: authUser.username }));
+        return;
+      }
+
+      // ── Profile env-keys endpoints ────────────────────────────────────────
+      if (req.url === '/api/profile/env-keys' && req.method === 'GET') {
+        const authUser = getAuthUser(req);
+        if (!authUser) { res.statusCode = 401; res.setHeader('Content-Type', 'application/json'); res.end(JSON.stringify({ error: 'Unauthorized' })); return; }
+        const keys = readEnvKeys(authUser.username);
+        res.setHeader('Content-Type', 'application/json');
+        res.end(JSON.stringify(keys));
+        return;
+      }
+
+      if (req.url === '/api/profile/env-keys' && req.method === 'POST') {
+        const authUser = getAuthUser(req);
+        if (!authUser) { res.statusCode = 401; res.setHeader('Content-Type', 'application/json'); res.end(JSON.stringify({ error: 'Unauthorized' })); return; }
+        let body = '';
+        req.on('data', (chunk: Buffer) => { body += chunk.toString(); });
+        req.on('end', () => {
+          try {
+            const { key, value } = JSON.parse(body);
+            if (!key?.trim()) { res.statusCode = 400; res.setHeader('Content-Type', 'application/json'); res.end(JSON.stringify({ error: 'Key is required.' })); return; }
+            if (!/^[A-Z0-9_]+$/.test(key.trim())) { res.statusCode = 400; res.setHeader('Content-Type', 'application/json'); res.end(JSON.stringify({ error: 'Key must be uppercase letters, numbers and underscores (e.g. AWS_ACCESS_KEY).' })); return; }
+            const keys = readEnvKeys(authUser.username);
+            keys[key.trim()] = value ?? '';
+            writeEnvKeys(authUser.username, keys);
+            res.setHeader('Content-Type', 'application/json');
+            res.end(JSON.stringify({ success: true }));
+          } catch (e: any) {
+            res.statusCode = 500; res.setHeader('Content-Type', 'application/json');
+            res.end(JSON.stringify({ error: e.message || String(e) }));
+          }
+        });
+        return;
+      }
+
+      const envKeyMatch = req.url?.match(/^\/api\/profile\/env-keys\/(.+)$/);
+      if (envKeyMatch && req.method === 'DELETE') {
+        const authUser = getAuthUser(req);
+        if (!authUser) { res.statusCode = 401; res.setHeader('Content-Type', 'application/json'); res.end(JSON.stringify({ error: 'Unauthorized' })); return; }
+        const keyName = decodeURIComponent(envKeyMatch[1]);
+        const keys = readEnvKeys(authUser.username);
+        delete keys[keyName];
+        writeEnvKeys(authUser.username, keys);
+        res.setHeader('Content-Type', 'application/json');
+        res.end(JSON.stringify({ success: true }));
+        return;
+      }
+
       next();
     });
   }
@@ -795,6 +1571,7 @@ export default defineConfig({
   server: {
     host: '0.0.0.0',  // Required for Docker
     port: 5173,
+    allowedHosts: 'all',
     fs: {
       allow: ['../schemas', '.']
     }
diff --git a/src/dataforge/frontend/vitest.config.ts b/src/dataforge/frontend/vitest.config.ts
new file mode 100644
index 0000000..f6f9a99
--- /dev/null
+++ b/src/dataforge/frontend/vitest.config.ts
@@ -0,0 +1,16 @@
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./src/test/setup.ts'],
+    globals: true,
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'lcov'],
+      include: ['src/services/**', 'src/components/**'],
+    },
+  },
+})