mrvn-cli 0.4.5 → 0.4.6

package/dist/index.js

@@ -15723,6 +15723,23 @@ function getUpcomingData(store) {
 }
 
 // src/web/templates/layout.ts
+function collapsibleSection(sectionId, title, content, opts) {
+  const tag = opts?.titleTag ?? "div";
+  const cls = opts?.titleClass ?? "section-title";
+  const collapsed = opts?.defaultCollapsed ? " collapsed" : "";
+  return `
+    <div class="collapsible${collapsed}" data-section-id="${escapeHtml(sectionId)}">
+      <${tag} class="${cls} collapsible-header" onclick="toggleSection(this)">
+        <svg class="collapsible-chevron" viewBox="0 0 16 16" width="14" height="14" fill="currentColor">
+          <path d="M4.94 5.72a.75.75 0 0 1 1.06-.02L8 7.56l1.97-1.84a.75.75 0 1 1 1.02 1.1l-2.5 2.34a.75.75 0 0 1-1.02 0l-2.5-2.34a.75.75 0 0 1-.03-1.06z"/>
+        </svg>
+        <span>${title}</span>
+      </${tag}>
+      <div class="collapsible-body">
+        ${content}
+      </div>
+    </div>`;
+}
 function escapeHtml(str) {
   return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
@@ -15890,6 +15907,32 @@ function layout(opts, body) {
       ${body}
     </main>
   </div>
+  <script>
+    function toggleSection(header) {
+      var section = header.closest('.collapsible');
+      if (!section) return;
+      section.classList.toggle('collapsed');
+      var id = section.getAttribute('data-section-id');
+      if (id) {
+        try {
+          var state = JSON.parse(localStorage.getItem('marvin-collapsed') || '{}');
+          state[id] = section.classList.contains('collapsed');
+          localStorage.setItem('marvin-collapsed', JSON.stringify(state));
+        } catch(e) {}
+      }
+    }
+    // Restore collapsed state on load
+    (function() {
+      try {
+        var state = JSON.parse(localStorage.getItem('marvin-collapsed') || '{}');
+        document.querySelectorAll('.collapsible[data-section-id]').forEach(function(el) {
+          var id = el.getAttribute('data-section-id');
+          if (state[id] === true) el.classList.add('collapsed');
+          else if (state[id] === false) el.classList.remove('collapsed');
+        });
+      } catch(e) {}
+    })();
+  </script>
   <script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
   <script>mermaid.initialize({
     startOnLoad: true,
@@ -16713,13 +16756,60 @@ tr:hover td {
   white-space: nowrap;
 }
 
+.gantt-grid-line {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: var(--border);
+  opacity: 0.35;
+}
+
+.gantt-sprint-line {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: var(--text-dim);
+  opacity: 0.3;
+}
+
 .gantt-today {
   position: absolute;
   top: 0;
   bottom: 0;
-  width: 2px;
+  width: 3px;
   background: var(--red);
-  opacity: 0.7;
+  opacity: 0.8;
+  border-radius: 1px;
+}
+
+/* Sprint band in timeline */
+.gantt-sprint-band-row {
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 0.25rem;
+}
+
+.gantt-sprint-band {
+  height: 32px;
+}
+
+.gantt-sprint-block {
+  position: absolute;
+  top: 2px;
+  bottom: 2px;
+  background: var(--bg-hover);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  font-size: 0.65rem;
+  color: var(--text-dim);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding: 0 0.4rem;
 }
 
 /* Pie chart color overrides */
@@ -16781,6 +16871,40 @@ tr:hover td {
 }
 
 .text-dim { color: var(--text-dim); }
+
+/* Collapsible sections */
+.collapsible-header {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  user-select: none;
+}
+
+.collapsible-header:hover {
+  color: var(--accent);
+}
+
+.collapsible-chevron {
+  transition: transform 0.2s ease;
+  flex-shrink: 0;
+}
+
+.collapsible.collapsed .collapsible-chevron {
+  transform: rotate(-90deg);
+}
+
+.collapsible-body {
+  overflow: hidden;
+  max-height: 5000px;
+  transition: max-height 0.3s ease, opacity 0.2s ease;
+  opacity: 1;
+}
+
+.collapsible.collapsed .collapsible-body {
+  max-height: 0;
+  opacity: 0;
+}
 `;
 }
 
@@ -16833,35 +16957,73 @@ function buildTimelineGantt(data, maxSprints = 6) {
     );
     tick += 7 * DAY;
   }
+  const gridLines = [];
+  let gridTick = timelineStart;
+  const gridStartDay = new Date(gridTick).getDay();
+  gridTick += (8 - gridStartDay) % 7 * DAY;
+  while (gridTick <= timelineEnd) {
+    gridLines.push(`<div class="gantt-grid-line" style="left:${pct(gridTick).toFixed(2)}%"></div>`);
+    gridTick += 7 * DAY;
+  }
+  const sprintBoundaries = /* @__PURE__ */ new Set();
+  for (const sprint of visibleSprints) {
+    sprintBoundaries.add(toMs(sprint.startDate));
+    sprintBoundaries.add(toMs(sprint.endDate));
+  }
+  const sprintLines = [...sprintBoundaries].map(
+    (ms) => `<div class="gantt-sprint-line" style="left:${pct(ms).toFixed(2)}%"></div>`
+  );
   const now = Date.now();
   let todayMarker = "";
   if (now >= timelineStart && now <= timelineEnd) {
     todayMarker = `<div class="gantt-today" style="left:${pct(now).toFixed(2)}%"></div>`;
   }
-  const rows = [];
+  const sprintBlocks = visibleSprints.map((sprint) => {
+    const sStart = toMs(sprint.startDate);
+    const sEnd = toMs(sprint.endDate);
+    const left = pct(sStart).toFixed(2);
+    const width = (pct(sEnd) - pct(sStart)).toFixed(2);
+    return `<div class="gantt-sprint-block" style="left:${left}%;width:${width}%">${sanitize(sprint.id, 20)}</div>`;
+  }).join("");
+  const sprintBandRow = `<div class="gantt-row gantt-sprint-band-row">
+      <div class="gantt-label gantt-section-label">Sprints</div>
+      <div class="gantt-track gantt-sprint-band">${sprintBlocks}</div>
+    </div>`;
+  const epicSpanMap = /* @__PURE__ */ new Map();
   for (const sprint of visibleSprints) {
     const sStart = toMs(sprint.startDate);
     const sEnd = toMs(sprint.endDate);
-    rows.push(`<div class="gantt-section-row">
-      <div class="gantt-label gantt-section-label">${sanitize(sprint.id + " " + sprint.title, 50)}</div>
-      <div class="gantt-track">
-        <div class="gantt-section-bg" style="left:${pct(sStart).toFixed(2)}%;width:${(pct(sEnd) - pct(sStart)).toFixed(2)}%"></div>
-      </div>
-    </div>`);
-    const linked = sprint.linkedEpics.map((eid) => epicMap.get(eid)).filter(Boolean);
-    const items = linked.length > 0 ? linked.map((e) => ({ label: sanitize(e.id + " " + e.title), status: e.status })) : [{ label: sanitize(sprint.title), status: sprint.status }];
-    for (const item of items) {
-      const cls = item.status === "done" || item.status === "completed" ? "gantt-bar-done" : item.status === "in-progress" || item.status === "active" ? "gantt-bar-active" : item.status === "blocked" ? "gantt-bar-blocked" : "gantt-bar-default";
-      const left = pct(sStart).toFixed(2);
-      const width = (pct(sEnd) - pct(sStart)).toFixed(2);
-      rows.push(`<div class="gantt-row">
-        <div class="gantt-label">${item.label}</div>
+    for (const eid of sprint.linkedEpics) {
+      if (!epicMap.has(eid)) continue;
+      const existing = epicSpanMap.get(eid);
+      if (existing) {
+        existing.startMs = Math.min(existing.startMs, sStart);
+        existing.endMs = Math.max(existing.endMs, sEnd);
+      } else {
+        epicSpanMap.set(eid, { startMs: sStart, endMs: sEnd });
+      }
+    }
+  }
+  const sortedEpicIds = [...epicSpanMap.keys()].sort((a, b) => {
+    const aSpan = epicSpanMap.get(a);
+    const bSpan = epicSpanMap.get(b);
+    if (aSpan.startMs !== bSpan.startMs) return aSpan.startMs - bSpan.startMs;
+    return a.localeCompare(b);
+  });
+  const epicRows = sortedEpicIds.map((eid) => {
+    const epic = epicMap.get(eid);
+    const { startMs, endMs } = epicSpanMap.get(eid);
+    const cls = epic.status === "done" || epic.status === "completed" ? "gantt-bar-done" : epic.status === "in-progress" || epic.status === "active" ? "gantt-bar-active" : epic.status === "blocked" ? "gantt-bar-blocked" : "gantt-bar-default";
+    const left = pct(startMs).toFixed(2);
+    const width = (pct(endMs) - pct(startMs)).toFixed(2);
+    const label = sanitize(epic.id + " " + epic.title);
+    return `<div class="gantt-row">
+        <div class="gantt-label">${label}</div>
         <div class="gantt-track">
           <div class="gantt-bar ${cls}" style="left:${left}%;width:${width}%"></div>
         </div>
-      </div>`);
-    }
-  }
+      </div>`;
+  }).join("\n");
   const note = truncated ? `<div class="mermaid-note">${hiddenCount} earlier sprint${hiddenCount > 1 ? "s" : ""} not shown</div>` : "";
   return `${note}
     <div class="gantt">
@@ -16870,11 +17032,12 @@ function buildTimelineGantt(data, maxSprints = 6) {
           <div class="gantt-label"></div>
           <div class="gantt-track gantt-dates">${markers.join("")}</div>
         </div>
-        ${rows.join("\n")}
+        ${sprintBandRow}
+        ${epicRows}
       </div>
       <div class="gantt-overlay">
         <div class="gantt-label"></div>
-        <div class="gantt-track">${todayMarker}</div>
+        <div class="gantt-track">${gridLines.join("")}${sprintLines.join("")}${todayMarker}</div>
       </div>
     </div>`;
 }
@@ -17154,11 +17317,12 @@ function overviewPage(data, diagrams, navGroups) {
 
     <div class="section-title"><a href="/timeline">Project Timeline &rarr;</a></div>
 
-    <div class="section-title">Artifact Relationships</div>
-    ${buildArtifactFlowchart(diagrams)}
+    ${collapsibleSection("overview-relationships", "Artifact Relationships", buildArtifactFlowchart(diagrams))}
 
-    <div class="section-title">Recent Activity</div>
-    ${data.recent.length > 0 ? `
+    ${collapsibleSection(
+    "overview-recent",
+    "Recent Activity",
+    data.recent.length > 0 ? `
     <div class="table-wrap">
       <table>
         <thead>
@@ -17174,7 +17338,8 @@ function overviewPage(data, diagrams, navGroups) {
           ${rows}
         </tbody>
       </table>
-    </div>` : `<div class="empty"><p>No documents yet.</p></div>`}
+    </div>` : `<div class="empty"><p>No documents yet.</p></div>`
+  )}
   `;
 }
 
@@ -17319,23 +17484,24 @@ function garPage(report) {
       <div class="label">Overall: ${escapeHtml(report.overall)}</div>
     </div>
 
-    <div class="gar-areas">
-      ${areaCards}
-    </div>
+    ${collapsibleSection("gar-areas", "Areas", `<div class="gar-areas">${areaCards}</div>`)}
 
-    <div class="section-title">Status Distribution</div>
-    ${buildStatusPie("Action Status", {
-    Open: report.metrics.scope.open,
-    Done: report.metrics.scope.done,
-    "In Progress": Math.max(0, report.metrics.scope.total - report.metrics.scope.open - report.metrics.scope.done)
-  })}
+    ${collapsibleSection(
+    "gar-status-dist",
+    "Status Distribution",
+    buildStatusPie("Action Status", {
+      Open: report.metrics.scope.open,
+      Done: report.metrics.scope.done,
+      "In Progress": Math.max(0, report.metrics.scope.total - report.metrics.scope.open - report.metrics.scope.done)
+    })
+  )}
   `;
 }
 
 // src/web/templates/pages/health.ts
 function healthPage(report, metrics) {
   const dotClass = `dot-${report.overall}`;
-  function renderSection(title, categories) {
+  function renderSection(sectionId, title, categories) {
     const cards = categories.map(
       (cat) => `
         <div class="gar-area">
@@ -17347,10 +17513,9 @@ function healthPage(report, metrics) {
           ${cat.items.length > 0 ? `<ul>${cat.items.map((item) => `<li><span class="ref-id">${escapeHtml(item.id)}</span>${escapeHtml(item.detail)}</li>`).join("")}</ul>` : ""}
         </div>`
     ).join("\n");
-    return `
-      <div class="health-section-title">${escapeHtml(title)}</div>
-      <div class="gar-areas">${cards}</div>
-    `;
+    return collapsibleSection(sectionId, title, `<div class="gar-areas">${cards}</div>`, {
+      titleClass: "health-section-title"
+    });
   }
   return `
     <div class="page-header">
@@ -17363,35 +17528,43 @@ function healthPage(report, metrics) {
       <div class="label">Overall: ${escapeHtml(report.overall)}</div>
     </div>
 
-    ${renderSection("Completeness", report.completeness)}
-
-    <div class="health-section-title">Completeness Overview</div>
-    ${buildHealthGauge(
-    metrics ? Object.entries(metrics.completeness).map(([name, cat]) => ({
-      name: name.replace(/\b\w/g, (c) => c.toUpperCase()),
-      complete: cat.complete,
-      total: cat.total
-    })) : report.completeness.map((c) => {
-      const match = c.summary.match(/(\d+)\s*\/\s*(\d+)/);
-      return {
-        name: c.name,
-        complete: match ? parseInt(match[1], 10) : 0,
-        total: match ? parseInt(match[2], 10) : 0
-      };
-    })
+    ${renderSection("health-completeness", "Completeness", report.completeness)}
+
+    ${collapsibleSection(
+    "health-completeness-overview",
+    "Completeness Overview",
+    buildHealthGauge(
+      metrics ? Object.entries(metrics.completeness).map(([name, cat]) => ({
+        name: name.replace(/\b\w/g, (c) => c.toUpperCase()),
+        complete: cat.complete,
+        total: cat.total
+      })) : report.completeness.map((c) => {
+        const match = c.summary.match(/(\d+)\s*\/\s*(\d+)/);
+        return {
+          name: c.name,
+          complete: match ? parseInt(match[1], 10) : 0,
+          total: match ? parseInt(match[2], 10) : 0
+        };
+      })
+    ),
+    { titleClass: "health-section-title" }
   )}
 
-    ${renderSection("Process", report.process)}
-
-    <div class="health-section-title">Process Summary</div>
-    ${metrics ? buildStatusPie("Process Health", {
-    Stale: metrics.process.stale.length,
-    "Aging Actions": metrics.process.agingActions.length,
-    Healthy: Math.max(
-      0,
-      (metrics.completeness ? Object.values(metrics.completeness).reduce((sum, c) => sum + c.total, 0) : 0) - metrics.process.stale.length - metrics.process.agingActions.length
-    )
-  }) : ""}
+    ${renderSection("health-process", "Process", report.process)}
+
+    ${collapsibleSection(
+    "health-process-summary",
+    "Process Summary",
+    metrics ? buildStatusPie("Process Health", {
+      Stale: metrics.process.stale.length,
+      "Aging Actions": metrics.process.agingActions.length,
+      Healthy: Math.max(
+        0,
+        (metrics.completeness ? Object.values(metrics.completeness).reduce((sum, c) => sum + c.total, 0) : 0) - metrics.process.stale.length - metrics.process.agingActions.length
+      )
+    }) : "",
+    { titleClass: "health-section-title" }
+  )}
   `;
 }
 
@@ -17449,7 +17622,7 @@ function timelinePage(diagrams) {
   return `
     <div class="page-header">
       <h2>Project Timeline</h2>
-      <div class="subtitle">Sprint schedule with linked epics</div>
+      <div class="subtitle">Epic timeline across sprints</div>
     </div>
 
     ${buildTimelineGantt(diagrams)}
@@ -17477,9 +17650,10 @@ function upcomingPage(data) {
   const hasActions = data.dueSoonActions.length > 0;
   const hasSprintTasks = data.dueSoonSprintTasks.length > 0;
   const hasTrending = data.trending.length > 0;
-  const actionsTable = hasActions ? `
-    <h3 class="section-title">Due Soon \u2014 Actions</h3>
-    <div class="table-wrap">
+  const actionsTable = hasActions ? collapsibleSection(
+    "upcoming-actions",
+    "Due Soon \u2014 Actions",
+    `<div class="table-wrap">
       <table>
         <thead>
           <tr>
@@ -17494,7 +17668,7 @@ function upcomingPage(data) {
         </thead>
         <tbody>
           ${data.dueSoonActions.map(
-    (a) => `
+      (a) => `
           <tr class="${urgencyRowClass(a.urgency)}">
             <td><a href="/docs/action/${escapeHtml(a.id)}">${escapeHtml(a.id)}</a></td>
             <td>${escapeHtml(a.title)}</td>
@@ -17504,13 +17678,16 @@ function upcomingPage(data) {
             <td>${urgencyBadge(a.urgency)}</td>
             <td>${a.relatedTaskCount > 0 ? a.relatedTaskCount : "\u2014"}</td>
           </tr>`
-  ).join("")}
+    ).join("")}
         </tbody>
       </table>
-    </div>` : "";
-  const sprintTasksTable = hasSprintTasks ? `
-    <h3 class="section-title">Due Soon \u2014 Sprint Tasks</h3>
-    <div class="table-wrap">
+    </div>`,
+    { titleTag: "h3" }
+  ) : "";
+  const sprintTasksTable = hasSprintTasks ? collapsibleSection(
+    "upcoming-sprint-tasks",
+    "Due Soon \u2014 Sprint Tasks",
+    `<div class="table-wrap">
       <table>
         <thead>
           <tr>
@@ -17524,7 +17701,7 @@ function upcomingPage(data) {
         </thead>
         <tbody>
           ${data.dueSoonSprintTasks.map(
-    (t) => `
+      (t) => `
           <tr class="${urgencyRowClass(t.urgency)}">
             <td><a href="/docs/task/${escapeHtml(t.id)}">${escapeHtml(t.id)}</a></td>
             <td>${escapeHtml(t.title)}</td>
@@ -17533,13 +17710,16 @@ function upcomingPage(data) {
             <td>${formatDate(t.sprintEndDate)}</td>
             <td>${urgencyBadge(t.urgency)}</td>
           </tr>`
-  ).join("")}
+    ).join("")}
         </tbody>
       </table>
-    </div>` : "";
-  const trendingTable = hasTrending ? `
-    <h3 class="section-title">Trending</h3>
-    <div class="table-wrap">
+    </div>`,
+    { titleTag: "h3" }
+  ) : "";
+  const trendingTable = hasTrending ? collapsibleSection(
+    "upcoming-trending",
+    "Trending",
+    `<div class="table-wrap">
       <table>
         <thead>
           <tr>
@@ -17554,7 +17734,7 @@ function upcomingPage(data) {
         </thead>
         <tbody>
           ${data.trending.map(
-    (t, i) => `
+      (t, i) => `
           <tr>
             <td><span class="trending-rank">${i + 1}</span></td>
             <td><a href="/docs/${escapeHtml(t.type)}/${escapeHtml(t.id)}">${escapeHtml(t.id)}</a></td>
@@ -17564,10 +17744,12 @@ function upcomingPage(data) {
             <td><span class="trending-score">${t.score}</span></td>
             <td>${t.signals.map((s) => `<span class="signal-tag">${escapeHtml(s.factor)} +${s.points}</span>`).join(" ")}</td>
           </tr>`
-  ).join("")}
+    ).join("")}
         </tbody>
       </table>
-    </div>` : "";
+    </div>`,
+    { titleTag: "h3" }
+  ) : "";
   const emptyState = !hasActions && !hasSprintTasks && !hasTrending ? '<div class="empty"><p>No upcoming items or trending activity found.</p></div>' : "";
   return `
     <div class="page-header">
@@ -20865,8 +21047,8 @@ function gatherContext(store, focusFeature, includeDecisions = true, includeQues
       title: e.frontmatter.title,
       status: e.frontmatter.status,
       linkedFeature: normalizeLinkedFeatures(e.frontmatter.linkedFeature),
-      targetDate: e.frontmatter.targetDate ?? null,
-      estimatedEffort: e.frontmatter.estimatedEffort ?? null,
+      targetDate: typeof e.frontmatter.targetDate === "string" ? e.frontmatter.targetDate : null,
+      estimatedEffort: typeof e.frontmatter.estimatedEffort === "string" ? e.frontmatter.estimatedEffort : null,
       content: e.content,
       linkedTaskCount: tasks.filter(
         (t) => normalizeLinkedEpics(t.frontmatter.linkedEpic).includes(e.frontmatter.id)
@@ -20877,10 +21059,10 @@ function gatherContext(store, focusFeature, includeDecisions = true, includeQues
       title: t.frontmatter.title,
       status: t.frontmatter.status,
       linkedEpic: normalizeLinkedEpics(t.frontmatter.linkedEpic),
-      acceptanceCriteria: t.frontmatter.acceptanceCriteria ?? null,
-      technicalNotes: t.frontmatter.technicalNotes ?? null,
-      complexity: t.frontmatter.complexity ?? null,
-      estimatedPoints: t.frontmatter.estimatedPoints ?? null,
+      acceptanceCriteria: typeof t.frontmatter.acceptanceCriteria === "string" ? t.frontmatter.acceptanceCriteria : null,
+      technicalNotes: typeof t.frontmatter.technicalNotes === "string" ? t.frontmatter.technicalNotes : null,
+      complexity: typeof t.frontmatter.complexity === "string" ? t.frontmatter.complexity : null,
+      estimatedPoints: typeof t.frontmatter.estimatedPoints === "number" ? t.frontmatter.estimatedPoints : null,
       priority: t.frontmatter.priority ?? null
     })),
     decisions: allDecisions.map((d) => ({
@@ -25241,7 +25423,7 @@ function createProgram() {
   const program = new Command();
   program.name("marvin").description(
     "AI-powered product development assistant with Product Owner, Delivery Manager, and Technical Lead personas"
-  ).version("0.4.5");
+  ).version("0.4.6");
   program.command("init").description("Initialize a new Marvin project in the current directory").action(async () => {
     await initCommand();
   });