feat: editable plan card with field edit, ask agent, notes, save & continue

web/index.html

@@ -1879,44 +1879,179 @@ 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">' + 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';
+  designState.plan = null;
+  saveState();
+  var card = document.getElementById('active-plan-card');
+  if (card) card.remove();
+}
+
 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) {