pixelcrew 0.1.0 → 0.1.1

package/README.md

@@ -63,13 +63,13 @@ No global installations or complex configuration required. Run directly in your
 
 ```bash
 # 1. Initialize and adapt PixelCrew to your project stack
-npx github:hiroqt/PixelCrew init
+npx pixelcrew init
 
 # 2. Launch the orchestrator daemon and real-time visual office
-npx github:hiroqt/PixelCrew start
+npx pixelcrew start
 
 # 3. (Optional) Run an instant multi-agent simulated sprint demo
-npx github:hiroqt/PixelCrew demo
+npx pixelcrew demo
 ```
 
 The interactive dashboard opens automatically at:  
@@ -240,15 +240,15 @@ Copy the `.agents/skills/` directory into your tool's native skills folder:
 
 | Command | Action | Example |
 | :--- | :--- | :--- |
-| `npx github:hiroqt/PixelCrew init` | Scaffolds `.pixel-agents/` and adapts to repository | `npx github:hiroqt/PixelCrew init --yes` |
-| `npx github:hiroqt/PixelCrew start` | Launches orchestrator, SSE stream, and web dashboard | `npx github:hiroqt/PixelCrew start --port 4747` |
-| `npx github:hiroqt/PixelCrew analyze` | Prints detected frameworks, database, ORM, and test stack | `npx github:hiroqt/PixelCrew analyze` |
-| `npx github:hiroqt/PixelCrew demo` | Launches an interactive 6-agent simulated sprint | `npx github:hiroqt/PixelCrew demo` |
-| `npx github:hiroqt/PixelCrew task "<text>"` | Dispatches a direct objective to the running agent swarm | `npx github:hiroqt/PixelCrew task "Optimize SQL queries"` |
-| `npx github:hiroqt/PixelCrew emit [flags]` | Emits a custom telemetry event into the stream | `npx github:hiroqt/PixelCrew emit --agent db --message "Done"` |
-| `npx github:hiroqt/PixelCrew dashboard` | Opens or serves the standalone Floor 42 dashboard UI | `npx github:hiroqt/PixelCrew dashboard` |
-| `npx github:hiroqt/PixelCrew status` | Prints ASCII summary of swarm states and active sprints | `npx github:hiroqt/PixelCrew status` |
-| `npx github:hiroqt/PixelCrew help` | Displays full CLI manual and flag details | `npx github:hiroqt/PixelCrew help` |
+| `npx pixelcrew init` | Scaffolds `.pixel-agents/` and adapts to repository | `npx pixelcrew init --yes` |
+| `npx pixelcrew start` | Launches orchestrator, SSE stream, and web dashboard | `npx pixelcrew start --port 4747` |
+| `npx pixelcrew analyze` | Prints detected frameworks, database, ORM, and test stack | `npx pixelcrew analyze` |
+| `npx pixelcrew demo` | Launches an interactive 6-agent simulated sprint | `npx pixelcrew demo` |
+| `npx pixelcrew task "<text>"` | Dispatches a direct objective to the running agent swarm | `npx pixelcrew task "Optimize SQL queries"` |
+| `npx pixelcrew emit [flags]` | Emits a custom telemetry event into the stream | `npx pixelcrew emit --agent db --message "Done"` |
+| `npx pixelcrew dashboard` | Opens or serves the standalone Floor 42 dashboard UI | `npx pixelcrew dashboard` |
+| `npx pixelcrew status` | Prints ASCII summary of swarm states and active sprints | `npx pixelcrew status` |
+| `npx pixelcrew help` | Displays full CLI manual and flag details | `npx pixelcrew help` |
 
 ### CLI Options & Flags:
 - `--port <number>`: Dashboard port (default: `4747`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelcrew",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Local multi-agent orchestration framework with an interactive pixel-art tech startup office visual dashboard",
   "type": "module",
   "main": "src/index.js",

package/src/dashboard/app.js

@@ -574,6 +574,7 @@ async function initApp() {
       appState.state = stRes;
       renderState();
     }
+    await fetchReports();
   } catch (e) {
     // Handled by SSE
   }
@@ -650,16 +651,59 @@ function setupEventListeners() {
     });
   });
 
-  // Modal close
-  document.getElementById('btnCloseModal').addEventListener('click', () => {
-    document.getElementById('agentModal').classList.remove('open');
-  });
+  // Reports Drawer Buttons & Controls
+  const btnReportsToggle = document.getElementById('btnReportsToggle');
+  if (btnReportsToggle) {
+    btnReportsToggle.addEventListener('click', () => {
+      synth.playClick();
+      openReportsModal();
+    });
+  }
 
