v0.7.7: UX restructure — task tiles + 'Why static?' README FAQ

UX RESTRUCTURE — addresses the 14-tabs-overflow problem before forum-post traffic arrives.

NEW <section id='task-tiles'>: 5 tiles grouping the 14 modes by user intent (not feature):
- 🔬 Diagnose a model (Profile, Unmask, NIAH→Reason, Quant, Inspector)
- ✓ Trust a benchmark score (Contamination, Drift, Arena CI)
- ⚙️ Set up an eval correctly (Chat-template, Diagnose CLI)
- 🆚 Compare models (Compare, Phase diagram)
- 📋 Manual / free-form (Recipe, Ask)

Tile buttons emit [data-mode-link='X'] clicks → delegated handler triggers the corresponding mode-btn (no duplicate state, fully reuses the existing mode switcher) and smooth-scrolls to the section so the user immediately sees the form they expected.

Mode-tabs strip stays as a power-user backup below the tiles (still wrapped foldable by wrapMainSectionsAsFoldable). Subtitle on tiles points users there if they want full access.

Cognitive load drops from 14 buttons → 5 categorical tiles. Adding more modes in v0.8 won't require new top-level UI — just new tile entries.

README FAQ — preempts 'why not Gradio?' criticism before forum post traffic arrives. Cites three USPs (privacy + $0 + Lean formal verification) that are only viable with browser-only architecture.

i18n: 12 new keys × EN/ES/FR/ZH (693 total, 0 missing / 0 extra).

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

README.md

@@ -132,6 +132,20 @@ nothing is hallucinated.
 
 If 1 user or 1 million users hit it, our cost stays the same: $0.
 
+## Why static HTML+JS+Pyodide instead of Gradio/Streamlit?
+
+A reasonable question. Three TAF Agent USPs are **only possible** with browser-only architecture:
+
+1. **Your inputs never leave the tab.** No server = no privacy compromise. The "anti-bullshit" framing depends on this.
+2. **$0 forever, even at infinite scale.** Static Spaces have unlimited HF bandwidth; there is no cold-start, no queue, no rate limit. Going viral can't bankrupt the project.
+3. **Lean+Mathlib formal verification** ships as a static manifest. The 37 theorem badges link to source lines that anyone can `lake build` themselves — no hidden server logic.
+
+Bonus: in-browser LLM (WebLLM running Qwen2.5-0.5B in your GPU/CPU) for the 💬 Ask mode is only viable in static. Pyodide running deterministic Python in your browser means you can audit every number — no opaque server.
+
+The cost: HuggingFace's "Trending Spaces" algorithm favours Gradio/Streamlit Spaces. We compensate with detailed tags + forum presence + this README. If you'd prefer a Python-API client, that's a planned `gradio_client` companion (v0.9).
+
+---
+
 ## Architecture coverage
 
 Supports any model whose `config.json` is parseable:

index.html

@@ -349,6 +349,58 @@
       </div>
     </section>
 
