feat: rewrite gap cards with severity support and generic rendering

Rewrite renderQuestionCards to sort by severity (blocking/recommended/
nice_to_have), add REQUIRED badges and color-coded borders, and render
all categories generically. Simplify gapSubmitAll to format selections
as plain text without mutating designState — the backend's
extract_decisions() handles state updates on the next chat turn.
Remove gapDimChanged and all category-specific special cases.

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

web/index.html

@@ -1398,7 +1398,6 @@
     color: var(--text-primary); margin-bottom: 8px;
   }
   .gap-card .wizard-chips { margin-bottom: 0; }
-  .gap-card .wizard-dim-row { margin-top: 4px; }
   .gap-card-submit {
     margin-top: 8px; padding: 5px 14px;
     background: var(--accent); color: var(--bg-void);
@@ -1406,6 +1405,20 @@
     font-family: var(--font-mono); font-size: 11px;
     font-weight: 600; cursor: pointer;
   }
+  .gap-card[data-severity="blocking"] {
+    border-left-color: var(--error);
+  }
+  .gap-card[data-severity="nice_to_have"] {
+    opacity: 0.7;
+  }
+  .gap-card-badge {
+    font-family: var(--font-mono);
+    font-size: 9px;
+    font-weight: 700;
+    color: var(--error);
+    margin-left: 6px;
+    text-transform: uppercase;
+  }
 
   /* ---- RESPONSIVE ---- */
 
