Merge pull request #8 from danghoangnhan/feat/editable-plan-card

feat: editable plan card with inline editing, agent assist, and notes

agents/design_state.py

@@ -50,6 +50,7 @@ class DesignPlan(BaseModel):
     axis_recommendation: str = ""
     machining_notes: list[str] = Field(default_factory=list)
     confidence_score: float = 0.0
+    notes: str = ""
 
     @classmethod
     def from_state(cls, state: "DesignState", confidence_score: float) -> "DesignPlan":
@@ -86,6 +87,8 @@ class DesignPlan(BaseModel):
             lines.append(f"Axis: {self.axis_recommendation}")
         if self.machining_notes:
             lines.append(f"Machining Notes: {'; '.join(self.machining_notes)}")
+        if self.notes:
+            lines.append(f"User Notes: {self.notes}")
         lines.append("")
         lines.append("This plan has been reviewed and approved by the user.")
         lines.append("Generate the model according to these specifications.")

config.yaml

@@ -95,6 +95,14 @@ planning:
   approved_agents:
     - "cad"
     - "cnc"
+  field_agents:
+    material: engineering
+    dimensions: engineering
+    features: design
+    constraints: cnc
+    axis_recommendation: cnc
+    machining_notes: cnc
+    part_name: design
 
 gap_analysis:
   category_keywords:

config/settings.py

@@ -109,6 +109,15 @@ class PlanningConfig(BaseModel):
         "plan", "review", "ready", "show plan", "summarize", "what do we have",
     ])
     approved_agents: list[str] = Field(default_factory=lambda: ["cad", "cnc"])
+    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",
+    })
 
 
 class GapAnalysisConfig(BaseModel):

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.)

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

