Spaces:

karlexmarin
/

taf-agent

Running

karlexmarin Claude Opus 4.7 (1M context) commited on 16 days ago

Commit

ed3d534

1 Parent(s): 137cb0a

feat(v0.2): full i18n coverage + round flag buttons + loading progress bar

UI improvements based on self-test feedback:

- Round flag buttons (36px circular) with tooltip-on-hover label below.
Active language gets glowing border + accent background.
- Loading progress bar: shimmering indeterminate + discrete progress
(Pyodide load → 50%, TAF load → 95%, ready → hide). Visible during
the ~10-30s initial boot so users know something is happening.
- Expanded data-i18n coverage to ALL visible text:
* Mode tab buttons (Profile/Compare/Ask/Recipe)
* Profile section: preset label, HF id label, fetch button, generate button
* Compare section: recipe label, T_eval label, models title, compare button
* Ask section: title, placeholder, analyze button, example button
* Recipe section: title, default option
* Form section: input title, preset label, HF label, fetch button, run button
* Output sections: verdict title, chain title, chain desc, answer title,
share button, TAF Card title, comparison title
- New translation keys: profile.hf_placeholder, compare.hf_placeholder
(placeholders use data-i18n-placeholder attribute)
- Removed accidentally duplicated ask-section block

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Files changed (4) hide show

index.html +50 -44
js/i18n.js +16 -4
js/main.js +22 -3
style.css +66 -8

index.html CHANGED Viewed

@@ -10,12 +10,12 @@
 </head>
 <body>
   <header>
-    <!-- Language switcher (top-right) -->
     <div class="lang-switcher">
-      <button class="lang-btn" data-lang="en" title="English">🇬🇧</button>
-      <button class="lang-btn" data-lang="es" title="Español">🇪🇸</button>
-      <button class="lang-btn" data-lang="fr" title="Français">🇫🇷</button>
-      <button class="lang-btn" data-lang="zh" title="中文">🇨🇳</button>
     </div>
     <h1 data-i18n="hero.title">🔬 TAF Agent</h1>
@@ -141,8 +141,13 @@
   </div>
   <main>
-    <!-- Status -->
-    <section id="status-bar"><div id="status">⏳ Loading Python runtime...</div></section>
     <!-- Mode toggle -->
     <section id="mode-section">
@@ -179,23 +184,24 @@
           what's its full viability profile?" → paste id → Profile → done.
         </span></span>
       </h2>
-      <p class="recipe-desc">
         <strong>For technicians</strong>: when you need a complete viability snapshot
         of a candidate model. Outputs match paper §sec:gamma_decomposition format.
       </p>
       <div class="form-row">
-        <label for="profile-preset">Preset:</label>
         <select id="profile-preset" disabled>
-          <option value="">— or pick from list —</option>
         </select>
       </div>
       <div class="form-row">
-        <label for="profile-hf-id">HF model id:</label>
         <input type="text" id="profile-hf-id"
           placeholder="e.g. meta-llama/Meta-Llama-3-8B or Qwen/Qwen2.5-7B" style="flex:1;" />
-        <button id="profile-fetch-btn" type="button" class="secondary">📥 Fetch</button>
       </div>
       <div id="profile-hf-status" class="subtle" style="margin: -0.5rem 0 1rem; min-height:1.2em;"></div>
@@ -241,7 +247,7 @@
         </div>
       </div>
-      <button id="profile-btn" disabled>🚀 Generate full profile</button>
     </section>
     <!-- COMPARE mode -->
@@ -257,20 +263,20 @@
           best: Llama-3-8B, Mistral-7B, or Qwen-7B?" → pick 3 + X-2 + 16K → see winner.
         </span></span>
       </h2>
-      <p class="recipe-desc">
         <strong>For technicians</strong>: when choosing between 2-3 candidate models for
         a specific deployment scenario. Compare their verdicts on the same recipe.
       </p>
       <div class="form-row">
-        <label for="compare-recipe">Recipe:</label>
         <select id="compare-recipe" disabled>
-          <option value="">— pick a recipe —</option>
         </select>
       </div>
       <div class="form-row">
