mulmocast-vision 0.0.3 → 0.0.5

package/html/html/agendaPage.html

@@ -0,0 +1,13 @@
+<div class="bg-white text-gray-900 flex flex-col px-20 py-20">
+  <header class="mb-10">
+    <h1 class="text-5xl font-bold tracking-tight">{{title}}</h1>
+  </header>
+
+  <main class="flex-1">
+    <ol class="list-decimal ml-6 space-y-6 text-3xl leading-relaxed text-gray-800 break-words whitespace-normal">
+      {% for item in items %}
+      <li>{{ items }}</li>
+      {% endfor %}
+    </ol>
+  </main>
+</div>

package/html/html/balanceSheetPage.html

@@ -0,0 +1,29 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <h1 class="text-5xl font-bold mb-8">Balance Sheet</h1>
+  <div class="grid grid-cols-3 gap-6">
+    <section class="rounded-xl border p-6 bg-gray-50">
+      <h2 class="text-xl font-semibold mb-3">Assets</h2>
+      <ul class="list-disc ml-5 text-2xl">
+        {% for a in assets %}
+        <li>{{a}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+    <section class="rounded-xl border p-6 bg-white">
+      <h2 class="text-xl font-semibold mb-3">Liabilities</h2>
+      <ul class="list-disc ml-5 text-2xl">
+        {% for l in liabilities %}
+        <li>{{l}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+    <section class="rounded-xl border p-6 bg-gray-50">
+      <h2 class="text-xl font-semibold mb-3">Equity</h2>
+      <ul class="list-disc ml-5 text-2xl">
+        {% for e in equity %}
+        <li>{{e}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+  </div>
+</div>

package/html/html/balancedScorecardPage.html

@@ -0,0 +1,15 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <h1 class="text-5xl font-bold mb-8">Balanced Scorecard</h1>
+  <div class="grid grid-cols-2 gap-6">
+    {% for p in perspectives %}
+    <section class="rounded-xl border p-6 bg-gray-50">
+      <h2 class="text-xl font-semibold text-gray-700 mb-3">{{p.name}}</h2>
+      <ul class="list-disc ml-5 space-y-2 text-2xl">
+        {% for it in p.items %}
+        <li>{{it}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+    {% endfor %}
+  </div>
+</div>

package/html/html/bcgMatrixPage.html

@@ -0,0 +1,37 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <h1 class="text-5xl font-bold mb-8">BCG Matrix</h1>
+  <div class="grid grid-cols-2 gap-6">
+    <section class="rounded-xl border p-6 bg-gray-50">
+      <h2 class="text-xl font-semibold mb-3">Stars</h2>
+      <ul class="list-disc ml-5 space-y-2 text-2xl">
+        {% for it in stars %}
+        <li>{{it}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+    <section class="rounded-xl border p-6 bg-white">
+      <h2 class="text-xl font-semibold mb-3">Cash Cows</h2>
+      <ul class="list-disc ml-5 space-y-2 text-2xl">
+        {% for it in cashCows %}
+        <li>{{it}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+    <section class="rounded-xl border p-6 bg-white">
+      <h2 class="text-xl font-semibold mb-3">Question Marks</h2>
+      <ul class="list-disc ml-5 space-y-2 text-2xl">
+        {% for it in questionMarks %}
+        <li>{{it}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+    <section class="rounded-xl border p-6 bg-gray-50">
+      <h2 class="text-xl font-semibold mb-3">Dogs</h2>
+      <ul class="list-disc ml-5 space-y-2 text-2xl">
+        {% for it in dogs %}
+        <li>{{it}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+  </div>
+</div>

package/html/html/beforeAfterPage.html

@@ -0,0 +1,21 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <h1 class="text-5xl font-bold mb-8">{{title}}</h1>
+  <div class="grid grid-cols-2 gap-6">
+    <section class="rounded-xl border p-6 bg-gray-50">
+      <h2 class="text-xl font-semibold mb-3">Before</h2>
+      <ul class="list-disc ml-5 space-y-2 text-2xl">
+        {% for x in before %}
+        <li>{{x}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+    <section class="rounded-xl border p-6 bg-white">
+      <h2 class="text-xl font-semibold mb-3">After</h2>
+      <ul class="list-disc ml-5 space-y-2 text-2xl">
+        {% for x in after %}
+        <li>{{x}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+  </div>
+</div>

package/html/html/benchmarkingTablePage.html

@@ -0,0 +1,23 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <h1 class="text-5xl font-bold mb-8">Benchmarking</h1>
+  <table class="w-full border-collapse">
+    <thead>
+      <tr>
+        <th class="border p-3 text-left">Metric \ Competitor</th>
+        {% for c in competitors %}
+        <th class="border p-3">{{c}}</th>
+        {% endfor %}
+      </tr>
+    </thead>
+    <tbody>
+      {% for m in metrics %}
+      <tr>
+        <td class="border p-3">{{m}}</td>
+        {% for c in competitors %}
+        <td class="border p-3"></td>
+        {% endfor %}
+      </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+</div>

package/html/html/bubbleChartPlaceholderPage.html

@@ -0,0 +1,9 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <h1 class="text-5xl font-bold mb-8">{{title}}</h1>
+  <p class="text-gray-600 mb-4">Bubble chart placeholder. Replace with visualization.</p>
+  <ul class="list-disc ml-5 text-2xl">
+    {% for p in points %}
+    <li>{{p.label}} — x:{{p.x}}, y:{{p.y}}, r:{{p.r}}</li>
+    {% endfor %}
+  </ul>
+</div>

package/html/html/businessModelCanvasPage.html

@@ -0,0 +1,14 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <div class="grid grid-cols-3 gap-4">
+    {% for key, arr in blocks %}
+    <section class="rounded-xl border p-4 bg-gray-50">
+      <h2 class="text-lg font-semibold text-gray-700 mb-2">{{key}}</h2>
+      <ul class="list-disc ml-5 space-y-1 text-xl">
+        {% for v in arr %}
+        <li>{{v}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+    {% endfor %}
+  </div>
+</div>

package/html/html/capabilityMaturityPage.html

@@ -0,0 +1,8 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <h1 class="text-5xl font-bold mb-8">Capability Maturity</h1>
+  <ul class="list-disc ml-5 text-2xl">
+    {% for c in capabilities %}
+    <li>{{c.name}} — Level {{c.level}}</li>
+    {% endfor %}
+  </ul>
+</div>

package/html/html/cashFlowPage.html

@@ -0,0 +1,21 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <h1 class="text-5xl font-bold mb-8">Cash Flow</h1>
+  <div class="grid grid-cols-2 gap-6">
+    <section class="rounded-xl border p-6 bg-gray-50">
+      <h2 class="text-xl font-semibold mb-3">Inflows</h2>
+      <ul class="list-disc ml-5 text-2xl">
+        {% for i in inflows %}
+        <li>{{i}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+    <section class="rounded-xl border p-6 bg-white">
+      <h2 class="text-xl font-semibold mb-3">Outflows</h2>
+      <ul class="list-disc ml-5 text-2xl">
+        {% for o in outflows %}
+        <li>{{o}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+  </div>
+</div>

package/html/html/changeCurvePage.html

@@ -0,0 +1,11 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <h1 class="text-5xl font-bold mb-8">Change Curve</h1>
+  <ol class="list-decimal ml-6 space-y-3 text-2xl">
+    {% for s in stages %}
+    <li>{{s}}</li>
+    {% endfor %}
+  </ol>
+  {% if notes %}
+  <p class="mt-6 text-gray-600">{{notes}}</p>
+  {% endif %}
+</div>

package/html/html/circularEconomyMapPage.html

@@ -0,0 +1,8 @@
+<div class="bg-white text-gray-900 px-16 py-16 space-y-6">
+  <h1 class="text-5xl font-bold">Circular Economy Map</h1>
+  <ol class="list-decimal ml-6 space-y-2 text-2xl">
+    {% for l in loops %}
+    <li>{{l}}</li>
+    {% endfor %}
+  </ol>
+</div>

package/html/html/communicationPlanPage.html

@@ -0,0 +1,22 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <h1 class="text-5xl font-bold mb-8">Communication Plan</h1>
+  <section class="mb-6">
+    <h2 class="text-xl font-semibold mb-2">Audiences</h2>
+    <ul class="list-disc ml-5 space-y-2 text-2xl">
+      {% for a in audiences %}
+      <li>{{a}}</li>
+      {% endfor %}
+    </ul>
+  </section>
+  <section class="mb-6">
+    <h2 class="text-xl font-semibold mb-2">Channels</h2>
+    <ul class="list-disc ml-5 space-y-2 text-2xl">
+      {% for c in channels %}
+      <li>{{c}}</li>
+      {% endfor %}
+    </ul>
+  </section>
+  {% if cadence %}
+  <p class="text-xl text-gray-700">Cadence: {{cadence}}</p>
+  {% endif %}
+</div>

package/html/html/complianceHeatmapPage.html

@@ -0,0 +1,19 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <h1 class="text-5xl font-bold mb-6">Compliance Heatmap</h1>
+  <table class="border-collapse">
+    <thead>
+      <tr>
+        <th class="border p-2">Area</th>
+        <th class="border p-2">Level</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for a in areas %}
+      <tr>
+        <td class="border p-2">{{a}}</td>
+        <td class="border p-2">{{levels[loop.index0]}}</td>
+      </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+</div>

package/html/html/costStructurePage.html

@@ -0,0 +1,20 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <h1 class="text-5xl font-bold mb-8">Cost Structure</h1>
+  <section class="mb-6">
+    <ul class="list-disc ml-5 space-y-2 text-2xl">
+      {% for b in buckets %}
+      <li>{{b}}</li>
+      {% endfor %}
+    </ul>
+  </section>
+  {% if fixedVsVariable %}
+  <section>
+    <h2 class="text-xl font-semibold mb-2">Fixed vs Variable</h2>
+    <ul class="list-disc ml-5 space-y-2 text-2xl">
+      {% for x in fixedVsVariable %}
+      <li>{{x}}</li>
+      {% endfor %}
+    </ul>
+  </section>
+  {% endif %}
+</div>

package/html/html/csrInitiativesPage.html

@@ -0,0 +1,8 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <h1 class="text-5xl font-bold mb-8">CSR Initiatives</h1>
+  <ul class="list-disc ml-5 text-2xl">
+    {% for i in initiatives %}
+    <li>{{i}}</li>
+    {% endfor %}
+  </ul>
+</div>

package/html/html/cultureValuesPage.html

@@ -0,0 +1,21 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <h1 class="text-5xl font-bold mb-6">Culture & Values</h1>
+  <section class="mb-6">
+    <h2 class="text-xl font-semibold mb-2">Values</h2>
+    <ul class="list-disc ml-5 text-2xl">
+      {% for v in values %}
+      <li>{{v}}</li>
+      {% endfor %}
+    </ul>
+  </section>
+  {% if behaviors %}
+  <section>
+    <h2 class="text-xl font-semibold mb-2">Behaviors</h2>
+    <ul class="list-disc ml-5 text-2xl">
+      {% for b in behaviors %}
+      <li>{{b}}</li>
+      {% endfor %}
+    </ul>
+  </section>
+  {% endif %}
+</div>

package/html/html/customerJourneyPage.html

@@ -0,0 +1,21 @@
+<div class="bg-white text-gray-900 px-16 py-16 space-y-8">
+  <section>
+    <h2 class="text-5xl font-bold mb-6">Customer Journey</h2>
+    <div class="flex flex-wrap gap-3">
+      {% for s in stages %}
+      <div class="rounded-full border px-4 py-2 bg-gray-50 text-2xl">{{s}}</div>
+      {% endfor %}
+    </div>
+  </section>
+  <section class="grid grid-cols-1 md:grid-cols-{{stages|length}} gap-6">
+    {% for tp in touchpoints %}
+    <div class="rounded-xl border p-4 bg-white">
+      <ul class="list-disc ml-5 space-y-2 text-xl">
+        {% for t in tp %}
+        <li>{{t}}</li>
+        {% endfor %}
+      </ul>
+    </div>
+    {% endfor %}
+  </section>
+</div>

package/html/html/customerSuccessJourneyPage.html

@@ -0,0 +1,15 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <h1 class="text-5xl font-bold mb-6">Customer Success Journey</h1>
+  <div class="flex flex-wrap gap-3 mb-6">
+    {% for s in stages %}
+    <div class="rounded-full border px-4 py-2 bg-gray-50 text-2xl">{{s}}</div>
+    {% endfor %}
+  </div>
+  {% if metrics %}
+  <ul class="list-disc ml-5 space-y-2 text-2xl">
+    {% for m in metrics %}
+    <li>{{m}}</li>
+    {% endfor %}
+  </ul>
+  {% endif %}
+</div>

package/html/html/digitalMaturityPage.html

@@ -0,0 +1,14 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <h1 class="text-5xl font-bold mb-6">Digital Maturity</h1>
+  <div class="grid grid-cols-2 gap-6">
+    {% for i in range(0, dimensions|length) %}
+    <section class="rounded-xl border p-6 bg-gray-50">
+      <h2 class="text-xl font-semibold mb-2">{{dimensions[i]}}</h2>
+      <p class="text-xl">Level: {{levels[i]}}</p>
+    </section>
+    {% endfor %}
+  </div>
+  {% if notes %}
+  <p class="mt-6 text-gray-600">{{notes}}</p>
+  {% endif %}
+</div>

package/html/html/driverTreePage.html

@@ -0,0 +1,20 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <div class="flex flex-col items-center mb-10">
+    <div class="inline-flex items-center gap-3 rounded-full border border-gray-300 bg-gray-50 px-6 py-3">
+      <span class="text-sm uppercase tracking-wide text-gray-600">Metric</span>
+      <span class="text-2xl font-semibold text-gray-900">{{metric}}</span>
+    </div>
+  </div>
+  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+    {% for branch in drivers %}
+    <section class="rounded-2xl border border-gray-200 p-6 bg-white">
+      <h3 class="text-lg font-semibold text-gray-700 mb-3">Driver group {{loop.index}}</h3>
+      <ul class="list-disc ml-5 space-y-2 text-xl leading-relaxed">
+        {% for item in branch %}
+        <li>{{item}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+    {% endfor %}
+  </div>
+</div>

package/html/html/ecosystemMapPage.html

@@ -0,0 +1,11 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <h1 class="text-5xl font-bold mb-8">Ecosystem Map</h1>
+  <div class="grid grid-cols-2 gap-6">
+    {% for e in entities %}
+    <section class="rounded-xl border p-6 bg-gray-50">
+      <h2 class="text-xl font-semibold mb-2">{{e.category}}</h2>
+      <p class="text-2xl">{{e.name}}</p>
+    </section>
+    {% endfor %}
+  </div>
+</div>

package/html/html/esgFrameworkPage.html

@@ -0,0 +1,28 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <div class="grid grid-cols-3 gap-6">
+    <section class="rounded-xl border p-6 bg-gray-50">
+      <h2 class="text-xl font-semibold mb-3">Environmental</h2>
+      <ul class="list-disc ml-5 text-2xl">
+        {% for e in environmental %}
+        <li>{{e}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+    <section class="rounded-xl border p-6 bg-white">
+      <h2 class="text-xl font-semibold mb-3">Social</h2>
+      <ul class="list-disc ml-5 text-2xl">
+        {% for s in social %}
+        <li>{{s}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+    <section class="rounded-xl border p-6 bg-gray-50">
+      <h2 class="text-xl font-semibold mb-3">Governance</h2>
+      <ul class="list-disc ml-5 text-2xl">
+        {% for g in governance %}
+        <li>{{g}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+  </div>
+</div>

package/html/html/executiveSummaryPage.html

@@ -0,0 +1,15 @@
+<div class="bg-white text-gray-900 overflow-hidden flex flex-col">
+  <!-- Title -->
+  <header class="px-20 pt-20">
+    <h1 class="text-6xl font-bold tracking-tight mb-12">{{title}}</h1>
+  </header>
+
+  <!-- Executive summary bullets -->
+  <main class="flex-1 px-32 pb-20">
+    <ol class="list-decimal ml-6 space-y-8 text-3xl leading-relaxed text-gray-800 break-words whitespace-normal">
+      {% for bullet in bullets %}
+      <li>{{ bullets }}</li>
+      {% endfor %}
+    </ol>
+  </main>
+</div>

package/html/html/fourPPage.html

@@ -0,0 +1,36 @@
+<div class="bg-white text-gray-900 px-20 py-20">
+  <div class="grid grid-cols-2 gap-6">
+    <section class="rounded-2xl border p-6 bg-gray-50">
+      <h2 class="text-xl font-semibold text-gray-700 mb-3">Product</h2>
+      <ul class="list-disc ml-5 space-y-2 text-2xl">
+        {% for x in product %}
+        <li>{{x}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+    <section class="rounded-2xl border p-6 bg-white">
+      <h2 class="text-xl font-semibold text-gray-700 mb-3">Price</h2>
+      <ul class="list-disc ml-5 space-y-2 text-2xl">
+        {% for x in price %}
+        <li>{{x}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+    <section class="rounded-2xl border p-6 bg-white">
+      <h2 class="text-xl font-semibold text-gray-700 mb-3">Place</h2>
+      <ul class="list-disc ml-5 space-y-2 text-2xl">
+        {% for x in place %}
+        <li>{{x}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+    <section class="rounded-2xl border p-6 bg-gray-50">
+      <h2 class="text-xl font-semibold text-gray-700 mb-3">Promotion</h2>
+      <ul class="list-disc ml-5 space-y-2 text-2xl">
+        {% for x in promotion %}
+        <li>{{x}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+  </div>
+</div>

package/html/html/funnelPage.html

@@ -0,0 +1,8 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <h1 class="text-5xl font-bold mb-8">Funnel</h1>
+  <ul class="list-decimal ml-6 space-y-3 text-2xl">
+    {% for st in stages %}
+    <li>{{st.label}} — {{st.value}}</li>
+    {% endfor %}
+  </ul>
+</div>

package/html/html/ganttSimplePage.html

@@ -0,0 +1,21 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <h1 class="text-5xl font-bold mb-8">Gantt (Simple)</h1>
+  <table class="w-full border-collapse">
+    <thead>
+      <tr>
+        <th class="border p-3 text-left">Task</th>
+        <th class="border p-3">Start</th>
+        <th class="border p-3">End</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for t in tasks %}
+      <tr>
+        <td class="border p-3">{{t.name}}</td>
+        <td class="border p-3">{{t.start}}</td>
+        <td class="border p-3">{{t.end}}</td>
+      </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+</div>

package/html/html/geMcKinseyMatrixPage.html

@@ -0,0 +1,13 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <h1 class="text-5xl font-bold mb-8">GE–McKinsey 3x3</h1>
+  <div class="grid grid-cols-3 gap-4">
+    {% for i in [0,1,2] %}
+    <div class="rounded-xl border p-6 bg-gray-50 min-h-[120px]">Row {{i+1}}</div>
+    {% endfor %}
+  </div>
+  <ul class="mt-8 list-disc ml-5 text-xl">
+    {% for p in placements %}
+    <li>{{p.name}} (r{{p.row+1}}, c{{p.col+1}})</li>
+    {% endfor %}
+  </ul>
+</div>

package/html/html/heatmapPlaceholderPage.html

@@ -0,0 +1,24 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <h1 class="text-5xl font-bold mb-6">Heatmap</h1>
+  <p class="text-gray-600 mb-4">Placeholder table.</p>
+  <table class="border-collapse">
+    <thead>
+      <tr>
+        <th class="border p-2"></th>
+        {% for c in cols %}
+        <th class="border p-2">{{c}}</th>
+        {% endfor %}
+      </tr>
+    </thead>
+    <tbody>
+      {% for r in rows %}
+      <tr>
+        <td class="border p-2 font-semibold">{{r}}</td>
+        {% for v in values[loop.index0] %}
+        <td class="border p-2 text-center">{{v}}</td>
+        {% endfor %}
+      </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+</div>

package/html/html/hypothesisPage.html

@@ -0,0 +1,22 @@
+<div class="bg-white text-gray-900 px-20 py-20">
+  <h1 class="text-5xl font-bold mb-8">Hypothesis</h1>
+  <p class="text-3xl leading-relaxed mb-10 whitespace-pre-wrap">{{hypothesis}}</p>
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+    <section class="rounded-2xl border border-gray-200 p-8 bg-gray-50">
+      <h2 class="text-xl font-semibold text-gray-700 mb-3">Implications</h2>
+      <ul class="list-disc ml-5 space-y-2 text-2xl">
+        {% for i in implications %}
+        <li>{{i}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+    <section class="rounded-2xl border border-gray-200 p-8 bg-gray-50">
+      <h2 class="text-xl font-semibold text-gray-700 mb-3">Next steps</h2>
+      <ul class="list-disc ml-5 space-y-2 text-2xl">
+        {% for n in nextSteps %}
+        <li>{{n}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+  </div>
+</div>

package/html/html/innovationFunnelPage.html

@@ -0,0 +1,13 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <h1 class="text-5xl font-bold mb-6">Innovation Funnel</h1>
+  <div class="grid grid-cols-{{stages|length}} gap-4">
+    {% for s in stages %}
+    <section class="rounded-xl border p-4 bg-gray-50">
+      <h2 class="text-lg font-semibold">{{s}}</h2>
+      {% if counts %}
+      <p class="text-xl mt-1">Count: {{counts[loop.index0]}}</p>
+      {% endif %}
+    </section>
+    {% endfor %}
+  </div>
+</div>

package/html/html/integrationPlanPage.html

@@ -0,0 +1,21 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <h1 class="text-5xl font-bold mb-8">Integration Plan</h1>
+  <div class="grid grid-cols-2 gap-6">
+    <section class="rounded-xl border p-6 bg-gray-50">
+      <h2 class="text-xl font-semibold mb-3">Workstreams</h2>
+      <ul class="list-disc ml-5 space-y-2 text-2xl">
+        {% for w in workstreams %}
+        <li>{{w}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+    <section class="rounded-xl border p-6 bg-white">
+      <h2 class="text-xl font-semibold mb-3">Milestones</h2>
+      <ul class="list-disc ml-5 space-y-2 text-2xl">
+        {% for m in milestones %}
+        <li>{{m}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+  </div>
+</div>

package/html/html/issueTreePage.html

@@ -0,0 +1,23 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <!-- Root -->
+  <div class="flex flex-col items-center mb-10">
+    <div class="inline-flex items-center gap-3 rounded-full border border-gray-300 bg-gray-50 px-6 py-3">
+      <span class="text-sm uppercase tracking-wide text-gray-600">Root issue</span>
+      <span class="text-2xl font-semibold text-gray-900">{{rootIssue}}</span>
+    </div>
+  </div>
+
+  <!-- Branches -->
+  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+    {% for branche in branches %}
+    <section class="rounded-2xl border border-gray-200 p-6 bg-white">
+      <h3 class="text-lg font-semibold text-gray-700 mb-3">Branch {{ loop.index }}</h3>
+      <ul class="list-disc ml-5 space-y-3 text-2xl leading-relaxed text-gray-900">
+        {% for item in branches %}
+        <li>{{item}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+    {% endfor %}
+  </div>
+</div>