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

> **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:** Restore the WODA 2.4.4 OverView dispatch alongside the existing 2.4.5 Details dispatch so a non-array click in the What panel populates both Details (Attributes) and Overview (rendered widget) in parallel.

**Architecture:** One additional `Action.do(OverView.ACTION_OPEN, item)` call in `WhatPanel.handleSelection`, right after the existing `Action.do(DetailsView.ACTION_SHOW, item)`. No new constants, no new classes, no event-bus changes. TDD: extend the canvas-gauges Selenium test with a failing assertion that proves the gauge widget appears in Overview after a What-panel click, then add the one line.

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

**Spec note:** The committed spec at `docs/superpowers/specs/2026-05-21-woda-whatpanel-auto-overview-design.md` referenced a future 2.0.0 Playwright test that does not exist yet. The active canvas-gauges test is the 1.0.0 Selenium test. This plan targets the real file. The behavior contract from the spec is unchanged.

---

## File Structure

- **Modify:** `Components/com/ceruleanCircle/EAM/5_ux/WODA/WhatPanel/2.4.5/src/js/WhatPanel.class.js` — add one line to `handleSelection`'s non-array branch (line ~249 in current source).
- **Modify:** `Components/com/ceruleanCircle/EAM/5_ux/WODA/2.4.5/test/py_tests/1.0.0/TestWodaCanvasGauges.py` — add a new step inside `perform_gauge_test` that clicks the What-panel `<b>Generic Gauge</b>` and asserts the Overview panel renders a canvas widget; runs after the existing drag-drop step but before `perform_itemview_move`.
- **Re-baseline:** `Components/me/hannesnortje/TestSuite/1.0.0/screenshots/golden/canvas_gauges/*` — only if golden comparisons are enabled and the new assertion creates new screenshots; otherwise no change.

---

## Task 1: Add failing test assertion (TDD red)

**Files:**
- Modify: `Components/com/ceruleanCircle/EAM/5_ux/WODA/2.4.5/test/py_tests/1.0.0/TestWodaCanvasGauges.py`

- [ ] **Step 1: Add a new step function for the What-panel click + Overview-render assertion.**

Insert this function definition above `perform_itemview_move` in `TestWodaCanvasGauges.py`:

```python
def click_generic_gauge_and_assert_overview_renders(target_driver):
    """
    Click the <b>Generic Gauge</b> label in the What panel and assert that
    the Overview panel renders a <canvas> widget — this exercises the new
    auto-populate-Overview behavior in WhatPanel.handleSelection.
    """
    logging.info("Clicking <b>Generic Gauge</b> in What panel...")

    # Find the What-panel link. There are several <b>Generic Gauge</b> nodes
    # (overlay labels, the WhatPanel item, etc.); we want the WhatPanel one,
    # which sits inside an element whose ancestor's panel-heading reads "What".
    generic_gauge_xpath = (
        "//div[contains(@class,'what')]//b[normalize-space()='Generic Gauge']"
        " | //b[normalize-space()='Generic Gauge'][ancestor::div[normalize-space(.//div[contains(@class,'panel-heading')])='What']][1]"
    )
    # Fallback: just take the first visible <b>Generic Gauge</b>.
    fallback_xpath = "//b[normalize-space()='Generic Gauge']"

    try:
        gg = WebDriverWait(target_driver, 10).until(
            EC.element_to_be_clickable((By.XPATH, generic_gauge_xpath))
        )
    except Exception:
        logging.warning("Scoped XPath did not match; falling back to first <b>Generic Gauge</b>.")
        gg = WebDriverWait(target_driver, 10).until(
            EC.element_to_be_clickable((By.XPATH, fallback_xpath))
        )
    gg.click()
    logging.info("Clicked <b>Generic Gauge</b>")

    # Allow Details + Overview dispatches to settle.
    time.sleep(2)
    target_driver.save_screenshot(
        os.path.join(SCREENSHOT_DIR, "5a_after_generic_gauge_click.png")
    )

    # Assertion 1: Details panel still shows Attributes (existing 2.4.5 behavior).
    attributes_label_xpath = (
        "//div[contains(@class,'panel-heading') and normalize-space()='Attributes']"
        " | //label[contains(normalize-space(),'model.name')]"
    )
    WebDriverWait(target_driver, 10).until(
        EC.presence_of_element_located((By.XPATH, attributes_label_xpath))
    )
    logging.info("Details panel populated with Attributes — OK")

    # Assertion 2: Overview panel renders a <canvas> (gauge widget).
    overview_canvas_xpath = (
        "//div[contains(@class,'panel-heading') and normalize-space()='Overview']"
        "/ancestor::div[contains(@class,'panel')][1]//canvas"
    )
    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"
    )
    logging.info("Overview panel renders <canvas> gauge widget — OK")
```

- [ ] **Step 2: Call the new function from `perform_gauge_test` right after `take_screenshot(target_driver, "3_after_drop", headless)` and BEFORE `perform_itemview_move(target_driver)`.**

Locate this block (around line 280–287 of the current file):

```python
        # Wait for component to load and take final screenshot
        time.sleep(5)
        take_screenshot(target_driver, "3_after_drop", headless)
        logging.info("Canvas Gauge component added successfully")
        
        # ========================================================================
        # Step 2: Move item view to overview panel
        # ========================================================================
        logging.info("\n" + "="*80 + "\nMoving item view to overview panel\n" + "="*80)
        perform_itemview_move(target_driver)
```