-  document.getElementById('agentModal').addEventListener('click', (e) => {
-    if (e.target === document.getElementById('agentModal')) {
-      document.getElementById('agentModal').classList.remove('open');
-    }
-  });
+  const btnCloseReportsModal = document.getElementById('btnCloseReportsModal');
+  if (btnCloseReportsModal) {
+    btnCloseReportsModal.addEventListener('click', () => {
+      closeReportsModal();
+    });
+  }
+
+  const reportsModalEl = document.getElementById('reportsModal');
+  if (reportsModalEl) {
+    reportsModalEl.addEventListener('click', (e) => {
+      if (e.target === reportsModalEl) {
+        closeReportsModal();
+      }
+    });
+  }
+
+  const btnCopyReportMd = document.getElementById('btnCopyReportMd');
+  if (btnCopyReportMd) {
+    btnCopyReportMd.addEventListener('click', () => {
+      copyActiveReportMarkdown();
+    });
+  }
+
+  const btnDownloadReport = document.getElementById('btnDownloadReport');
+  if (btnDownloadReport) {
+    btnDownloadReport.addEventListener('click', () => {
+      downloadActiveReport();
+    });
+  }
+
+  const btnToggleRawView = document.getElementById('btnToggleRawView');
+  if (btnToggleRawView) {
+    btnToggleRawView.addEventListener('click', () => {
+      toggleRawReportView();
+    });
+  }
+
+  const reportsSearchInput = document.getElementById('reportsSearch');
+  if (reportsSearchInput) {
+    reportsSearchInput.addEventListener('input', (e) => {
+      reportsState.searchQuery = e.target.value.toLowerCase().trim();
+      renderReportsList();
+    });
+  }
 
   // Global Keyboard Shortcuts
   window.addEventListener('keydown', (e) => {
@@ -669,6 +713,14 @@ function setupEventListeners() {
       document.getElementById('btnDemo').click();
     } else if (e.key === 'Escape') {
       document.getElementById('agentModal').classList.remove('open');
+      closeReportsModal();
+    } else if (e.key === 'r' || e.key === 'R') {
+      const modal = document.getElementById('reportsModal');
+      if (modal && modal.classList.contains('open')) {
+        closeReportsModal();
+      } else {
+        openReportsModal();
+      }
     } else if (['1', '2', '3', '4', '5', '6'].includes(e.key)) {
       const keys = ['frontend', 'backend', 'database', 'security', 'performance', 'qa'];
       const agentKey = keys[parseInt(e.key) - 1];
@@ -677,6 +729,268 @@ function setupEventListeners() {
   });
 }
 
+// Reports State & Controller
+const reportsState = {
+  reports: [],
+  activeReport: null,
+  searchQuery: '',
+  rawMode: false
+};
+
+async function fetchReports() {
+  try {
+    const res = await fetch('/api/reports');
+    if (res.ok) {
+      const data = await res.json();
+      reportsState.reports = data.reports || [];
+      const badge = document.getElementById('reportsCountBadge');
+      if (badge) {
+        badge.textContent = reportsState.reports.length;
+      }
+      return reportsState.reports;
+    }
+  } catch (err) {
+    console.error('Error loading reports:', err);
+  }
+  return [];
+}
+
+async function openReportsModal(preferredId = null) {
+  const modal = document.getElementById('reportsModal');
+  if (!modal) return;
+
+  await fetchReports();
+
+  if (preferredId) {
+    reportsState.activeReport = reportsState.reports.find(r => r.id === preferredId) || reportsState.reports[0] || null;
+  } else if (!reportsState.activeReport && reportsState.reports.length > 0) {
+    reportsState.activeReport = reportsState.reports[0];
+  }
+
+  renderReportsList();
+  renderActiveReport();
+
+  modal.classList.add('open');
+  synth.playClick();
+}
+
+function closeReportsModal() {
+  const modal = document.getElementById('reportsModal');
+  if (modal) modal.classList.remove('open');
+}
+
+function renderReportsList() {
+  const container = document.getElementById('reportsHistoryList');
+  if (!container) return;
+
+  container.innerHTML = '';
+  const filtered = reportsState.reports.filter(r => {
+    if (!reportsState.searchQuery) return true;
+    const q = reportsState.searchQuery;
+    return (
+      (r.objective && r.objective.toLowerCase().includes(q)) ||
+      (r.project && r.project.toLowerCase().includes(q)) ||
+      (r.dateFormatted && r.dateFormatted.toLowerCase().includes(q))
+    );
+  });
+
+  if (filtered.length === 0) {
+    container.innerHTML = `
+      <div style="padding: 16px; text-align: center; color: var(--text-dim); font-size: 11px;">
+        ${reportsState.searchQuery ? 'No matching reports found.' : 'No audit reports recorded yet. Run a sprint demo or task to generate.'}
+      </div>
+    `;
+    return;
+  }
+
+  filtered.forEach(report => {
+    const card = document.createElement('div');
+    card.className = `report-item-card ${reportsState.activeReport?.id === report.id ? 'active' : ''}`;
+    
+    card.innerHTML = `
+      <div class="report-item-top">
+        <span class="report-item-date">${report.dateFormatted || new Date(report.timestamp).toLocaleDateString()}</span>
+        <span class="report-item-status">${report.status || 'COMPLETED'}</span>
+      </div>
+      <div class="report-item-title">${report.objective || 'Swarm Audit Sprint'}</div>
+      <div class="report-item-meta">
+        <span>👥 ${(report.targetAgents || []).length} Squads</span>
+        <span>✨ ${report.totalFindings || (report.sections || []).length} Points</span>
+      </div>
+    `;
+
+    card.addEventListener('click', () => {
+      synth.playClick();
+      reportsState.activeReport = report;
+      renderReportsList();
+      renderActiveReport();
+    });
+
+    container.appendChild(card);
+  });
+}
+
+function renderActiveReport() {
+  const viewer = document.getElementById('reportsViewer');
+  if (!viewer) return;
+
+  const report = reportsState.activeReport;
+  if (!report) {
+    viewer.innerHTML = `
+      <div class="report-empty-state">
+        <span style="font-size: 32px;">📋</span>
+        <span>SELECT A SPRINT REPORT FROM THE LEFT SIDEBAR</span>
+        <span style="color: var(--text-dim); font-size: 10px;">Audit reports are generated automatically after every completed swarm run.</span>
+      </div>
+    `;
+    return;
+  }
+
+  // Raw Markdown Mode
+  if (reportsState.rawMode) {
+    viewer.innerHTML = `
+      <div class="report-hero-card">
+        <div class="report-hero-header">
+          <div>
+            <h3 class="report-hero-title">RAW MARKDOWN SPECIFICATION</h3>
+            <div class="report-hero-meta">
+              <span>PROJECT: <strong>${report.project || 'Project'}</strong></span>
+              <span>DATE: <strong>${report.dateFormatted || 'N/A'}</strong></span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <pre class="report-raw-pre">${escapeHtml(report.markdown || '# No markdown available')}</pre>
+    `;
+    return;
+  }
+
+  // Visual Interactive Card Mode
+  viewer.innerHTML = `
+    <!-- HERO SUMMARY -->
+    <div class="report-hero-card">
+      <div class="report-hero-header">
+        <div>
+          <h3 class="report-hero-title">★ ${escapeHtml(report.objective || 'Sprint Audit')}</h3>
+          <div class="report-hero-meta">
+            <span>PRODUCT: <strong>${escapeHtml(report.project || 'Project')}</strong></span>
+            <span>DATE: <strong>${escapeHtml(report.dateFormatted || 'Today')}</strong></span>
+            <span>SQUADS: <strong>${(report.targetAgents || []).map(a => a.toUpperCase()).join(', ')}</strong></span>
+          </div>
+        </div>
+        <span class="report-item-status" style="font-size: 10px; padding: 4px 8px;">100% COMPLETE</span>
+      </div>
+      <div class="report-summary-box">
+        <strong>Executive Summary:</strong> The autonomous engineering swarm executed an architectural and quality audit, resolving dependencies and formulating <strong>${report.totalFindings || 0} actionable improvements</strong>.
+      </div>
+    </div>
+
+    <!-- METRICS GRID -->
+    <div class="report-metrics-grid">
+      <div class="report-metric-card">
+        <span class="report-metric-label">ENGINEERING SQUADS</span>
+        <span class="report-metric-val" style="color: var(--color-cyan);">${(report.targetAgents || []).length}</span>
+      </div>
+      <div class="report-metric-card">
+        <span class="report-metric-label">FINDINGS & ACTIONS</span>
+        <span class="report-metric-val" style="color: var(--color-gold);">${report.totalFindings || 0}</span>
+      </div>
+      <div class="report-metric-card">
+        <span class="report-metric-label">QUALITY GATE</span>
+        <span class="report-metric-val" style="color: var(--color-green);">PASSED</span>
+      </div>
+      <div class="report-metric-card">
+        <span class="report-metric-label">BLOCKER DEFECTS</span>
+        <span class="report-metric-val" style="color: var(--color-green);">0</span>
+      </div>
+    </div>
+
+    <!-- SQUAD FINDINGS ACCORDION / CARDS -->
+    <div class="report-sections-grid">
+      ${(report.sections || []).map(section => `
+        <div class="report-squad-card" style="border-left: 4px solid ${section.color || '#00f0ff'};">
+          <div class="report-squad-header" style="color: ${section.color || '#00f0ff'};">
+            <span>${section.icon || '💼'}</span>
+            <span>${escapeHtml(section.name || section.agent.toUpperCase())}</span>
+          </div>
+          <div class="report-findings-list">
+            ${(section.findings || []).map(f => `
+              <div class="report-finding-item">
+                <span class="finding-pill" style="border-color: ${section.color || '#00f0ff'}; color: ${section.color || '#00f0ff'};">${escapeHtml(f.category || 'Finding')}</span>
+                <span class="finding-desc">${escapeHtml(f.description || '')}</span>
+              </div>
+            `).join('')}
+          </div>
+        </div>
+      `).join('')}
+    </div>
+
+    <!-- ACTION ITEMS CHECKLIST -->
+    <div class="report-actions-card">
+      <div class="report-actions-title">📋 RECOMMENDED ACTION ITEMS & NEXT STEPS</div>
+      <div class="report-checklist">
+        ${(report.actionItems || []).map(item => `
+          <label class="report-check-item">
+            <input type="checkbox" />
+            <span>${escapeHtml(item)}</span>
+          </label>
+        `).join('')}
+      </div>
+    </div>
+  `;
+}
+
+function toggleRawReportView() {
+  synth.playClick();
+  reportsState.rawMode = !reportsState.rawMode;
+  const label = document.getElementById('toggleRawLabel');
+  if (label) {
+    label.textContent = reportsState.rawMode ? 'VISUAL CARDS' : 'RAW MARKDOWN';
+  }
+  renderActiveReport();
+}
+
+function copyActiveReportMarkdown() {
+  if (!reportsState.activeReport?.markdown) return;
+  navigator.clipboard.writeText(reportsState.activeReport.markdown).then(() => {
+    synth.playSkill();
+    const btn = document.getElementById('btnCopyReportMd');
+    if (btn) {
+      const originalText = btn.innerHTML;
+      btn.innerHTML = '<span>✓</span> COPIED!';
+      setTimeout(() => { btn.innerHTML = originalText; }, 2000);
+    }
+  }).catch(err => {
+    console.error('Failed to copy markdown:', err);
+  });
+}
+
+function downloadActiveReport() {
+  if (!reportsState.activeReport) return;
+  const r = reportsState.activeReport;
+  const content = r.markdown || JSON.stringify(r, null, 2);
+  const blob = new Blob([content], { type: 'text/markdown;charset=utf-8' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `${r.id || 'sprint-report'}.md`;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+  synth.playComplete();
+}
+
+function escapeHtml(str) {
+  if (!str) return '';
+  return String(str)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}
+
 // Submit Task to Server
 async function submitTask(prompt) {
   try {
@@ -759,17 +1073,28 @@ function connectSSE() {
       renderState();
     }
 
-    // Audio cues
-    if (event.type === 'spawn') synth.playSpawn();
-    else if (event.type === 'skill') synth.playSkill();
-    else if (event.type === 'complete') synth.playComplete();
-    else if (event.type === 'error') synth.playError();
+    // Audio cues & Report Refresh
+    if (event.type === 'spawn') {
+      synth.playSpawn();
+    } else if (event.type === 'skill') {
+      synth.playSkill();
+    } else if (event.type === 'complete') {
+      synth.playComplete();
+      if (event.agent === 'orchestrator' || event.metadata?.report) {
+        fetchReports();
+      }
+    } else if (event.type === 'error') {
+      synth.playError();
+    }
   });
 
   eventSource.addEventListener('state_change', (e) => {
     const data = JSON.parse(e.data);
     appState.state = data.state;
     renderState();
+    if (data.state?.status === 'COMPLETED') {
+      fetchReports();
+    }
   });
 
   eventSource.onerror = () => {

package/src/dashboard/index.html

@@ -50,6 +50,9 @@
       </div>
 
       <div class="header-right">
+        <button class="pixel-btn btn-sm btn-info" id="btnReportsToggle" title="Open Sprint Audit Reports History [R]">
+          <span>📋</span> REPORTS (<span id="reportsCountBadge">0</span>)
+        </button>
         <button class="pixel-btn btn-sm" id="btnAudioToggle" title="Toggle 8-bit Audio SFX">
           <span id="audioIcon">🔊</span> SFX
         </button>
@@ -213,10 +216,52 @@
       </div>
     </div>
 
+    <!-- SPRINT AUDIT REPORTS & HISTORY MODAL / DRAWER -->
+    <div class="pixel-modal-backdrop" id="reportsModal">
+      <div class="pixel-modal-card reports-modal-card">
+        <div class="modal-header">
+          <div class="modal-title-box">
+            <span class="modal-agent-icon">📋</span>
+            <h2 class="modal-agent-name" style="color: var(--color-cyan);">SPRINT AUDIT REPORTS & HISTORY</h2>
+          </div>
+          <div class="reports-header-actions">
+            <button class="pixel-btn btn-xs" id="btnToggleRawView" title="Toggle between visual card and raw markdown">
+              <span>👁️</span> <span id="toggleRawLabel">RAW MARKDOWN</span>
+            </button>
+            <button class="pixel-btn btn-xs" id="btnCopyReportMd" title="Copy markdown to clipboard">
+              <span>📄</span> COPY MD
+            </button>
+            <button class="pixel-btn btn-xs" id="btnDownloadReport" title="Download report as .md file">
+              <span>💾</span> DOWNLOAD
+            </button>
+            <button class="pixel-btn btn-sm btn-warn" id="btnCloseReportsModal">✕</button>
+          </div>
+        </div>
+        <div class="reports-modal-body">
+          <!-- SPRINT HISTORY SIDEBAR -->
+          <aside class="reports-sidebar">
+            <div class="reports-search-box">
+              <input type="text" class="pixel-input reports-search-input" id="reportsSearch" placeholder="Search past sprint reports..." />
+            </div>
+            <div class="reports-history-list" id="reportsHistoryList">
+              <!-- Populated by app.js -->
+            </div>
+          </aside>
+          
+          <!-- ACTIVE REPORT DETAIL VIEWER -->
+          <main class="reports-viewer" id="reportsViewer">
+            <!-- Populated dynamically -->
+          </main>
+        </div>
+      </div>
+    </div>
+
     <!-- ARCADE / OFFICE FOOTER -->
     <footer class="arcade-footer">
       <div class="footer-left">
-        <span>PRESS [1..6] TO OPEN EMPLOYEE PROFILE</span>
+        <span>PRESS [1..6] EMPLOYEE PROFILE</span>
+        <span>•</span>
+        <span>[R] SPRINT REPORTS</span>
         <span>•</span>
         <span>[SPACE] SPRINT DEMO</span>
       </div>

package/src/dashboard/styles.css

@@ -842,6 +842,330 @@ body:not(.crt-active) .crt-vignette {
   font-size: 16px;
 }
 
+/* Reports Modal & History Drawer */
+.reports-modal-card {
+  max-width: 1100px;
+  width: 95vw;
+  height: 82vh;
+  max-height: 850px;
+  display: flex;
+  flex-direction: column;
+}
+
+.reports-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.reports-modal-body {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  background: var(--bg-dark);
+}
+
+.reports-sidebar {
+  width: 320px;
+  min-width: 280px;
+  background: var(--bg-panel-dark);
+  border-right: 2px solid var(--border-black);
+  display: flex;
+  flex-direction: column;
+}
+
+.reports-search-box {
+  padding: 10px;
+  border-bottom: 2px solid var(--border-black);
+  background: var(--bg-panel);
+}
+
+.reports-search-input {
+  width: 100%;
+  font-size: 11px;
+  padding: 6px 8px;
+}
+
+.reports-history-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.report-item-card {
+  background: var(--bg-card);
+  border: 2px solid var(--border-color);
+  padding: 10px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.report-item-card:hover {
+  background: var(--bg-card-hover);
+  border-color: var(--color-cyan);
+  transform: translateX(2px);
+}
+
+.report-item-card.active {
+  background: #17213c;
+  border-color: var(--color-cyan);
+  box-shadow: inset 3px 0 0 var(--color-cyan);
+}
+
+.report-item-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.report-item-date {
+  font-size: 9px;
+  color: var(--text-dim);
+  font-family: var(--font-pixel);
+}
+
+.report-item-status {
+  font-size: 8px;
+  padding: 2px 5px;
+  background: rgba(57, 255, 20, 0.15);
+  color: var(--color-green);
+  border: 1px solid var(--color-green);
+  font-family: var(--font-pixel);
+}
+
+.report-item-title {
+  font-size: 11px;
+  color: var(--text-bright);
+  font-weight: bold;
+  line-height: 1.3;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.report-item-meta {
+  display: flex;
+  justify-content: space-between;
+  font-size: 10px;
+  color: var(--text-dim);
+}
+
+/* Reports Viewer (Right Pane) */
+.reports-viewer {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  background: var(--bg-panel);
+}
+
+.report-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--text-dim);
+  gap: 12px;
+  text-align: center;
+  font-family: var(--font-pixel);
+  font-size: 11px;
+}
+
+.report-hero-card {
+  background: linear-gradient(135deg, #182038 0%, #101526 100%);
+  border: 2px solid var(--color-cyan);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  box-shadow: var(--pixel-shadow);
+}
+
+.report-hero-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.report-hero-title {
+  font-family: var(--font-pixel);
+  font-size: 13px;
+  color: var(--color-cyan);
+  line-height: 1.4;
+}
+
+.report-hero-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  font-size: 10px;
+  color: var(--text-dim);
+  font-family: var(--font-pixel);
+  margin-top: 4px;
+}
+
+.report-hero-meta strong {
+  color: var(--text-bright);
+}
+
+.report-summary-box {
+  background: rgba(0, 0, 0, 0.4);
+  border-left: 3px solid var(--color-gold);
+  padding: 10px 12px;
+  font-size: 12px;
+  color: var(--text-main);
+  line-height: 1.5;
+}
+
+/* Report Metrics Grid */
+.report-metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
+  gap: 10px;
+}
+
+.report-metric-card {
+  background: var(--bg-card);
+  border: 2px solid var(--border-black);
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: center;
+  text-align: center;
+}
+
+.report-metric-label {
+  font-size: 9px;
+  color: var(--text-dim);
+  font-family: var(--font-pixel);
+}
+
+.report-metric-val {
+  font-size: 18px;
+  color: var(--color-gold);
+  font-family: var(--font-terminal);
+  font-weight: bold;
+}
+
+/* Squad Findings Cards */
+.report-sections-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.report-squad-card {
+  background: var(--bg-card);
+  border: 2px solid var(--border-color);
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.report-squad-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-family: var(--font-pixel);
+  font-size: 11px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.report-findings-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.report-finding-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.finding-pill {
+  font-size: 9px;
+  padding: 2px 6px;
+  background: #0d1222;
+  border: 1px solid #33406a;
+  color: var(--color-cyan);
+  font-family: var(--font-pixel);
+  white-space: nowrap;
+}
+
+.finding-desc {
+  color: var(--text-main);
+  flex: 1;
+}
+
+/* Action Items Checklist */
+.report-actions-card {
+  background: #141a2e;
+  border: 2px solid var(--color-gold);
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.report-actions-title {
+  font-family: var(--font-pixel);
+  font-size: 11px;
+  color: var(--color-gold);
+}
+
+.report-checklist {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.report-check-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--text-main);
+}
+
+.report-check-item input[type="checkbox"] {
+  accent-color: var(--color-gold);
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+/* Raw Markdown Viewer Mode */
+.report-raw-pre {
+  background: #090c16;
+  border: 2px solid var(--border-black);
+  padding: 16px;
+  color: #a5b4fc;
+  font-family: var(--font-terminal);
+  font-size: 16px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
 /* Arcade Footer */
 .arcade-footer {
   display: flex;
@@ -889,4 +1213,6 @@ body:not(.crt-active) .crt-vignette {
 @media (max-width: 900px) {
   .bottom-split-section { grid-template-columns: 1fr; }
   .office-legend { display: none; }
+  .reports-modal-body { flex-direction: column; }
+  .reports-sidebar { width: 100%; height: 200px; }
 }

package/src/orchestrator/engine.js

@@ -572,17 +572,21 @@ export class OrchestratorEngine extends EventEmitter {
       await this.persistState();
 
       // 5. Generate and Persist Executive Report
-      const reportMarkdown = this.compileAuditReport(taskPrompt, targetAgents, findings);
-      await this.saveAuditReport(reportMarkdown);
+      const reportData = this.compileAuditReport(taskPrompt, targetAgents, findings);
+      await this.saveAuditReport(reportData);
 
       await this.emitEvent({
         agent: 'orchestrator',
         type: 'complete',
-        message: `★ SWARM MISSION COMPLETE: Audit report generated with recommendations!`,
-        metadata: { report: reportMarkdown }
+        message: `★ SWARM MISSION COMPLETE: Audit report generated with actionable recommendations!`,
+        metadata: { 
+          report: reportData.markdown,
+          reportId: reportData.id,
+          reportData
+        }
       });
 
-      return reportMarkdown;
+      return reportData.markdown;
 
     } catch (err) {
       if (err.message !== 'Task Aborted') {
@@ -600,53 +604,250 @@ export class OrchestratorEngine extends EventEmitter {
   }
 
   /**
-   * Compiles structured markdown audit report
+   * Compiles structured audit report with both user-friendly JSON and Markdown formats
    */
   compileAuditReport(taskPrompt, targetAgents, findings) {
-    const timestamp = new Date().toLocaleTimeString();
+    const timestamp = Date.now();
+    const dateObj = new Date(timestamp);
+    const timeStr = dateObj.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+    const dateStr = dateObj.toLocaleDateString([], { month: 'short', day: 'numeric', year: 'numeric' });
     const projectName = this.config?.project || path.basename(this.targetDir);
+    const reportId = `sprint-${timestamp}`;
+
+    const agentMeta = {
+      frontend: { name: 'Frontend Squad', icon: '🎨', color: '#00f0ff' },
+      backend: { name: 'Backend Squad', icon: '⚡', color: '#ff007f' },
+      database: { name: 'Database Squad', icon: '🗄️', color: '#ffd700' },
+      security: { name: 'Security Squad', icon: '🛡️', color: '#ff3344' },
+      performance: { name: 'Performance SRE', icon: '🚀', color: '#39ff14' },
+      qa: { name: 'QA Squad', icon: '🧪', color: '#b026ff' },
+      orchestrator: { name: 'Lead Orchestrator', icon: '👔', color: '#ffd700' }
+    };
 
-    let report = `
-╔═══════════════════════════════════════════════════════════════════╗
-║               PIXELCREW SWARM AUDIT REPORT                       ║
-╚═══════════════════════════════════════════════════════════════════╝
+    const sections = [];
+    const actionItems = [];
+    let totalFindings = 0;
 
-PROJECT:         ${projectName}
-OBJECTIVE:       "${taskPrompt}"
-TIMESTAMP:       ${timestamp}
-TEAM SPRINT:     ${targetAgents.map(a => a.toUpperCase()).join(', ')}
-STATUS:          100% COMPLETED
+    for (const [agent, items] of Object.entries(findings)) {
+      if (!items || !items.length) continue;
+      totalFindings += items.length;
+      const meta = agentMeta[agent] || { name: agent.toUpperCase(), icon: '💼', color: '#00f0ff' };
+      
+      const parsedFindings = items.map((item, idx) => {
+        const parts = item.split(':');
+        const category = parts.length > 1 ? parts[0].trim() : 'Recommendation';
+        const description = parts.length > 1 ? parts.slice(1).join(':').trim() : item;
+        actionItems.push(`[${agent.toUpperCase()}] ${description}`);
+        return {
+          id: `${agent}-${idx + 1}`,
+          category,
+          description
+        };
+      });
 
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-EXECUTIVE FINDINGS & ACTIONABLE IMPROVEMENTS
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-`;
+      sections.push({
+        agent,
+        name: meta.name,
+        icon: meta.icon,
+        color: meta.color,
+        findings: parsedFindings
+      });
+    }
 
-    for (const [agent, items] of Object.entries(findings)) {
-      report += `\n[${agent.toUpperCase()} AGENT]:\n`;
-      for (const item of items) {
-        report += `  • ${item}\n`;
+    // Generate Markdown
+    let markdown = `# PixelCrew Swarm Audit Report\n\n`;
+    markdown += `**Project:** ${projectName}  \n`;
+    markdown += `**Objective:** "${taskPrompt}"  \n`;
+    markdown += `**Date:** ${dateStr} at ${timeStr}  \n`;
+    markdown += `**Team Roster:** ${targetAgents.map(a => a.toUpperCase()).join(', ')}  \n`;
+    markdown += `**Status:** 100% Completed  \n\n`;
+    markdown += `## Executive Summary\n`;
+    markdown += `The multi-agent swarm completed the assigned objective with **${totalFindings} key findings & actionable improvements** across ${targetAgents.length} specialized engineering squads.\n\n`;
+    markdown += `## Squad Findings & Recommendations\n\n`;
+
+    for (const section of sections) {
+      markdown += `### ${section.icon} ${section.name}\n`;
+      for (const finding of section.findings) {
+        markdown += `- **${finding.category}:** ${finding.description}\n`;
       }
+      markdown += `\n`;
     }
 
-    report += `\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n`;
-    report += `NEXT STEPS: Review findings and apply proposed improvements.\n`;
+    markdown += `## Action Items & Next Steps\n`;
+    for (const action of actionItems) {
+      markdown += `- [ ] ${action}\n`;
+    }
+
+    const reportObject = {
+      id: reportId,
+      timestamp,
+      dateFormatted: `${dateStr}, ${timeStr}`,
+      project: projectName,
+      objective: taskPrompt,
+      status: 'COMPLETED',
+      targetAgents,
+      totalFindings,
+      sections,
+      actionItems,
+      markdown
+    };
 
-    return report.trim();
+    return reportObject;
   }
 
   /**
-   * Saves audit report to .pixel-agents/reports/
+   * Saves audit report to .pixel-agents/reports/ in both JSON and Markdown format
    */
-  async saveAuditReport(reportMarkdown) {
+  async saveAuditReport(reportData) {
     const reportsDir = path.join(this.pixelAgentsDir, 'reports');
     try {
       await fs.mkdir(reportsDir, { recursive: true });
-      const filename = `audit-${Date.now()}.md`;
-      await fs.writeFile(path.join(reportsDir, filename), reportMarkdown + '\n', 'utf-8');
-    } catch {
-      // ignore
+      const baseFilename = reportData.id || `sprint-${Date.now()}`;
+      
+      // Save JSON metadata
+      await fs.writeFile(
+        path.join(reportsDir, `${baseFilename}.json`),
+        JSON.stringify(reportData, null, 2),
+        'utf-8'
+      );
+
+      // Save readable Markdown
+      if (reportData.markdown) {
+        await fs.writeFile(
+          path.join(reportsDir, `${baseFilename}.md`),
+          reportData.markdown.trim() + '\n',
+          'utf-8'
+        );
+      }
+    } catch (err) {
+      console.error('Error saving audit report:', err);
     }
   }
+
+  /**
+   * Reads and lists all audit reports stored in .pixel-agents/reports/ or reports/
+   */
+  async getReports() {
+    const directories = [
+      path.join(this.pixelAgentsDir, 'reports'),
+      path.join(this.targetDir || this.rootDir, 'reports')
+    ];
+
+    const reportsMap = new Map();
+
+    for (const dir of directories) {
+      try {
+        await fs.mkdir(dir, { recursive: true });
+        const files = await fs.readdir(dir);
+
+        // 1. Process JSON reports first
+        const jsonFiles = files.filter(f => f.endsWith('.json'));
+        for (const file of jsonFiles) {
+          try {
+            const raw = await fs.readFile(path.join(dir, file), 'utf-8');
+            const data = JSON.parse(raw);
+            const id = data.id || file.replace(/\.json$/, '');
+            reportsMap.set(id, { ...data, id });
+          } catch {}
+        }
+
+        // 2. Process Markdown reports (including standalone .md files)
+        const mdFiles = files.filter(f => f.endsWith('.md'));
+        for (const file of mdFiles) {
+          const id = file.replace(/\.md$/, '');
+          if (!reportsMap.has(id)) {
+            try {
+              const fullPath = path.join(dir, file);
+              const raw = await fs.readFile(fullPath, 'utf-8');
+              const stats = await fs.stat(fullPath);
+              const parsed = this.parseMarkdownReport(id, raw, stats.mtime);
+              reportsMap.set(id, parsed);
+            } catch {}
+          }
+        }
+      } catch {}
+    }
+
+    const reports = Array.from(reportsMap.values());
+    reports.sort((a, b) => (b.timestamp || 0) - (a.timestamp || 0));
+    return reports;
+  }
+
+  /**
+   * Helper to parse standalone markdown files into structured report objects
+   */
+  parseMarkdownReport(id, markdown, mtime) {
+    const lines = markdown.split('\n');
+    let title = id.replace(/[-_]/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+    const findings = [];
+    const actionItems = [];
+    const detectedAgents = new Set();
+
+    for (const line of lines) {
+      const trimmed = line.trim();
+      if (trimmed.startsWith('# ') && (title === id || title.toLowerCase() === id.replace(/[-_]/g, ' '))) {
+        title = trimmed.replace(/^#\s+/, '');
+      } else if (trimmed.startsWith('- [ ]') || trimmed.startsWith('- [x]')) {
+        actionItems.push(trimmed.replace(/^-\s+\[.\]\s*/, ''));
+      } else if (trimmed.startsWith('- ') || trimmed.startsWith('* ') || /^\d+\.\s+/.test(trimmed)) {
+        findings.push(trimmed.replace(/^[-*]\s+|\d+\.\s+/, ''));
+      }
+
+      // Check agent mentions
+      const lower = line.toLowerCase();
+      if (lower.includes('frontend') || lower.includes('ui') || lower.includes('react')) detectedAgents.add('frontend');
+      if (lower.includes('backend') || lower.includes('api')) detectedAgents.add('backend');
+      if (lower.includes('database') || lower.includes('postgres') || lower.includes('prisma') || lower.includes('sql')) detectedAgents.add('database');
+      if (lower.includes('security') || lower.includes('auth')) detectedAgents.add('security');
+      if (lower.includes('performance') || lower.includes('vital') || lower.includes('speed')) detectedAgents.add('performance');
+      if (lower.includes('qa') || lower.includes('test') || lower.includes('playwright')) detectedAgents.add('qa');
+    }
+
+    const targetAgents = detectedAgents.size > 0 ? Array.from(detectedAgents) : ['frontend', 'qa'];
+    const timestamp = mtime ? new Date(mtime).getTime() : Date.now();
+    const dateObj = new Date(timestamp);
+    const timeStr = dateObj.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    const dateStr = dateObj.toLocaleDateString([], { month: 'short', day: 'numeric', year: 'numeric' });
+
+    // Group findings into clean sections
+    const sections = [
+      {
+        agent: targetAgents[0] || 'frontend',
+        name: `${(targetAgents[0] || 'Team').toUpperCase()} Findings`,
+        icon: '📋',
+        color: '#00f0ff',
+        findings: (findings.length > 0 ? findings : ['Report recorded in markdown']).slice(0, 10).map((f, i) => {
+          const parts = f.split(':');
+          return {
+            id: `item-${i + 1}`,
+            category: parts.length > 1 ? parts[0].trim() : 'Observation',
+            description: parts.length > 1 ? parts.slice(1).join(':').trim() : f
+          };
+        })
+      }
+    ];
+
+    return {
+      id,
+      timestamp,
+      dateFormatted: `${dateStr}, ${timeStr}`,
+      project: this.config?.project || path.basename(this.targetDir || this.rootDir),
+      objective: title,
+      status: 'COMPLETED',
+      targetAgents,
+      totalFindings: findings.length || 1,
+      sections,
+      actionItems: actionItems.length > 0 ? actionItems : (findings.length > 0 ? findings.slice(0, 5) : ['Review report findings']),
+      markdown
+    };
+  }
+
+  /**
+   * Gets a specific report by ID
+   */
+  async getReportById(reportId) {
+    const reports = await this.getReports();
+    return reports.find(r => r.id === reportId) || null;
+  }
 }
 

package/src/server/server.js

@@ -169,6 +169,34 @@ export function createServer(engine, options = {}) {
       return sendJson(200, { status: 'reset' });
     }
 
+    if (pathname === '/api/reports' && req.method === 'GET') {
+      const reports = await engine.getReports();
+      return sendJson(200, { reports });
+    }
+
+    if (pathname.startsWith('/api/reports/') && req.method === 'GET') {
+      const reportId = pathname.replace('/api/reports/', '');
+      const report = await engine.getReportById(reportId);
+      if (!report) {
+        return sendJson(404, { error: 'Report not found' });
+      }
+      return sendJson(200, { report });
+    }
+
+    if (pathname === '/api/reports' && req.method === 'POST') {
+      const body = await readBody();
+      if (!body.objective && !body.markdown) {
+        return sendJson(400, { error: 'Missing report objective or markdown' });
+      }
+      const reportData = engine.compileAuditReport(
+        body.objective || 'Manual Audit',
+        body.targetAgents || ['frontend', 'backend', 'database'],
+        body.findings || {}
+      );
+      await engine.saveAuditReport(reportData);
+      return sendJson(201, { status: 'created', report: reportData });
+    }
+
     if (pathname === '/api/demo' && req.method === 'POST') {
       const demoPrompt = 'Analyze CRM customer search bottlenecks & optimize Postgres Prisma queries with responsive UI';
       engine.submitTask(demoPrompt).catch(console.error);
@@ -187,12 +215,12 @@ export function createServer(engine, options = {}) {
     else if (filename.endsWith('.svg')) contentType = 'image/svg+xml';
     else if (filename.endsWith('.ico')) contentType = 'image/x-icon';
 
-    // Check project .pixel-dashboard first, then fallback to built-in
-    let filePath = path.join(dashboardDir, filename);
+    // Serve latest dashboard assets from package with fallback to project directory
+    let filePath = path.join(fallbackDashboardDir, filename);
     try {
       await fs.access(filePath);
     } catch {
-      filePath = path.join(fallbackDashboardDir, filename);
+      filePath = path.join(dashboardDir, filename);
       try {
         await fs.access(filePath);
       } catch {