# WODA 2.4.5 — Auto-populate Overview on What-panel click — Implementation Plan v2

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Re-apply the one-line dispatch fix in `WhatPanel.handleSelection` that makes clicking a non-array What-panel item populate both Details (Attributes editor) and Overview (rendered defaultView, e.g. gauge canvas), maintaining the invariant that the item's defaultView lives in exactly one panel at a time.

**Architecture:** Pure action-bus dispatch — same pattern as 2.4.4. One additional `Action.do(OverView.ACTION_OPEN, item)` call right after the existing `Action.do(DetailsView.ACTION_SHOW, item)`. The 2.4.5 codebase already routes this dispatch correctly to `OverviewPanel.open` (verified empirically), which internally handles the move-from-Details semantics.

**Tech Stack:** JavaScript (WODA ES6 namespace classes), Python 3 + Selenium WebDriver (existing test rig), TestSuite at `Components/me/hannesnortje/TestSuite/1.0.0`.

**State at start of this plan:**
- Branch: `dev/WODA245-v2`
- Failing test already committed (`b46dda3d8`, hardened in `849a3c6c6`): `click_generic_gauge_and_assert_overview_renders` in `TestWodaCanvasGauges.py`. Currently RED — assertion 2 (Overview canvas) times out.
- Previous one-line fix was committed (`3d3a93b01`) then reverted (`a532a47ac`) due to a misdiagnosis. Empirical re-verification showed the dispatch is correct in 2.4.5; the misdiagnosis came from intermediate state created by repeated clicks. See `docs/superpowers/specs/2026-05-21-woda-whatpanel-auto-overview-design.md` for the corrected spec.

**Spec:** `docs/superpowers/specs/2026-05-21-woda-whatpanel-auto-overview-design.md` (revision committed in `c92ab8981`).

---

## File Structure

- **Modify:** `Components/com/ceruleanCircle/EAM/5_ux/WODA/WhatPanel/2.4.5/src/js/WhatPanel.class.js` — add one line to the non-array branch of `handleSelection` (line ~249 in current source). This is the only source-code change.
- **Possibly modify:** `Components/com/ceruleanCircle/EAM/5_ux/WODA/2.4.5/test/py_tests/1.0.0/TestWodaCanvasGauges.py` — only if the test's drag-drop precondition makes the canvas-in-Overview assertion unreachable. Targeted XPath broadening or activation-step addition in scope.

No other files are touched. No new constants, classes, or refactors.

---

## Task 1: Re-apply the one-line fix in WhatPanel

**Files:**
- Modify: `Components/com/ceruleanCircle/EAM/5_ux/WODA/WhatPanel/2.4.5/src/js/WhatPanel.class.js`

- [ ] **Step 1: Edit `WhatPanel.handleSelection`'s non-array branch to also dispatch `OverView.ACTION_OPEN`.**

Locate this block (around lines 245–250 in current source):

```javascript
                    } else {
                        //Action.do(DetailsView.ACTION_SHOW, ucpComponent);
                        Action.do(ActionsPanel.ACTION_SET_PRIMARY, DetailsView.ACTION_SHOW);
                        Action.do(ActionsPanel.ACTION_SET_BUTTONS, []);
                        Action.do(DetailsView.ACTION_SHOW, item);
                    }
```

Change to:

```javascript
                    } else {
                        //Action.do(DetailsView.ACTION_SHOW, ucpComponent);
                        Action.do(ActionsPanel.ACTION_SET_PRIMARY, DetailsView.ACTION_SHOW);
                        Action.do(ActionsPanel.ACTION_SET_BUTTONS, []);
                        Action.do(DetailsView.ACTION_SHOW, item);
                        Action.do(OverView.ACTION_OPEN, item);
                    }
```

Exactly one new line is added: `Action.do(OverView.ACTION_OPEN, item);`. Nothing else changes in this file.

- [ ] **Step 2: Manually verify the fix in the Chrome-controlled browser session.**

The browser is already running with both URLs loaded (via `Components/me/hannesnortje/TestSuite/2.0.0/browser.py`). Reload the WODA tab to pick up the new JS, reproduce the user demo flow, and observe the result:

```bash
cd /home/hannesn/WODA.2023/_var_dev/EAMD.ucp/Components/me/hannesnortje/TestSuite/2.0.0
python3 browser.py tabs                    # find the WODA tab index, e.g. [1]
python3 browser.py switch 1                # switch to the WODA tab
python3 browser.py reload                  # pick up new JS
sleep 4
python3 browser.py click "xpath=//b[normalize-space(.)='What can I do on this page?']"
sleep 1
python3 browser.py click "xpath=//b[normalize-space(.)='Partners']"
sleep 1
python3 browser.py click "xpath=//b[normalize-space(.)='Canvas Gauges']"
sleep 1
python3 browser.py click "xpath=//b[normalize-space(.)='Here in our Repository']"
sleep 1
python3 browser.py drag "xpath=(//i[contains(@class,'fa-hockey-puck')])[2]" "xpath=//div[contains(@class,'panel-heading') and normalize-space()='Details']"
sleep 3
python3 browser.py click "xpath=//b[normalize-space(.)='Generic Gauge']"
sleep 3
python3 browser.py screenshot manual-verify
```

