Supply-tree page heading never renders (non-reactive var instead of ref)

What's happening

packages/front-end/pages/products/[id]/supplyTree.vue:26 declares:

var selectedOKHname : string;

as a plain, non-reactive module/setup-scope variable — not a Vue ref. It's assigned inside sendToSupplyGraphAI (line 53: selectedOKHname = selectedOkh.value.name;) and rendered in the template at line 159: <h1>{{ selectedOKHname }}</h1>.

Because it's a plain var, Vue's reactivity system never picks up the assignment, so the <h1> renders whatever selectedOKHname was at the component's first render (undefined/empty) and never updates, no matter how long the match request takes or what it returns.

Impact

The supply-tree page's heading is permanently blank — regardless of whether the OHM match call succeeds, fails, or is still loading.

Evidence

Confirmed via a standalone diagnostic script that clicked through to the page and waited well past any fetch/render delay — the heading stayed empty. Captured as the expected current behavior (not "fixed" to look correct) in packages/e2e/tests/main-workflow.spec.ts.

Likely fix

Change var selectedOKHname : string; to const selectedOKHname = ref<string>(""); (or fold it into the existing selectedOkh ref) and update the template binding to {{ selectedOKHname }} → {{ selectedOKHname.value }} is not needed in <template> (auto-unwrapped), just switch the declaration and the one assignment site to .value.

Tracked as a known issue in dev-docs/TESTING.md / AGENT.md.

Start in packages/front-end/pages/products/[id]/supplyTree.vue at the declaration on line 26, the assignment in sendToSupplyGraphAI on line 53, and the heading around line 159. Review packages/e2e/tests/main-workflow.spec.ts for the current behavior, then run that test. Done means the supply-tree heading displays the selected OHM name after the match request completes.