@unbrained/pm-web 1.0.0

package/public/src/views/calendar.js

@@ -0,0 +1,133 @@
+// ═══════════════════════════════════════════════════════════════
+// CALENDAR VIEW
+// ═══════════════════════════════════════════════════════════════
+import { state } from '../state.js';
+import { api } from '../api.js';
+import { escHtml, typeIcon } from '../utils.js';
+import { skeletonRows } from '../utils.js';
+import { showModal, createModal } from '../components/modals.js';
+import { renderItemRow } from './items.js';
+export async function renderCalendarView() {
+    const el = document.getElementById('content-calendar');
+    if (!el)
+        return;
+    if (!state.currentProject) {
+        el.innerHTML = '<div class="empty-state"><div class="empty-state-text">No project selected</div></div>';
+        return;
+    }
+    el.innerHTML = `
+    <div class="page-header">
+      <div><div class="page-title">Calendar</div><div class="page-subtitle">Upcoming events &amp; deadlines</div></div>
+      <div class="page-actions">
+        <button class="btn btn-ghost btn-sm" onclick="window.__app.calNav(-1)">← Prev</button>
+        <span id="cal-month-label" style="font-size:13px;font-weight:600;min-width:120px;text-align:center"></span>
+        <button class="btn btn-ghost btn-sm" onclick="window.__app.calNav(1)">Next →</button>
+        <button class="btn btn-secondary btn-sm" onclick="window.__app.renderCalendarView()">↺ Today</button>
+      </div>
+    </div>
+    <div id="calendar-content">${skeletonRows(6)}</div>`;
+    try {
+        const [itemsData, calData] = await Promise.all([
+            api('GET', `/projects/${state.currentProject.id}/pm/list-all?limit=9999`),
+            api('GET', `/projects/${state.currentProject.id}/pm/calendar`).catch(() => ({ events: [] })),
+        ]);
+        const allItems = (itemsData.items || []).filter((i) => i.deadline || i.type === 'Event' || i.type === 'Meeting' || i.type === 'Reminder');
+        const calEvents = calData.events || calData.items || [];
+        state.calOffset = state.calOffset || 0;
+        const now = new Date();
+        const year = now.getFullYear();
+        const month = now.getMonth() + state.calOffset;
+        const calDate = new Date(year, month, 1);
+        const monthLabel = calDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
+        const labelEl = document.getElementById('cal-month-label');
+        if (labelEl)
+            labelEl.textContent = monthLabel;
+        const firstDay = calDate.getDay();
+        const daysInMonth = new Date(year, month + 1, 0).getDate();
+        const daysInPrev = new Date(year, month, 0).getDate();
+        const today = new Date();
+        const dateMap = {};
+        allItems.forEach((item) => {
+            if (item.deadline) {
+                const d = new Date(item.deadline).toISOString().slice(0, 10);
+                if (!dateMap[d])
+                    dateMap[d] = [];
+                dateMap[d].push(item);
+            }
+        });
+        let gridHtml = '<div class="cal-grid">';
+        ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].forEach(d => {
+            gridHtml += `<div class="cal-header">${d}</div>`;
+        });
+        for (let i = firstDay - 1; i >= 0; i--) {
+            gridHtml += `<div class="cal-day other-month"><div class="cal-day-num">${daysInPrev - i}</div></div>`;
+        }
+        for (let d = 1; d <= daysInMonth; d++) {
+            const dateStr = `${calDate.getFullYear()}-${String(calDate.getMonth() + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
+            const isToday = d === today.getDate() && month === today.getMonth() && year === today.getFullYear();
+            const dayItems = dateMap[dateStr] || [];
+            gridHtml += `<div class="cal-day${isToday ? ' today' : ''}" onclick="window.__app.showDayItems('${dateStr}')">`;
+            gridHtml += `<div class="cal-day-num">${d}</div>`;
+            dayItems.slice(0, 3).forEach((item) => {
+                gridHtml += `<div class="cal-event-dot status-${item.status}" title="${escHtml(item.title)}" onclick="event.stopPropagation();window.__app.openItemDetail('${escHtml(item.id)}')">${escHtml(item.title.slice(0, 12))}</div>`;
+            });
+            if (dayItems.length > 3) {
+                gridHtml += `<div class="cal-event-dot more">+${dayItems.length - 3} more</div>`;
+            }
+            gridHtml += '</div>';
+        }
+        const totalCells = firstDay + daysInMonth;
+        const remaining = totalCells % 7 === 0 ? 0 : 7 - (totalCells % 7);
+        for (let i = 1; i <= remaining; i++) {
+            gridHtml += `<div class="cal-day other-month"><div class="cal-day-num">${i}</div></div>`;
+        }
+        gridHtml += '</div>';
+        let upcomingHtml = '';
+        if (calEvents.length > 0) {
+            upcomingHtml = '<div class="card" style="margin-top:16px"><div class="card-header"><div class="card-title">Upcoming Events</div></div><div class="card-body">';
+            calEvents.slice(0, 10).forEach((ev) => {
+                upcomingHtml += `<div class="calendar-event" onclick="window.__app.openItemDetail('${escHtml(ev.id || ev.itemId || '')}')">
+          <div class="calendar-event-id">${typeIcon(ev.type || '')} ${escHtml(ev.id || '')}</div>
+          <div class="calendar-event-title">${escHtml(ev.title || ev.name || '')}</div>
+          <div class="calendar-event-date">${escHtml(ev.date || ev.dueDate || ev.timestamp || '')}</div>
+        </div>`;
+            });
+            upcomingHtml += '</div></div>';
+        }
+        const contentEl = document.getElementById('calendar-content');
+        if (contentEl)
+            contentEl.innerHTML = gridHtml + upcomingHtml;
+    }
+    catch (err) {
+        const contentEl = document.getElementById('calendar-content');
+        if (contentEl)
+            contentEl.innerHTML = `<div class="empty-state"><div class="empty-state-text">Error: ${escHtml(err instanceof Error ? err.message : String(err))}</div></div>`;
+    }
+}
+export function calNav(dir) {
+    state.calOffset = (state.calOffset || 0) + dir;
+    renderCalendarView();
+}
+export function showDayItems(dateStr) {
+    if (!state.currentProject)
+        return;
+    createModal('day-items-modal', `Items due ${dateStr}`, '<div class="loading-state"><div class="loading-spinner"></div></div>', '', true);
+    showModal('day-items-modal');
+    api('GET', `/projects/${state.currentProject.id}/pm/list-all?limit=9999`).then(data => {
+        const items = (data.items || []).filter((i) => {
+            if (!i.deadline)
+                return false;
+            return new Date(i.deadline).toISOString().slice(0, 10) === dateStr;
+        });
+        const bodyEl = document.getElementById('day-items-modal')?.querySelector('.modal-body');
+        if (bodyEl)
+            bodyEl.innerHTML = items.length === 0
+                ? '<div style="color:var(--text-muted);font-size:13px">No items due on this date</div>'
+                : `<div class="item-list">${items.map((item) => renderItemRow(item)).join('')}</div>`;
+    }).catch((err) => {
+        const bodyEl = document.getElementById('day-items-modal')?.querySelector('.modal-body');
+        if (bodyEl)
+            bodyEl.innerHTML = `<div class="empty-state"><div class="empty-state-text">Error: ${escHtml(err instanceof Error ? err.message : String(err))}</div></div>`;
+    });
+}
+//# sourceMappingURL=calendar.js.map

package/public/src/views/calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.js","sourceRoot":"","sources":["calendar.ts"],"names":[],"mappings":"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"}

package/public/src/views/calendar.ts

@@ -0,0 +1,129 @@
+// ═══════════════════════════════════════════════════════════════
+// CALENDAR VIEW
+// ═══════════════════════════════════════════════════════════════
+import { state } from '../state.js';
+import { api } from '../api.js';
+import { escHtml, typeIcon, statusBadge } from '../utils.js';
+import { skeletonRows } from '../utils.js';
+import { showModal, createModal } from '../components/modals.js';
+import { renderItemRow } from './items.js';
+
+export async function renderCalendarView(): Promise<void> {
+  const el = document.getElementById('content-calendar');
+  if (!el) return;
+  if (!state.currentProject) { el.innerHTML = '<div class="empty-state"><div class="empty-state-text">No project selected</div></div>'; return; }
+  el.innerHTML = `
+    <div class="page-header">
+      <div><div class="page-title">Calendar</div><div class="page-subtitle">Upcoming events &amp; deadlines</div></div>
+      <div class="page-actions">
+        <button class="btn btn-ghost btn-sm" onclick="window.__app.calNav(-1)">← Prev</button>
+        <span id="cal-month-label" style="font-size:13px;font-weight:600;min-width:120px;text-align:center"></span>
+        <button class="btn btn-ghost btn-sm" onclick="window.__app.calNav(1)">Next →</button>
+        <button class="btn btn-secondary btn-sm" onclick="window.__app.renderCalendarView()">↺ Today</button>
+      </div>
+    </div>
+    <div id="calendar-content">${skeletonRows(6)}</div>`;
+
+  try {
+    const [itemsData, calData] = await Promise.all([
+      api('GET',`/projects/${state.currentProject.id}/pm/list-all?limit=9999`),
+      api('GET',`/projects/${state.currentProject.id}/pm/calendar`).catch(()=>({events:[]})),
+    ]);
+    const allItems = ((itemsData as any).items || []).filter((i: any) => i.deadline || i.type === 'Event' || i.type === 'Meeting' || i.type === 'Reminder');
+    const calEvents = (calData as any).events || (calData as any).items || [];
+
+    state.calOffset = state.calOffset || 0;
+    const now = new Date();
+    const year = now.getFullYear();
+    const month = now.getMonth() + state.calOffset;
+    const calDate = new Date(year, month, 1);
+    const monthLabel = calDate.toLocaleDateString('en-US', {month:'long', year:'numeric'});
+    const labelEl = document.getElementById('cal-month-label');
+    if (labelEl) labelEl.textContent = monthLabel;
+
+    const firstDay = calDate.getDay();
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    const daysInPrev = new Date(year, month, 0).getDate();
+    const today = new Date();
+
+    const dateMap: Record<string, any[]> = {};
+    allItems.forEach((item: any) => {
+      if (item.deadline) {
+        const d = new Date(item.deadline).toISOString().slice(0, 10);
+        if (!dateMap[d]) dateMap[d] = [];
+        dateMap[d].push(item);
+      }
+    });
+
+    let gridHtml = '<div class="cal-grid">';
+    ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'].forEach(d => {
+      gridHtml += `<div class="cal-header">${d}</div>`;
+    });
+    for (let i = firstDay - 1; i >= 0; i--) {
+      gridHtml += `<div class="cal-day other-month"><div class="cal-day-num">${daysInPrev - i}</div></div>`;
+    }
+    for (let d = 1; d <= daysInMonth; d++) {
+      const dateStr = `${calDate.getFullYear()}-${String(calDate.getMonth()+1).padStart(2,'0')}-${String(d).padStart(2,'0')}`;
+      const isToday = d === today.getDate() && month === today.getMonth() && year === today.getFullYear();
+      const dayItems = dateMap[dateStr] || [];
+      gridHtml += `<div class="cal-day${isToday?' today':''}" onclick="window.__app.showDayItems('${dateStr}')">`;
+      gridHtml += `<div class="cal-day-num">${d}</div>`;
+      dayItems.slice(0, 3).forEach((item: any) => {
+        gridHtml += `<div class="cal-event-dot status-${item.status}" title="${escHtml(item.title)}" onclick="event.stopPropagation();window.__app.openItemDetail('${escHtml(item.id)}')">${escHtml(item.title.slice(0,12))}</div>`;
+      });
+      if (dayItems.length > 3) {
+        gridHtml += `<div class="cal-event-dot more">+${dayItems.length - 3} more</div>`;
+      }
+      gridHtml += '</div>';
+    }
+    const totalCells = firstDay + daysInMonth;
+    const remaining = totalCells % 7 === 0 ? 0 : 7 - (totalCells % 7);
+    for (let i = 1; i <= remaining; i++) {
+      gridHtml += `<div class="cal-day other-month"><div class="cal-day-num">${i}</div></div>`;
+    }
+    gridHtml += '</div>';
+
+    let upcomingHtml = '';
+    if (calEvents.length > 0) {
+      upcomingHtml = '<div class="card" style="margin-top:16px"><div class="card-header"><div class="card-title">Upcoming Events</div></div><div class="card-body">';
+      calEvents.slice(0, 10).forEach((ev: any) => {
+        upcomingHtml += `<div class="calendar-event" onclick="window.__app.openItemDetail('${escHtml(ev.id||ev.itemId||'')}')">
+          <div class="calendar-event-id">${typeIcon(ev.type||'')} ${escHtml(ev.id||'')}</div>
+          <div class="calendar-event-title">${escHtml(ev.title||ev.name||'')}</div>
+          <div class="calendar-event-date">${escHtml(ev.date||ev.dueDate||ev.timestamp||'')}</div>
+        </div>`;
+      });
+      upcomingHtml += '</div></div>';
+    }
+
+    const contentEl = document.getElementById('calendar-content');
+    if (contentEl) contentEl.innerHTML = gridHtml + upcomingHtml;
+  } catch(err: unknown) {
+    const contentEl = document.getElementById('calendar-content');
+    if (contentEl) contentEl.innerHTML = `<div class="empty-state"><div class="empty-state-text">Error: ${escHtml(err instanceof Error ? err.message : String(err))}</div></div>`;
+  }
+}
+
+export function calNav(dir: number): void {
+  state.calOffset = (state.calOffset || 0) + dir;
+  renderCalendarView();
+}
+
+export function showDayItems(dateStr: string): void {
+  if (!state.currentProject) return;
+  createModal('day-items-modal', `Items due ${dateStr}`, '<div class="loading-state"><div class="loading-spinner"></div></div>', '', true);
+  showModal('day-items-modal');
+  api('GET', `/projects/${state.currentProject.id}/pm/list-all?limit=9999`).then(data => {
+    const items = ((data as any).items || []).filter((i: any) => {
+      if (!i.deadline) return false;
+      return new Date(i.deadline).toISOString().slice(0,10) === dateStr;
+    });
+    const bodyEl = document.getElementById('day-items-modal')?.querySelector('.modal-body');
+    if (bodyEl) bodyEl.innerHTML = items.length === 0
+      ? '<div style="color:var(--text-muted);font-size:13px">No items due on this date</div>'
+      : `<div class="item-list">${items.map((item: any) => renderItemRow(item)).join('')}</div>`;
+  }).catch((err: unknown) => {
+    const bodyEl = document.getElementById('day-items-modal')?.querySelector('.modal-body');
+    if (bodyEl) bodyEl.innerHTML = `<div class="empty-state"><div class="empty-state-text">Error: ${escHtml(err instanceof Error ? err.message : String(err))}</div></div>`;
+  });
+}

package/public/src/views/comments-audit.js

@@ -0,0 +1,109 @@
+// ═══════════════════════════════════════════════════════════════
+// COMMENTS AUDIT VIEW
+// ═══════════════════════════════════════════════════════════════
+import { state } from '../state.js';
+import { api } from '../api.js';
+import { escHtml, statusBadge, typeIcon } from '../utils.js';
+export async function renderCommentsAuditView() {
+    const el = document.getElementById('content-comments-audit');
+    if (!el)
+        return;
+    if (!state.currentProject) {
+        el.innerHTML = '<div class="empty-state"><div class="empty-state-text">No project selected</div></div>';
+        return;
+    }
+    el.innerHTML = `
+    <div class="page-header">
+      <div>
+        <div class="page-title">Comments Audit</div>
+        <div class="page-subtitle">Review comment coverage across all items in ${escHtml(state.currentProject.name)}</div>
+      </div>
+      <div class="page-actions">
+        <button class="btn btn-secondary btn-sm" onclick="window.__app.renderCommentsAuditView()">↺ Refresh</button>
+      </div>
+    </div>
+    <div id="comments-audit-content"><div class="loading-state"><div class="loading-spinner"></div></div></div>`;
+    try {
+        const data = await api('GET', `/projects/${state.currentProject.id}/pm/comments-audit`);
+        const items = data.items || [];
+        const summary = data.summary || {};
+        const totals = summary.totals || {};
+        const coverage = summary.coverage || {};
+        const byType = summary.by_type || [];
+        const el2 = document.getElementById('comments-audit-content');
+        if (!el2)
+            return;
+        const coveragePct = Math.round((coverage.items_with_comments_percent || 0));
+        el2.innerHTML = `
+      <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-bottom:20px">
+        <div class="card"><div class="card-body" style="text-align:center">
+          <div style="font-size:28px;font-weight:700;color:var(--accent)">${totals.items_scanned || 0}</div>
+          <div style="font-size:12px;color:var(--text-muted);margin-top:4px">Items Scanned</div>
+        </div></div>
+        <div class="card"><div class="card-body" style="text-align:center">
+          <div style="font-size:28px;font-weight:700;color:var(--status-open)">${totals.items_with_comments || 0}</div>
+          <div style="font-size:12px;color:var(--text-muted);margin-top:4px">With Comments</div>
+        </div></div>
+        <div class="card"><div class="card-body" style="text-align:center">
+          <div style="font-size:28px;font-weight:700;color:var(--text-secondary)">${totals.comments_total || 0}</div>
+          <div style="font-size:12px;color:var(--text-muted);margin-top:4px">Total Comments</div>
+        </div></div>
+        <div class="card"><div class="card-body" style="text-align:center">
+          <div style="font-size:28px;font-weight:700;color:${coveragePct >= 50 ? 'var(--status-closed)' : 'var(--status-open)'}">${coveragePct}%</div>
+          <div style="font-size:12px;color:var(--text-muted);margin-top:4px">Coverage</div>
+        </div></div>
+      </div>
+
+      ${byType.length > 0 ? `
+        <div class="card" style="margin-bottom:16px">
+          <div class="card-header"><div class="card-title">By Type</div></div>
+          <div class="card-body" style="padding:0">
+            <table style="width:100%;border-collapse:collapse;font-size:13px">
+              <thead>
+                <tr style="border-bottom:1px solid var(--border)">
+                  <th style="padding:8px 14px;text-align:left;color:var(--text-muted);font-weight:500">Type</th>
+                  <th style="padding:8px 14px;text-align:right;color:var(--text-muted);font-weight:500">Items</th>
+                  <th style="padding:8px 14px;text-align:right;color:var(--text-muted);font-weight:500">With Comments</th>
+                  <th style="padding:8px 14px;text-align:right;color:var(--text-muted);font-weight:500">Total Comments</th>
+                </tr>
+              </thead>
+              <tbody>
+                ${byType.map((row) => `
+                  <tr style="border-bottom:1px solid var(--border-subtle)">
+                    <td style="padding:8px 14px">${typeIcon(row.type || '')} ${escHtml(row.type || '')}</td>
+                    <td style="padding:8px 14px;text-align:right">${row.items_scanned || 0}</td>
+                    <td style="padding:8px 14px;text-align:right">${row.items_with_comments || 0}</td>
+                    <td style="padding:8px 14px;text-align:right">${row.comments_total || 0}</td>
+                  </tr>`).join('')}
+              </tbody>
+            </table>
+          </div>
+        </div>` : ''}
+
+      <div class="card">
+        <div class="card-header"><div class="card-title">Items (${items.length})</div></div>
+        <div class="card-body" style="padding:0">
+          ${items.length === 0
+            ? '<div style="padding:20px;color:var(--text-muted);font-size:13px;text-align:center">No items found</div>'
+            : `<div class="item-list" style="border-radius:0">
+                ${items.map((item) => `
+                  <div class="item-row" onclick="window.__app.openItemDetail('${escHtml(item.id)}')">
+                    ${typeIcon(item.type || '')}
+                    <span class="item-id">${escHtml(item.id)}</span>
+                    <span class="item-title">${escHtml(item.title)}</span>
+                    <div class="item-meta">
+                      ${statusBadge(item.status || 'draft')}
+                      <span style="font-size:11px;color:var(--text-muted);background:var(--bg-input);padding:2px 8px;border-radius:10px">${item.comment_count || 0} comment${item.comment_count !== 1 ? 's' : ''}</span>
+                    </div>
+                  </div>`).join('')}
+              </div>`}
+        </div>
+      </div>`;
+    }
+    catch (err) {
+        const el2 = document.getElementById('comments-audit-content');
+        if (el2)
+            el2.innerHTML = `<div class="empty-state"><div class="empty-state-text">Error: ${escHtml(err instanceof Error ? err.message : String(err))}</div></div>`;
+    }
+}
+//# sourceMappingURL=comments-audit.js.map

package/public/src/views/comments-audit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"comments-audit.js","sourceRoot":"","sources":["comments-audit.ts"],"names":[],"mappings":"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"}

package/public/src/views/comments-audit.ts

@@ -0,0 +1,108 @@
+// ═══════════════════════════════════════════════════════════════
+// COMMENTS AUDIT VIEW
+// ═══════════════════════════════════════════════════════════════
+import { state } from '../state.js';
+import { api } from '../api.js';
+import { escHtml, statusBadge, typeIcon } from '../utils.js';
+
+export async function renderCommentsAuditView(): Promise<void> {
+  const el = document.getElementById('content-comments-audit');
+  if (!el) return;
+  if (!state.currentProject) {
+    el.innerHTML = '<div class="empty-state"><div class="empty-state-text">No project selected</div></div>';
+    return;
+  }
+  el.innerHTML = `
+    <div class="page-header">
+      <div>
+        <div class="page-title">Comments Audit</div>
+        <div class="page-subtitle">Review comment coverage across all items in ${escHtml(state.currentProject.name)}</div>
+      </div>
+      <div class="page-actions">
+        <button class="btn btn-secondary btn-sm" onclick="window.__app.renderCommentsAuditView()">↺ Refresh</button>
+      </div>
+    </div>
+    <div id="comments-audit-content"><div class="loading-state"><div class="loading-spinner"></div></div></div>`;
+  try {
+    const data = await api('GET', `/projects/${state.currentProject.id}/pm/comments-audit`);
+    const items: any[] = (data as any).items || [];
+    const summary: any = (data as any).summary || {};
+    const totals = summary.totals || {};
+    const coverage = summary.coverage || {};
+    const byType: any[] = summary.by_type || [];
+
+    const el2 = document.getElementById('comments-audit-content');
+    if (!el2) return;
+
+    const coveragePct = Math.round((coverage.items_with_comments_percent || 0));
+
+    el2.innerHTML = `
+      <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-bottom:20px">
+        <div class="card"><div class="card-body" style="text-align:center">
+          <div style="font-size:28px;font-weight:700;color:var(--accent)">${totals.items_scanned || 0}</div>
+          <div style="font-size:12px;color:var(--text-muted);margin-top:4px">Items Scanned</div>
+        </div></div>
+        <div class="card"><div class="card-body" style="text-align:center">
+          <div style="font-size:28px;font-weight:700;color:var(--status-open)">${totals.items_with_comments || 0}</div>
+          <div style="font-size:12px;color:var(--text-muted);margin-top:4px">With Comments</div>
+        </div></div>
+        <div class="card"><div class="card-body" style="text-align:center">
+          <div style="font-size:28px;font-weight:700;color:var(--text-secondary)">${totals.comments_total || 0}</div>
+          <div style="font-size:12px;color:var(--text-muted);margin-top:4px">Total Comments</div>
+        </div></div>
+        <div class="card"><div class="card-body" style="text-align:center">
+          <div style="font-size:28px;font-weight:700;color:${coveragePct >= 50 ? 'var(--status-closed)' : 'var(--status-open)'}">${coveragePct}%</div>
+          <div style="font-size:12px;color:var(--text-muted);margin-top:4px">Coverage</div>
+        </div></div>
+      </div>
+
+      ${byType.length > 0 ? `
+        <div class="card" style="margin-bottom:16px">
+          <div class="card-header"><div class="card-title">By Type</div></div>
+          <div class="card-body" style="padding:0">
+            <table style="width:100%;border-collapse:collapse;font-size:13px">
+              <thead>
+                <tr style="border-bottom:1px solid var(--border)">
+                  <th style="padding:8px 14px;text-align:left;color:var(--text-muted);font-weight:500">Type</th>
+                  <th style="padding:8px 14px;text-align:right;color:var(--text-muted);font-weight:500">Items</th>
+                  <th style="padding:8px 14px;text-align:right;color:var(--text-muted);font-weight:500">With Comments</th>
+                  <th style="padding:8px 14px;text-align:right;color:var(--text-muted);font-weight:500">Total Comments</th>
+                </tr>
+              </thead>
+              <tbody>
+                ${byType.map((row: any) => `
+                  <tr style="border-bottom:1px solid var(--border-subtle)">
+                    <td style="padding:8px 14px">${typeIcon(row.type || '')} ${escHtml(row.type || '')}</td>
+                    <td style="padding:8px 14px;text-align:right">${row.items_scanned || 0}</td>
+                    <td style="padding:8px 14px;text-align:right">${row.items_with_comments || 0}</td>
+                    <td style="padding:8px 14px;text-align:right">${row.comments_total || 0}</td>
+                  </tr>`).join('')}
+              </tbody>
+            </table>
+          </div>
+        </div>` : ''}
+
+      <div class="card">
+        <div class="card-header"><div class="card-title">Items (${items.length})</div></div>
+        <div class="card-body" style="padding:0">
+          ${items.length === 0
+            ? '<div style="padding:20px;color:var(--text-muted);font-size:13px;text-align:center">No items found</div>'
+            : `<div class="item-list" style="border-radius:0">
+                ${items.map((item: any) => `
+                  <div class="item-row" onclick="window.__app.openItemDetail('${escHtml(item.id)}')">
+                    ${typeIcon(item.type || '')}
+                    <span class="item-id">${escHtml(item.id)}</span>
+                    <span class="item-title">${escHtml(item.title)}</span>
+                    <div class="item-meta">
+                      ${statusBadge(item.status || 'draft')}
+                      <span style="font-size:11px;color:var(--text-muted);background:var(--bg-input);padding:2px 8px;border-radius:10px">${item.comment_count || 0} comment${item.comment_count !== 1 ? 's' : ''}</span>
+                    </div>
+                  </div>`).join('')}
+              </div>`}
+        </div>
+      </div>`;
+  } catch(err: unknown) {
+    const el2 = document.getElementById('comments-audit-content');
+    if (el2) el2.innerHTML = `<div class="empty-state"><div class="empty-state-text">Error: ${escHtml(err instanceof Error ? err.message : String(err))}</div></div>`;
+  }
+}