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

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

**Goal:** Add one dispatch line in `UcpComponent.handleSelection` so that clicking a What-panel item whose ucpComponent is a direct `UcpComponent` (e.g. CanvasGauges/Generic Gauge) routes the defaultView to the Overview panel while keeping the detailsView in the Details panel.

**Architecture:** Pure action-bus dispatch. One additional `Action.do(OverView.ACTION_OPEN, ucpComponent)` call in `UcpComponentSupport.class.js`, immediately after the existing `Action.do(DetailsView.ACTION_SHOW, ucpComponent)`. No new constants, no other source changes, no test changes (the test extension already at HEAD will validate the new behavior).

**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`
- Spec: `docs/superpowers/specs/2026-05-21-woda-whatpanel-auto-overview-design.md` (v3 revision, will be committed alongside the fix)
- Failing test already at HEAD (`b46dda3d8` + `849a3c6c6`): `click_generic_gauge_and_assert_overview_renders` in `TestWodaCanvasGauges.py`. Asserts a `<canvas>` in Overview after Generic Gauge click. Currently RED.
- v1 and v2 plan/spec attempts both incorrectly targeted `WhatPanel.class.js`. v3 supersedes after empirical investigation traced the actual handler to `UcpComponent.handleSelection`.

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

---

## File Structure

- **Modify:** `Components/tla/EAMD/UcpComponentSupport/2.4.5/src/js/UcpComponentSupport.class.js` — add one line to `UcpComponent.handleSelection`'s non-array branch (line ~3372 in current source). This is the only source-code change.

No other files are touched. No new constants, classes, or refactors. The committed test extension is expected to pass without modification.

---

## Task 1: Add the one-line dispatch in UcpComponent.handleSelection

**Files:**
- Modify: `Components/tla/EAMD/UcpComponentSupport/2.4.5/src/js/UcpComponentSupport.class.js`

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

Locate this block (around lines 3367–3375 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, ucpComponent);
        }
        Action.do(Workflow.ACTION_SELECT, ucpComponent);
```

Add **exactly one new line** after `Action.do(DetailsView.ACTION_SHOW, ucpComponent);`:

```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, ucpComponent);
          Action.do(OverView.ACTION_OPEN, ucpComponent);
        }
        Action.do(Workflow.ACTION_SELECT, ucpComponent);
```

Do NOT touch any other line, comment, or branch. The array branch (the `if (Array.isArray(ucpComponent.model)) { ... }` block above) must stay unchanged.

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

The browser is already running via `Components/me/hannesnortje/TestSuite/2.0.0/browser.py`. Reload the WODA tab, reproduce the user demo flow, and confirm visually + via tab-state:

```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. [2]
python3 browser.py switch 2                # switch to the WODA tab
python3 browser.py reload
sleep 5
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 v3-manual-verify
```

Open `/tmp/browser_screenshots/v3-manual-verify.png` (use the Read tool with the absolute file path). Expected:

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

Verify tab state programmatically:

```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` contains exactly one `Generic Gauge` entry.
- `dpTabs` contains exactly one `Generic Gauge` entry (the detailsView with Attributes) — **not two**.

If either check fails, report **BLOCKED** with the actual observation. Do NOT commit unless both pass.

- [ ] **Step 3: Verify Partners click still works (no regression).**

Reload and reproduce just the Partners click without the drag:

```bash
python3 browser.py reload
sleep 5
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 3
python3 browser.py find "xpath=//b[normalize-space(.)='Canvas Gauges']"
```

Expected: `Found 1 element(s)` with `<b> [visible] Canvas Gauges` (the partner-list rendering in Overview must keep the Canvas Gauges link clickable). If hidden, the fix has regressed Partners — STOP and investigate.

- [ ] **Step 4: Commit the fix and the revised spec together.**