@@ -2166,35 +2179,56 @@ async function rejectPlanCard() {
 
 let gapSelections = {};  // { category: value } — tracks user selections across cards
 
+function buildGapTitle(cards) {
+  const counts = { blocking: 0, recommended: 0, nice_to_have: 0 };
+  for (const c of cards) counts[c.severity || 'recommended']++;
+  const parts = [];
+  if (counts.blocking) parts.push(counts.blocking + ' REQUIRED');
+  if (counts.recommended) parts.push(counts.recommended + ' RECOMMENDED');
+  if (counts.nice_to_have) parts.push(counts.nice_to_have + ' OPTIONAL');
+  return parts.join(', ');
+}
+
 function renderQuestionCards(cards) {
   if (!cards || cards.length === 0) return '';
   gapSelections = {};
+
+  // Sort by severity: blocking first, recommended second, nice_to_have last
+  const order = { blocking: 0, recommended: 1, nice_to_have: 2 };
+  const sorted = [...cards].sort((a, b) => (order[a.severity] || 1) - (order[b.severity] || 1));
+
   let html = '<div class="gap-cards" id="active-gap-cards">';
-  html += '<div class="gap-cards-title">\u26a0 MISSING INFO</div>';
-  for (const card of cards) {
-    html += '<div class="gap-card" style="border-left-color:' + escapeHtml(card.agent_color) + ';" data-category="' + escapeHtml(card.category) + '">';
+  html += '<div class="gap-cards-title">' + escapeHtml(buildGapTitle(sorted)) + '</div>';
+
+  for (const card of sorted) {
+    const sev = card.severity || 'recommended';
+    html += '<div class="gap-card" style="border-left-color:' + (sev === 'blocking' ? 'var(--error)' : sev === 'nice_to_have' ? 'var(--border)' : escapeHtml(card.agent_color)) + ';" data-category="' + escapeHtml(card.category) + '" data-severity="' + escapeHtml(sev) + '">';
+
+    // Header
     html += '<div class="gap-card-header">';
     html += '<div class="gap-card-dot" style="background:' + escapeHtml(card.agent_color) + ';"></div>';
     html += '<span class="gap-card-agent">' + escapeHtml(card.agent_name) + '</span>';
+    if (sev === 'blocking') html += '<span class="gap-card-badge">REQUIRED</span>';
     html += '</div>';
+
+    // Question
     html += '<div class="gap-card-question">' + escapeHtml(card.question) + '</div>';
 
-    if (card.category === 'dimension') {
-      html += '<div class="wizard-dim-row"><span class="wizard-dim-label">Width</span><input class="wizard-dim-input gap-dim" id="gap-dim-width" type="number" onchange="gapDimChanged()"><span class="wizard-dim-unit">mm</span></div>';
-      html += '<div class="wizard-dim-row"><span class="wizard-dim-label">Height</span><input class="wizard-dim-input gap-dim" id="gap-dim-height" type="number" onchange="gapDimChanged()"><span class="wizard-dim-unit">mm</span></div>';
-      html += '<div class="wizard-dim-row"><span class="wizard-dim-label">Depth</span><input class="wizard-dim-input gap-dim" id="gap-dim-depth" type="number" onchange="gapDimChanged()"><span class="wizard-dim-unit">mm</span></div>';
-    } else if (card.suggestions && card.suggestions.length > 0) {
+    // Generic input: chips + optional custom
+    if (card.suggestions && card.suggestions.length > 0) {
       html += '<div class="wizard-chips">';
       for (const s of card.suggestions) {
         html += '<button class="wizard-chip" onclick="gapToggleChip(this,\'' + escapeHtml(s) + '\',\'' + escapeHtml(card.category) + '\')">' + escapeHtml(s) + '</button>';
       }
       html += '</div>';
-      if (card.allow_custom) {
-        html += '<input class="wizard-input" placeholder="Or type custom..." onchange="gapSetCustom(this.value,\'' + escapeHtml(card.category) + '\')">';
-      }
     }
+    if (card.allow_custom) {
+      html += '<input class="wizard-input" placeholder="Type your answer..." onchange="gapSetCustom(this.value,\'' + escapeHtml(card.category) + '\')">';
+    }
+
     html += '</div>';
   }
+
   html += '<button class="gap-card-submit" onclick="gapSubmitAll()" style="width:100%;margin-top:4px;">Submit</button>';
   html += '</div>';
   return html;
@@ -2224,51 +2258,15 @@ function gapSetCustom(value, category) {
   if (card) card.querySelectorAll('.wizard-chip').forEach(c => c.classList.remove('selected'));
 }
 
-function gapDimChanged() {
-  const w = document.getElementById('gap-dim-width')?.value;
-  const h = document.getElementById('gap-dim-height')?.value;
-  const d = document.getElementById('gap-dim-depth')?.value;
-  const parts = [];
-  if (w) parts.push(w + 'mm wide');
-  if (h) parts.push(h + 'mm high');
-  if (d) parts.push(d + 'mm deep');
-  if (parts.length > 0) gapSelections['dimension'] = parts.join(', ');
-  else delete gapSelections['dimension'];
-}
-
 function gapSubmitAll() {
-  // Collect dimension values
-  gapDimChanged();
-
   const parts = [];
   for (const [category, value] of Object.entries(gapSelections)) {
-    // Update designState
-    if (category === 'material') designState.material = value;
-    else if (category === 'shape') { designState.part_name = value; designState.description = value; }
-    else if (category === 'machining') designState.axis_recommendation = value;
-    else if (category === 'constraint') {
-      if (!designState.constraints) designState.constraints = [];
-      designState.constraints.push(value);
-    } else if (category === 'feature') {
-      if (!designState.features) designState.features = [];
-      designState.features.push(value);
-    } else if (category === 'finish') {
-      if (!designState.constraints) designState.constraints = [];
-      designState.constraints.push('surface finish: ' + value);
-    } else if (category === 'dimension') {
-      if (!designState.dimensions) designState.dimensions = {};
-      const w = document.getElementById('gap-dim-width')?.value;
-      const h = document.getElementById('gap-dim-height')?.value;
-      const d = document.getElementById('gap-dim-depth')?.value;
-      if (w) designState.dimensions.width = parseFloat(w);
-      if (h) designState.dimensions.height = parseFloat(h);
-      if (d) designState.dimensions.depth = parseFloat(d);
+    if (value) {
+      const label = category.replace(/_/g, ' ');
+      parts.push(label + ': ' + value);
     }
-    parts.push(value);
   }
-
   if (parts.length === 0) return;
-  saveState();
   removeGapCards();
   sendMessage(parts.join(', '));
 }