@1mancompany/onemancompany 0.7.33 → 0.7.44

package/frontend/app.js

@@ -95,6 +95,7 @@ class AppController {
       const { employees, tasks, rooms, tools, activity_log, version, office_layout } = data;
       console.debug(`[bootstrap] /api/bootstrap took ${(performance.now() - t0).toFixed(0)}ms`);
 
+      this._cachedEmployees = employees || [];
       this.updateRoster(employees);
       this.updateOneononeDropdown(employees);
       this.updateProjectsPanel();
@@ -201,6 +202,7 @@ class AppController {
 
   async _fetchAndRenderRoster() {
     const employees = await fetch('/api/employees').then(r => r.json());
+    this._cachedEmployees = employees || [];
     this.updateRoster(employees);
     this.updateOneononeDropdown(employees);
     if (window.officeRenderer) {
@@ -1090,11 +1092,11 @@ class AppController {
             if (data.status === 'ok') {
                 console.log('Abort all result:', data);
             } else {
-                alert(data.detail || data.message || 'Failed to abort all tasks');
+                this._showToast(data.detail || data.message || 'Failed to abort all tasks', 'error');
             }
         } catch (e) {
             console.error('Abort all failed:', e);
-            alert('Failed to abort all tasks');
+            this._showToast('Failed to abort all tasks', 'error');
         }
     });
 
@@ -1259,7 +1261,7 @@ class AppController {
     startBtn.disabled = false;
 
     if (res.error) {
-      alert(res.error);
+      this._showToast(res.error, 'error');
       return;
     }
 
@@ -1752,7 +1754,7 @@ class AppController {
       })
       .then(data => {
         if (data.error) {
-          alert(`Cannot dismiss: ${data.error}`);
+          this._showToast(`Cannot dismiss: ${data.error}`, 'error');
         } else {
           this.closeEmployeeDetail();
           this.addLog(`Dismissed ${data.name} (${data.nickname}) — ${data.reason}`);
@@ -1761,7 +1763,7 @@ class AppController {
       })
       .catch(err => {
         console.error('Fire employee error:', err);
-        alert('Failed to dismiss employee. See console for details.');
+        this._showToast('Failed to dismiss employee', 'error');
       });
   }
 
@@ -2027,11 +2029,11 @@ class AppController {
       if (data.status === 'ok') {
         this._fetchCronList(empId);
       } else {
-        alert(data.detail || data.message || 'Failed to stop cron');
+        this._showToast(data.detail || data.message || 'Failed to stop cron', 'error');
       }
     } catch (err) {
       console.error('Failed to cancel cron:', err);
-      alert('Failed to stop cron job');
+      this._showToast('Failed to stop cron job', 'error');
     }
   }
 
@@ -2045,11 +2047,11 @@ class AppController {
       if (data.status === 'ok') {
         this._fetchCronList(empId);
       } else {
-        alert(data.detail || data.message || 'Failed to stop all crons');
+        this._showToast(data.detail || data.message || 'Failed to stop all crons', 'error');
       }
     } catch (err) {
       console.error('Failed to stop all crons:', err);
-      alert('Failed to stop all cron jobs');
+      this._showToast('Failed to stop all cron jobs', 'error');
     }
   }
 
@@ -2737,7 +2739,7 @@ class AppController {
     fetch('/api/ceo/dnd').then(r => r.json()).then(data => {
       dndBtn.classList.toggle('active', data.dnd);
       if (data.dnd) dndBtn.title = 'Do Not Disturb (ON)';
-    }).catch(() => {});
+    }).catch(err => console.warn('[dnd] state load failed:', err));
   }
 
   // ===== @Mention Autocomplete ===== //
@@ -5898,7 +5900,7 @@ class AppController {
       });
       const result = await resp.json();
       if (result.status === 'error') {
-        alert(result.message);
+        this._showToast(result.message, 'error');
       } else {
         this._renderSystemCrons();
       }