-        <label for="compare-T_eval">T_eval (target context):</label>
         <input type="number" id="compare-T_eval" value="16000" style="flex:1;" />
         <span class="info" style="margin-top:0.5rem;"><span class="tooltip">
           For X-2 / X-19 only. The context length all compared models will be
@@ -279,7 +285,7 @@
       </div>
       <div id="compare-models">
-        <h3 style="margin-top:1rem;">Models to compare (add up to 3)</h3>
         <div class="compare-slot" data-slot="1">
           <input type="text" class="compare-hf-id" placeholder="HF model id (e.g. meta-llama/Meta-Llama-3-8B)" />
           <select class="compare-preset">
@@ -300,82 +306,82 @@
         </div>
       </div>
-      <button id="compare-btn" disabled style="margin-top:1rem;">🚀 Compare</button>
     </section>
-    <!-- ASK mode -->
     <section id="ask-section" style="display:none;">
-    <!-- Free-form question (mode=ask) -->
-    <section id="ask-section">
-      <h2>❓ Your question</h2>
-      <textarea id="question" rows="3" placeholder="e.g. Will Mistral-7B handle 16K NIAH retrieval? Or: I have $5,000, what model can I train? Or: Cheapest GPU to serve Llama-70B at 100M tokens/day?"></textarea>
       <div style="display:flex; gap:0.5rem; margin-top:0.5rem; flex-wrap:wrap;">
-        <button id="ask-btn" disabled>🚀 Analyze</button>
-        <button id="example-btn" type="button" class="secondary">💡 Try an example</button>
       </div>
     </section>
     <!-- Recipe selector (mode=recipe) -->
     <section id="recipe-section" style="display:none;">
-      <h2>📋 Recipe</h2>
       <select id="recipe-select" disabled>
-        <option value="">— select a recipe —</option>
       </select>
       <p id="recipe-desc-display" class="recipe-desc"></p>
     </section>
     <!-- Form (mode=recipe) -->
     <section id="form-section" style="display:none;">
-      <h2>🎯 Inputs</h2>
       <div class="form-row">
-        <label for="preset">Preset model:</label>
         <select id="preset" disabled>
-          <option value="">— select to autofill —</option>
         </select>
       </div>
       <div class="form-row">
-        <label for="hf-id">Or any HF model:</label>
-        <input type="text" id="hf-id" placeholder="e.g. Qwen/Qwen2.5-32B-Instruct" style="flex:1;" />
-        <button id="hf-fetch-btn" type="button" class="secondary">📥 Fetch</button>
       </div>
       <div id="hf-status" class="subtle" style="margin: -0.5rem 0 1rem; min-height:1.2em;"></div>
-      <!-- Dynamic form fields based on recipe -->
       <div id="dynamic-form" class="form-grid"></div>
-      <button id="run-btn" disabled>🚀 Analyze</button>
     </section>
     <!-- Output (single-recipe verdict + chain) -->
     <section id="output-section" style="display:none;">
-      <h2>📊 Verdict</h2>
       <div id="verdict-box"></div>
       <div style="margin: 0.75rem 0;">
-        <button id="share-btn" class="secondary" type="button">🔗 Copy share link</button>
         <span id="share-status" class="subtle" style="margin-left:0.75rem;"></span>
       </div>
-      <h2>🔍 Computation Chain</h2>
-      <p class="subtle">Every number below is deterministic Python. Click a step to expand.</p>
       <div id="chain-box"></div>
-      <h2 id="answer-header" style="display:none;">💬 Plain-English Answer</h2>
       <div id="answer-box" style="display:none;"></div>
     </section>
     <!-- Profile output -->
     <section id="profile-output" style="display:none;">
-      <h2>📇 TAF Card — full model profile</h2>
       <div id="profile-box"></div>
     </section>
     <!-- Compare output -->
     <section id="compare-output" style="display:none;">
-      <h2>🆚 Comparison Table</h2>
       <div id="compare-box"></div>
     </section>
   </main>

 </head>
 <body>
   <header>