@@ -0,0 +1,205 @@
+# Editable Plan Card Design Spec
+
+**Date:** 2026-04-12
+**Status:** Approved
+
+## Problem
+
+The plan card in the planning review gate is read-only. Users can only approve or reject the entire plan. There is no way to:
+- Edit individual field values before approving
+- Add notes or comments about the plan
+- Ask a specific agent to help fill or refine a field
+- Save partial edits and continue chatting before re-triggering a plan
+
+## Solution
+
+Extend the existing inline plan card with per-field editing, an "Ask Agent" button per field, a notes text area, dual score display, and a third "Save & Continue" action button.
+
+## Design
+
+### 1. Per-Field Editing
+
+Each plan field displays two icon buttons next to its value:
+
+**Edit icon (pencil)** — toggles the value between read-only text and an editable input:
+- `part_name`, `material`, `axis_recommendation` — text input
+- `dimensions` — group of number inputs (width/height/depth in mm)
+- `features`, `constraints`, `machining_notes` — comma-separated text input (parsed back to list)
+
+**Ask Agent icon** — sends a pre-formatted, mention-targeted message to the chat. The message includes current plan context for agent awareness:
+- Template: `@{agent} Regarding the plan for "{part_name}": {field-specific question}`
+- Example: `@engineering Regarding the plan for "mounting_bracket": What material do you recommend given the current constraints: [min wall 3mm]?`
+
+When the user edits a field, the plan card's local state updates immediately (no API call). Edited values are sent on Approve or Save & Continue.
+
+**Agent-to-field mapping** (configurable in `config.yaml` under `planning.field_agents`):
+
+| Field | Agent | Question |
+|-------|-------|----------|
+| `part_name` | design | What should this part be called? |
+| `material` | engineering | What material do you recommend? |
+| `dimensions` | engineering | What dimensions are appropriate? |
+| `features` | design | What features should this part have? |
+| `constraints` | cnc | What manufacturing constraints should we consider? |
+| `axis_recommendation` | cnc | What axis strategy do you recommend? |
+| `machining_notes` | cnc | Any machining notes to consider? |
+
+### 2. Notes Area
+
+A text area at the bottom of the plan card, above the action buttons.
+- Placeholder text: "Add notes about this plan..."
+- Stored in the plan object as a new `notes: str` field on `DesignPlan`
+- Passed to agents as additional context when the plan is approved (appended to the `render_approved()` output)
+- Persisted in `designState` on Save & Continue
+
+### 3. Dual Score Display
+
+Replaces the current single score display with two scores side by side:
+- **Original** — the score when the plan was generated (static)
+- **Current** — recalculated live as fields are edited, using the existing frontend `computeScore()` logic
+
+Display format: `Original: 8/8 → Current: 6/8`
+
+Current score is color-coded:
+- Green if >= threshold (default 8)
+- Yellow/red if below threshold
+
+### 4. Action Buttons
+
+Three buttons replace the current two:
+
+- **Approve** (green) — sends the edited plan (with field changes + notes) to `POST /api/plan/approve`. Sets `phase = "approved"`. Auto-sends "Generate the approved design" to chat.
+- **Save & Continue** (secondary/blue) — merges edited field values back into `designState`, saves notes, sets `phase = "exploring"`, removes the plan card from DOM. User can keep chatting; edits preserved for the next plan trigger. Frontend-only operation (no API call), updates `designState` in localStorage.
+- **Reject** (secondary/red) — discards all edits made in the plan card. Sets `phase = "exploring"`, `plan = null`.
+
+### 5. Ask Agent Chat Integration
+
+When the user clicks "Ask Agent" on a field:
+
+1. Frontend constructs a mention-targeted message using the existing `sendMessage()` function with current plan context.
+2. Chat tab activates automatically (if user is on wizard tab).
+3. User reads the agent response in chat, then scrolls up to the plan card and edits the field manually.
+
+No new API endpoints — reuses existing `POST /api/chat` with `@mentions` routing.
+
+### 6. Unified Confirm/Revise with Plan Card
+
+Currently there are three disconnected approval mechanisms:
+- **Plan card** — Approve / Reject (whole plan)
+- **Wizard step 7** — Approve & Generate (same as plan card)
+- **Per-message** — Confirm / Revise on every agent response (sends chat message, updates design state indirectly via `extract_decisions()`)
+
+The per-message Confirm/Revise buttons must be aware of the plan card.
+
+**When a plan card is visible (phase = "planning"):**
+
+`confirmRecommendation()` behavior changes:
+1. Sends the confirmation message to chat (same as today — keeps design state updated)
+2. **Auto-fills the corresponding plan card field** — detects which field the agent message relates to using the `field_agents` mapping + keyword matching from `GapAnalysisConfig.category_keywords`
+3. Recalculates the plan card's current score
+
+Field detection logic (reuses existing gap analysis categories):
+- Agent is `engineering` + message contains dimension keywords → update `dimensions`
+- Agent is `engineering` + message contains material keywords → update `material`
+- Agent is `design` + message contains feature keywords → update `features`
+- Agent is `cnc` + message contains constraint keywords → update `constraints`
+- Agent is `cnc` + message contains axis/machining keywords → update `axis_recommendation`
+- If no field match is found, skip the auto-fill (just send the chat message as today)
+
+Value extraction: parse the confirmed message content for the relevant value (e.g., extract "Al 6061" from "I recommend Al 6061 for its machinability"). Uses simple heuristics — first quoted value, or value after "recommend"/"suggest"/"use".
+
+`reviseRecommendation()` — no change. Works as today (pre-fills input with context).
+
+**When no plan card is visible (phase = "exploring"):**
+
+Confirm/Revise works exactly as it does today — no plan card interaction.
+
+## Data Model Changes
+
+### `DesignPlan` (`agents/design_state.py`)
+
+Add field:
+```python
+notes: str = ""
+```
+
+Update `render_approved()` to include notes:
+```
+## USER NOTES
+{self.notes}
+```
+
+### `config.yaml`
+
+Add under `planning`:
+```yaml
+planning:
+  field_agents:
+    material: engineering
+    dimensions: engineering
+    features: design
+    constraints: cnc
+    axis_recommendation: cnc
+    machining_notes: cnc
+    part_name: design
+```
+
+### `PlanningConfig` (`config/settings.py`)
+
+Add field:
+```python
+field_agents: dict[str, str] = {
+    "material": "engineering",
+    "dimensions": "engineering",
+    "features": "design",
+    "constraints": "cnc",
+    "axis_recommendation": "cnc",
+    "machining_notes": "cnc",
+    "part_name": "design",
+}
+```
+
+## Backend Changes
+
+- `POST /api/plan/approve` — already accepts full plan object. Add `notes` field handling: merge into `DesignState`, include in `render_approved()`.
+- `POST /api/plan/reject` — no change.
+- No new endpoint for Save & Continue (frontend-only operation).
+
+## Frontend Changes (`web/index.html`)
+
+### `renderPlanCard(plan)`
+- Each `wizard-review-field` value gets pencil icon + agent icon buttons
+- Pencil toggles between `<span>` and `<input>` for the value
+- Agent icon calls `askAgentForField(fieldName)`
+- Notes `<textarea>` added before action buttons
+- Score area shows original + current side by side
+- Three action buttons: Approve, Save & Continue, Reject
+
+### New functions
+- `toggleFieldEdit(fieldName)` — switches field between view/edit mode
+- `askAgentForField(fieldName)` — constructs mention-targeted message, calls `sendMessage()`, switches to chat tab
+- `savePlanAndContinue()` — merges edited values into `designState`, saves to localStorage, removes plan card, resets phase to exploring
+- `recalcPlanScore()` — reads current field values from plan card inputs, runs `computeScore()`, updates current score display
+- `detectPlanField(agentId, content)` — maps an agent message to a plan field using `field_agents` mapping + `category_keywords`. Returns field name or null.
+- `extractFieldValue(fieldName, content)` — parses agent message content to extract a value for the given field (quoted values, values after "recommend"/"suggest"/"use")
+- `updatePlanCardField(fieldName, value)` — programmatically sets a plan card field's value and triggers `recalcPlanScore()`
+
+### Modified functions
+- `approvePlanCard()` — reads edited field values + notes from plan card inputs before sending to API
+- `confirmRecommendation()` — when phase is "planning", also calls `detectPlanField()` → `extractFieldValue()` → `updatePlanCardField()` to auto-fill the plan card
+- `computeScore()` — no logic change, just called by `recalcPlanScore()`
+
+## Testing
+
+- Verify field toggling between view/edit mode for all field types
+- Verify Ask Agent sends correct mention-targeted message with plan context
+- Verify notes persist through Save & Continue and appear in agent context on Approve
+- Verify dual score: original stays static, current recalculates on field edit
+- Verify Save & Continue preserves edits in designState and resets phase
+- Verify Reject discards all edits
+- Verify Approve sends edited values (not original values)
+- Verify Confirm on agent message auto-fills corresponding plan card field when plan is visible
+- Verify Confirm on agent message works as before when no plan card is visible
+- Verify field detection correctly maps agent + keyword to plan field
+- Verify value extraction handles common patterns (quoted, after "recommend", etc.)
+- Verify plan card score recalculates after Confirm auto-fill