@@ -6679,7 +6681,7 @@ class AppController {
           window.open(data.auth_url, '_blank', 'width=600,height=700');
           setTimeout(() => this.openToolDetail(toolId), 5000);
         } else {
-          alert(data.message || 'OAuth login failed');
+          this._showToast(data.message || 'OAuth login failed', 'error');
         }
         break;
       }
@@ -6692,7 +6694,7 @@ class AppController {
       case 'credentials': {
         const clientId = document.getElementById('tool-oauth-client-id')?.value || '';
         const clientSecret = document.getElementById('tool-oauth-client-secret')?.value || '';
-        if (!clientId || !clientSecret) { alert('Both Client ID and Client Secret required'); return; }
+        if (!clientId || !clientSecret) { this._showToast('Both Client ID and Client Secret required', 'error'); return; }
         const res = await fetch(`/api/tools/${esc}/oauth/credentials`, {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
@@ -6700,7 +6702,7 @@ class AppController {
         });
         const data = await res.json();
         if (data.status === 'ok') this.openToolDetail(toolId);
-        else alert(data.message || 'Failed');
+        else this._showToast(data.message || 'Failed', 'error');
         break;
       }
       case 'save_env': {
@@ -6714,7 +6716,7 @@ class AppController {
         });
         const data = await res.json();
         if (data.status === 'ok') this.openToolDetail(toolId);
-        else alert(data.message || 'Failed');
+        else this._showToast(data.message || 'Failed', 'error');
         break;
       }
     }