+    <!-- Language switcher (top-right, round flags) -->
     <div class="lang-switcher">
+      <button class="lang-btn" data-lang="en" data-label="English" title="English">🇬🇧</button>
+      <button class="lang-btn" data-lang="es" data-label="Español" title="Español">🇪🇸</button>
+      <button class="lang-btn" data-lang="fr" data-label="Français" title="Français">🇫🇷</button>
+      <button class="lang-btn" data-lang="zh" data-label="中文" title="中文">🇨🇳</button>
     </div>
     <h1 data-i18n="hero.title">🔬 TAF Agent</h1>
   </div>
   <main>
+    <!-- Status with loading bar -->
+    <section id="status-bar">
+      <div id="status" data-i18n="status.loading_pyodide">⏳ Loading Python runtime...</div>
+      <div id="loading-bar-wrap" style="display:none;">
+        <div id="loading-bar"></div>
+      </div>
+    </section>
     <!-- Mode toggle -->
     <section id="mode-section">
           what's its full viability profile?" → paste id → Profile → done.
         </span></span>
       </h2>
+      <p class="recipe-desc" data-i18n="profile.desc">
         <strong>For technicians</strong>: when you need a complete viability snapshot
         of a candidate model. Outputs match paper §sec:gamma_decomposition format.
       </p>
       <div class="form-row">
+        <label for="profile-preset" data-i18n="profile.preset_label">Preset:</label>
         <select id="profile-preset" disabled>
+          <option value="" data-i18n="profile.preset_default">— or pick from list —</option>
         </select>
       </div>
       <div class="form-row">
+        <label for="profile-hf-id" data-i18n="profile.hf_label">HF model id:</label>
         <input type="text" id="profile-hf-id"
+          data-i18n-placeholder="profile.hf_placeholder"
           placeholder="e.g. meta-llama/Meta-Llama-3-8B or Qwen/Qwen2.5-7B" style="flex:1;" />
+        <button id="profile-fetch-btn" type="button" class="secondary" data-i18n="profile.fetch_btn">📥 Fetch</button>
       </div>
       <div id="profile-hf-status" class="subtle" style="margin: -0.5rem 0 1rem; min-height:1.2em;"></div>
         </div>
       </div>
+      <button id="profile-btn" disabled data-i18n="profile.btn">🚀 Generate full profile</button>
     </section>
     <!-- COMPARE mode -->
           best: Llama-3-8B, Mistral-7B, or Qwen-7B?" → pick 3 + X-2 + 16K → see winner.
         </span></span>
       </h2>
+      <p class="recipe-desc" data-i18n="compare.desc">
         <strong>For technicians</strong>: when choosing between 2-3 candidate models for
         a specific deployment scenario. Compare their verdicts on the same recipe.
       </p>
       <div class="form-row">
+        <label for="compare-recipe" data-i18n="compare.recipe_label">Recipe:</label>
         <select id="compare-recipe" disabled>
+          <option value="" data-i18n="recipe.default">— pick a recipe —</option>
         </select>
       </div>
       <div class="form-row">
+        <label for="compare-T_eval" data-i18n="compare.T_eval_label">T_eval (target context):</label>
         <input type="number" id="compare-T_eval" value="16000" style="flex:1;" />
         <span class="info" style="margin-top:0.5rem;"><span class="tooltip">
           For X-2 / X-19 only. The context length all compared models will be
       </div>
       <div id="compare-models">
+        <h3 style="margin-top:1rem;" data-i18n="compare.models_title">Models to compare (add up to 3)</h3>
         <div class="compare-slot" data-slot="1">
           <input type="text" class="compare-hf-id" placeholder="HF model id (e.g. meta-llama/Meta-Llama-3-8B)" />
           <select class="compare-preset">
         </div>
       </div>
+      <button id="compare-btn" disabled style="margin-top:1rem;" data-i18n="compare.btn">🚀 Compare</button>
     </section>
+    <!-- ASK mode (free-form question) -->
     <section id="ask-section" style="display:none;">
