fix(excel): precedence-aware parentheses + repr UX polish

- Excel renderer now wraps BinOp operands in parens when child
  precedence is lower than parent's, or same-precedence on the right
  of a non-commutative parent. ``a * (1 - b)`` emits as
  ``=B1 * (1 - B2)`` instead of the wrong ``=B1 * 1 - B2``;
  ``(a/b) ** (1/c)`` emits as ``=(B1 / B2) ^ (1 / B3)``. Pinned by
  the formerly-xfail tests in ``test_excel_golden.py`` plus the
  same-precedence counter-example.
- HTML repr toolbar buttons (Formulas / Stacked) keep stable labels;
  on/off is signalled by the cream-tint + teal active style, animated
  via the existing ``120ms ease`` transition on ``label.mo-btn``.
- Per-panel titles stay in the markup so the ``Stacked`` toggle
  reveals each sheet's name; CSS hides them in tabbed mode.
- Trace-precedents stays a pure peek — focusing a formula highlights
  precedent cells (including out-of-tab ones via the ``mo-dep`` class)
  but never auto-switches tabs. Manual tab switch reveals the
  highlights on hidden panels.

Author: Aidos

src/modeleon/compile/excel/renderer.py

@@ -64,6 +64,23 @@
 }
 
 
+# Operator precedence in Excel formulas. Higher binds tighter. A child BinOp
+# whose precedence is *strictly less* than the parent's must be wrapped in
+# parens; same-precedence children only need wrapping on the right side of
+# non-commutative operators (``a - (b - c)`` ≠ ``(a - b) - c``).
+_BINOP_PRECEDENCE: Dict[str, int] = {
+    "**": 4, "^": 4,
+    "*": 3, "/": 3, "//": 3, "%": 3,
+    "+": 2, "-": 2,
+    "&": 1,
+    "==": 0, "!=": 0, "<": 0, "<=": 0, ">": 0, ">=": 0,
+}
+
+# Non-commutative-on-the-right ops: same-precedence right child needs parens.
+# `a - b - c` is fine (left-associative) but `a - (b - c)` must keep them.
+_NON_COMMUTATIVE_RIGHT: set[str] = {"-", "/", "//", "%", "**", "^"}
+
+
 # Functions that accept an Excel range for any list-valued VarRef argument.
 # The translator renders those args as ranges (``B2:F2``) and leaves
 # scalar VarRefs / literals as normal. Covers classic aggregates (SUM,
@@ -216,17 +233,70 @@ def render_varref(self, node: VarRef, ctx: RenderCtx) -> str:
         return _value_to_excel_literal(_value_at_period(node.var._value, ctx.period_idx))
 
     def render_binop(self, node: BinOp, ctx: RenderCtx) -> str:
-        left = self.walker.render(node.left, ctx)
-        right = self.walker.render(node.right, ctx)
         op = node.op
-        # // → INT(a/b), % → MOD(a,b) — Excel has no direct operator for these
+        # // → INT(a/b), % → MOD(a,b). Inside INT/MOD the relevant parent op
+        # is ``/`` (precedence 3); the comma in MOD separates and needs no
+        # parens-handling on either operand.
         if op == "//":
+            left = self._render_operand(node.left, "/", ctx, side="left")
+            right = self._render_operand(node.right, "/", ctx, side="right")
             return f"INT({left}/{right})"
         if op == "%":
+            left = self.walker.render(node.left, ctx)
+            right = self.walker.render(node.right, ctx)
             return f"MOD({left},{right})"
+
+        left = self._render_operand(node.left, op, ctx, side="left")
+        right = self._render_operand(node.right, op, ctx, side="right")
         excel_op = _PY_TO_EXCEL_OP.get(op, op)
         return f"{left} {excel_op} {right}"
 