@@ -6725,7 +6727,7 @@ class AppController {
   async _templateOpen(toolId, filename) {
     const esc = encodeURIComponent;
     const res = await fetch(`/api/tools/${esc(toolId)}/templates/${esc(filename)}`);
-    if (!res.ok) { alert('Failed to load template'); return; }
+    if (!res.ok) { this._showToast('Failed to load template', 'error'); return; }
     const data = await res.json();
     const body = document.getElementById('tool-list-body');
     const escH = (t) => this._escapeHtml(t);
@@ -6743,7 +6745,7 @@ class AppController {
 
   async _templateSave(toolId, filename) {
     const content = document.getElementById('template-editor')?.value || '';
-    if (!content.trim()) { alert('Template cannot be empty'); return; }
+    if (!content.trim()) { this._showToast('Template cannot be empty', 'error'); return; }
     const esc = encodeURIComponent;
     const res = await fetch(`/api/tools/${esc(toolId)}/templates/${esc(filename)}`, {
       method: 'PUT',
@@ -6752,7 +6754,7 @@ class AppController {
     });
     const data = await res.json();
     if (data.status === 'ok') this.openToolDetail(toolId);
-    else alert(data.message || 'Save failed');
+    else this._showToast(data.message || 'Save failed', 'error');
   }
 
   async _templateDelete(toolId, filename) {
@@ -6761,7 +6763,7 @@ class AppController {
     const res = await fetch(`/api/tools/${esc(toolId)}/templates/${esc(filename)}`, { method: 'DELETE' });
     const data = await res.json();
     if (data.status === 'ok') this.openToolDetail(toolId);
-    else alert(data.message || 'Delete failed');
+    else this._showToast(data.message || 'Delete failed', 'error');
   }
 
   _templateNew(toolId, templatesDir) {
@@ -6961,7 +6963,7 @@ class AppController {
       }
     } catch (err) {
       this._chatPanel.showTyping(false);
-      alert(`Failed to send message: ${err.message}`);
+      this._showToast(`Failed to send message: ${err.message}`, 'error');
     }
     // Reply arrives via WebSocket conversation_message event
   }
@@ -6987,7 +6989,7 @@ class AppController {
       const empName = this._resolveEmployeeName(data.employee_id || '');
       this.logEntry('SYSTEM', `🧹 Cleared 1-on-1 history for ${empName}.`, 'system');
     } catch (err) {
-      alert(`Failed to clear history: ${err.message}`);
+      this._showToast(`Failed to clear history: ${err.message}`, 'error');
     }
   }
 
@@ -7099,6 +7101,7 @@ class AppController {
   }
 
   _escapeHtml(text) {
+    if (text == null) return '';
     const div = document.createElement('div');
     div.textContent = text;
     return div.innerHTML;
@@ -7396,20 +7399,15 @@ class AppController {
     list.appendChild(row);
   }
 
-  async _populateProductOwnerDropdown() {
-    try {
-      const data = await fetch('/api/bootstrap').then(r => r.json());
-      const sel = document.getElementById('create-product-owner');
-      if (!sel) return;
-      sel.innerHTML = '<option value="">Select owner...</option>';
-      for (const emp of (data.employees || [])) {
-        const opt = document.createElement('option');
-        opt.value = emp.id;
-        opt.textContent = `${emp.name || emp.id} (${emp.role || ''})`;
-        sel.appendChild(opt);
-      }
-    } catch (e) {
-      console.debug('Failed to populate owner dropdown:', e);
+  _populateProductOwnerDropdown() {
+    const sel = document.getElementById('create-product-owner');
+    if (!sel) return;
+    sel.innerHTML = '<option value="">Select owner...</option>';
+    for (const emp of (this._cachedEmployees || [])) {
+      const opt = document.createElement('option');
+      opt.value = emp.id;
+      opt.textContent = `${emp.name || emp.id} (${emp.role || ''})`;
+      sel.appendChild(opt);
     }
   }
 
@@ -7555,6 +7553,7 @@ class AppController {
       { id: 'issues', label: `Issues (${issues.length})` },
       { id: 'kanban', label: 'Kanban' },
       { id: 'roadmap', label: 'Roadmap' },
+      { id: 'reviews', label: `Reviews (${(data.reviews || []).length})` },
       { id: 'activity', label: 'Activity' },
       { id: 'projects', label: `Projects (${projects.length})` },
     ];
@@ -7591,6 +7590,8 @@ class AppController {
       this._renderProductKanban(slug, container, data);
     } else if (tabId === 'roadmap') {
       this._renderProductRoadmap(slug, container);
+    } else if (tabId === 'reviews') {
+      this._renderProductReviews(data.reviews || [], slug, container);
     } else if (tabId === 'activity') {
       this._renderProductActivity(slug, container);
     } else if (tabId === 'projects') {
@@ -7722,15 +7723,13 @@ class AppController {
     ownerEl.className = 'form-input';
     ownerEl.style.width = 'auto';
     ownerEl.innerHTML = '<option value="">Unassigned</option>';
-    fetch('/api/bootstrap').then(r => r.json()).then(d => {
-      for (const emp of (d.employees || [])) {
-        const opt = document.createElement('option');
-        opt.value = emp.id;
-        opt.textContent = `${emp.name || emp.id}`;
-        ownerEl.appendChild(opt);
-      }
-      ownerEl.value = product.owner_id || '';
-    });
+    for (const emp of (this._cachedEmployees || [])) {
+      const opt = document.createElement('option');
+      opt.value = emp.id;
+      opt.textContent = `${emp.name || emp.id}`;
+      ownerEl.appendChild(opt);
+    }
+    ownerEl.value = product.owner_id || '';
     ownerEl.addEventListener('change', () => {
       fetch(`/api/product/${encodeURIComponent(slug)}`, {
         method: 'PUT',
@@ -7783,6 +7782,21 @@ class AppController {
       unitEl.textContent = unit;
       this._makeKrFieldEditable(unitEl, slug, kr.id, 'unit');
 
+      // Delete KR button
+      const delKrBtn = document.createElement('button');
+      delKrBtn.className = 'kr-remove-btn';
+      delKrBtn.innerHTML = '&times;';
+      delKrBtn.title = 'Delete KR';
+      delKrBtn.addEventListener('click', async () => {
+        if (!confirm(`Delete KR "${kr.title}"?`)) return;
+        try {
+          const r = await fetch(`/api/product/${encodeURIComponent(slug)}/kr/${encodeURIComponent(kr.id)}`, { method: 'DELETE' });
+          if (!r.ok) throw new Error(`HTTP ${r.status}`);
+          this._showToast('KR deleted', 'success');
+          this._openProductDetail(slug);
+        } catch (err) { this._showToast(`Failed: ${err.message}`, 'error'); }
+      });
+
       krRow.appendChild(titleEl);
       krRow.appendChild(document.createTextNode(': '));
       krRow.appendChild(currentEl);
@@ -7791,6 +7805,7 @@ class AppController {
       krRow.appendChild(unitEl);
       krRow.appendChild(document.createTextNode(` (${pct.toFixed(0)}%)`));
       krRow.appendChild(progTrack);
+      krRow.appendChild(delKrBtn);
       krList.appendChild(krRow);
     }
 
@@ -7803,11 +7818,12 @@ class AppController {
     container.appendChild(krList);
 
     // Version History
+    const verLabel = document.createElement('div');
+    verLabel.className = 'product-section-label';
+    verLabel.textContent = 'Version History';
+    container.appendChild(verLabel);
+
     if (versions.length > 0) {
-      const verLabel = document.createElement('div');
-      verLabel.className = 'product-section-label';
-      verLabel.textContent = 'Version History';
-      container.appendChild(verLabel);
       const verList = document.createElement('div');
       verList.className = 'product-version-list';
       for (const v of versions) {
@@ -7826,6 +7842,13 @@ class AppController {
       }
       container.appendChild(verList);
     }
+
+    // Release Version button
+    const releaseBtn = document.createElement('button');
+    releaseBtn.className = 'btn-small';
+    releaseBtn.textContent = '+ Release Version';
+    releaseBtn.addEventListener('click', () => this._showReleaseVersionForm(container, slug));
+    container.appendChild(releaseBtn);
   }
 
   _makeEditable(el, fieldName, slug) {
@@ -8152,10 +8175,40 @@ class AppController {
       ${labels ? `<div>Labels: ${labels}</div>` : ''}
       ${issue.created_by ? `<div>Created by: ${this._escHtml(issue.created_by)}</div>` : ''}
       ${issue.resolution ? `<div>Resolution: ${this._escHtml(issue.resolution)}</div>` : ''}
-      ${issue.sprint ? `<div>Sprint: ${this._escHtml(issue.sprint)}</div>` : ''}
     `;
     body.appendChild(metaEl);
 
+    // Sprint picker (dropdown)
+    const sprintRow = document.createElement('div');
+    sprintRow.textContent = 'Sprint: ';
+    const sprintSel = document.createElement('select');
+    sprintSel.className = 'form-input';
+    sprintSel.style.width = 'auto';
+    sprintSel.style.display = 'inline';
+    sprintSel.innerHTML = '<option value="">No Sprint</option>';
+    fetch(`/api/product/${encodeURIComponent(slug)}/sprints`)
+      .then(r => r.json())
+      .then(sprints => {
+        for (const s of sprints.filter(s => s.status !== 'closed')) {
+          const opt = document.createElement('option');
+          opt.value = s.id;
+          opt.textContent = `${s.name}${s.status === 'active' ? ' (active)' : ''}`;
+          sprintSel.appendChild(opt);
+        }
+        sprintSel.value = issue.sprint || '';
+      })
+      .catch(err => console.warn('Failed to load sprints:', err));
+    sprintSel.addEventListener('change', () => {
+      fetch(`/api/product/${encodeURIComponent(slug)}/issue/${encodeURIComponent(issue.id)}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ sprint: sprintSel.value || '' }),
+      }).then(r => { if (!r.ok) throw new Error(`HTTP ${r.status}`); })
+        .catch(err => this._showToast(`Failed: ${err.message}`, 'error'));
+    });
+    sprintRow.appendChild(sprintSel);
+    body.appendChild(sprintRow);
+
     const assignRow = document.createElement('div');
     assignRow.textContent = 'Assignee: ';
     const assignSel = document.createElement('select');
@@ -8163,15 +8216,13 @@ class AppController {
     assignSel.style.width = 'auto';
     assignSel.style.display = 'inline';
     assignSel.innerHTML = '<option value="">Unassigned</option>';
-    fetch('/api/bootstrap').then(r => r.json()).then(d => {
-      for (const emp of (d.employees || [])) {
-        const opt = document.createElement('option');
-        opt.value = emp.id;
-        opt.textContent = emp.name || emp.id;
-        assignSel.appendChild(opt);
-      }
-      assignSel.value = issue.assignee_id || '';
-    });
+    for (const emp of (this._cachedEmployees || [])) {
+      const opt = document.createElement('option');
+      opt.value = emp.id;
+      opt.textContent = emp.name || emp.id;
+      assignSel.appendChild(opt);
+    }
+    assignSel.value = issue.assignee_id || '';
     assignSel.addEventListener('click', (e) => e.stopPropagation());
     assignSel.addEventListener('change', () => {
       fetch(`/api/product/${encodeURIComponent(slug)}/issue/${encodeURIComponent(issue.id)}`, {
@@ -8402,11 +8453,26 @@ class AppController {
           <option value="P2" selected>P2</option><option value="P3">P3</option>
         </select>
         <input type="number" class="form-input issue-new-sp" placeholder="Story pts" style="width:60px" />
-        <input type="text" class="form-input issue-new-sprint" placeholder="Sprint" style="width:80px" />
+        <select class="form-input issue-new-sprint" style="width:auto">
+          <option value="">No Sprint</option>
+        </select>
         <button class="btn-small issue-new-save">Create</button>
         <button class="kr-remove-btn issue-new-cancel">&times;</button>
       </div>
     `;
+    // Populate sprint picker from available sprints
+    const sprintSel = row.querySelector('.issue-new-sprint');
+    fetch(`/api/product/${encodeURIComponent(slug)}/sprints`)
+      .then(r => r.json())
+      .then(sprints => {
+        for (const s of sprints.filter(s => s.status !== 'closed')) {
+          const opt = document.createElement('option');
+          opt.value = s.id;
+          opt.textContent = `${s.name}${s.status === 'active' ? ' (active)' : ''}`;
+          sprintSel.appendChild(opt);
+        }
+      })
+      .catch(err => console.warn('Failed to load sprints:', err));
     row.querySelector('.issue-new-cancel').addEventListener('click', () => row.remove());
     row.querySelector('.issue-new-save').addEventListener('click', async () => {
       const title = row.querySelector('.issue-new-title').value.trim();
@@ -8607,6 +8673,11 @@ class AppController {
             const actions = document.createElement('div');
             actions.className = 'sprint-actions';
             if (s.status === 'planning') {
+              const editBtn = document.createElement('button');
+              editBtn.className = 'sprint-action-btn';
+              editBtn.textContent = 'Edit';
+              editBtn.addEventListener('click', () => this._showEditSprintForm(bar, slug, s));
+              actions.appendChild(editBtn);
               const startBtn = document.createElement('button');
               startBtn.className = 'sprint-action-btn';
               startBtn.textContent = 'Start';
@@ -8758,10 +8829,26 @@ class AppController {
       </div>
       <div class="sprint-form-row">
         <input type="number" class="form-input sprint-new-capacity" placeholder="Capacity (pts)" style="width:80px" />
+        <span class="sprint-suggested-capacity" style="color:var(--text-dim);font-size:calc(5px + var(--font-boost));margin-left:4px"></span>
         <button class="btn-small sprint-save-btn">Create</button>
         <button class="kr-remove-btn sprint-cancel-btn">&times;</button>
       </div>
     `;
+    // Show suggested capacity if available
+    fetch(`/api/product/${encodeURIComponent(slug)}/sprint/suggest-capacity`)
+      .then(r => r.json())
+      .then(d => {
+        if (d.suggested_capacity != null) {
+          const hint = form.querySelector('.sprint-suggested-capacity');
+          hint.textContent = `(suggested: ${d.suggested_capacity} pts)`;
+          hint.style.cursor = 'pointer';
+          hint.title = 'Click to use suggested capacity';
+          hint.addEventListener('click', () => {
+            form.querySelector('.sprint-new-capacity').value = d.suggested_capacity;
+          });
+        }
+      })
+      .catch(err => console.warn('Failed to load suggested capacity:', err));
     // Default dates: today → +14 days
     const today = new Date();
     const end = new Date(today);
@@ -8796,6 +8883,51 @@ class AppController {
     form.querySelector('.sprint-new-name').focus();
   }
 
+  _showEditSprintForm(barEl, slug, sprint) {
+    if (barEl.querySelector('.sprint-inline-add')) return;
+    const form = document.createElement('div');
+    form.className = 'sprint-inline-add';
+    form.innerHTML = `
+      <input type="text" class="form-input sprint-edit-name" value="${this._escHtml(sprint.name)}" />
+      <input type="text" class="form-input sprint-edit-goal" value="${this._escHtml(sprint.goal || '')}" placeholder="Goal" />
+      <div class="sprint-form-row">
+        <label style="color:var(--text-dim);font-size:calc(5px + var(--font-boost))">Start:</label>
+        <input type="date" class="form-input sprint-edit-start" value="${sprint.start_date || ''}" style="width:auto" />
+        <label style="color:var(--text-dim);font-size:calc(5px + var(--font-boost))">End:</label>
+        <input type="date" class="form-input sprint-edit-end" value="${sprint.end_date || ''}" style="width:auto" />
+      </div>
+      <div class="sprint-form-row">
+        <input type="number" class="form-input sprint-edit-capacity" value="${sprint.capacity || ''}" placeholder="Capacity" style="width:80px" />
+        <button class="btn-small sprint-edit-save">Save</button>
+        <button class="kr-remove-btn sprint-edit-cancel">&times;</button>
+      </div>
+    `;
+    form.querySelector('.sprint-edit-cancel').addEventListener('click', () => form.remove());
+    form.querySelector('.sprint-edit-save').addEventListener('click', async () => {
+      const updates = {
+        name: form.querySelector('.sprint-edit-name').value.trim(),
+        goal: form.querySelector('.sprint-edit-goal').value.trim(),
+        start_date: form.querySelector('.sprint-edit-start').value,
+        end_date: form.querySelector('.sprint-edit-end').value,
+      };
+      const cap = parseInt(form.querySelector('.sprint-edit-capacity').value);
+      if (!isNaN(cap)) updates.capacity = cap;
+      if (!updates.name) { this._showToast('Sprint name is required', 'warning'); return; }
+      try {
+        const r = await fetch(`/api/product/${encodeURIComponent(slug)}/sprint/${encodeURIComponent(sprint.id)}`, {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(updates),
+        });
+        if (!r.ok) { const err = await r.json(); throw new Error(err.detail || r.statusText); }
+        this._showToast('Sprint updated', 'success');
+        this._openProductDetail(slug);
+      } catch (err) { this._showToast(`Update failed: ${err.message}`, 'error'); }
+    });
+    barEl.appendChild(form);
+    form.querySelector('.sprint-edit-name').focus();
+  }
+
   // ---------------------------------------------------------------------------
   // Activity Feed Tab
   // ---------------------------------------------------------------------------
@@ -8874,6 +9006,208 @@ class AppController {
       .catch(err => { container.innerHTML = `<div class="error-text">Failed to load activity: ${err.message}</div>`; });
   }
 
+  // ---------------------------------------------------------------------------
+  // Reviews Tab
+  // ---------------------------------------------------------------------------
+
+  _renderProductReviews(reviews, slug, container) {
+    container.innerHTML = '';
+
+    // Create Review button
+    const toolbar = document.createElement('div');
+    toolbar.className = 'issue-toolbar';
+    const createBtn = document.createElement('button');
+    createBtn.className = 'btn-small';
+    createBtn.textContent = '+ Create Review';
+    createBtn.addEventListener('click', async () => {
+      try {
+        const r = await fetch(`/api/product/${encodeURIComponent(slug)}/review`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ trigger: 'manual', owner: '' }),
+        });
+        if (!r.ok) throw new Error(`HTTP ${r.status}`);
+        this._showToast('Review created', 'success');
+        this._openProductDetail(slug);
+      } catch (err) { this._showToast(`Failed: ${err.message}`, 'error'); }
+    });
+    toolbar.appendChild(createBtn);
+    container.appendChild(toolbar);
+
+    if (!reviews.length) {
+      const emptyMsg = document.createElement('div');
+      emptyMsg.className = 'task-empty';
+      emptyMsg.textContent = 'No reviews yet.';
+      container.appendChild(emptyMsg);
+      return;
+    }
+
+    // Group: open first, then completed
+    const open = reviews.filter(r => r.status === 'open');
+    const completed = reviews.filter(r => r.status === 'completed');
+
+    for (const group of [{ label: 'Open', items: open }, { label: 'Completed', items: completed }]) {
+      if (!group.items.length) continue;
+      const heading = document.createElement('div');
+      heading.className = 'product-section-label';
+      heading.textContent = `${group.label} (${group.items.length})`;
+      container.appendChild(heading);
+
+      for (const rev of group.items) {
+        const card = document.createElement('div');
+        card.className = `review-card ${rev.status === 'completed' ? 'review-completed' : ''}`;
+
+        const header = document.createElement('div');
+        header.className = 'review-card-header';
+        const trigger = rev.trigger || 'manual';
+        const dateStr = rev.created_at ? new Date(rev.created_at).toLocaleDateString() : '';
+        let headerHtml = `<span class="review-trigger">${this._escHtml(trigger)}</span> <span class="review-date">${dateStr}</span>`;
+        if (rev.owner) headerHtml += ` <span class="review-owner">Owner: ${this._escHtml(rev.owner)}</span>`;
+        header.innerHTML = headerHtml;
+        card.appendChild(header);
+
+        // Checklist items
+        const itemsList = document.createElement('div');
+        itemsList.className = 'review-items';
+        for (const item of (rev.items || [])) {
+          const row = document.createElement('div');
+          row.className = 'review-item-row';
+          const checkbox = document.createElement('input');
+          checkbox.type = 'checkbox';
+          checkbox.checked = !!item.checked;
+          checkbox.disabled = rev.status === 'completed';
+          checkbox.addEventListener('change', async () => {
+            try {
+              const r = await fetch(`/api/product/${encodeURIComponent(slug)}/review/${encodeURIComponent(rev.id)}/item/${encodeURIComponent(item.key)}`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ checked: checkbox.checked }),
+              });
+              if (!r.ok) throw new Error(`HTTP ${r.status}`);
+            } catch (err) {
+              checkbox.checked = !checkbox.checked;
+              this._showToast(`Failed: ${err.message}`, 'error');
+            }
+          });
+          const label = document.createElement('span');
+          label.className = item.checked ? 'review-item-checked' : '';
+          label.textContent = item.label || item.key;
+          row.appendChild(checkbox);
+          row.appendChild(label);
+          itemsList.appendChild(row);
+        }
+        card.appendChild(itemsList);
+
+        // Complete button for open reviews
+        if (rev.status === 'open') {
+          const completeBtn = document.createElement('button');
+          completeBtn.className = 'btn-small';
+          completeBtn.textContent = 'Complete Review';
+          completeBtn.addEventListener('click', async () => {
+            try {
+              const r = await fetch(`/api/product/${encodeURIComponent(slug)}/review/${encodeURIComponent(rev.id)}/complete`, { method: 'POST' });
+              if (!r.ok) { const err = await r.json(); throw new Error(err.detail || r.statusText); }
+              this._showToast('Review completed', 'success');
+              this._openProductDetail(slug);
+            } catch (err) { this._showToast(`Failed: ${err.message}`, 'error'); }
+          });
+          card.appendChild(completeBtn);
+        }
+
+        container.appendChild(card);
+      }
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Release Version Form
+  // ---------------------------------------------------------------------------
+
+  _showReleaseVersionForm(container, slug) {
+    if (container.querySelector('.release-form')) return;
+    const form = document.createElement('div');
+    form.className = 'release-form sprint-inline-add';
+
+    // Show done issues that can be released
+    fetch(`/api/product/${encodeURIComponent(slug)}/detail`)
+      .then(r => r.json())
+      .then(data => {
+        const doneIssues = (data.issues || []).filter(i => i.status === 'done');
+        if (!doneIssues.length) {
+          form.innerHTML = '<div class="task-empty">No issues in DONE status to release.</div>';
+          const closeBtn = document.createElement('button');
+          closeBtn.className = 'kr-remove-btn';
+          closeBtn.innerHTML = '&times;';
+          closeBtn.addEventListener('click', () => form.remove());
+          form.appendChild(closeBtn);
+          return;
+        }
+
+        const label = document.createElement('div');
+        label.style.cssText = 'color:var(--text-dim);font-size:calc(5px + var(--font-boost));margin-bottom:4px';
+        label.textContent = `Select issues to include in release (${doneIssues.length} done):`;
+        form.appendChild(label);
+
+        const checkboxes = [];
+        for (const issue of doneIssues) {
+          const row = document.createElement('div');
+          row.className = 'review-item-row';
+          const cb = document.createElement('input');
+          cb.type = 'checkbox';
+          cb.checked = true;
+          cb.dataset.issueId = issue.id;
+          checkboxes.push(cb);
+          const text = document.createElement('span');
+          text.textContent = `[${issue.priority || 'P2'}] ${issue.title}`;
+          row.appendChild(cb);
+          row.appendChild(text);
+          form.appendChild(row);
+        }
+
+        const bumpRow = document.createElement('div');
+        bumpRow.className = 'sprint-form-row';
+        bumpRow.style.marginTop = '6px';
+        const bumpLabel = document.createElement('label');
+        bumpLabel.style.cssText = 'color:var(--text-dim);font-size:calc(5px + var(--font-boost))';
+        bumpLabel.textContent = 'Bump:';
+        const bumpSel = document.createElement('select');
+        bumpSel.className = 'form-input';
+        bumpSel.style.width = 'auto';
+        bumpSel.innerHTML = '<option value="patch">Patch</option><option value="minor">Minor</option><option value="major">Major</option>';
+        bumpRow.appendChild(bumpLabel);
+        bumpRow.appendChild(bumpSel);
+
+        const releaseBtn = document.createElement('button');
+        releaseBtn.className = 'btn-small';
+        releaseBtn.textContent = 'Release';
+        releaseBtn.addEventListener('click', async () => {
+          const selectedIds = checkboxes.filter(cb => cb.checked).map(cb => cb.dataset.issueId);
+          if (!selectedIds.length) { this._showToast('Select at least one issue', 'warning'); return; }
+          try {
+            const r = await fetch(`/api/product/${encodeURIComponent(slug)}/release`, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ resolved_issue_ids: selectedIds, bump: bumpSel.value }),
+            });
+            if (!r.ok) { const err = await r.json(); throw new Error(err.detail || r.statusText); }
+            const result = await r.json();
+            this._showToast(`Released v${result.version}`, 'success');
+            this._openProductDetail(slug);
+          } catch (err) { this._showToast(`Release failed: ${err.message}`, 'error'); }
+        });
+        bumpRow.appendChild(releaseBtn);
+
+        const cancelBtn = document.createElement('button');
+        cancelBtn.className = 'kr-remove-btn';
+        cancelBtn.innerHTML = '&times;';
+        cancelBtn.addEventListener('click', () => form.remove());
+        bumpRow.appendChild(cancelBtn);
+        form.appendChild(bumpRow);
+      });
+
+    container.appendChild(form);
+  }
+
   _doUpdateProjectsPanel() {
     const panel = document.getElementById('projects-panel-list');
     if (!panel) return;