+      <h2 data-i18n="ask.title">❓ Your question</h2>
+      <textarea id="question" rows="3"
+        data-i18n-placeholder="ask.placeholder"
+        placeholder="e.g. Will Mistral-7B handle 16K NIAH retrieval? Or: I have $5,000, what model can I train? Or: Cheapest GPU to serve Llama-70B at 100M tokens/day?"></textarea>
       <div style="display:flex; gap:0.5rem; margin-top:0.5rem; flex-wrap:wrap;">
+        <button id="ask-btn" disabled data-i18n="ask.btn">🚀 Analyze</button>
+        <button id="example-btn" type="button" class="secondary" data-i18n="ask.example_btn">💡 Try an example</button>
       </div>
     </section>
     <!-- Recipe selector (mode=recipe) -->
     <section id="recipe-section" style="display:none;">
+      <h2 data-i18n="recipe.title">📋 Recipe</h2>
       <select id="recipe-select" disabled>
+        <option value="" data-i18n="recipe.default">— select a recipe —</option>
       </select>
       <p id="recipe-desc-display" class="recipe-desc"></p>
     </section>
     <!-- Form (mode=recipe) -->
     <section id="form-section" style="display:none;">
+      <h2 data-i18n="recipe.input_title">🎯 Inputs</h2>
       <div class="form-row">
+        <label for="preset" data-i18n="profile.preset_label">Preset model:</label>
         <select id="preset" disabled>
+          <option value="" data-i18n="profile.preset_default">— select to autofill —</option>
         </select>
       </div>
       <div class="form-row">
+        <label for="hf-id" data-i18n="profile.hf_label">Or any HF model:</label>
+        <input type="text" id="hf-id"
+          data-i18n-placeholder="profile.hf_placeholder"
+          placeholder="e.g. Qwen/Qwen2.5-32B-Instruct" style="flex:1;" />
+        <button id="hf-fetch-btn" type="button" class="secondary" data-i18n="profile.fetch_btn">📥 Fetch</button>
       </div>
       <div id="hf-status" class="subtle" style="margin: -0.5rem 0 1rem; min-height:1.2em;"></div>
       <div id="dynamic-form" class="form-grid"></div>
+      <button id="run-btn" disabled data-i18n="ask.btn">🚀 Analyze</button>
     </section>
     <!-- Output (single-recipe verdict + chain) -->
     <section id="output-section" style="display:none;">
+      <h2 data-i18n="verdict.title">📊 Verdict</h2>
       <div id="verdict-box"></div>
       <div style="margin: 0.75rem 0;">
+        <button id="share-btn" class="secondary" type="button" data-i18n="share.btn">🔗 Copy share link</button>
         <span id="share-status" class="subtle" style="margin-left:0.75rem;"></span>
       </div>
+      <h2 data-i18n="chain.title">🔍 Computation Chain</h2>
+      <p class="subtle" data-i18n="chain.desc">Every number below is deterministic Python. Click a step to expand.</p>
       <div id="chain-box"></div>
+      <h2 id="answer-header" style="display:none;" data-i18n="answer.title">💬 Plain-English Answer</h2>
       <div id="answer-box" style="display:none;"></div>
     </section>
     <!-- Profile output -->
     <section id="profile-output" style="display:none;">
+      <h2 data-i18n="tafcard.title">📇 TAF Card — full model profile</h2>
       <div id="profile-box"></div>
     </section>
     <!-- Compare output -->
     <section id="compare-output" style="display:none;">
+      <h2 data-i18n="compare.title_out">🆚 Comparison Table</h2>
       <div id="compare-box"></div>
     </section>
   </main>

js/i18n.js CHANGED Viewed

@@ -64,12 +64,15 @@ export const TRANSLATIONS = {
     "compare.title_out":       "🆚 Comparison Table",
-    "status.loading_pyodide":  "⏳ Loading Python runtime...",
     "status.loading_taf":      "⏳ Loading TAF formulas + recipes...",
     "status.ready":            "✅ Ready. Pick a model and click Profile to start.",
     "status.computing":        "🧮 Computing TAF chain...",
     "status.done":             "✅ Done.",
     "footer.text":             "© 2026 Carles Marin · Apache-2.0 · independent research · the tool that closes the loop of the paper.",
   },