+    def _render_operand(
+        self, child: Expr, parent_op: str, ctx: RenderCtx, *, side: str
+    ) -> str:
+        """Render a BinOp operand and wrap in parens iff Excel precedence
+        would otherwise re-associate the expression incorrectly.
+
+        Wrapping is decided by the *effective* top-level operator of the
+        rendered string — `_effective_op` follows VarRefs into floating
+        Variables (whose `_expr` is rendered inline) so we don't miss
+        compound subtrees that present as VarRef in the AST.
+        """
+        rendered = self.walker.render(child, ctx)
+        effective = self._effective_op(child)
+        if effective is None:
+            return rendered
+        parent_prec = _BINOP_PRECEDENCE.get(parent_op, 0)
+        child_prec = _BINOP_PRECEDENCE.get(effective, 0)
+        if child_prec < parent_prec:
+            return f"({rendered})"
+        if (
+            child_prec == parent_prec
+            and side == "right"
+            and parent_op in _NON_COMMUTATIVE_RIGHT
+        ):
+            return f"({rendered})"
+        return rendered
+
+    def _effective_op(self, node: Expr) -> str | None:
+        """The operator that would govern this node's rendered string, or
+        ``None`` if it renders as an atomic token (cell ref, literal,
+        function call, already-parenthesized subexpr).
+
+        Follows VarRefs into floating Variables, since their `_expr` is
+        rendered inline at the parent's call site.
+        """
+        if isinstance(node, BinOp):
+            return node.op
+        if isinstance(node, VarRef):
+            var = node.var
+            if var.id in self.addresses:
+                return None  # rendered as a cell address — atomic
+            if var._expr is not None:
+                return self._effective_op(var._expr)
+            return None
+        return None
+
     def render_subscript(self, node: Subscript, ctx: RenderCtx) -> str:
         if not isinstance(node.base, VarRef):
             logger.warning(

src/modeleon/display/html.py

@@ -501,10 +501,10 @@ def _excel_formula_for(var, period_idx: int, ctx: _Ctx) -> Optional[str]:
     "{{ background: #fffaf2; color: #07464a; }}"
     "{root} label.mo-btn.mo-formula-btn::before "
     "{{ content: '\u0192\u00a0'; font-weight: 600; color: #bfa163; margin-right: 2px; }}"
+    # Label stays "Formulas" in both states — the cream/teal active
+    # tint plus the brighter gold prefix carry the on/off signal,
+    # animated by the background/color transition on ``label.mo-btn``.
     "{root} label.mo-btn.mo-formula-btn::after {{ content: 'Formulas'; }}"
-    "{root} input.mo-toggle:checked ~ * label.mo-btn.mo-formula-btn::after, "
-    "{root} input.mo-toggle:checked ~ label.mo-btn.mo-formula-btn::after "
-    "{{ content: 'Values'; }}"
     # Per-cell click-to-inspect: focusing a formula cell shows its
     # formula. Outline uses bright teal so the active cell pops.
     "{root} td.mo-cell {{ cursor: pointer; transition: background 80ms ease; }}"
@@ -581,13 +581,13 @@ def _excel_formula_for(var, period_idx: int, ctx: _Ctx) -> Optional[str]:
     "{{ border-top: 1px solid #c4cec6; border-radius: 4px; }}"
     "{root} label.mo-btn.mo-stack-btn::before "
     "{{ content: '\u25a6\u00a0'; font-weight: 600; color: #bfa163; margin-right: 2px; }}"
+    # Label stays "Stacked" in both states — same convention as the
+    # Formulas toggle: the active cream/teal tint indicates state,
+    # animated through the shared ``transition`` on ``label.mo-btn``.
     "{root} label.mo-btn.mo-stack-btn::after {{ content: 'Stacked'; }}"
     "{root} input.mo-stack:checked ~ * label.mo-btn.mo-stack-btn, "
     "{root} input.mo-stack:checked ~ label.mo-btn.mo-stack-btn "
     "{{ background: #fffaf2; color: #07464a; }}"
-    "{root} input.mo-stack:checked ~ * label.mo-btn.mo-stack-btn::after, "
-    "{root} input.mo-stack:checked ~ label.mo-btn.mo-stack-btn::after "
-    "{{ content: 'Tabbed'; }}"
 )
 
 