tests/test_api_routes.py

@@ -173,6 +173,26 @@ class TestPlanApproveEndpoint:
         assert data["design_state"]["part_name"] == "gear"
         assert data["design_state"]["plan"]["material"] == "brass"
 
+    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"
+
 
 class TestPlanRejectEndpoint:
     def test_reject_resets_phase(self):

tests/test_design_state.py

@@ -126,6 +126,30 @@ class TestDesignPlan:
         assert "aluminum 6061" in rendered
         assert "No undercuts" in rendered
 
+    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 == ""
+
 
 class TestComputeScore:
     def test_empty_state_scores_zero(self):

tests/test_settings.py

@@ -65,6 +65,16 @@ class TestPlanningConfig:
         assert settings.planning.threshold == 8.0
 
 
+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"
+
+
 class TestGapAnalysisConfig:
     def test_gap_analysis_defaults(self):
         from config.settings import Settings

web/index.html

@@ -1315,6 +1315,48 @@
   .plan-card-reject {
     background: var(--bg-surface); color: var(--text-secondary);
   }
+  .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); }
 
   /* ---- GAP / QUESTION CARDS ---- */
   .gap-cards {
@@ -1837,44 +1879,265 @@ function syncWizardFromState() {
 
 // ── PLAN CARD ─────────────────────────────────────────
 
+var PLAN_FIELD_AGENTS = {
+  part_name: 'design', material: 'engineering', dimensions: 'engineering',
+  features: 'design', constraints: 'cnc', axis_recommendation: 'cnc',
+  machining_notes: 'cnc',
+};
+var 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?',
+};
+
 function renderPlanCard(plan) {
-  const fields = [
-    ['Part', plan.part_name],
-    ['Material', plan.material],
-    ['Dimensions', Object.entries(plan.dimensions || {}).map(([k,v]) => k + '=' + v + 'mm').join(', ')],
-    ['Features', (plan.features || []).join(', ')],
-    ['Constraints', (plan.constraints || []).join(', ')],
-    ['Axis', plan.axis_recommendation || 'Auto'],
+  var 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'],
   ];
-  let html = '<div class="plan-card" id="active-plan-card">';
-  html += '<div class="plan-card-title">\u25c6 PLAN READY FOR REVIEW</div>';
-  for (const [label, value] of fields) {
-    html += '<div class="wizard-review-field"><span class="wizard-review-label">' + escapeHtml(label) + '</span><span class="wizard-review-value">' + escapeHtml(value || '\u2014') + '</span></div>';
-  }
   if (plan.machining_notes && plan.machining_notes.length) {
-    html += '<div class="wizard-review-field"><span class="wizard-review-label">Notes</span><span class="wizard-review-value">' + escapeHtml(plan.machining_notes.join('; ')) + '</span></div>';
+    fields.push(['Notes', 'machining_notes', plan.machining_notes, 'list']);
+  }
+  var 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 (var i = 0; i < fields.length; i++) {
+    var label = fields[i][0], key = fields[i][1], value = fields[i][2], type = fields[i][3];
+    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>';
   }
-  html += '<div class="plan-card-score">Score: ' + (plan.confidence_score || 0).toFixed(0) + '/8</div>';
+  html += '<textarea class="plan-notes" id="plan-notes" placeholder="' + t('planNotesPlaceholder') + '">' + escapeHtml(plan.notes || '') + '</textarea>';
+  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>';
   html += '<div class="plan-card-actions">';
-  html += '<button class="plan-card-btn plan-card-approve" onclick="approvePlanCard()">Approve</button>';
-  html += '<button class="plan-card-btn plan-card-reject" onclick="rejectPlanCard()">Reject</button>';
+  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;
 }
 
+function toggleFieldEdit(fieldKey, fieldType) {
+  var valEl = document.getElementById('plan-val-' + fieldKey);
+  if (!valEl) return;
+  var plan = designState.plan;
+  if (!plan) return;
+
+  var existingInput = valEl.querySelector('input, .plan-dim-group');
+  if (existingInput) {
+    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;
+  }
+
+  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">' + escapeHtml(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();
+}
+
+function recalcPlanScore() {
+  var plan = designState.plan;
+  if (!plan) return;
+  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');
+  }
+}
+
+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;
+  var chatTab = document.querySelector('[data-tab="chat"]');
+  if (chatTab) chatTab.click();
+  sendMessage(msg);
+}
+
+function savePlanAndContinue() {
+  var plan = designState.plan;
+  if (!plan) return;
+  var notesEl = document.getElementById('plan-notes');
+  if (notesEl) plan.notes = notesEl.value;
+  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;
+  designState.phase = 'exploring';
+  saveState();
+  var card = document.getElementById('active-plan-card');
+  if (card) card.remove();
+}
+
+function updatePlanCardField(fieldKey, value) {
+  var plan = designState.plan;
+  if (!plan) return;
+  var valEl = document.getElementById('plan-val-' + fieldKey);
+  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();
+}
+
+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();
+  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;
+}
+
+function extractFieldValue(fieldKey, content) {
+  if (fieldKey === 'material') {
+    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') {
+    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;
+  }
+
+  var recMatch = content.match(/(?:recommend|suggest|use)\s+(.+?)(?:\.|,|$)/i);
+  if (recMatch) return recMatch[1].trim();
+
+  var quoted = content.match(/"([^"]+)"/);
+  if (quoted) return quoted[1];
+
+  return null;
+}
+
 async function approvePlanCard() {
-  const plan = designState.plan;
+  var plan = designState.plan;
   if (!plan) return;
+  var notesEl = document.getElementById('plan-notes');
+  if (notesEl) plan.notes = notesEl.value;
   try {
-    const resp = await fetch('/api/plan/approve', {
+    var resp = await fetch('/api/plan/approve', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ plan: plan, design_state: designState }),
     });
-    const data = await resp.json();
+    var data = await resp.json();
     designState = data.design_state;
     saveState();
-    const card = document.getElementById('active-plan-card');
+    var card = document.getElementById('active-plan-card');
     if (card) card.remove();
     await sendMessage('Generate the approved design');
   } catch (err) {
@@ -2049,6 +2312,12 @@ const I18N = {
     planReady: 'PLAN READY FOR REVIEW',
     planApprove: 'Approve',
     planReject: 'Reject',
+    planSave: 'Save & Continue',
+    planNotesPlaceholder: 'Add notes about this plan...',
+    planScoreOriginal: 'Original',
+    planScoreCurrent: 'Current',
+    planAskAgent: 'Ask',
+    planEdit: '\u270e',
   },
   'zh-TW': {
     subtitle: '\u591a\u4ee3\u7406\u8a2d\u8a08',
@@ -2086,6 +2355,12 @@ const I18N = {
     planReady: '\u8a08\u756b\u5df2\u6e96\u5099\u5be9\u67e5',
     planApprove: '\u6279\u51c6',
     planReject: '\u62d2\u7d55',
+    planSave: '\u5132\u5b58\u4e26\u7e7c\u7e8c',
+    planNotesPlaceholder: '\u65b0\u589e\u8a08\u756b\u5099\u8a3b...',
+    planScoreOriginal: '\u539f\u59cb',
+    planScoreCurrent: '\u7576\u524d',
+    planAskAgent: '\u8a62\u554f',
+    planEdit: '\u270e',
   },
   vi: {
     subtitle: 'Thi\u1ebft K\u1ebf \u0110a T\u00e1c T\u1eed',
@@ -2123,6 +2398,12 @@ const I18N = {
     planReady: 'K\u1ebe HO\u1ea0CH S\u1eb4N S\u00c0NG',
     planApprove: 'Duy\u1ec7t',
     planReject: 'T\u1eeb Ch\u1ed1i',
+    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',
   },
 };
 
@@ -2757,16 +3038,25 @@ function addMessage(msg) {
 }
 
 function confirmRecommendation(msgId, agentId) {
-  const el = document.querySelector('[data-msg-id="' + msgId + '"]');
+  var el = document.querySelector('[data-msg-id="' + msgId + '"]');
   if (!el) return;
-  const content = el.dataset.content;
-  const actions = document.getElementById(msgId + '-actions');
+  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
-  const agentName = (AGENTS[agentId] || {}).name || agentId;
+  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);
+      }
+    }
+  }
 }
 
 function reviseRecommendation(msgId, agentId) {