@@ -127,12 +130,15 @@ export const TRANSLATIONS = {
     "compare.title_out":       "🆚 Tabla comparativa",
-    "status.loading_pyodide":  "⏳ Cargando runtime Python...",
     "status.loading_taf":      "⏳ Cargando fórmulas TAF + recetas...",
     "status.ready":            "✅ Listo. Elige un modelo y click Perfilar para empezar.",
     "status.computing":        "🧮 Calculando cadena TAF...",
     "status.done":             "✅ Hecho.",
     "footer.text":             "© 2026 Carles Marin · Apache-2.0 · investigación independiente · la herramienta que cierra el círculo del paper.",
   },
@@ -190,12 +196,15 @@ export const TRANSLATIONS = {
     "compare.title_out":       "🆚 Tableau comparatif",
-    "status.loading_pyodide":  "⏳ Chargement du runtime Python...",
     "status.loading_taf":      "⏳ Chargement des formules TAF + recettes...",
     "status.ready":            "✅ Prêt. Choisissez un modèle et cliquez Profiler pour commencer.",
     "status.computing":        "🧮 Calcul de la chaîne TAF...",
     "status.done":             "✅ Terminé.",
     "footer.text":             "© 2026 Carles Marin · Apache-2.0 · recherche indépendante · l'outil qui ferme la boucle du paper.",
   },
@@ -253,12 +262,15 @@ export const TRANSLATIONS = {
     "compare.title_out":       "🆚 比较表",
-    "status.loading_pyodide":  "⏳ 加载 Python 运行时...",
     "status.loading_taf":      "⏳ 加载 TAF 公式 + 配方...",
     "status.ready":            "✅ 就绪。选择一个模型并点击画像开始。",
     "status.computing":        "🧮 计算 TAF 链...",
     "status.done":             "✅ 完成。",
     "footer.text":             "© 2026 Carles Marin · Apache-2.0 · 独立研究 · 闭合论文回路的工具。",
   },
 };

     "compare.title_out":       "🆚 Comparison Table",
+    "status.loading_pyodide":  "⏳ Loading Python runtime (~10MB, first time only)...",
     "status.loading_taf":      "⏳ Loading TAF formulas + recipes...",
     "status.ready":            "✅ Ready. Pick a model and click Profile to start.",
     "status.computing":        "🧮 Computing TAF chain...",
     "status.done":             "✅ Done.",
+    "profile.hf_placeholder":  "e.g. meta-llama/Meta-Llama-3-8B or Qwen/Qwen2.5-7B",
+    "compare.hf_placeholder":  "HF model id (e.g. meta-llama/Meta-Llama-3-8B)",
     "footer.text":             "© 2026 Carles Marin · Apache-2.0 · independent research · the tool that closes the loop of the paper.",
   },
     "compare.title_out":       "🆚 Tabla comparativa",
+    "status.loading_pyodide":  "⏳ Cargando runtime Python (~10MB, solo primera vez)...",
     "status.loading_taf":      "⏳ Cargando fórmulas TAF + recetas...",
     "status.ready":            "✅ Listo. Elige un modelo y click Perfilar para empezar.",
     "status.computing":        "🧮 Calculando cadena TAF...",
     "status.done":             "✅ Hecho.",
+    "profile.hf_placeholder":  "ej. meta-llama/Meta-Llama-3-8B o Qwen/Qwen2.5-7B",
+    "compare.hf_placeholder":  "ID modelo HF (ej. meta-llama/Meta-Llama-3-8B)",
     "footer.text":             "© 2026 Carles Marin · Apache-2.0 · investigación independiente · la herramienta que cierra el círculo del paper.",
   },
     "compare.title_out":       "🆚 Tableau comparatif",
+    "status.loading_pyodide":  "⏳ Chargement du runtime Python (~10MB, première fois)...",
     "status.loading_taf":      "⏳ Chargement des formules TAF + recettes...",
     "status.ready":            "✅ Prêt. Choisissez un modèle et cliquez Profiler pour commencer.",
     "status.computing":        "🧮 Calcul de la chaîne TAF...",
     "status.done":             "✅ Terminé.",
