pixelcrew 0.1.0 → 0.1.2

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.2",
   "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,357 @@ 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 formatMarkdownText(text) {
+  if (!text) return '';
+  let html = escapeHtml(text);
+
+  // Bold: **text** or __text__
+  html = html.replace(/\*\*(.*?)\*\*/g, '<strong class="report-bold">$1</strong>');
+  html = html.replace(/__(.*?)__/g, '<strong class="report-bold">$1</strong>');
+
+  // Inline Code: `code`
+  html = html.replace(/`([^`]+)`/g, '<code class="report-inline-code">$1</code>');
+
+  // Italic: *text* or _text_
+  html = html.replace(/\*([^*]+)\*/g, '<em class="report-italic">$1</em>');
+  html = html.replace(/_([^_]+)_/g, '<em class="report-italic">$1</em>');
+
+  return html;
+}
+
+function parseFindingItem(finding) {
+  let rawCategory = (finding.category || '').trim();
+  let rawDesc = (finding.description || '').trim();
+
+  let combined = rawDesc;
+  if (!rawDesc || rawDesc === rawCategory) {
+    combined = rawCategory;
+  } else if (rawCategory && rawDesc) {
+    combined = `${rawCategory}: ${rawDesc}`;
+  }
+
+  let badge = 'Finding';
+  let path = null;
+  let description = combined;
+
+  // 1. Extract markdown bold badge if present: **Title (`path`)** or **Title**
+  const boldPrefixMatch = combined.match(/^(\*\*|__)?([^*_`:]+?)(?:\s*\(`?([^`)]+?)`?\))?(\*\*|__)?(?::\s*|\s*-\s*|\s*—\s*)(.*)$/s);
+  if (boldPrefixMatch) {
+    badge = boldPrefixMatch[2].replace(/\*\*/g, '').trim();
+    path = boldPrefixMatch[3] ? boldPrefixMatch[3].trim() : null;
+    description = boldPrefixMatch[5] ? boldPrefixMatch[5].trim() : '';
+  } else {
+    // 2. Check if category itself contains title and path
+    const catMatch = rawCategory.match(/^(\*\*|__)?([^*_`:]+?)(?:\s*\(`?([^`)]+?)`?\))?(\*\*|__)?$/);
+    if (catMatch) {
+      badge = catMatch[2].replace(/\*\*/g, '').trim();
+      path = catMatch[3] ? catMatch[3].trim() : null;
+      description = rawDesc;
+    } else {
+      const colonIndex = combined.indexOf(':');
+      if (colonIndex > 0 && colonIndex < 45) {
+        let rawTitle = combined.substring(0, colonIndex).replace(/\*\*/g, '').replace(/__/g, '').trim();
+        const pathMatch = rawTitle.match(/^(.*?)(?:\s*\(`?([^`)]+?)`?\))$/);
+        if (pathMatch) {
+          badge = pathMatch[1].trim();
+          path = pathMatch[2].trim();
+        } else {
+          badge = rawTitle;
+        }
+        description = combined.substring(colonIndex + 1).trim();
+      }
+    }
+  }
+
+  badge = badge.replace(/\*\*/g, '').replace(/`/g, '').trim();
+  if (!badge) badge = 'Observation';
+
+  return {
+    badge,
+    path,
+    descriptionHtml: formatMarkdownText(description || combined)
+  };
+}
+
+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: 11px;">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>${escapeHtml(report.project || 'Project')}</strong></span>
+              <span>DATE: <strong>${escapeHtml(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">COMPLETED</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 => {
+        const squadColor = section.color || '#00f0ff';
+        const findings = section.findings || [];
+        return `
+        <div class="report-squad-card" style="border-left: 4px solid ${squadColor};">
+          <div class="report-squad-header">
+            <div class="report-squad-header-left" style="color: ${squadColor};">
+              <span>${section.icon || '💼'}</span>
+              <span>${escapeHtml(section.name || section.agent.toUpperCase())}</span>
+            </div>
+            <span class="report-squad-count">${findings.length} ${findings.length === 1 ? 'Point' : 'Points'}</span>
+          </div>
+          <div class="report-findings-list">
+            ${findings.map(f => {
+              const parsed = parseFindingItem(f);
+              return `
+              <div class="report-finding-card">
+                <div class="finding-card-header">
+                  <span class="finding-badge" style="background: rgba(0, 240, 255, 0.08); border-color: ${squadColor}40; color: ${squadColor};">
+                    ${escapeHtml(parsed.badge)}
+                  </span>
+                  ${parsed.path ? `<span class="finding-path-pill"><code>${escapeHtml(parsed.path)}</code></span>` : ''}
+                </div>
+                <div class="finding-body-text">
+                  ${parsed.descriptionHtml}
+                </div>
+              </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>${formatMarkdownText(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 +1162,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>