Open `/tmp/browser_screenshots/manual-verify.png`. Expected:

- **Overview panel** (2nd column): renders the gauge widget — a circular canvas showing "39.8 °C" with a needle dial.
- **Details panel** (3rd column): shows the Attributes editor with fields `model.name=Generic Gauge`, `model.value=39.8`, etc.
- **No "Generic Gauge" tab** remaining in Details' tab strip (only in Overview's).

Verify tab state programmatically too:

```bash
python3 browser.py evaluate "(()=>{function findByClass(root,n){if(root?.constructor?.name===n)return root;for(const c of (root?.children||[])){const r=findByClass(c,n);if(r)return r;}return null;}const woda=ONCE.discover('WODA');const ov=findByClass(woda,'OverviewPanel');const dp=findByClass(woda,'DetailsPanel');return {ovTabs:ov.tabPanel.model.pages.map(p=>p.tab?.documentElement?.innerText?.trim()?.slice(0,25)),dpTabs:dp.tabPanel.model.pages.map(p=>p.tab?.documentElement?.innerText?.trim()?.slice(0,25))};})()"
```

Expected output:
- `ovTabs` includes one "Generic Gauge" entry (the defaultView, active).
- `dpTabs` includes one "Generic Gauge" entry (the detailsView/Attributes, active) — but **not two**. The Details panel's previously-loaded defaultView for Generic Gauge has been removed by OverviewPanel.open's move semantics.

If the visual screenshot does not match, abort and report BLOCKED. Do not commit until both the visual and the tab-state checks pass.

- [ ] **Step 3: Commit the fix.**

```bash
cd /home/hannesn/WODA.2023/_var_dev/EAMD.ucp
git add Components/com/ceruleanCircle/EAM/5_ux/WODA/WhatPanel/2.4.5/src/js/WhatPanel.class.js
git commit -m "$(cat <<'EOF'
feat(WODA): auto-populate Overview on What-panel click (2.4.5)

WhatPanel.handleSelection now dispatches OverView.ACTION_OPEN alongside the
existing DetailsView.ACTION_SHOW for non-array items. This restores the 2.4.4
Overview behavior on top of 2.4.5 Details behavior so a click on a What-panel
item populates both panels in parallel, maintaining the invariant that the
item's defaultView lives in exactly one panel at a time (moved from Details to
Overview if needed).

The 2.4.5 routing fix in DetailsPanel.class.js:76
(viewOpenAction.setObject(overviewPanel)) ensures Action.do(OverView.ACTION_OPEN)
routes to OverviewPanel.open, which internally handles the move-from-Details
semantics — no tree-walking or direct panel references needed.

Spec: docs/superpowers/specs/2026-05-21-woda-whatpanel-auto-overview-design.md

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

---

## Task 2: Verify the Selenium test now passes

**Files:**
- Possibly modify: `Components/com/ceruleanCircle/EAM/5_ux/WODA/2.4.5/test/py_tests/1.0.0/TestWodaCanvasGauges.py` (only if the test fails for a precondition-related reason)

- [ ] **Step 1: Run the Selenium test.**

```bash
cd /home/hannesn/WODA.2023/_var_dev/EAMD.ucp/Components/me/hannesnortje/TestSuite/1.0.0
python3 run_tests.py canvas_gauges --headless
```

(Bash `timeout: 300000`, 5 min — first-run venv setup may take a moment.)

**Expected outcome A (happy path):** Test completes successfully. Final log lines include:
- `Details panel populated with Attributes — OK`
- `Overview panel renders <canvas> gauge widget — OK`
- `TEST COMPLETED SUCCESSFULLY!`

If this happens, skip Step 2 and go to Step 3.

**Expected outcome B (precondition mismatch):** Test still fails on the Overview-canvas XPath. The cause is most likely the test's drag-drop step (which drops `component.xml` on the Overview drop-zone, not the Details panel-heading like the user's manual demo). After the fix, Overview already contains the CanvasGauges component when Generic Gauge is clicked, and `OverView.ACTION_OPEN` no-ops via `closeCurrentView` because the current Overview tab matches. The new tab may not be added, or it's added but not the one containing the visible canvas.

If outcome B, proceed to Step 2.

- [ ] **Step 2: ONLY IF Step 1 outcome was B — diagnose and adjust the test's assertion.**

Open the saved screenshot `Components/me/hannesnortje/TestSuite/1.0.0/screenshots/latest/canvas_gauges/5a_after_generic_gauge_click.png` and inspect what the Overview panel actually shows.

The assertion currently looks for:

```python
overview_canvas_xpath = (
    "//div[contains(@class,'panel')]"
    "[.//div[contains(@class,'panel-heading') and normalize-space()='Overview']]"
    "//canvas"
)
```

Two likely adjustments (pick whichever matches the observed state):

**Adjustment A — broaden the canvas search to any descendant under Overview (visibility-only check moved to assertion).**

If the canvas exists in Overview but the active tab is a non-canvas one, change the assertion to check that at least one canvas under Overview is visible, and if none, explicitly activate the just-added Generic Gauge tab in Overview before checking:

```python
    # Assertion 2: Overview panel renders a <canvas> (gauge widget).
    overview_canvas_xpath = (
        "//div[contains(@class,'panel')]"
        "[.//div[contains(@class,'panel-heading') and normalize-space()='Overview']]"
        "//canvas"
    )
    overview_gg_tab_xpath = (
        "//div[contains(@class,'panel')]"
        "[.//div[contains(@class,'panel-heading') and normalize-space()='Overview']]"
        "//a[@role='tab' and normalize-space()='Generic Gauge']"
    )
    # If a Generic Gauge tab exists in Overview but isn't active, activate it.
    try:
        gg_tab_in_overview = target_driver.find_element(By.XPATH, overview_gg_tab_xpath)
        if not gg_tab_in_overview.find_element(By.XPATH, "..").get_attribute("class").__contains__("active"):
            gg_tab_in_overview.click()
            time.sleep(1)
            logging.info("Activated Generic Gauge tab in Overview")
    except Exception:
        pass

    overview_canvas = WebDriverWait(target_driver, 10).until(
        EC.presence_of_element_located((By.XPATH, overview_canvas_xpath))
    )
    assert overview_canvas.is_displayed(), (
        "Gauge <canvas> exists in Overview panel but is not visible"
    )