+    "profile.hf_placeholder":  "ex. meta-llama/Meta-Llama-3-8B ou Qwen/Qwen2.5-7B",
+    "compare.hf_placeholder":  "ID modèle HF (ex. meta-llama/Meta-Llama-3-8B)",
     "footer.text":             "© 2026 Carles Marin · Apache-2.0 · recherche indépendante · l'outil qui ferme la boucle du paper.",
   },
     "compare.title_out":       "🆚 比较表",
+    "status.loading_pyodide":  "⏳ 加载 Python 运行时 (~10MB,首次加载)...",
     "status.loading_taf":      "⏳ 加载 TAF 公式 + 配方...",
     "status.ready":            "✅ 就绪。选择一个模型并点击画像开始。",
     "status.computing":        "🧮 计算 TAF 链...",
     "status.done":             "✅ 完成。",
+    "profile.hf_placeholder":  "例如: meta-llama/Meta-Llama-3-8B 或 Qwen/Qwen2.5-7B",
+    "compare.hf_placeholder":  "HF 模型 id (例如: meta-llama/Meta-Llama-3-8B)",
     "footer.text":             "© 2026 Carles Marin · Apache-2.0 · 独立研究 · 闭合论文回路的工具。",
   },
 };

js/main.js CHANGED Viewed

