docs: add editable plan card implementation plan

12-task TDD plan covering per-field editing, ask-agent buttons, notes
area, dual score display, Save & Continue action, and unified
confirm/revise with plan card auto-fill.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

docs/superpowers/plans/2026-04-12-editable-plan-card.md

@@ -0,0 +1,848 @@
+# Editable Plan Card 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:** Make the plan review card editable with per-field edit/ask-agent buttons, a notes area, dual score display, Save & Continue action, and unified confirm/revise behavior.
+
+**Architecture:** Extend the existing inline plan card in `web/index.html` with edit toggles and agent-ask buttons per field. Add a `notes` field to `DesignPlan` and `field_agents` config to `PlanningConfig`. Modify `confirmRecommendation()` to auto-fill plan card fields when a plan is visible. No new API endpoints — Save & Continue is frontend-only, Approve already accepts the full plan object.
+
+**Tech Stack:** Python/Pydantic (backend models), FastAPI (routes), vanilla JS/HTML/CSS (frontend)
+
+---
+
+### Task 1: Add `notes` field to `DesignPlan` and `field_agents` to config
+
+**Files:**
+- Modify: `agents/design_state.py:42-92`
+- Modify: `config/settings.py:98-112`
+- Modify: `config.yaml:74-97`
+- Test: `tests/test_design_state.py`
+- Test: `tests/test_settings.py`
+
+- [ ] **Step 1: Write failing test for `notes` on DesignPlan**
+
+Add to `tests/test_design_state.py` in the `TestDesignPlan` class:
+
+```python
+def test_plan_notes_default_empty(self):
+    plan = DesignPlan(part_name="test")
+    assert plan.notes == ""
+
+def test_plan_notes_in_render(self):
+    plan = DesignPlan(
+        part_name="bracket",
+        material="aluminum",
+        notes="Check if 304 is overkill",
+    )
+    rendered = plan.render_approved()
+    assert "USER NOTES" in rendered
+    assert "Check if 304 is overkill" in rendered
+
+def test_plan_notes_empty_not_in_render(self):
+    plan = DesignPlan(part_name="bracket", material="aluminum", notes="")
+    rendered = plan.render_approved()
+    assert "USER NOTES" not in rendered
+
+def test_plan_from_state_no_notes(self):
+    state = DesignState(part_name="bracket", material="steel")
+    plan = DesignPlan.from_state(state, confidence_score=5.0)
+    assert plan.notes == ""
+```
+
+- [ ] **Step 2: Run tests to verify they fail**
+
+Run: `pytest tests/test_design_state.py::TestDesignPlan -v`
+Expected: FAIL — `DesignPlan` has no `notes` field
+
+- [ ] **Step 3: Add `notes` field to `DesignPlan`**
+
+In `agents/design_state.py`, add the field after `confidence_score` (line 52):
+
+```python
+confidence_score: float = 0.0
+notes: str = ""
+```
+
+Update `render_approved()` — add before the final two lines (`"This plan has been reviewed..."`):
+
+```python
+if self.notes:
+    lines.append(f"User Notes: {self.notes}")
+```
+
+- [ ] **Step 4: Run tests to verify they pass**
+
+Run: `pytest tests/test_design_state.py::TestDesignPlan -v`
+Expected: PASS
+
+- [ ] **Step 5: Write failing test for `field_agents` config**
+
+Add to `tests/test_settings.py`:
+
+```python
+def test_planning_field_agents_defaults():
+    from config.settings import PlanningConfig
+    cfg = PlanningConfig()
+    assert cfg.field_agents["material"] == "engineering"
+    assert cfg.field_agents["features"] == "design"
+    assert cfg.field_agents["constraints"] == "cnc"
+    assert cfg.field_agents["axis_recommendation"] == "cnc"
+    assert cfg.field_agents["part_name"] == "design"
+```
+
+- [ ] **Step 6: Run test to verify it fails**
+
+Run: `pytest tests/test_settings.py::test_planning_field_agents_defaults -v`
+Expected: FAIL — `PlanningConfig` has no `field_agents`
+
+- [ ] **Step 7: Add `field_agents` to `PlanningConfig`**
+
+In `config/settings.py`, add after `approved_agents` (line 111):
+
+```python
+field_agents: dict[str, str] = Field(default_factory=lambda: {
+    "material": "engineering",
+    "dimensions": "engineering",
+    "features": "design",
+    "constraints": "cnc",
+    "axis_recommendation": "cnc",
+    "machining_notes": "cnc",
+    "part_name": "design",
+})
+```
+
+Add to `config.yaml` under `planning:` (after `approved_agents`):
+
+```yaml
+  field_agents:
+    material: engineering
+    dimensions: engineering
+    features: design
+    constraints: cnc
+    axis_recommendation: cnc
+    machining_notes: cnc
+    part_name: design
+```
+
+- [ ] **Step 8: Run tests to verify they pass**
+
+Run: `pytest tests/test_settings.py::test_planning_field_agents_defaults tests/test_design_state.py -v`
+Expected: PASS
+
+- [ ] **Step 9: Commit**
+
+```bash
+git add agents/design_state.py config/settings.py config.yaml tests/test_design_state.py tests/test_settings.py
+git commit -m "feat: add notes field to DesignPlan and field_agents config"
+```
+
+---
+
+### Task 2: Update `plan/approve` endpoint to handle `notes`
+
+**Files:**
+- Modify: `server/routes.py:164-178`
+- Test: `tests/test_api_routes.py`
+
+- [ ] **Step 1: Write failing test**
+
+Add to `tests/test_api_routes.py` in `TestPlanApproveEndpoint`:
+
+```python
+def test_approve_preserves_notes(self):
+    resp = client.post("/api/plan/approve", json={
+        "plan": {
+            "part_name": "bracket",
+            "description": "test",
+            "material": "aluminum 6061",
+            "dimensions": {"width": 60},
+            "features": [],
+            "constraints": [],
+            "axis_recommendation": "3-axis",
+            "machining_notes": [],
+            "confidence_score": 9.0,
+            "notes": "Check material compatibility",
+        },
+        "design_state": {"phase": "planning"},
+    })
+    assert resp.status_code == 200
+    data = resp.json()
+    assert data["design_state"]["plan"]["notes"] == "Check material compatibility"
+```
+
+- [ ] **Step 2: Run test to verify it passes (no backend change needed)**
+
+Run: `pytest tests/test_api_routes.py::TestPlanApproveEndpoint::test_approve_preserves_notes -v`
+Expected: PASS — Pydantic already handles the new `notes` field automatically since the endpoint does `DesignPlan(**body.plan)` and `state.plan = plan`
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add tests/test_api_routes.py
+git commit -m "test: verify plan/approve preserves notes field"
+```
+
+---
+
+### Task 3: Add plan card CSS for edit controls, notes, and dual score
+
+**Files:**
+- Modify: `web/index.html` (CSS section, lines ~1286-1317)
+
+- [ ] **Step 1: Add CSS styles**
+
+In `web/index.html`, after the existing `.plan-card-reject` rule (line 1317), add:
+
+```css
+.plan-card-save {
+  background: var(--accent); color: var(--bg-void); border-color: var(--accent);
+}
+.plan-field-actions {
+  display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle;
+}
+.plan-field-btn {
+  background: none; border: 1px solid var(--border); border-radius: 3px;
+  color: var(--text-secondary); cursor: pointer; font-size: 10px;
+  padding: 1px 5px; font-family: var(--font-mono); line-height: 1.4;
+}
+.plan-field-btn:hover { border-color: var(--accent); color: var(--accent); }
+.plan-field-input {
+  background: var(--bg-void); border: 1px solid var(--accent); border-radius: 3px;
+  color: var(--text-primary); font-family: var(--font-mono); font-size: 11px;
+  padding: 2px 6px; width: 60%;
+}
+.plan-field-input:focus { outline: none; border-color: var(--success); }
+.plan-dim-group { display: inline-flex; gap: 4px; }
+.plan-dim-input {
+  background: var(--bg-void); border: 1px solid var(--accent); border-radius: 3px;
+  color: var(--text-primary); font-family: var(--font-mono); font-size: 11px;
+  padding: 2px 4px; width: 60px;
+}
+.plan-dim-input:focus { outline: none; border-color: var(--success); }
+.plan-dim-label {
+  font-size: 9px; color: var(--text-secondary); font-family: var(--font-mono);
+}
+.plan-notes {
+  width: 100%; min-height: 48px; margin-top: 8px; padding: 6px 8px;
+  background: var(--bg-void); border: 1px solid var(--border); border-radius: 5px;
+  color: var(--text-primary); font-family: var(--font-mono); font-size: 11px;
+  resize: vertical;
+}
+.plan-notes:focus { outline: none; border-color: var(--accent); }
+.plan-score-dual {
+  display: flex; gap: 16px; font-family: var(--font-mono); font-size: 11px;
+  color: var(--text-secondary); margin-top: 8px;
+}
+.plan-score-current { font-weight: 600; }
+.plan-score-current.score-ok { color: var(--success); }
+.plan-score-current.score-low { color: var(--warning, #ffab40); }
+```
+
+- [ ] **Step 2: Verify the page loads without CSS errors**
+
+Open the web app in a browser and confirm no visual regressions. The new styles have no effect yet since no HTML uses them.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add web/index.html
+git commit -m "feat: add CSS for editable plan card controls"
+```
+
+---
+
+### Task 4: Add i18n strings for editable plan card
+
+**Files:**
+- Modify: `web/index.html` (i18n section, lines ~2020-2126)
+
+- [ ] **Step 1: Add translation keys**
+
+In the English translations (after `planReject` around line 2051), add:
+
+```javascript
+planSave: 'Save & Continue',
+planNotesPlaceholder: 'Add notes about this plan...',
+planScoreOriginal: 'Original',
+planScoreCurrent: 'Current',
+planAskAgent: 'Ask',
+planEdit: '\u270e',
+```
+
+In the Chinese translations (after `planReject` around line 2088), add:
+
+```javascript
+planSave: '\u5132\u5b58\u4e26\u7e7c\u7e8c',
+planNotesPlaceholder: '\u65b0\u589e\u8a08\u756b\u5099\u8a3b...',
+planScoreOriginal: '\u539f\u59cb',
+planScoreCurrent: '\u7576\u524d',
+planAskAgent: '\u8a62\u554f',
+planEdit: '\u270e',
+```
+
+In the Vietnamese translations (after `planReject` around line 2125), add:
+
+```javascript
+planSave: 'L\u01b0u & Ti\u1ebfp T\u1ee5c',
+planNotesPlaceholder: 'Th\u00eam ghi ch\u00fa v\u1ec1 k\u1ebf ho\u1ea1ch...',
+planScoreOriginal: 'G\u1ed1c',
+planScoreCurrent: 'Hi\u1ec7n t\u1ea1i',
+planAskAgent: 'H\u1ecfi',
+planEdit: '\u270e',
+```
+
+- [ ] **Step 2: Verify `t()` returns new keys**
+
+Open browser console: `t('planSave')` should return `'Save & Continue'`.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add web/index.html
+git commit -m "feat: add i18n strings for editable plan card"
+```
+
+---
+
+### Task 5: Rewrite `renderPlanCard()` with edit controls and notes
+
+**Files:**
+- Modify: `web/index.html` (lines ~1840-1862)
+
+- [ ] **Step 1: Add field-to-agent mapping and question templates**
+
+Add above the `renderPlanCard` function:
+
+```javascript
+const PLAN_FIELD_AGENTS = {
+  part_name: 'design', material: 'engineering', dimensions: 'engineering',
+  features: 'design', constraints: 'cnc', axis_recommendation: 'cnc',
+  machining_notes: 'cnc',
+};
+const PLAN_FIELD_QUESTIONS = {
+  part_name: 'What should this part be called?',
+  material: 'What material do you recommend?',
+  dimensions: 'What dimensions are appropriate?',
+  features: 'What features should this part have?',
+  constraints: 'What manufacturing constraints should we consider?',
+  axis_recommendation: 'What axis strategy do you recommend?',
+  machining_notes: 'Any machining notes to consider?',
+};
+```
+
+- [ ] **Step 2: Replace `renderPlanCard()` function**
+
+Replace the entire `renderPlanCard` function (lines 1840-1862) with:
+
+```javascript
+function renderPlanCard(plan) {
+  const fields = [
+    ['Part', 'part_name', plan.part_name, 'text'],
+    ['Material', 'material', plan.material, 'text'],
+    ['Dimensions', 'dimensions', plan.dimensions, 'dimensions'],
+    ['Features', 'features', plan.features, 'list'],
+    ['Constraints', 'constraints', plan.constraints, 'list'],
+    ['Axis', 'axis_recommendation', plan.axis_recommendation || 'Auto', 'text'],
+  ];
+  if (plan.machining_notes && plan.machining_notes.length) {
+    fields.push(['Notes', 'machining_notes', plan.machining_notes, 'list']);
+  }
+  let html = '<div class="plan-card" id="active-plan-card" data-original-score="' + (plan.confidence_score || 0) + '">';
+  html += '<div class="plan-card-title">\u25c6 ' + t('planReady') + '</div>';
+  for (const [label, key, value, type] of fields) {
+    html += '<div class="wizard-review-field" data-field="' + key + '">';
+    html += '<span class="wizard-review-label">' + escapeHtml(label) + '</span>';
+    html += '<span class="wizard-review-value" id="plan-val-' + key + '">';
+    if (type === 'dimensions') {
+      html += escapeHtml(Object.entries(value || {}).map(function(e) { return e[0] + '=' + e[1] + 'mm'; }).join(', ') || '\u2014');
+    } else if (type === 'list') {
+      html += escapeHtml((value || []).join(', ') || '\u2014');
+    } else {
+      html += escapeHtml(value || '\u2014');
+    }
+    html += '</span>';
+    html += '<span class="plan-field-actions">';
+    html += '<button class="plan-field-btn" onclick="toggleFieldEdit(\'' + key + '\', \'' + type + '\')" title="Edit">' + t('planEdit') + '</button>';
+    html += '<button class="plan-field-btn" onclick="askAgentForField(\'' + key + '\')" title="Ask Agent">' + t('planAskAgent') + '</button>';
+    html += '</span>';
+    html += '</div>';
+  }
+  // Notes area
+  html += '<textarea class="plan-notes" id="plan-notes" placeholder="' + t('planNotesPlaceholder') + '">' + escapeHtml(plan.notes || '') + '</textarea>';
+  // Dual score
+  var origScore = (plan.confidence_score || 0).toFixed(0);
+  html += '<div class="plan-score-dual">';
+  html += '<span>' + t('planScoreOriginal') + ': ' + origScore + '/8</span>';
+  html += '<span>\u2192</span>';
+  html += '<span class="plan-score-current score-ok" id="plan-current-score">' + t('planScoreCurrent') + ': ' + origScore + '/8</span>';
+  html += '</div>';
+  // Action buttons
+  html += '<div class="plan-card-actions">';
+  html += '<button class="plan-card-btn plan-card-approve" onclick="approvePlanCard()">' + t('planApprove') + '</button>';
+  html += '<button class="plan-card-btn plan-card-save" onclick="savePlanAndContinue()">' + t('planSave') + '</button>';
+  html += '<button class="plan-card-btn plan-card-reject" onclick="rejectPlanCard()">' + t('planReject') + '</button>';
+  html += '</div></div>';
+  return html;
+}
+```
+
+- [ ] **Step 3: Verify the plan card renders correctly**
+
+Trigger a plan in the UI (chat until score >= 8 or type a trigger keyword). Confirm:
+- All fields show values with pencil + Ask buttons
+- Notes textarea appears
+- Dual score shows Original and Current (same value initially)
+- Three buttons: Approve, Save & Continue, Reject
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add web/index.html
+git commit -m "feat: render editable plan card with field actions, notes, dual score"
+```
+
+---
+
+### Task 6: Implement `toggleFieldEdit()` and `recalcPlanScore()`
+
+**Files:**
+- Modify: `web/index.html` (add new functions after `renderPlanCard`)
+
+- [ ] **Step 1: Add `toggleFieldEdit()` function**
+
+Add after `renderPlanCard`:
+
+```javascript
+function toggleFieldEdit(fieldKey, fieldType) {
+  var valEl = document.getElementById('plan-val-' + fieldKey);
+  if (!valEl) return;
+  var plan = designState.plan;
+  if (!plan) return;
+
+  // If already editing (has input), save and switch back to display
+  var existingInput = valEl.querySelector('input, .plan-dim-group');
+  if (existingInput) {
+    // Read value from input(s) and update plan
+    if (fieldType === 'dimensions') {
+      var dimInputs = valEl.querySelectorAll('.plan-dim-input');
+      var dims = {};
+      dimInputs.forEach(function(inp) { if (inp.value) dims[inp.dataset.dim] = parseFloat(inp.value) || 0; });
+      plan.dimensions = dims;
+      valEl.textContent = Object.entries(dims).map(function(e) { return e[0] + '=' + e[1] + 'mm'; }).join(', ') || '\u2014';
+    } else if (fieldType === 'list') {
+      var raw = existingInput.value;
+      plan[fieldKey] = raw ? raw.split(',').map(function(s) { return s.trim(); }).filter(Boolean) : [];
+      valEl.textContent = plan[fieldKey].join(', ') || '\u2014';
+    } else {
+      plan[fieldKey] = existingInput.value;
+      valEl.textContent = plan[fieldKey] || '\u2014';
+    }
+    recalcPlanScore();
+    return;
+  }
+
+  // Switch to edit mode
+  if (fieldType === 'dimensions') {
+    var dims = plan.dimensions || {};
+    var dimKeys = Object.keys(dims).length ? Object.keys(dims) : ['width', 'height', 'depth'];
+    var groupHtml = '<span class="plan-dim-group">';
+    dimKeys.forEach(function(dk) {
+      groupHtml += '<span><span class="plan-dim-label">' + dk + '</span><input class="plan-dim-input" type="number" data-dim="' + dk + '" value="' + (dims[dk] || '') + '"></span>';
+    });
+    groupHtml += '</span>';
+    valEl.innerHTML = groupHtml;
+  } else if (fieldType === 'list') {
+    var current = (plan[fieldKey] || []).join(', ');
+    valEl.innerHTML = '<input class="plan-field-input" type="text" value="' + escapeHtml(current) + '">';
+  } else {
+    var current = plan[fieldKey] || '';
+    valEl.innerHTML = '<input class="plan-field-input" type="text" value="' + escapeHtml(current) + '">';
+  }
+  var firstInput = valEl.querySelector('input');
+  if (firstInput) firstInput.focus();
+}
+```
+
+- [ ] **Step 2: Add `recalcPlanScore()` function**
+
+Add after `toggleFieldEdit`:
+
+```javascript
+function recalcPlanScore() {
+  var plan = designState.plan;
+  if (!plan) return;
+  // Compute score using same logic as wizComputeScore but from plan object
+  var s = 0;
+  if (plan.material) s += 3;
+  if (plan.part_name) s += 1;
+  if (plan.description) s += 1;
+  if (plan.axis_recommendation) s += 2;
+  s += Math.min(Object.keys(plan.dimensions || {}).length, 4);
+  s += Math.min((plan.features || []).length, 4);
+  s += Math.min((plan.constraints || []).length, 2);
+  var el = document.getElementById('plan-current-score');
+  if (el) {
+    el.textContent = t('planScoreCurrent') + ': ' + s.toFixed(0) + '/8';
+    el.className = 'plan-score-current ' + (s >= 8 ? 'score-ok' : 'score-low');
+  }
+}
+```
+
+- [ ] **Step 3: Verify field editing works**
+
+In the browser, trigger a plan card, then:
+- Click pencil on Material — should show text input with current value
+- Type a new value, click pencil again — should save and show updated text
+- Click pencil on Dimensions — should show number inputs for each dimension key
+- Verify Current score updates when clearing/adding fields
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add web/index.html
+git commit -m "feat: implement toggleFieldEdit and recalcPlanScore for plan card"
+```
+
+---
+
+### Task 7: Implement `askAgentForField()`
+
+**Files:**
+- Modify: `web/index.html` (add function after `recalcPlanScore`)
+
+- [ ] **Step 1: Add `askAgentForField()` function**
+
+```javascript
+function askAgentForField(fieldKey) {
+  var plan = designState.plan;
+  if (!plan) return;
+  var agentId = PLAN_FIELD_AGENTS[fieldKey] || 'design';
+  var question = PLAN_FIELD_QUESTIONS[fieldKey] || 'Can you help with this field?';
+  var partCtx = plan.part_name ? ' for "' + plan.part_name + '"' : '';
+  var msg = '@' + agentId + ' Regarding the plan' + partCtx + ': ' + question;
+  // Switch to chat tab if on guided tab
+  var chatTab = document.querySelector('[data-tab="chat"]');
+  if (chatTab) chatTab.click();
+  sendMessage(msg);
+}
+```
+
+- [ ] **Step 2: Verify Ask Agent sends correct message**
+
+In the browser:
+- Trigger a plan card
+- Click "Ask" next to Material field
+- Verify a message like `@engineering Regarding the plan for "bracket": What material do you recommend?` appears in chat
+- Verify the engineering agent responds
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add web/index.html
+git commit -m "feat: implement askAgentForField for plan card agent assist"
+```
+
+---
+
+### Task 8: Implement `savePlanAndContinue()` and update `approvePlanCard()`
+
+**Files:**
+- Modify: `web/index.html` (modify `approvePlanCard`, add `savePlanAndContinue`)
+
+- [ ] **Step 1: Add `savePlanAndContinue()` function**
+
+Add after `askAgentForField`:
+
+```javascript
+function savePlanAndContinue() {
+  var plan = designState.plan;
+  if (!plan) return;
+  // Read notes from textarea
+  var notesEl = document.getElementById('plan-notes');
+  if (notesEl) plan.notes = notesEl.value;
+  // Merge plan fields into designState
+  designState.part_name = plan.part_name;
+  designState.description = plan.description;
+  designState.material = plan.material;
+  designState.dimensions = Object.assign({}, plan.dimensions);
+  designState.features = (plan.features || []).slice();
+  designState.constraints = (plan.constraints || []).slice();
+  designState.axis_recommendation = plan.axis_recommendation;
+  // Reset to exploring
+  designState.phase = 'exploring';
+  designState.plan = null;
+  saveState();
+  var card = document.getElementById('active-plan-card');
+  if (card) card.remove();
+}
+```
+
+- [ ] **Step 2: Update `approvePlanCard()` to read edited values**
+
+Replace the existing `approvePlanCard` function (lines 1865-1883) with:
+
+```javascript
+async function approvePlanCard() {
+  var plan = designState.plan;
+  if (!plan) return;
+  // Read notes from textarea
+  var notesEl = document.getElementById('plan-notes');
+  if (notesEl) plan.notes = notesEl.value;
+  try {
+    var resp = await fetch('/api/plan/approve', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ plan: plan, design_state: designState }),
+    });
+    var data = await resp.json();
+    designState = data.design_state;
+    saveState();
+    var card = document.getElementById('active-plan-card');
+    if (card) card.remove();
+    await sendMessage('Generate the approved design');
+  } catch (err) {
+    console.error('Plan approve failed:', err);
+  }
+}
+```
+
+- [ ] **Step 3: Verify Save & Continue and Approve work**
+
+In the browser:
+- Trigger a plan card
+- Edit the material field, type notes
+- Click "Save & Continue" — plan card should disappear, designState should retain edited material, phase should be "exploring"
+- Trigger the plan again — verify edited material appears
+- Click "Approve" — verify the edited plan is sent to the API with notes
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add web/index.html
+git commit -m "feat: implement savePlanAndContinue and update approvePlanCard to read edits"
+```
+
+---
+
+### Task 9: Implement `updatePlanCardField()` for external auto-fill
+
+**Files:**
+- Modify: `web/index.html` (add function after `savePlanAndContinue`)
+
+- [ ] **Step 1: Add `updatePlanCardField()` function**
+
+```javascript
+function updatePlanCardField(fieldKey, value) {
+  var plan = designState.plan;
+  if (!plan) return;
+  var valEl = document.getElementById('plan-val-' + fieldKey);
+  // Close any open edit mode first
+  var existingInput = valEl ? valEl.querySelector('input, .plan-dim-group') : null;
+  if (existingInput) {
+    // Cancel edit mode by resetting display
+  }
+  // Update plan object
+  if (fieldKey === 'dimensions' && typeof value === 'object') {
+    Object.assign(plan.dimensions, value);
+    if (valEl) valEl.textContent = Object.entries(plan.dimensions).map(function(e) { return e[0] + '=' + e[1] + 'mm'; }).join(', ') || '\u2014';
+  } else if (fieldKey === 'features' || fieldKey === 'constraints' || fieldKey === 'machining_notes') {
+    if (Array.isArray(value)) {
+      plan[fieldKey] = value;
+    } else {
+      if (!plan[fieldKey].includes(value)) plan[fieldKey].push(value);
+    }
+    if (valEl) valEl.textContent = plan[fieldKey].join(', ') || '\u2014';
+  } else {
+    plan[fieldKey] = value;
+    if (valEl) valEl.textContent = value || '\u2014';
+  }
+  recalcPlanScore();
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add web/index.html
+git commit -m "feat: add updatePlanCardField for external auto-fill of plan fields"
+```
+
+---
+
+### Task 10: Implement `detectPlanField()` and `extractFieldValue()`
+
+**Files:**
+- Modify: `web/index.html` (add functions after `updatePlanCardField`)
+
+- [ ] **Step 1: Add `detectPlanField()` function**
+
+This reuses the `category_keywords` from `GapAnalysisConfig` via a frontend mapping:
+
+```javascript
+var CATEGORY_KEYWORDS = {
+  dimension: ['width', 'height', 'depth', 'length', 'diameter', 'dimension', 'size'],
+  material: ['material', 'alloy', 'grade', 'aluminum', 'steel', 'metal', 'brass', 'titanium', 'nylon'],
+  feature: ['hole', 'fillet', 'chamfer', 'pocket', 'slot', 'feature'],
+  constraint: ['tolerance', 'wall thickness', 'constraint', 'min wall', 'max size'],
+  machining: ['axis', 'machine', 'setup', 'fixture', 'tool access'],
+};
+var CATEGORY_TO_FIELD = {
+  material: 'material',
+  dimension: 'dimensions',
+  feature: 'features',
+  constraint: 'constraints',
+  machining: 'axis_recommendation',
+};
+
+function detectPlanField(agentId, content) {
+  var lower = content.toLowerCase();
+  // Check each category — if the agent matches AND content contains keywords, return the field
+  for (var cat in CATEGORY_KEYWORDS) {
+    var expectedAgent = PLAN_FIELD_AGENTS[CATEGORY_TO_FIELD[cat]];
+    if (expectedAgent !== agentId) continue;
+    var keywords = CATEGORY_KEYWORDS[cat];
+    for (var i = 0; i < keywords.length; i++) {
+      if (lower.indexOf(keywords[i]) !== -1) {
+        return CATEGORY_TO_FIELD[cat];
+      }
+    }
+  }
+  return null;
+}
+```
+
+- [ ] **Step 2: Add `extractFieldValue()` function**
+
+```javascript
+function extractFieldValue(fieldKey, content) {
+  // Try quoted values first
+  var quoted = content.match(/"([^"]+)"/);
+  if (quoted) return quoted[1];
+
+  if (fieldKey === 'material') {
+    // Match known materials
+    var matList = ['aluminum 6061', 'aluminum 7075', 'stainless steel 304', 'stainless steel 316',
+      'aluminum', 'steel', 'brass', 'copper', 'titanium', 'nylon', 'delrin', 'peek', 'polycarbonate'];
+    var lower = content.toLowerCase();
+    for (var i = 0; i < matList.length; i++) {
+      if (lower.indexOf(matList[i]) !== -1) return matList[i];
+    }
+  }
+
+  if (fieldKey === 'axis_recommendation') {
+    var axisMatch = content.match(/(3-axis|3\+2[\s-]*axis|5-axis)/i);
+    if (axisMatch) return axisMatch[1].toLowerCase();
+  }
+
+  if (fieldKey === 'dimensions') {
+    // Extract dimension values as object
+    var dims = {};
+    var dimPattern = /(\d+\.?\d*)\s*mm\s+(wide|width|tall|height|high|thick|thickness|deep|depth|long|length|diameter)/gi;
+    var m;
+    while ((m = dimPattern.exec(content)) !== null) {
+      var dimMap = {wide:'width',width:'width',tall:'height',height:'height',high:'height',
+        thick:'thickness',thickness:'thickness',deep:'depth',depth:'depth',long:'length',length:'length',diameter:'diameter'};
+      dims[dimMap[m[2].toLowerCase()] || m[2].toLowerCase()] = parseFloat(m[1]);
+    }
+    if (Object.keys(dims).length) return dims;
+  }
+
+  // Fallback: text after "recommend"/"suggest"/"use"
+  var recMatch = content.match(/(?:recommend|suggest|use)\s+(.+?)(?:\.|,|$)/i);
+  if (recMatch) return recMatch[1].trim();
+
+  return null;
+}
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add web/index.html
+git commit -m "feat: add detectPlanField and extractFieldValue for confirm auto-fill"
+```
+
+---
+
+### Task 11: Update `confirmRecommendation()` to auto-fill plan card
+
+**Files:**
+- Modify: `web/index.html` (lines ~2759-2769)
+
+- [ ] **Step 1: Replace `confirmRecommendation()` function**
+
+Replace the existing function (lines 2759-2769) with:
+
+```javascript
+function confirmRecommendation(msgId, agentId) {
+  var el = document.querySelector('[data-msg-id="' + msgId + '"]');
+  if (!el) return;
+  var content = el.dataset.content;
+  var actions = document.getElementById(msgId + '-actions');
+  if (actions) {
+    actions.innerHTML = '<div class="msg-confirmed">' + t('confirmed') + '</div>';
+  }
+  // Send confirmation as user message so it updates design state
+  var agentName = (AGENTS[agentId] || {}).name || agentId;
+  sendMessage(t('confirmedMsg').replace('{agent}', agentName).replace('{content}', content));
+  // Auto-fill plan card field if plan is visible
+  if (designState.phase === 'planning' && designState.plan && document.getElementById('active-plan-card')) {
+    var field = detectPlanField(agentId, content);
+    if (field) {
+      var value = extractFieldValue(field, content);
+      if (value != null) {
+        updatePlanCardField(field, value);
+      }
+    }
+  }
+}
+```
+
+- [ ] **Step 2: Verify unified confirm/plan card behavior**
+
+In the browser:
+1. Chat until agents provide recommendations but don't yet reach plan threshold
+2. Chat more until plan card appears
+3. Scroll to an engineering agent message about material — click Confirm
+4. Verify the plan card's material field updates with the extracted value
+5. Verify Current score recalculates
+6. Click Confirm on a message when no plan card is visible — verify it works as before (just sends the confirmation message)
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add web/index.html
+git commit -m "feat: confirmRecommendation auto-fills plan card when plan is visible"
+```
+
+---
+
+### Task 12: Run full test suite and verify end-to-end
+
+**Files:** None (verification only)
+
+- [ ] **Step 1: Run backend tests**
+
+Run: `pytest tests/ -x -q`
+Expected: All tests pass
+
+- [ ] **Step 2: End-to-end browser verification**
+
+Start the server: `python -m server.web`
+
+Test the following flows:
+1. **Edit flow:** Trigger plan → edit material → edit dimensions → add notes → Approve → verify model generates with edited values
+2. **Save & Continue flow:** Trigger plan → edit features → Save & Continue → verify state preserved → chat more → re-trigger plan → verify edits are in new plan
+3. **Reject flow:** Trigger plan → edit fields → Reject → verify edits discarded, phase reset
+4. **Ask Agent flow:** Trigger plan → click Ask next to material → verify engineering agent responds in chat
+5. **Confirm auto-fill flow:** While plan is visible, Confirm an agent recommendation → verify plan field updates
+6. **Dual score:** Edit fields to reduce completeness → verify Current score drops, Original stays
+
+- [ ] **Step 3: Commit any fixes found during verification**
+
+```bash
+git add -A
+git commit -m "fix: address issues found during end-to-end verification"
+```
+
+(Skip this step if no fixes are needed.)