```

Replace the existing Assertion 2 block (around lines 138–148 of the file post-`849a3c6c6`) with the above.

**Adjustment B — change the test's drag-drop step.**

Instead of dropping `component.xml` on the Overview panel-heading, drop the CanvasGauges hockey puck on the Details panel-heading (matching the manual demo flow). This requires changing the source/target XPaths and the drop-target in `perform_gauge_test`. Out of scope unless Adjustment A also fails.

After applying Adjustment A, re-run:

```bash
cd /home/hannesn/WODA.2023/_var_dev/EAMD.ucp/Components/me/hannesnortje/TestSuite/1.0.0
python3 run_tests.py canvas_gauges --headless
```

Iterate until the test passes. If after Adjustment A the test still fails, report BLOCKED with the actual diagnostic state (which tabs are where, what the screenshot shows) so the controller can decide on Adjustment B.

- [ ] **Step 3: Commit only the test adjustment, if any was made.**

If you modified `TestWodaCanvasGauges.py` in Step 2:

```bash
cd /home/hannesn/WODA.2023/_var_dev/EAMD.ucp
git add Components/com/ceruleanCircle/EAM/5_ux/WODA/2.4.5/test/py_tests/1.0.0/TestWodaCanvasGauges.py
git commit -m "$(cat <<'EOF'
test(WODA): activate Overview gauge tab before asserting canvas visibility

After the WhatPanel auto-Overview fix, the test's drag-drop precondition leaves
Overview with CanvasGauges as the current tab; OverView.ACTION_OPEN adds the
Generic Gauge tab to Overview but doesn't always auto-activate it in this state.
Explicitly activate the tab before asserting canvas visibility.

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

If you did NOT modify the test (Step 1 outcome A), skip the commit.

---

## Task 3: Mark plan checkboxes complete and commit

**Files:**
- Modify: `docs/superpowers/plans/2026-05-21-woda-whatpanel-auto-overview-v2.md` (this file)

- [ ] **Step 1: Tick all `- [ ]` boxes in this plan as `- [x]` for Tasks 1 and 2 that were performed.**

(The executing-plans / subagent-driven-development skill handles this automatically.)

- [ ] **Step 2: Commit the closed-out plan.**

```bash
cd /home/hannesn/WODA.2023/_var_dev/EAMD.ucp
git add docs/superpowers/plans/2026-05-21-woda-whatpanel-auto-overview-v2.md
git commit -m "$(cat <<'EOF'
docs(WODA): mark WhatPanel auto-Overview v2 plan complete

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

---

## Acceptance criteria

1. `WhatPanel.class.js` non-array branch dispatches both `DetailsView.ACTION_SHOW` and `OverView.ACTION_OPEN` for the same item — verified by `git show` of the Task 1 commit.
2. In the live Chrome-controlled browser session, after navigating What → Partners → Canvas Gauges → Here in our Repository → drag hockey puck of `CanvasGauges.component.xml` onto Details, clicking `<b>Generic Gauge</b>` in WhatPanel produces:
   - Overview panel showing the rendered gauge canvas widget (39.8 °C dial)
   - Details panel showing the Attributes editor for Generic Gauge
   - No duplicate Generic Gauge tab in Details
3. The Selenium test `canvas_gauges` completes successfully end-to-end.
4. Array-item clicks in the What panel behave exactly as before — `OverView.ACTION_SHOW` only, no Details change. (Verified by inspecting the diff: only the `else` branch is modified.)
5. Two or three commits land on the branch in order: feat (fix), optional test adjustment, plan-complete.