@@ -39,12 +39,29 @@ const EXAMPLES = [
 // ════════════════════════════════════════════════════════════════════
 // Bootstrap
 // ════════════════════════════════════════════════════════════════════
 async function loadPyodideAndTaf() {
-  setStatus("⏳ Loading Pyodide (Python runtime ~10MB)...");
   state.pyodide = await loadPyodide({
     indexURL: "https://cdn.jsdelivr.net/pyodide/v0.26.4/full/",
   });
-  setStatus("⏳ Loading TAF formulas + recipes...");
   const tafCode = await fetch(TAF_BROWSER_URL).then(r => r.text());
   await state.pyodide.runPythonAsync(tafCode);
@@ -52,10 +69,12 @@ async function loadPyodideAndTaf() {
   state.recipes = JSON.parse(state.pyodide.runPython("list_recipes()"));
   state.recipesById = Object.fromEntries(state.recipes.map(r => [r.id, r]));
   populatePresets();
   populateRecipes();
   enableUI();
-  setStatus("✅ Ready. Ask a question or pick a recipe.");
 }
 function populatePresets() {

 // ════════════════════════════════════════════════════════════════════
 // Bootstrap
 // ════════════════════════════════════════════════════════════════════
+function showLoadingBar(show, progress=null) {
+  const wrap = $("loading-bar-wrap");
+  const bar = $("loading-bar");
+  if (!wrap || !bar) return;
+  if (!show) { wrap.style.display = "none"; return; }
+  wrap.style.display = "block";
+  if (progress === null) {
+    bar.classList.add("indeterminate");
+    bar.style.width = "100%";
+  } else {
+    bar.classList.remove("indeterminate");
+    bar.style.width = `${Math.min(100, Math.max(0, progress * 100))}%`;
+  }
+}
 async function loadPyodideAndTaf() {
+  showLoadingBar(true, null);
+  setStatus(t("status.loading_pyodide"));
   state.pyodide = await loadPyodide({
     indexURL: "https://cdn.jsdelivr.net/pyodide/v0.26.4/full/",
   });
+  showLoadingBar(true, 0.5);
+  setStatus(t("status.loading_taf"));
   const tafCode = await fetch(TAF_BROWSER_URL).then(r => r.text());
   await state.pyodide.runPythonAsync(tafCode);
   state.recipes = JSON.parse(state.pyodide.runPython("list_recipes()"));
   state.recipesById = Object.fromEntries(state.recipes.map(r => [r.id, r]));
+  showLoadingBar(true, 0.95);
   populatePresets();
   populateRecipes();
   enableUI();
+  showLoadingBar(false);
+  setStatus(t("status.ready"));
 }
 function populatePresets() {

style.css CHANGED Viewed

@@ -33,29 +33,53 @@ header {
 }
 header h1 { margin: 0 0 0.5rem 0; font-size: 2rem; }
-/* Language switcher (top-right) */
 .lang-switcher {
   position: absolute;
   top: 1rem; right: 1rem;
-  display: flex; gap: 0.25rem;
   z-index: 50;
 }
 .lang-btn {
   background: var(--bg-input);
-  border: 1px solid var(--border);
   color: var(--fg);
-  border-radius: 4px;
-  padding: 0.25rem 0.5rem;
   font-size: 1.1rem;
   cursor: pointer;
   line-height: 1;
-  transition: border-color 0.15s, background 0.15s;
 }
-.lang-btn:hover { border-color: var(--accent); }
 .lang-btn.lang-active {
   border-color: var(--accent);
   background: var(--accent-dim);
 }
 /* Quickstart banner */
 .quickstart-banner {
@@ -97,7 +121,41 @@ section {
 h2 { margin-top: 0; font-size: 1.2rem; color: var(--accent); }
 #status-bar { padding: 0.75rem 1.25rem; }
-#status { font-family: monospace; }
 .recipe-desc { color: var(--fg-dim); margin: 0.5rem 0 0 0; }

 }
 header h1 { margin: 0 0 0.5rem 0; font-size: 2rem; }
+/* Language switcher (top-right) — round flags */
 .lang-switcher {
   position: absolute;
   top: 1rem; right: 1rem;
+  display: flex; gap: 0.4rem;
   z-index: 50;
 }
 .lang-btn {
   background: var(--bg-input);
+  border: 2px solid var(--border);
   color: var(--fg);
+  border-radius: 50%;
+  width: 36px; height: 36px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   font-size: 1.1rem;
   cursor: pointer;
   line-height: 1;
+  transition: all 0.2s ease;
+  position: relative;
+}
+.lang-btn:hover {
+  border-color: var(--accent);
+  transform: scale(1.1);
 }
 .lang-btn.lang-active {
   border-color: var(--accent);
   background: var(--accent-dim);
+  box-shadow: 0 0 12px rgba(88, 166, 255, 0.4);
 }
+.lang-btn::after {
+  content: attr(data-label);
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 4px;
+  font-size: 0.65rem;
+  color: var(--fg-dim);
+  opacity: 0;
+  transition: opacity 0.15s;
+  white-space: nowrap;
+  pointer-events: none;
+}
+.lang-btn:hover::after { opacity: 1; }
 /* Quickstart banner */
 .quickstart-banner {
 h2 { margin-top: 0; font-size: 1.2rem; color: var(--accent); }
 #status-bar { padding: 0.75rem 1.25rem; }
+#status { font-family: monospace; margin-bottom: 0.4rem; }
+/* Loading progress bar */
+#loading-bar-wrap {
+  height: 6px;
+  background: var(--bg-input);
+  border-radius: 3px;
+  overflow: hidden;
+  position: relative;
+}
+#loading-bar {
+  height: 100%;
+  background: linear-gradient(90deg, var(--accent-dim), var(--accent), var(--accent-dim));
+  background-size: 200% 100%;
+  width: 0%;
+  transition: width 0.3s ease-out;
+  border-radius: 3px;
+  animation: loading-shimmer 1.5s linear infinite;
+}
+@keyframes loading-shimmer {
+  0%   { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+#loading-bar.indeterminate {
+  width: 100%;
+  background: linear-gradient(90deg,
+    var(--bg-input) 0%, var(--accent) 50%, var(--bg-input) 100%);
+  background-size: 50% 100%;
+  background-repeat: no-repeat;
+  animation: loading-indeterminate 1.5s linear infinite;
+}
+@keyframes loading-indeterminate {
+  0%   { background-position: -50% 0; }
+  100% { background-position: 150% 0; }
+}
 .recipe-desc { color: var(--fg-dim); margin: 0.5rem 0 0 0; }