feat: add Chat/Guided tab switcher, wizard, plan card, 3MF downloads, i18n

web/index.html

@@ -1171,6 +1171,151 @@
     animation: fade-in-up 0.3s ease-out both;
   }
 
+  /* ---- TAB SWITCHER ---- */
+  .chat-tabs {
+    display: flex;
+    border-bottom: 1px solid var(--border);
+    background: var(--bg-panel);
+    flex-shrink: 0;
+  }
+  .chat-tab {
+    flex: 1;
+    padding: 8px 0;
+    text-align: center;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--text-secondary);
+    background: none;
+    border: none;
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    transition: color 0.2s, border-color 0.2s;
+  }
+  .chat-tab:hover { color: var(--text-primary); }
+  .chat-tab.active {
+    color: var(--accent);
+    border-bottom-color: var(--accent);
+  }
+  #guided-panel { display: none; overflow-y: auto; flex: 1; padding: 12px; }
+  #guided-panel.active { display: flex; flex-direction: column; gap: 12px; }
+  #chat-messages.hidden { display: none; }
+
+  /* ---- WIZARD STEPS ---- */
+  .wizard-step {
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 12px;
+  }
+  .wizard-step.completed { border-color: var(--success); }
+  .wizard-step-header {
+    display: flex; justify-content: space-between; align-items: center;
+    margin-bottom: 8px;
+  }
+  .wizard-step-title {
+    font-family: var(--font-mono); font-size: 11px;
+    color: var(--text-secondary); font-weight: 600;
+  }
+  .wizard-step-check { color: var(--success); font-size: 14px; }
+  .wizard-chips {
+    display: flex; flex-wrap: wrap; gap: 6px;
+  }
+  .wizard-chip {
+    padding: 5px 12px; border-radius: 14px;
+    font-family: var(--font-mono); font-size: 11px;
+    background: var(--bg-input); border: 1px solid var(--border);
+    color: var(--text-primary); cursor: pointer;
+    transition: border-color 0.15s, background 0.15s;
+  }
+  .wizard-chip:hover { border-color: var(--accent); }
+  .wizard-chip.selected {
+    border-color: var(--accent); background: var(--accent-glow);
+    color: var(--accent);
+  }
+  .wizard-input {
+    width: 100%; padding: 6px 10px; margin-top: 6px;
+    background: var(--bg-input); border: 1px solid var(--border);
+    border-radius: 6px; color: var(--text-primary);
+    font-family: var(--font-mono); font-size: 12px;
+  }
+  .wizard-input:focus { outline: none; border-color: var(--accent); }
+  .wizard-dim-row {
+    display: flex; gap: 8px; align-items: center; margin-top: 6px;
+  }
+  .wizard-dim-label {
+    font-family: var(--font-mono); font-size: 11px;
+    color: var(--text-secondary); min-width: 50px;
+  }
+  .wizard-dim-input {
+    width: 80px; padding: 4px 8px;
+    background: var(--bg-input); border: 1px solid var(--border);
+    border-radius: 4px; color: var(--text-primary);
+    font-family: var(--font-mono); font-size: 12px;
+  }
+  .wizard-dim-unit {
+    font-family: var(--font-mono); font-size: 10px;
+    color: var(--text-muted);
+  }
+  .wizard-review-field {
+    display: flex; justify-content: space-between; align-items: center;
+    padding: 4px 0; border-bottom: 1px solid var(--border);
+  }
+  .wizard-review-label {
+    font-family: var(--font-mono); font-size: 10px;
+    color: var(--text-secondary);
+  }
+  .wizard-review-value {
+    font-family: var(--font-mono); font-size: 11px;
+    color: var(--text-primary);
+  }
+  .wizard-btn-row { display: flex; gap: 8px; margin-top: 10px; }
+  .wizard-btn {
+    flex: 1; padding: 8px; border-radius: 6px;
+    font-family: var(--font-mono); font-size: 11px;
+    font-weight: 600; cursor: pointer; border: 1px solid var(--border);
+    transition: background 0.15s;
+  }
+  .wizard-btn-primary {
+    background: var(--accent); color: var(--bg-void); border-color: var(--accent);
+  }
+  .wizard-btn-secondary {
+    background: var(--bg-surface); color: var(--text-secondary);
+  }
+
+  /* ---- PLAN CARD ---- */
+  .plan-card {
+    background: var(--bg-surface);
+    border: 1px solid var(--accent);
+    border-radius: 8px;
+    padding: 14px;
+    margin: 8px 0;
+  }
+  .plan-card-title {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    font-weight: 700;
+    color: var(--accent);
+    margin-bottom: 10px;
+  }
+  .plan-card .wizard-review-field { padding: 3px 0; }
+  .plan-card-score {
+    font-family: var(--font-mono); font-size: 11px;
+    color: var(--text-secondary); margin-top: 8px;
+  }
+  .plan-card-actions { display: flex; gap: 8px; margin-top: 10px; }
+  .plan-card-btn {
+    flex: 1; padding: 7px; border-radius: 5px;
+    font-family: var(--font-mono); font-size: 11px;
+    font-weight: 600; cursor: pointer; border: 1px solid var(--border);
+  }
+  .plan-card-approve {
+    background: var(--success); color: var(--bg-void); border-color: var(--success);
+  }
+  .plan-card-reject {
+    background: var(--bg-surface); color: var(--text-secondary);
+  }
+
   /* ---- RESPONSIVE ---- */
 
   @media (max-width: 768px) {
@@ -1230,6 +1375,7 @@
       <div id="download-btns">
         <a class="dl-btn" id="dl-step" download>STEP</a>
         <a class="dl-btn" id="dl-stl" download>STL</a>
+        <a class="dl-btn" id="dl-3mf" download>3MF</a>
         <a id="dl-gcode" class="dl-btn" download style="display:none"><span class="dl-icon">&#8615;</span> G-CODE</a>
         <a class="dl-btn" id="dl-report" download>REPORT</a>
       </div>
@@ -1257,6 +1403,11 @@
     <div id="chat-panel">
       <button id="chat-toggle" onclick="toggleChat()" title="Toggle chat panel">&#9664;</button>
 
+      <div class="chat-tabs">
+        <button class="chat-tab active" id="tab-chat" onclick="switchTab('chat')">Chat</button>
+        <button class="chat-tab" id="tab-guided" onclick="switchTab('guided')">Guided</button>
+      </div>
+
       <div class="chat-header">
         <div class="chat-header-left">
           <span class="chat-header-title" data-i18n="designChat">Design Chat</span>
@@ -1282,6 +1433,84 @@
         </div>
       </div>
 
+      <div id="guided-panel">
+        <div class="wizard-step" id="wiz-step-1">
+          <div class="wizard-step-header"><span class="wizard-step-title">1. PART TYPE</span><span class="wizard-step-check" id="wiz-check-1"></span></div>
+          <div class="wizard-chips">
+            <button class="wizard-chip" onclick="wizSetPart('bracket','Mounting bracket')">Bracket</button>
+            <button class="wizard-chip" onclick="wizSetPart('enclosure','Enclosure housing')">Enclosure</button>
+            <button class="wizard-chip" onclick="wizSetPart('plate','Flat plate')">Plate</button>
+            <button class="wizard-chip" onclick="wizSetPart('shaft','Cylindrical shaft')">Shaft</button>
+            <button class="wizard-chip" onclick="wizSetPart('gear','Spur gear')">Gear</button>
+            <button class="wizard-chip" onclick="wizSetPart('flange','Pipe flange')">Flange</button>
+          </div>
+          <input class="wizard-input" placeholder="Or type custom part name..." onchange="wizSetPart(this.value, this.value)">
+        </div>
+        <div class="wizard-step" id="wiz-step-2">
+          <div class="wizard-step-header"><span class="wizard-step-title">2. MATERIAL</span><span class="wizard-step-check" id="wiz-check-2"></span></div>
+          <div class="wizard-chips">
+            <button class="wizard-chip" onclick="wizSetMaterial('aluminum 6061')">Aluminum 6061</button>
+            <button class="wizard-chip" onclick="wizSetMaterial('aluminum 7075')">Aluminum 7075</button>
+            <button class="wizard-chip" onclick="wizSetMaterial('stainless steel 304')">Steel 304</button>
+            <button class="wizard-chip" onclick="wizSetMaterial('stainless steel 316')">Steel 316</button>
+            <button class="wizard-chip" onclick="wizSetMaterial('brass')">Brass</button>
+            <button class="wizard-chip" onclick="wizSetMaterial('titanium')">Titanium</button>
+            <button class="wizard-chip" onclick="wizSetMaterial('nylon')">Nylon</button>
+            <button class="wizard-chip" onclick="wizSetMaterial('delrin')">Delrin</button>
+          </div>
+          <input class="wizard-input" placeholder="Or type custom material..." onchange="wizSetMaterial(this.value)">
+        </div>
+        <div class="wizard-step" id="wiz-step-3">
+          <div class="wizard-step-header"><span class="wizard-step-title">3. DIMENSIONS (mm)</span><span class="wizard-step-check" id="wiz-check-3"></span></div>
+          <div class="wizard-dim-row"><span class="wizard-dim-label">Width</span><input class="wizard-dim-input" id="wiz-dim-width" type="number" onchange="wizSetDim('width', this.value)"><span class="wizard-dim-unit">mm</span></div>
+          <div class="wizard-dim-row"><span class="wizard-dim-label">Height</span><input class="wizard-dim-input" id="wiz-dim-height" type="number" onchange="wizSetDim('height', this.value)"><span class="wizard-dim-unit">mm</span></div>
+          <div class="wizard-dim-row"><span class="wizard-dim-label">Depth</span><input class="wizard-dim-input" id="wiz-dim-depth" type="number" onchange="wizSetDim('depth', this.value)"><span class="wizard-dim-unit">mm</span></div>
+        </div>
+        <div class="wizard-step" id="wiz-step-4">
+          <div class="wizard-step-header"><span class="wizard-step-title">4. FEATURES</span><span class="wizard-step-check" id="wiz-check-4"></span></div>
+          <div class="wizard-chips">
+            <button class="wizard-chip" id="wiz-feat-holes" onclick="wizToggleFeature(this, 'holes')">Mounting Holes</button>
+            <button class="wizard-chip" id="wiz-feat-fillets" onclick="wizToggleFeature(this, 'fillets')">Fillets</button>
+            <button class="wizard-chip" id="wiz-feat-chamfers" onclick="wizToggleFeature(this, 'chamfers')">Chamfers</button>
+            <button class="wizard-chip" id="wiz-feat-pockets" onclick="wizToggleFeature(this, 'pockets')">Pockets</button>
+            <button class="wizard-chip" id="wiz-feat-slots" onclick="wizToggleFeature(this, 'slots')">Slots</button>
+          </div>
+          <div id="wiz-holes-config" style="display:none;margin-top:8px;">
+            <div class="wizard-dim-row"><span class="wizard-dim-label">Count</span><input class="wizard-dim-input" id="wiz-hole-count" type="number" value="4" min="1" onchange="wizUpdateHoles()"></div>
+            <div class="wizard-chips" style="margin-top:6px;">
+              <button class="wizard-chip" id="wiz-hole-m3" onclick="wizSetHoleSize('M3')">M3</button>
+              <button class="wizard-chip" id="wiz-hole-m4" onclick="wizSetHoleSize('M4')">M4</button>
+              <button class="wizard-chip selected" id="wiz-hole-m6" onclick="wizSetHoleSize('M6')">M6</button>
+              <button class="wizard-chip" id="wiz-hole-m8" onclick="wizSetHoleSize('M8')">M8</button>
+            </div>
+          </div>
+          <input class="wizard-input" placeholder="Or type custom feature..." onkeydown="if(event.key==='Enter'){wizAddCustomFeature(this.value);this.value='';}">
+        </div>
+        <div class="wizard-step" id="wiz-step-5">
+          <div class="wizard-step-header"><span class="wizard-step-title">5. CONSTRAINTS</span><span class="wizard-step-check" id="wiz-check-5"></span></div>
+          <div class="wizard-dim-row"><span class="wizard-dim-label">Min wall</span><input class="wizard-dim-input" id="wiz-min-wall" type="number" value="3" step="0.5" onchange="wizUpdateConstraints()"><span class="wizard-dim-unit">mm</span></div>
+          <div class="wizard-dim-row"><span class="wizard-dim-label">Max size</span><input class="wizard-dim-input" id="wiz-max-size" type="number" value="500" onchange="wizUpdateConstraints()"><span class="wizard-dim-unit">mm</span></div>
+        </div>
+        <div class="wizard-step" id="wiz-step-6">
+          <div class="wizard-step-header"><span class="wizard-step-title">6. MACHINING</span><span class="wizard-step-check" id="wiz-check-6"></span></div>
+          <div class="wizard-chips">
+            <button class="wizard-chip" onclick="wizSetAxis('3-axis', this)">3-axis</button>
+            <button class="wizard-chip" onclick="wizSetAxis('3+2-axis', this)">3+2-axis</button>
+            <button class="wizard-chip" onclick="wizSetAxis('5-axis', this)">5-axis</button>
+            <button class="wizard-chip" onclick="wizSetAxis('', this)">Auto</button>
+          </div>
+        </div>
+        <div class="wizard-step" id="wiz-step-7">
+          <div class="wizard-step-header"><span class="wizard-step-title">7. REVIEW</span><span class="wizard-step-check" id="wiz-check-7"></span></div>
+          <div id="wiz-review-content"></div>
+          <div id="wiz-score" style="font-family:var(--font-mono);font-size:11px;color:var(--text-secondary);margin-top:8px;"></div>
+          <div class="wizard-btn-row">
+            <button class="wizard-btn wizard-btn-primary" onclick="wizApprove()">Approve &amp; Generate</button>
+            <button class="wizard-btn wizard-btn-secondary" onclick="switchTab('chat')">Back to Chat</button>
+          </div>
+        </div>
+      </div>
+
       <div class="chat-input-area" style="position: relative;">
         <div id="mention-dropdown">
           <div class="mention-option" data-agent="design" onclick="insertMention('design')">
@@ -1372,6 +1601,255 @@ let mentionActive = false;
 let mentionIndex = 0;
 let currentLang = localStorage.getItem('neuralcad_lang') || 'en';
 
+// ── WIZARD STATE ──────────────────────────────────────
+let activeTab = 'chat';
+let wizHoleSize = 'M6';
+let wizFeatures = new Set();
+
+function switchTab(tab) {
+  activeTab = tab;
+  document.getElementById('tab-chat').classList.toggle('active', tab === 'chat');
+  document.getElementById('tab-guided').classList.toggle('active', tab === 'guided');
+  document.getElementById('chat-messages').classList.toggle('hidden', tab === 'guided');
+  document.querySelector('.chat-header').style.display = tab === 'chat' ? 'flex' : 'none';
+  document.getElementById('guided-panel').classList.toggle('active', tab === 'guided');
+  if (tab === 'guided') syncWizardFromState();
+}
+
+function wizSetPart(name, desc) {
+  designState.part_name = name;
+  designState.description = desc;
+  wizMarkStep(1); saveState();
+  document.querySelectorAll('#wiz-step-1 .wizard-chip').forEach(c => c.classList.remove('selected'));
+  if (event && event.target) event.target.classList.add('selected');
+}
+
+function wizSetMaterial(mat) {
+  designState.material = mat;
+  wizMarkStep(2); saveState();
+  document.querySelectorAll('#wiz-step-2 .wizard-chip').forEach(c => c.classList.remove('selected'));
+  if (event && event.target) event.target.classList.add('selected');
+}
+
+function wizSetDim(name, val) {
+  if (!designState.dimensions) designState.dimensions = {};
+  const v = parseFloat(val);
+  if (v > 0) designState.dimensions[name] = v;
+  else delete designState.dimensions[name];
+  wizMarkStep(3); saveState();
+}
+
+function wizToggleFeature(el, feat) {
+  if (wizFeatures.has(feat)) {
+    wizFeatures.delete(feat);
+    el.classList.remove('selected');
+  } else {
+    wizFeatures.add(feat);
+    el.classList.add('selected');
+  }
+  if (feat === 'holes') {
+    document.getElementById('wiz-holes-config').style.display = wizFeatures.has('holes') ? 'block' : 'none';
+  }
+  wizRebuildFeatures();
+  wizMarkStep(4); saveState();
+}
+
+function wizSetHoleSize(size) {
+  wizHoleSize = size;
+  document.querySelectorAll('#wiz-holes-config .wizard-chip').forEach(c => c.classList.remove('selected'));
+  document.getElementById('wiz-hole-' + size.toLowerCase()).classList.add('selected');
+  wizRebuildFeatures();
+  saveState();
+}
+
+function wizUpdateHoles() { wizRebuildFeatures(); saveState(); }
+
+function wizRebuildFeatures() {
+  if (!designState.features) designState.features = [];
+  const custom = designState.features.filter(f => !['fillets','chamfers','pockets','slots'].includes(f) && !/^\d+x M\d+ holes$/.test(f));
+  designState.features = [];
+  if (wizFeatures.has('holes')) {
+    const count = document.getElementById('wiz-hole-count')?.value || 4;
+    designState.features.push(count + 'x ' + wizHoleSize + ' holes');
+  }
+  if (wizFeatures.has('fillets')) designState.features.push('fillets');
+  if (wizFeatures.has('chamfers')) designState.features.push('chamfers');
+  if (wizFeatures.has('pockets')) designState.features.push('pockets');
+  if (wizFeatures.has('slots')) designState.features.push('slots');
+  designState.features.push(...custom);
+}
+
+function wizAddCustomFeature(val) {
+  if (!val.trim()) return;
+  if (!designState.features) designState.features = [];
+  designState.features.push(val.trim());
+  wizMarkStep(4); saveState();
+}
+
+function wizUpdateConstraints() {
+  designState.constraints = [];
+  const wall = document.getElementById('wiz-min-wall')?.value;
+  const size = document.getElementById('wiz-max-size')?.value;
+  if (wall) designState.constraints.push('min wall ' + wall + 'mm');
+  if (size && parseFloat(size) < 500) designState.constraints.push('max size ' + size + 'mm');
+  wizMarkStep(5); saveState();
+}
+
+function wizSetAxis(axis, el) {
+  designState.axis_recommendation = axis;
+  document.querySelectorAll('#wiz-step-6 .wizard-chip').forEach(c => c.classList.remove('selected'));
+  if (el) el.classList.add('selected');
+  wizMarkStep(6); saveState();
+}
+
+function wizMarkStep(n) {
+  const check = document.getElementById('wiz-check-' + n);
+  const step = document.getElementById('wiz-step-' + n);
+  if (check) check.textContent = '\u2713';
+  if (step) step.classList.add('completed');
+  if (n <= 6) wizUpdateReview();
+}
+
+function wizUpdateReview() {
+  const el = document.getElementById('wiz-review-content');
+  if (!el) return;
+  const fields = [
+    ['Part', designState.part_name || ''],
+    ['Material', designState.material || ''],
+    ['Dimensions', Object.entries(designState.dimensions || {}).map(([k,v]) => k + '=' + v + 'mm').join(', ') || ''],
+    ['Features', (designState.features || []).join(', ') || ''],
+    ['Constraints', (designState.constraints || []).join(', ') || ''],
+    ['Machining', designState.axis_recommendation || 'Auto'],
+  ];
+  let html = '';
+  for (const [label, value] of fields) {
+    html += '<div class="wizard-review-field"><span class="wizard-review-label">' + label + '</span><span class="wizard-review-value">' + (value || '\u2014') + '</span></div>';
+  }
+  el.innerHTML = html;
+  const score = wizComputeScore();
+  const scoreEl = document.getElementById('wiz-score');
+  if (scoreEl) scoreEl.textContent = 'Score: ' + score.toFixed(0) + '/8 ' + (score >= 8 ? '\u2713 Ready' : '\u2717 Need more info');
+}
+
+function wizComputeScore() {
+  let s = 0;
+  if (designState.material) s += 3;
+  if (designState.part_name) s += 1;
+  if (designState.description) s += 1;
+  if (designState.axis_recommendation) s += 2;
+  s += Math.min(Object.keys(designState.dimensions || {}).length, 4);
+  s += Math.min((designState.features || []).length, 4);
+  s += Math.min((designState.constraints || []).length, 2);
+  return s;
+}
+
+async function wizApprove() {
+  const plan = {
+    part_name: designState.part_name || '',
+    description: designState.description || '',
+    material: designState.material || '',
+    dimensions: designState.dimensions || {},
+    features: designState.features || [],
+    constraints: designState.constraints || [],
+    axis_recommendation: designState.axis_recommendation || '',
+    machining_notes: [],
+    confidence_score: wizComputeScore(),
+  };
+  try {
+    const 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();
+    designState = data.design_state;
+    saveState();
+    switchTab('chat');
+    await sendMessage('Generate the approved design');
+  } catch (err) {
+    console.error('Plan approve failed:', err);
+  }
+}
+
+function syncWizardFromState() {
+  const dims = designState.dimensions || {};
+  for (const key of ['width', 'height', 'depth']) {
+    const el = document.getElementById('wiz-dim-' + key);
+    if (el && dims[key]) el.value = dims[key];
+  }
+  if (designState.part_name) wizMarkStep(1);
+  if (designState.material) wizMarkStep(2);
+  if (Object.keys(dims).length > 0) wizMarkStep(3);
+  if ((designState.features || []).length > 0) wizMarkStep(4);
+  if ((designState.constraints || []).length > 0) wizMarkStep(5);
+  if (designState.axis_recommendation) wizMarkStep(6);
+  wizUpdateReview();
+}
+
+// ── PLAN CARD ─────────────────────────────────────────
+
+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'],
+  ];
+  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">' + label + '</span><span class="wizard-review-value">' + (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">' + plan.machining_notes.join('; ') + '</span></div>';
+  }
+  html += '<div class="plan-card-score">Score: ' + (plan.confidence_score || 0).toFixed(0) + '/8</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 += '</div></div>';
+  return html;
+}
+
+async function approvePlanCard() {
+  const plan = designState.plan;
+  if (!plan) return;
+  try {
+    const 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();
+    designState = data.design_state;
+    saveState();
+    const card = document.getElementById('active-plan-card');
+    if (card) card.remove();
+    await sendMessage('Generate the approved design');
+  } catch (err) {
+    console.error('Plan approve failed:', err);
+  }
+}
+
+async function rejectPlanCard() {
+  try {
+    const resp = await fetch('/api/plan/reject', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ design_state: designState }),
+    });
+    const data = await resp.json();
+    designState = data.design_state;
+    saveState();
+    const card = document.getElementById('active-plan-card');
+    if (card) card.remove();
+  } catch (err) {
+    console.error('Plan reject failed:', err);
+  }
+}
+
 // ── i18n ─────────────────────────────────────────────
 
 const I18N = {
@@ -1406,6 +1884,11 @@ const I18N = {
     cadFailed: 'CAD execution failed: ',
     errorPrefix: 'Error: ',
     sendPreviewMsg: '@cad Generate a 3D preview based on our discussion',
+    tabChat: 'Chat',
+    tabGuided: 'Guided',
+    planReady: 'PLAN READY FOR REVIEW',
+    planApprove: 'Approve',
+    planReject: 'Reject',
   },
   'zh-TW': {
     subtitle: '\u591a\u4ee3\u7406\u8a2d\u8a08',
@@ -1438,6 +1921,11 @@ const I18N = {
     cadFailed: 'CAD \u57f7\u884c\u5931\u6557\uff1a',
     errorPrefix: '\u932f\u8aa4\uff1a',
     sendPreviewMsg: '@cad \u6839\u64da\u6211\u5011\u7684\u8a0e\u8ad6\u751f\u6210 3D \u9810\u89bd',
+    tabChat: '\u5c0d\u8a71',
+    tabGuided: '\u5f15\u5c0e',
+    planReady: '\u8a08\u756b\u5df2\u6e96\u5099\u5be9\u67e5',
+    planApprove: '\u6279\u51c6',
+    planReject: '\u62d2\u7d55',
   },
   vi: {
     subtitle: 'Thi\u1ebft K\u1ebf \u0110a T\u00e1c T\u1eed',
@@ -1470,6 +1958,11 @@ const I18N = {
     cadFailed: 'Th\u1ef1c thi CAD th\u1ea5t b\u1ea1i: ',
     errorPrefix: 'L\u1ed7i: ',
     sendPreviewMsg: '@cad T\u1ea1o b\u1ea3n xem tr\u01b0\u1edbc 3D d\u1ef1a tr\u00ean cu\u1ed9c th\u1ea3o lu\u1eadn c\u1ee7a ch\u00fang ta',
+    tabChat: 'Tr\u00f2 Chuy\u1ec7n',
+    tabGuided: 'H\u01b0\u1edbng D\u1eabn',
+    planReady: 'K\u1ebe HO\u1ea0CH S\u1eb4N S\u00c0NG',
+    planApprove: 'Duy\u1ec7t',
+    planReject: 'T\u1eeb Ch\u1ed1i',
   },
 };
 
@@ -1959,6 +2452,17 @@ async function sendMessage(text) {
     }
     saveState();
 
+    // If phase transitioned to planning, show plan card
+    if (designState.phase === 'planning' && designState.plan) {
+      const old = document.getElementById('active-plan-card');
+      if (old) old.remove();
+      const msgs = document.getElementById('chat-messages');
+      const cardDiv = document.createElement('div');
+      cardDiv.innerHTML = renderPlanCard(designState.plan);
+      msgs.appendChild(cardDiv.firstChild);
+      msgs.scrollTop = msgs.scrollHeight;
+    }
+
     // If preview available, load 3D model
     if (data.preview && data.preview.success) {
       setViewerLoading(true, t('loadingModel'));
@@ -2261,6 +2765,7 @@ function updateDownloads(partName) {
 
   document.getElementById('dl-step').href = '/api/models/' + partName + '.step';
   document.getElementById('dl-stl').href = '/api/models/' + partName + '.stl';
+  document.getElementById('dl-3mf').href = '/api/models/' + partName + '.3mf';
   document.getElementById('dl-report').href = '/api/models/' + partName + '_report.json';
 
   const dlGcode = document.getElementById('dl-gcode');
@@ -2352,6 +2857,7 @@ function renderGallery() {
     html += '<div class="gallery-card-downloads">';
     html += '<a class="gallery-dl" href="/api/models/' + name + '.step" download>STEP</a>';
     html += '<a class="gallery-dl" href="/api/models/' + name + '.stl" download>STL</a>';
+    html += '<a class="gallery-dl" href="/api/models/' + name + '.3mf" download>3MF</a>';
     html += '<a class="gallery-dl" href="/api/models/' + name + '.gcode" download>GCODE</a>';
     html += '</div>';
     html += '</div>';