+    <!-- v0.7.7 — Task tiles: friendlier entry point, groups 14 modes by user intent. -->
+    <section id="task-tiles" aria-labelledby="tiles-title">
+      <h2 id="tiles-title" data-i18n="tiles.title">🎯 What do you want to do?</h2>
+      <p class="recipe-desc" data-i18n="tiles.subtitle">Pick a task. Each one opens the right tool below. Or scroll down for the full list of 14 modes.</p>
+      <div class="tiles-grid">
+        <div class="task-tile">
+          <h3 data-i18n="tile.diagnose.title">🔬 Diagnose a model</h3>
+          <p class="tile-desc" data-i18n="tile.diagnose.desc">Will this specific model work for my use case?</p>
+          <div class="tile-modes">
+            <button data-mode-link="profile" data-i18n="modes.profile">📇 Profile a model</button>
+            <button data-mode-link="unmask" data-i18n="modes.unmask">🪟 Unmask</button>
+            <button data-mode-link="niah" data-i18n="modes.niah">🔍 NIAH→Reason</button>
+            <button data-mode-link="quant" data-i18n="modes.quant">⚖️ Quant</button>
+            <button data-mode-link="inspector" data-i18n="modes.inspector">🔍 Inspect config</button>
+          </div>
+        </div>
+        <div class="task-tile">
+          <h3 data-i18n="tile.trust.title">✓ Trust a benchmark score</h3>
+          <p class="tile-desc" data-i18n="tile.trust.desc">Should I believe this number? Bug or noise?</p>
+          <div class="tile-modes">
+            <button data-mode-link="contam" data-i18n="modes.contam">🧪 Contamination</button>
+            <button data-mode-link="drift" data-i18n="modes.drift">🔀 Drift</button>
+            <button data-mode-link="arena" data-i18n="modes.arena">🎯 Arena CI</button>
+          </div>
+        </div>
+        <div class="task-tile">
+          <h3 data-i18n="tile.eval.title">⚙️ Set up an eval correctly</h3>
+          <p class="tile-desc" data-i18n="tile.eval.desc">Get the exact CLI flag for lm-eval / vLLM / transformers.</p>
+          <div class="tile-modes">
+            <button data-mode-link="template" data-i18n="modes.template">📜 Chat-template</button>
+            <button data-mode-link="diagnose" data-i18n="modes.diagnose">🩺 Diagnose CLI</button>
+          </div>
+        </div>
+        <div class="task-tile">
+          <h3 data-i18n="tile.compare.title">🆚 Compare models</h3>
+          <p class="tile-desc" data-i18n="tile.compare.desc">Side-by-side, or browse the empirical model landscape.</p>
+          <div class="tile-modes">
+            <button data-mode-link="compare" data-i18n="modes.compare">🆚 Compare models</button>
+            <button data-mode-link="phase" data-i18n="modes.phase">📊 Phase diagram</button>
+          </div>
+        </div>
+        <div class="task-tile">
+          <h3 data-i18n="tile.manual.title">📋 Manual / free-form</h3>
+          <p class="tile-desc" data-i18n="tile.manual.desc">Pick a specific recipe by hand, or ask in plain English.</p>
+          <div class="tile-modes">
+            <button data-mode-link="recipe" data-i18n="modes.recipe">📋 Pick recipe</button>
+            <button data-mode-link="ask" data-i18n="modes.ask">💬 Ask plain English</button>
+          </div>
+        </div>
+      </div>
+    </section>
+
     <!-- Mode toggle -->
     <section id="mode-section">
       <h2><span data-i18n="modes.title">🎯 Mode</span>

js/i18n.js