@@ -599,6 +599,11 @@ def _precedents_script(uid: str) -> str:
     the same visual idea as Excel's "Trace Precedents" button. Losing
     focus clears the highlight.
 
+    Focusing a cell never switches tabs — that would be a navigation
+    side-effect on what is otherwise a peek action. Precedents on
+    other tabs still get the ``mo-dep`` class so they're visibly
+    highlighted whenever the user manually flips to that tab.
+
     Pure-CSS focus-outline and click-to-show-formula already work
     without this script; it's a progressive enhancement. If JS is
     sandboxed (some JupyterLab configs), the toggle button and

tests/test_excel_golden.py

@@ -168,12 +168,6 @@ class TestBinOpPrecedenceParens:
     accordingly.
     """
 
-    @pytest.mark.xfail(
-        strict=True,
-        reason="render_binop doesn't wrap a lower-precedence child of "
-               "multiplication in parens — `a * (1 - b)` collapses to "
-               "`a * 1 - b` and Excel evaluates as `(a * 1) - b`.",
-    )
     def test_subtraction_inside_multiplication(self, tmp_path):
         # ``a * (1 - b)`` — subtraction binds looser than multiplication,
         # so the right-hand subtree needs parens. Multiplication has no
@@ -190,12 +184,6 @@ def test_subtraction_inside_multiplication(self, tmp_path):
         cells = _cells(tmp_path / "p.xlsx", "S")
         assert cells["B3"] == "=B1 * (1 - B2)"
 
-    @pytest.mark.xfail(
-        strict=True,
-        reason="render_binop doesn't wrap children of `**` (exponent) — "
-               "`(a/b) ** (1/c)` collapses to `a / b ^ 1 / c`, which "
-               "Excel reads left-to-right as `((a/b)^1)/c`.",
-    )
     def test_division_and_exponent_groups(self, tmp_path):
         # ``(a / b) ** (1 / c)`` — both children of ``**`` are divisions
         # which bind tighter than ``**`` in Excel's left-associative

tests/test_html_repr.py

@@ -168,6 +168,32 @@ def test_cross_tab_formula_uses_qualified_address(self):
         # otherwise the cross-tab path silently regressed.
         assert "=100.0 * 50" not in html
 
+    def test_toolbar_button_labels_stay_stable_across_states(self):
+        # The Formulas / Stacked toolbar buttons indicate their state
+        # by colour (cream + teal active tint), not by swapping the
+        # label to "Values" / "Tabbed". Animation comes from the
+        # ``label.mo-btn`` transition on background + colour.
+        m = mo.Model("m")
+        m.inputs = mo.MultiVariable("Inputs", excel_props={"tab": True})
+        m.inputs.price = mo.Variable(100, display_name="Price")
+        m.outputs = mo.MultiVariable("Outputs", excel_props={"tab": True})
+        m.outputs.revenue = m.inputs.price * mo.Variable(2)
+
+        html = m._repr_html_()
+
+        import re
+
+        formula_contents = re.findall(
+            r"mo-formula-btn::after \{ content: '([^']+)'", html,
+        )
+        stack_contents = re.findall(
+            r"mo-stack-btn::after \{ content: '([^']+)'", html,
+        )
+        # Exactly one content rule per button — no flip to "Values" /
+        # "Tabbed" lurking anywhere in the emitted CSS.
+        assert formula_contents == ["Formulas"]
+        assert stack_contents == ["Stacked"]
+
     def test_each_panel_carries_its_name_for_stacked_mode(self):
         # The "Stacked" toolbar toggle hides the tab bar and reveals
         # every panel at once — so each panel's title must stay in