Merge pull request #6748 from dxrpl/fix/6747-recipe-panel-toggle

fix(cookbook): bring back the Dependencies recipe-panel caret (#6747)

static/js/cookbook.js

@@ -1195,11 +1195,12 @@ async function _fetchDependencies() {
       // For backends with a recipe catalog (vllm / sglang / llama_cpp),
       // append a caret button that toggles a per-row recipe panel below.
       const hasRecipe = RECIPE_BACKENDS.has(pkg.name);
-      // Standalone recipe-caret button removed — the "Pick install
+      // The caret is the only way to open the recipe panel (the Installed ▾
-      // command" action lives inside the Installed ▾ dropdown menu
+      // menu has no recipe item), and the HW Fit / serve-card deep links
-      // (see _showDepMenu) so each row only has ONE caret to click.
+      // open it by clicking this caret (#6747).
-      // Kept the variable so downstream concat code stays the same.
+      const recipeCaret = hasRecipe
-      const recipeCaret = '';
+        ? `<button class="cookbook-dep-tag cookbook-dep-recipe-caret" data-dep-recipe-toggle="${esc(pkg.name)}" title="Pick a model to see the exact install commands" aria-expanded="false" style="background:none;border:1px solid var(--border);padding:2px 6px;display:inline-flex;align-items:center;cursor:pointer;"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="transition:transform 0.15s"><polyline points="6 9 12 15 18 9"/></svg></button>`
+        : '';
       const recipePanel = hasRecipe ? _recipePanelHtml(pkg.name) : '';
       // When llama_cpp (or any future engine) reports build_deps_missing
       // from its system_prereqs probe, surface a one-tap install button

tests/test_cookbook_recipe_panel_toggle.py

@@ -0,0 +1,38 @@
+"""Guard the only entry point to the Cookbook → Dependencies recipe panel.
+
+The recipe panel (model picker, Pip/Docker toggle, commands and Run) is
+rendered hidden, and only the `[data-dep-recipe-toggle]` caret shows it.
+The HW Fit and serve-card deep links (`openCookbookDependencies(..., {
+expandRecipe })`) open it by clicking that same caret. When the caret was
+dropped from the row markup, nothing could open the panel (#6747).
+"""
+import re
+from pathlib import Path
+
+JS_DIR = Path(__file__).resolve().parent.parent / "static" / "js"
+COOKBOOK_JS = JS_DIR / "cookbook.js"
+DIAGNOSIS_JS = JS_DIR / "cookbook-diagnosis.js"
+
+
+def _row_renderer(source: str) -> str:
+    start = source.index("const hasRecipe = RECIPE_BACKENDS.has(pkg.name);")
+    end = source.index("+ recipePanel;", start)
+    return source[start:end]
+
+
+def test_recipe_rows_render_the_panel_toggle():
+    row = _row_renderer(COOKBOOK_JS.read_text(encoding="utf-8"))
+
+    caret = re.search(r"const recipeCaret = hasRecipe\s*\?\s*`([^`]*)`\s*:\s*'';", row)
+    assert caret, "recipe rows must render a caret, or the recipe panel cannot be opened"
+    assert 'data-dep-recipe-toggle="${esc(pkg.name)}"' in caret.group(1)
+    assert 'aria-expanded="false"' in caret.group(1)
+    assert "+ recipeCaret" in row
+
+
+def test_toggle_handler_and_deep_link_use_the_rendered_attribute():
+    cookbook = COOKBOOK_JS.read_text(encoding="utf-8")
+    diagnosis = DIAGNOSIS_JS.read_text(encoding="utf-8")
+
+    assert "list.querySelectorAll('[data-dep-recipe-toggle]')" in cookbook
+    assert "row.querySelector('[data-dep-recipe-toggle]')" in diagnosis