Replace with:

```python
        # Wait for component to load and take final screenshot
        time.sleep(5)
        take_screenshot(target_driver, "3_after_drop", headless)
        logging.info("Canvas Gauge component added successfully")

        # ========================================================================
        # Step 1b: NEW — click <b>Generic Gauge</b> in What panel and assert that
        # both Details (Attributes) and Overview (canvas widget) populate. This
        # exercises the WhatPanel.handleSelection auto-populate-Overview feature.
        # ========================================================================
        logging.info("\n" + "="*80 + "\nClicking Generic Gauge in What panel\n" + "="*80)
        click_generic_gauge_and_assert_overview_renders(target_driver)

        # ========================================================================
        # Step 2: Move item view to overview panel (still exercised for drag-drop coverage)
        # ========================================================================
        logging.info("\n" + "="*80 + "\nMoving item view to overview panel\n" + "="*80)
        perform_itemview_move(target_driver)
```

- [ ] **Step 3: Run the test and verify the new assertion FAILS.**

The canonical way to run this test is the TestSuite 1.0.0 runner, which auto-creates its Selenium venv on first 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
```

Expected output: test reaches `click_generic_gauge_and_assert_overview_renders`, the click succeeds, the Attributes assertion (Assertion 1) passes, but the Overview `<canvas>` assertion (Assertion 2) **times out** — because in current 2.4.5 the click only fires `DetailsView.ACTION_SHOW`, not `OverView.ACTION_OPEN`. Final log line: `selenium.common.exceptions.TimeoutException` on the `overview_canvas_xpath` wait.

If the test fails for any other reason (XPath typo, page not loaded, server not running, chromedriver missing, etc.), report BLOCKED with the actual error so the controller can address the environment issue before TDD proceeds. Do not fudge the test to make Assertion 2 fail "for the right reason" — only proceed once the failure is genuinely Assertion 2 timing out.

- [ ] **Step 4: Commit the failing test.**

```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): add failing assertion — What-panel click should populate Overview

Adds click_generic_gauge_and_assert_overview_renders() between the drag-drop
step and perform_itemview_move. Currently fails on the Overview <canvas>
assertion because 2.4.5 dispatches only DetailsView.ACTION_SHOW.

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

---

## Task 2: Implement the one-line fix (TDD green)

**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 (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: Hard-reload the browser tab so the new JS is loaded, then re-run the test to verify it PASSES.**

Force-refresh of static JS is usually unnecessary (no service worker observed), but reload the tab anyway:

```bash
cd /home/hannesn/WODA.2023/_var_dev/EAMD.ucp/Components/me/hannesnortje/TestSuite/2.0.0
python3 browser.py reload
```

Then run the test via the TestSuite 1.0.0 runner:

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

Expected output: the test runs end-to-end with no exception. The final log lines include:
```
TEST COMPLETED SUCCESSFULLY!
```
And earlier in the log:
```
Overview panel renders <canvas> gauge widget — OK
```

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

Confirm the feature visually in the already-open browser:

```bash
cd /home/hannesn/WODA.2023/_var_dev/EAMD.ucp/Components/me/hannesnortje/TestSuite/2.0.0
python3 browser.py switch 2          # WODA tab
python3 browser.py reload            # pick up the new WhatPanel.class.js
python3 browser.py click "xpath=//b[normalize-space(.)='Canvas Gauges']"
python3 browser.py click "xpath=//b[normalize-space(.)='Generic Gauge']"
python3 browser.py screenshot after-fix-manual
```

Open `/tmp/browser_screenshots/after-fix-manual.png`. Expected: the Overview panel (3rd column from the left) shows the gauge widget (a `<canvas>` element rendering the gauge), AND the Details panel (4th column) shows the Attributes editor. Both panels populated in parallel.

If the gauge does not appear in Overview, double-check that the new line is actually saved in `WhatPanel.class.js` and that the page was reloaded.

- [ ] **Step 4: 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

WhatPanel.handleSelection now dispatches OverView.ACTION_OPEN alongside the
existing DetailsView.ACTION_SHOW for non-array items. 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.

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 3: Mark the implementation-plan checklist complete

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

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

(This is the executing-plan housekeeping step — done by the executing-plans / subagent-driven-development skill, not manually.)

- [ ] **Step 2: Commit the plan with checkboxes ticked.**

```bash
cd /home/hannesn/WODA.2023/_var_dev/EAMD.ucp
git add docs/superpowers/plans/2026-05-21-woda-whatpanel-auto-overview.md
git commit -m "$(cat <<'EOF'
docs(WODA): mark WhatPanel auto-Overview 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.
2. Clicking `<b>Generic Gauge</b>` in the WODA What panel populates Details (Attributes editor) and Overview (rendered gauge canvas) in parallel — visually confirmed.
3. Extended `TestWodaCanvasGauges.py` passes end-to-end with the new `click_generic_gauge_and_assert_overview_renders` step.
4. Array-item clicks in the What panel behave exactly as before — `OverView.ACTION_SHOW` only, no Details change.
5. Three commits land on the branch in order: failing test, fix, plan-complete.