@@ -465,6 +465,20 @@ export const TRANSLATIONS = {
     "niah.status.fetched":        "✅ Config fetched for {modelId}. Set T_eval and click Predict (or Sweep contexts).",
     "niah.status.done":            "✅ {verdict} — NIAH {niah}% · reasoning {reasoning}%",
     "niah.status.sweep_done":      "✅ Swept {n} context lengths.",
+
+    // v0.7.7 — Task tiles (UX restructure: 14 modes grouped by user intent)
+    "tiles.title":                 "🎯 What do you want to do?",
+    "tiles.subtitle":              "Pick a task. Each one opens the right tool below. Or scroll down for the full list of 14 modes.",
+    "tile.diagnose.title":         "🔬 Diagnose a model",
+    "tile.diagnose.desc":          "Will this specific model work for my use case?",
+    "tile.trust.title":            "✓ Trust a benchmark score",
+    "tile.trust.desc":             "Should I believe this number? Bug or noise?",
+    "tile.eval.title":              "⚙️ Set up an eval correctly",
+    "tile.eval.desc":              "Get the exact CLI flag for lm-eval / vLLM / transformers.",
+    "tile.compare.title":          "🆚 Compare models",
+    "tile.compare.desc":           "Side-by-side, or browse the empirical model landscape.",
+    "tile.manual.title":           "📋 Manual / free-form",
+    "tile.manual.desc":            "Pick a specific recipe by hand, or ask in plain English.",
     "share.import_desc":       "Got a JSON file from someone else's TAF analysis? Load it here to see the verdict + chain locally. Same view as if you'd run it yourself.",
     "share.import_btn":        "📂 Load shared JSON",
     "synthesis.system":        "You are a precise transformer LLM diagnostic assistant. Given pre-computed TAF formula results, write a clear plain-English summary in 4-6 sentences. Cite the section number (§X.Y) for each number you mention. Always give a concrete recommendation. Do NOT invent numbers.",
@@ -1354,6 +1368,20 @@ export const TRANSLATIONS = {
     "niah.status.fetched":        "✅ Config obtenido para {modelId}. Pon T_eval y click Predecir (o Barrer contextos).",
     "niah.status.done":            "✅ {verdict} — NIAH {niah}% · reasoning {reasoning}%",
     "niah.status.sweep_done":      "✅ Barridos {n} largos de contexto.",
+
+    // v0.7.7 — Tiles de tareas (UX restructure: 14 modos agrupados por intención)
+    "tiles.title":                 "🎯 ¿Qué quieres hacer?",
+    "tiles.subtitle":              "Elige una tarea. Cada una abre la herramienta adecuada debajo. O baja para la lista completa de 14 modos.",
+    "tile.diagnose.title":         "🔬 Diagnosticar un modelo",
+    "tile.diagnose.desc":          "¿Servirá este modelo concreto para mi caso de uso?",
+    "tile.trust.title":            "✓ Confiar en un score de benchmark",
+    "tile.trust.desc":             "¿Me creo este número? ¿Es bug o ruido?",
+    "tile.eval.title":              "⚙️ Configurar bien una eval",
+    "tile.eval.desc":              "Obtén el flag CLI exacto para lm-eval / vLLM / transformers.",
+    "tile.compare.title":          "🆚 Comparar modelos",
+    "tile.compare.desc":           "Lado a lado, o explora el panel empírico de modelos.",
+    "tile.manual.title":           "📋 Manual / libre",
+    "tile.manual.desc":            "Elige una receta concreta a mano, o pregunta en inglés llano.",
     "share.import_desc":       "¿Tienes un fichero JSON del análisis TAF de alguien? Cárgalo aquí para ver el veredicto + cadena localmente. La misma vista que si lo hubieras ejecutado tú.",
     "share.import_btn":        "📂 Cargar JSON compartido",
     "synthesis.system":        "Eres un asistente de diagnóstico preciso para LLMs transformer. Dados resultados de fórmulas TAF pre-calculados, escribe un resumen claro en español de 4-6 frases. Cita el número de sección (§X.Y) para cada número que menciones. Da siempre una recomendación concreta. NO inventes números.",
@@ -2107,6 +2135,20 @@ export const TRANSLATIONS = {
     "niah.status.fetched":        "✅ Config récupéré pour {modelId}. Réglez T_eval et cliquez Prédire (ou Balayer les contextes).",
     "niah.status.done":            "✅ {verdict} — NIAH {niah}% · reasoning {reasoning}%",
     "niah.status.sweep_done":      "✅ Balayé {n} longueurs de contexte.",
+
+    // v0.7.7 — Tuiles de tâches (refonte UX : 14 modes regroupés par intention)
+    "tiles.title":                 "🎯 Que voulez-vous faire ?",
+    "tiles.subtitle":              "Choisissez une tâche. Chacune ouvre l'outil adéquat ci-dessous. Ou faites défiler pour la liste complète des 14 modes.",
+    "tile.diagnose.title":         "🔬 Diagnostiquer un modèle",
+    "tile.diagnose.desc":          "Ce modèle conviendra-t-il à mon cas d'usage ?",
+    "tile.trust.title":            "✓ Faire confiance à un score",
+    "tile.trust.desc":             "Dois-je croire ce nombre ? Bug ou bruit ?",
+    "tile.eval.title":              "⚙️ Configurer une éval correctement",
+    "tile.eval.desc":              "Obtenez le flag CLI exact pour lm-eval / vLLM / transformers.",
+    "tile.compare.title":          "🆚 Comparer des modèles",
+    "tile.compare.desc":           "Côte à côte, ou explorez le panel empirique de modèles.",
+    "tile.manual.title":           "📋 Manuel / libre",
+    "tile.manual.desc":            "Choisissez une recette à la main, ou demandez en langage naturel.",
     "share.import_desc":       "Vous avez un fichier JSON de l'analyse TAF de quelqu'un ? Chargez-le ici pour voir le verdict + la chaîne localement. La même vue que si vous l'aviez exécuté vous-même.",
     "share.import_btn":        "📂 Charger JSON partagé",
     "synthesis.system":        "Vous êtes un assistant de diagnostic précis pour LLMs transformer. Étant donné des résultats de formules TAF pré-calculés, écrivez un résumé clair en français de 4-6 phrases. Citez le numéro de section (§X.Y) pour chaque nombre mentionné. Donnez toujours une recommandation concrète. N'INVENTEZ PAS de nombres.",
@@ -2860,6 +2902,20 @@ export const TRANSLATIONS = {
     "niah.status.fetched":        "✅ 已获取 {modelId} 的 config。设置 T_eval 并点击预测（或扫描上下文）。",
     "niah.status.done":            "✅ {verdict} — NIAH {niah}% · reasoning {reasoning}%",
     "niah.status.sweep_done":      "✅ 已扫描 {n} 个上下文长度。",
+
+    // v0.7.7 — 任务卡片（UX 重构：按用户意图分组的 14 个模式）
+    "tiles.title":                 "🎯 你想做什么？",
+    "tiles.subtitle":              "选择一项任务。每一项会打开下方对应的工具。或往下滚动查看完整的 14 个模式列表。",
+    "tile.diagnose.title":         "🔬 诊断一个模型",
+    "tile.diagnose.desc":          "这个具体模型符合我的用例吗？",
+    "tile.trust.title":            "✓ 相信 benchmark 分数",
+    "tile.trust.desc":             "我该相信这个数字吗？是 bug 还是噪声？",
+    "tile.eval.title":              "⚙️ 正确设置 eval",
+    "tile.eval.desc":              "获取 lm-eval / vLLM / transformers 的精确 CLI flag。",
+    "tile.compare.title":          "🆚 比较模型",
+    "tile.compare.desc":           "并排，或浏览经验模型面板。",
+    "tile.manual.title":           "📋 手动 / 自由",
+    "tile.manual.desc":            "手动挑一个具体 recipe，或用自然语言提问。",
     "share.import_desc":       "有他人 TAF 分析的 JSON 文件? 在这里加载以本地查看判定 + 链。与您自己运行的视图相同。",
     "share.import_btn":        "📂 加载共享的 JSON",
     "synthesis.system":        "您是 transformer LLM 的精确诊断助手。给定预先计算的 TAF 公式结果,用 4-6 句中文写出清晰的摘要。为每个提到的数字引用章节号 (§X.Y)。始终给出具体建议。不要编造数字。",

js/main.js

@@ -184,6 +184,31 @@ wrapMainSectionsAsFoldable();
 // ════════════════════════════════════════════════════════════════════
 // Mode toggle
 // ════════════════════════════════════════════════════════════════════
+// v0.7.7 — task tiles: clicking a tile-mode-link button triggers the equivalent mode-btn.
+// Reuses the mode switcher entirely (no duplicate state). Smoothly scrolls to the
+// activated section so the user immediately sees the form they expected.
+document.addEventListener("click", (e) => {
+  const linkBtn = e.target.closest("[data-mode-link]");
+  if (!linkBtn) return;
+  const targetMode = linkBtn.dataset.modeLink;
+  const targetTab = document.querySelector(`.mode-btn[data-mode="${targetMode}"]`);
+  if (targetTab) {
+    targetTab.click();
+    // Scroll the activated section into view so the tile click feels responsive.
+    const sectionId = {
+      ask: "ask-section", recipe: "recipe-section", profile: "profile-section",
+      compare: "compare-section", inspector: "inspector-section",
+      diagnose: "diagnose-section", phase: "phase-section", unmask: "unmask-section",
+      template: "template-section", arena: "arena-section", contam: "contam-section",
+      quant: "quant-section", drift: "drift-section", niah: "niah-section",
+    }[targetMode];
+    if (sectionId) {
+      const sec = document.getElementById(sectionId);
+      if (sec) sec.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  }
+});
+
 document.querySelectorAll(".mode-btn").forEach(btn => {
   btn.addEventListener("click", () => {
     document.querySelectorAll(".mode-btn").forEach(b => {

style.css

@@ -33,6 +33,56 @@
   flex: 1;
 }
 
+/* v0.7.7 — Task tiles: groups 14 modes by user intent, primary entry point */
+#task-tiles { margin-bottom: 1em; }
+#task-tiles h2 { margin-bottom: 0.3em; }
+#task-tiles .recipe-desc { margin-bottom: 0.8em; opacity: 0.85; }
+.tiles-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 0.8em;
+}
+.task-tile {
+  padding: 0.9em 1em;
+  background: #12181f;
+  border: 1px solid rgba(88, 166, 255, 0.2);
+  border-radius: 10px;
+  transition: border-color 0.15s, transform 0.15s;
+}
+.task-tile:hover {
+  border-color: rgba(88, 166, 255, 0.5);
+}
+.task-tile h3 {
+  margin: 0 0 0.3em;
+  font-size: 1.05em;
+  color: #58a6ff;
+}
+.task-tile .tile-desc {
+  font-size: 0.88em;
+  opacity: 0.8;
+  margin: 0 0 0.6em;
+  line-height: 1.4;
+}
+.task-tile .tile-modes {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35em;
+}
+.task-tile .tile-modes button {
+  font-size: 0.85em;
+  padding: 0.35em 0.7em;
+  background: rgba(88, 166, 255, 0.10);
+  border: 1px solid rgba(88, 166, 255, 0.25);
+  color: #c9d1d9;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background 0.12s, border-color 0.12s;
+}
+.task-tile .tile-modes button:hover {
+  background: rgba(88, 166, 255, 0.22);
+  border-color: rgba(88, 166, 255, 0.55);
+}
+
 /* v0.7.5 — Cross-framework drift bound */
 /* Drift section overrides the default 980px main width so the two-column form
    has room without overlapping. Mobile (<800px) collapses to single column. */