mulmocast-vision 0.0.1

package/README.md

@@ -0,0 +1,102 @@
+# 📖 mulmo vision とは？
+
+mulmo vision は LLM（大規模言語モデル） を使って、プレゼンテーション資料を自動で作成するツールです。
+
+プログラミングやデザインの専門知識がなくても、
+「伝えたい情報」を入力すれば、スライドの文章とデザインが自動生成されます。
+
+# ⚙️ 仕組み
+
+- 情報整理
+ユーザーが資料に入れたい情報をまとめます。
+
+- スライド設計（LLM）
+LLM が情報を読み取り、必要なスライド構成と文言を決定します。
+
+- HTML テンプレート生成
+Node.js 関数が呼ばれ、スライド用の HTML テンプレートに文言が埋め込まれます。
+
+- 画像生成
+HTML をレンダリングし、最終的なスライド画像を作成します。
+
+
+```mermaid
+flowchart TD
+
+    A[📝 ユーザーが情報を入力] --> B[🤖 LLM: スライド設計 & 文言作成]
+    B --> C[⚙️ Node 関数: HTML テンプレートに適用]
+    C --> D[🖼 HTML レンダリング: スライド画像生成]
+    D --> E[📑 完成したプレゼン資料]
+```
+
+
+# 技術的な流れ
+- LLMがtoolsを使ってスライドの内容を決める
+  - [slideを作成するtoolsの関数定義](./src/tools.ts)
+- [runner](./src/runner.ts)でtoolsの結果から関数を呼び出す
+  - [呼び出される関数](./src/presentationHandlers/html_class.ts)
+- [html + tailwindを使ったベースhtml](./assets/templates/tailwind.html) + [スライドごとの個別のhtml](./assets/html/) でhtmlページをつくる
+- outdirに画像として保存する
+
+
+### sample: 80このサンプルデータを使ってhtml -> imageを生成する
+
+```
+yarn run generate_all_images
+```
+- [その関数で生成される80種類のサンプルのデータ](./tests/ai_referencing_80_tool_calls.ts)
+
+outdir/{timeStamp}/{index}.png に画像生成
+
+
+### openaiのエージェントでprompt -> tools -> html作成
+
+```
+yarn run ai
+```
+
+プロンプトはソースに直接書いている `src/presentation.ts`
+
+
+### プラグイン＋デザインテンプレート
+
+デザインは
+- toolsから呼ばれる関数群を変更する(html以外でも書き出せる)
+- htmlのベースファイルに変更、もしくはstyleの追加
+  - assets/templates以下のファイルを書き換える
+  - templateファイルの指定
+    - `const handler = new htmlPlugin({ outputDir, rootDir, templateOptions: {htmlTemplateFile: "tailwind-sea"}});`
+  - templateのheaderへstyleを注入
+    - `const handler = new htmlPlugin({ outputDir, rootDir, templateOptions: {headerStyle: darkStyle}});`
+- 各スライド用の個別のhtmlファイルの変更
+  - `assets/html/` 以下のファイルを編集
+  - 各スライド用のフォルダーを変更する
+    `const templateFileName = path.resolve(this.rootDir, "./assets/html/", `${fileName}.html`);`
+
+することでカスタマイズできます。
+
+
+### mcp
+
+buildする
+```
+yarn run build
+```
+
+mcp設定
+```
+    "mulmocast-vision": {
+      "command": "env",
+      "args": [
+        "node",
+        "/path/to/mulmocast-vision/lib/mcp/server.js"
+      ],
+      "transport": {
+        "stdio": true
+      }
+    }
+```
+
+mulmocast-vision/output以下に画像が出力される。
+セッションごとにfolderができるので注意
+(連続すると画像が上書きされるかも)

package/assets/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/assets/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/assets/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/assets/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/assets/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/assets/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/assets/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/assets/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/assets/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/assets/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/assets/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/assets/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/assets/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/assets/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/assets/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/assets/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/assets/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/assets/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/assets/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/assets/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/assets/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/assets/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/assets/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/assets/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/assets/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/assets/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/assets/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/assets/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>