```bash
cd /home/hannesn/WODA.2023/_var_dev/EAMD.ucp
git add Components/tla/EAMD/UcpComponentSupport/2.4.5/src/js/UcpComponentSupport.class.js \
        docs/superpowers/specs/2026-05-21-woda-whatpanel-auto-overview-design.md
git commit -m "$(cat <<'EOF'
feat(WODA): auto-populate Overview on What-panel click for UcpComponent items

UcpComponent.handleSelection now dispatches OverView.ACTION_OPEN alongside the
existing DetailsView.ACTION_SHOW for non-array items. Clicking a What-panel
item whose ucpComponent is a direct UcpComponent (e.g. CanvasGauges) now opens
the defaultView (rendered widget) in Overview and detailsView (Attributes
editor) in Details, satisfying the "defaultView always to Overview" rule for
this class of items.

DefaultWebItem-based items (Partners, etc.) are unaffected — their
handleSelection override path retains its existing 2.4.5 behavior:
OverView.ACTION_SHOW adds the children-list overView to Overview, and
DetailsView.ACTION_OPEN keeps the defaultView in Details. Partners navigation
to Canvas Gauges and other partner children continues to work.

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

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 after the fix)

- [ ] **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, go to Step 3.

**Expected outcome B (precondition mismatch):** Test fails on the Overview-canvas XPath. The test's drag-drop step drops `component.xml` on Overview, not Details — different precondition than the live demo. After the fix, Overview already has CanvasGauges (parent component) as a tab; the Generic Gauge defaultView may be added but not activated.

If outcome B, proceed to Step 2.

- [ ] **Step 2: ONLY IF Step 1 outcome was B — adjust the test's assertion to explicitly activate the Overview Generic Gauge tab before checking for the canvas.**

Locate the `click_generic_gauge_and_assert_overview_renders` function in `TestWodaCanvasGauges.py` (added in commits `b46dda3d8` + `849a3c6c6`). Replace the Assertion 2 block:

```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_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")
```

with this version that activates the Generic Gauge tab in Overview first if necessary:

```python
    # Assertion 2: Overview panel renders a <canvas> (gauge widget).
    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']"
    )
    try:
        gg_tab = target_driver.find_element(By.XPATH, overview_gg_tab_xpath)
        gg_tab.click()
        time.sleep(1)
        logging.info("Activated Generic Gauge tab in Overview")
    except Exception:
        logging.info("Generic Gauge tab in Overview was already active or not present")

    overview_canvas_xpath = (
        "//div[contains(@class,'panel')]"
        "[.//div[contains(@class,'panel-heading') and normalize-space()='Overview']]"
        "//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")
```

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
```

If the test still fails, report **BLOCKED** with the actual diagnostic — the test's drag-drop precondition may need to change to match the live demo flow (drag onto Details panel-heading instead of Overview drop-zone), which is beyond Step 2's scope.

- [ ] **Step 3: Commit 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 Generic Gauge tab before canvas-visibility assertion

The test's drag-drop precondition leaves multiple tabs in Overview; the new
Generic Gauge tab may not auto-activate in that state. Explicitly activate it
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: Close out the plan

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

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

- [ ] **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-v3.md
git commit -m "$(cat <<'EOF'
docs(WODA): mark WhatPanel auto-Overview v3 plan complete

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

---

## Acceptance criteria

1. `UcpComponentSupport.class.js`'s `UcpComponent.handleSelection` non-array branch dispatches `OverView.ACTION_OPEN` after the existing `DetailsView.ACTION_SHOW` — verified by `git show` of the Task 1 commit.
2. In the live Chrome-controlled browser session, after navigating What → What can I do → 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. Partners click works as before: Overview shows the partner list (Canvas Gauges link clickable), Details shows the Cerulean Circle defaultView, navigation to Canvas Gauges proceeds correctly.
4. The Selenium test `canvas_gauges` completes successfully end-to-end (after optional Step-2 adjustment).
5. Two or three commits land on the branch in order: feat (fix + spec), optional test adjustment, plan-complete.