docs: add program-hid-update skill for the Program Híd artifact

Project-scoped Claude Code skill that re-queries the MITHOME and PLATFM
Plane projects, recomputes the roadmap-phase/bridge/epic-progress data,
and republishes the same Program Híd artifact
(claude.ai/code/artifact/95d7def2-c648-4fb7-a3f3-0d172b1c21ab) in place.

Includes the canonical artifact source (source.html) so future runs
edit a versioned file instead of a session-local scratchpad copy.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

.claude/skills/program-hid-update/SKILL.md

@@ -0,0 +1,70 @@
+---
+name: program-hid-update
+description: Frissíti a "Program Híd" publikus Artifactot (MITHOME ↔ PLATFM konvergencia-térkép, PLATFM roadmap-sín, MITHOME Payload-epic progresssáv) a Plane MITHOME és PLATFM projektek friss állapota alapján. Használd, ha a felhasználó a "Program Híd" frissítését/szinkronizálását kéri, "állapotkép"-et, "program térkép"-et említ, vagy miután jelentős haladás történt a MITHOME Payload CMS epicben (MITHOME-85 alá tartozó ticketek) vagy a PLATFM roadmapben/AI-pilotban (PLATFM-1..12).
+---
+
+# Program Híd frissítés
+
+Ez a skill szinkronban tartja a publikált **Program Híd** Artifactot (interaktív konvergencia-térkép a mozdIT MITHOME weboldal- és PLATFM platform-projektje között) a Plane aktuális állapotával. Az Artifact statikus HTML+JS — nincs élő Plane-kapcsolata, ezért kézzel (ezzel a skillel) kell frissen tartani.
+
+## Állandók
+
+- **Artifact URL** (mindig ugyanerre frissíts, ne hozz létre új linket): `https://claude.ai/code/artifact/95d7def2-c648-4fb7-a3f3-0d172b1c21ab`
+- **MITHOME Plane project_id**: `643f7055-1237-4912-912f-99ec49fd0f0e`
+- **PLATFM Plane project_id**: `b3e5b750-5a24-48f9-a3b6-e79925475b64`
+- **Kanonikus forrásfájl ebben a repóban**: `.claude/skills/program-hid-update/source.html` — ez van feltöltve az Artifactra. Mindig ezt szerkeszd, ne a régi scratchpad-másolatot (az session-specifikus, nem marad meg).
+
+## Lépések
+
+### 1. Artifact olvasása jóváhagyás előtt
+
+Hívd meg `Artifact` action `"read"`-et a fenti URL-lel, mielőtt bármit publikálsz — ez a tool előírása (nem publikálhatsz olyan artifactra, amit a beszélgetés még nem olvasott). Ha a visszakapott tartalom eltér a helyi `source.html`-től (pl. valaki kézzel szerkesztette a publikált oldalt), a Plane-ből frissen lekért adatot építsd *arra* a verzióra, ne a helyi fájlra.
+
+### 2. Friss Plane-állapot lekérése
+
+**MITHOME oldal** — kérdezd le ezeket (readable identifier vagy `get_issue_using_readable_identifier`):
+- MITHOME-85 epic gyerekei: 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 102, 103, 105 — állapot (Done/Backlog/Todo/In Progress/Cancelled) és cím.
+- Ellenőrizd `list_project_issues`-szal (project_id fent), hogy nem került-e be **új** gyerek a MITHOME-85 alá az utolsó frissítés óta — ha igen, vedd fel az `epicItems` tömbbe.
+- MITHOME-31, MITHOME-40 (a hídon szereplő két satellit-ticket) állapota/prioritása.
+
+**PLATFM oldal** — kérdezd le mind a 12 (vagy annál több, ha új került fel) issue-t `list_project_issues`-szal a PLATFM project_id-n:
+- Melyik fázishoz tartoznak (a fázis-hozzárendelés statikus, lásd `source.html` `phases` tömb — csak akkor változtasd, ha a PLATFM-11 roadmap issue szövege explicit átsorolást ír le).
+- Állapot/prioritás (kiemelten: PLATFM-5 BCDR és PLATFM-10 AI-pilot, mert ezek adják a híd "hot"/"live" jelölését).
+
+### 3. Adatok újraszámolása
+
+- **`epicItems`** (MITHOME Payload epic): `done: true`, ha a Plane state "Done"; frissítsd a címeket, ha változtak; vedd fel az új ticketeket.
+- **`phases`** (PLATFM roadmap-sín): egy fázis `status` legyen `"progress"`, ha van benne legalább egy In Progress vagy Done issue és van még nyitott is; `"urgent"`, ha van benne urgent prioritású *nyitott* issue (ma ez az 1. fázis, PLATFM-5 miatt); egyébként `"open"`. Az `issues` tömb `p` mezője (`urgent`/`high`/`med`) kövesse a Plane priority mezőt.
+- **`rows`** (híd, 6 konvergencia-pont): a `cls` mező jelzi az állapotot —
+  - `"live"` (zöld, animált): a konvergencia-pont mindkét oldala aktívan halad vagy már összekötött (pl. AI-triázs, amíg a MITHOME esemény-emisszió és a PLATFM-10 pilot is legalább In Progress).
+  - `"hot"` (piros, pulzáló): sürgős, még nincs megoldva — ma ez a BCDR sor (MITHOME-40 + PLATFM-5), amíg mindkettő nyitott.
+  - `""` (semleges): még nem aktuális, a trigger-feltétel nem teljesült.
+  - Ha egy konvergencia-pont mindkét oldala Done lesz, változtasd a sor feliratát "lezárva"-ra, és `cls` maradjon `"live"` (zöld), de a `trig` szöveg mondja ki, hogy megtörtént.
+- **Fejléc chipek** (`.chiprow`): számold újra a "X aktív · Y kész · Z lezárt duplikátum" (MITHOME) és "N feladat · M urgent · 8 roadmap-fázis" (PLATFM) szövegeket a friss számokból.
+- **`.stamp`** dátum: írd át a mai dátumra (`YYYY-MM-DD`, éles Plane-lekérdezés napja).
+
+### 4. A `source.html` szerkesztése
+
+Az adatok a fájl végén, a `<script>` blokkban vannak (`phases`, `unplaced`, `rows`, `epicItems` JS tömbök) — ezeket szerkeszd Edit-tel, ne írd újra az egész fájlt. A CSS/HTML-váz (fejléc, szekciók, SVG-koordináták) stabil marad, hacsak nem változik a konvergencia-pontok *száma* (akkor a bridge SVG `viewBox` magassága és a `rowH`/`top` számítás is igazításra szorul — lásd a JS-ben a `rows.forEach` ciklust).
+
+Ha egy phase `issues` tömbje bővül/csökken, a fejlécben lévő `pcount` automatikusan követi (JS-ből generálódik), nincs kézi szinkron.
+
+### 5. Ellenőrzés publikálás előtt
+
+- Nézd át, hogy minden JS tömb szintaktikailag zárt (vesszők, zárójelek) — egy törött `<script>` az egész oldalt elviszi.
+- Számold meg a `{`/`}` és `(`/`)` párokat a módosított szakaszban, ha bizonytalan vagy.
+- Ha van rá mód (bejelentkezett böngésző-session), nyisd meg az Artifact URL-t és nézd meg egyszer, mielőtt publikálod a végleges verziót — lásd az `artifact-design` skill "write, look once, publish" szabályát.
+
+### 6. Publikálás
+
+`Artifact` action `"publish"` (alapértelmezett), `file_path` a `source.html`-re, **`url`** a fenti Artifact URL-re (így ugyanaz a link marad, nem jön létre új Artifact). `favicon`-t és `title`-t **ne** add meg újra — a redeploy megtartja a meglévőt.
+
+### 7. Nyomon követés
+
+- Írj egy rövid sort a `TODO.md` "Frissítési Napló" szekciójába: `**YYYY-MM-DD**: Program Híd frissítve (X/Y MITHOME Payload-feladat kész, N nyitott PLATFM-item).`
+- Commitold a `source.html` változást (`git add .claude/skills/program-hid-update/source.html TODO.md && git commit` a projekt konvenciói szerint — `docs:` vagy `chore:` prefix).
+- Foglald össze a felhasználónak, mi változott a térképen (melyik konvergencia-pont mozdult, melyik fázis indult el).
+
+## Ha rendszeres/automatikus futtatást szeretne a felhasználó
+
+Ez a skill önmagában **kézi indítású** (a felhasználó vagy egy másik munkamenet hívja meg). Ha valódi, felügyelet nélküli, időzített frissítést szeretnének (pl. hetente egyszer), azt a `schedule` skillel/CronCreate-tel lehet erre a skillre ráépíteni — ezt csak akkor állítsd be, ha a felhasználó explicit kéri, és mondd el neki, hogy ez azt jelenti: rendszeres, felügyelet nélküli Plane-olvasás és Artifact-publikálás fog lezajlani a háttérben.

.claude/skills/program-hid-update/source.html

@@ -0,0 +1,685 @@
+<title>Program Híd</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap">
+<style>
+  :root{
+    --bg:#F2F6F6;
+    --surface:#FFFFFF;
+    --surface-2:#E7EEEE;
+    --ink:#152029;
+    --ink-soft:#4C606D;
+    --ink-faint:#7E909B;
+    --line:#C7D5D8;
+    --line-strong:#A9BCC0;
+    --accent:#0F7A8F;
+    --accent-ink:#FFFFFF;
+    --accent-soft:#DCEEF1;
+    --success:#2C8A57;
+    --success-soft:#DEF1E6;
+    --warning:#AD6F0B;
+    --warning-soft:#F6E9D2;
+    --critical:#C13B30;
+    --critical-soft:#F8DEDB;
+    --shadow: 0 1px 2px rgba(21,32,41,.06), 0 8px 24px -12px rgba(21,32,41,.18);
+    --radius: 10px;
+    font-synthesis: none;
+  }
+  @media (prefers-color-scheme: dark){
+    :root:not([data-theme="light"]){
+      --bg:#0D151D;
+      --surface:#131E28;
+      --surface-2:#1A2733;
+      --ink:#E7EFF2;
+      --ink-soft:#9BAEBB;
+      --ink-faint:#6C8090;
+      --line:#2A3C49;
+      --line-strong:#3B5062;
+      --accent:#3FBBD1;
+      --accent-ink:#052229;
+      --accent-soft:#163642;
+      --success:#4FBE84;
+      --success-soft:#173428;
+      --warning:#E3A741;
+      --warning-soft:#3A2B10;
+      --critical:#E2685C;
+      --critical-soft:#3A1D1A;
+      --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 28px -14px rgba(0,0,0,.6);
+    }
+  }
+  :root[data-theme="dark"]{
+    --bg:#0D151D;
+    --surface:#131E28;
+    --surface-2:#1A2733;
+    --ink:#E7EFF2;
+    --ink-soft:#9BAEBB;
+    --ink-faint:#6C8090;
+    --line:#2A3C49;
+    --line-strong:#3B5062;
+    --accent:#3FBBD1;
+    --accent-ink:#052229;
+    --accent-soft:#163642;
+    --success:#4FBE84;
+    --success-soft:#173428;
+    --warning:#E3A741;
+    --warning-soft:#3A2B10;
+    --critical:#E2685C;
+    --critical-soft:#3A1D1A;
+    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 28px -14px rgba(0,0,0,.6);
+  }
+
+  *{ box-sizing:border-box; }
+  body{
+    margin:0;
+    background:var(--bg);
+    color:var(--ink);
+    font-family:"IBM Plex Sans", system-ui, -apple-system, sans-serif;
+    line-height:1.5;
+  }
+  .mono{ font-family:"IBM Plex Mono", ui-monospace, "SF Mono", monospace; }
+
+  .wrap{
+    max-width:1180px;
+    margin:0 auto;
+    padding:36px 20px 64px;
+  }
+
+  /* ---------- header ---------- */
+  header.hero{
+    display:flex;
+    flex-direction:column;
+    gap:14px;
+    margin-bottom:34px;
+  }
+  .eyebrow{
+    font-family:"IBM Plex Mono", monospace;
+    font-size:11.5px;
+    letter-spacing:.14em;
+    text-transform:uppercase;
+    color:var(--accent);
+    font-weight:600;
+  }
+  h1{
+    font-size:clamp(28px, 4.4vw, 42px);
+    line-height:1.08;
+    margin:0;
+    letter-spacing:-0.01em;
+    text-wrap:balance;
+    font-weight:700;
+  }
+  .lede{
+    max-width:64ch;
+    color:var(--ink-soft);
+    font-size:15.5px;
+    margin:0;
+  }
+  .stamp{
+    font-family:"IBM Plex Mono", monospace;
+    font-size:12px;
+    color:var(--ink-faint);
+  }
+
+  .chiprow{
+    display:flex;
+    flex-wrap:wrap;
+    gap:10px;
+    margin-top:6px;
+  }
+  .chip{
+    display:flex;
+    align-items:baseline;
+    gap:8px;
+    background:var(--surface);
+    border:1px solid var(--line);
+    border-radius:999px;
+    padding:7px 14px 7px 12px;
+    box-shadow:var(--shadow);
+  }
+  .chip .dot{ width:8px; height:8px; border-radius:50%; flex:none; }
+  .chip .proj{ font-family:"IBM Plex Mono", monospace; font-weight:600; font-size:12.5px; letter-spacing:.02em; }
+  .chip .stat{ font-size:12.5px; color:var(--ink-soft); }
+  .chip.mithome .dot{ background:var(--accent); }
+  .chip.platfm .dot{ background:#8B6BC9; }
+
+  .filterbar{
+    display:flex;
+    gap:6px;
+    margin-top:4px;
+  }
+  .filterbar button{
+    font-family:"IBM Plex Mono", monospace;
+    font-size:12px;
+    letter-spacing:.02em;
+    border:1px solid var(--line);
+    background:var(--surface);
+    color:var(--ink-soft);
+    padding:6px 12px;
+    border-radius:7px;
+    cursor:pointer;
+    transition: background .15s ease, color .15s ease, border-color .15s ease;
+  }
+  .filterbar button:hover{ border-color:var(--line-strong); color:var(--ink); }
+  .filterbar button[aria-pressed="true"]{
+    background:var(--ink);
+    color:var(--bg);
+    border-color:var(--ink);
+  }
+  :root[data-theme="dark"] .filterbar button[aria-pressed="true"]{
+    background:var(--accent); color:var(--accent-ink); border-color:var(--accent);
+  }
+  @media (prefers-color-scheme:dark){
+    :root:not([data-theme="light"]) .filterbar button[aria-pressed="true"]{
+      background:var(--accent); color:var(--accent-ink); border-color:var(--accent);
+    }
+  }
+
+  /* ---------- section shell ---------- */
+  section{ margin-top:46px; }
+  .sectionhead{
+    display:flex;
+    align-items:baseline;
+    justify-content:space-between;
+    gap:12px;
+    margin-bottom:16px;
+    border-bottom:1px solid var(--line);
+    padding-bottom:10px;
+  }
+  .sectionhead h2{
+    font-size:14px;
+    text-transform:uppercase;
+    letter-spacing:.1em;
+    margin:0;
+    font-weight:600;
+    color:var(--ink-soft);
+  }
+  .sectionhead .note{ font-size:12.5px; color:var(--ink-faint); font-family:"IBM Plex Mono", monospace; }
+
+  /* ---------- phase rail ---------- */
+  .railscroll{ overflow-x:auto; padding-bottom:6px; margin: 0 -4px; }
+  .rail{
+    position:relative;
+    display:flex;
+    gap:0;
+    min-width:840px;
+    padding:34px 4px 4px;
+  }
+  .rail::before{
+    content:"";
+    position:absolute;
+    top:14px; left:44px; right:44px; height:2px;
+    background: repeating-linear-gradient(90deg, var(--line-strong) 0 8px, transparent 8px 14px);
+    background-size: 200% 100%;
+    animation: flow 6s linear infinite;
+  }
+  @media (prefers-reduced-motion: reduce){ .rail::before{ animation:none; } }
+  @keyframes flow{ from{ background-position:0 0; } to{ background-position:-28px 0; } }
+
+  .phase{
+    flex:1 1 0;
+    display:flex;
+    flex-direction:column;
+    align-items:center;
+    text-align:center;
+    padding:0 8px;
+    position:relative;
+    cursor:pointer;
+    transition:opacity .25s ease;
+  }
+  .phase .node{
+    width:26px; height:26px; border-radius:50%;
+    background:var(--surface);
+    border:2px solid var(--line-strong);
+    display:flex; align-items:center; justify-content:center;
+    font-family:"IBM Plex Mono", monospace;
+    font-size:11px; font-weight:600; color:var(--ink-soft);
+    z-index:1;
+    transition: border-color .15s ease, transform .15s ease, color .15s ease;
+  }
+  .phase[data-status="progress"] .node{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
+  .phase[data-status="urgent"] .node{ border-color:var(--critical); color:var(--critical); background:var(--critical-soft); }
+  .phase:hover .node{ transform:scale(1.12); }
+  .phase .pname{
+    margin-top:10px; font-size:12.5px; font-weight:600; max-width:15ch; text-wrap:balance;
+  }
+  .phase .pcount{
+    margin-top:3px; font-size:11px; color:var(--ink-faint); font-family:"IBM Plex Mono", monospace;
+  }
+  .phase.dim{ opacity:.32; }
+
+  .phase-extra{
+    flex:0 0 auto;
+    width:150px;
+    padding-left:14px;
+    margin-left:6px;
+    border-left:1px dashed var(--line-strong);
+    display:flex; flex-direction:column; align-items:flex-start; text-align:left;
+    cursor:pointer;
+  }
+  .phase-extra .tag{
+    font-family:"IBM Plex Mono", monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em;
+    color:var(--warning); font-weight:600; margin-bottom:6px;
+  }
+  .phase-extra .pname{ font-size:12.5px; font-weight:600; }
+  .phase-extra .pcount{ font-size:11px; color:var(--ink-faint); font-family:"IBM Plex Mono", monospace; margin-top:3px;}
+
+  .detail{
+    margin-top:18px;
+    background:var(--surface);
+    border:1px solid var(--line);
+    border-radius:var(--radius);
+    box-shadow:var(--shadow);
+    padding:18px 20px;
+    display:none;
+  }
+  .detail.open{ display:block; }
+  .detail h3{ margin:0 0 3px; font-size:15px; }
+  .detail .sub{ margin:0 0 14px; font-size:12.5px; color:var(--ink-faint); font-family:"IBM Plex Mono", monospace; }
+  .issuelist{ display:flex; flex-direction:column; gap:8px; }
+  .issue{
+    display:flex; align-items:center; gap:10px;
+    padding:8px 10px;
+    background:var(--surface-2);
+    border-radius:7px;
+  }
+  .issue .id{
+    font-family:"IBM Plex Mono", monospace; font-size:11.5px; font-weight:600;
+    background:var(--surface); border:1px solid var(--line); border-radius:5px;
+    padding:2px 7px; flex:none; color:var(--ink-soft);
+  }
+  .issue .t{ font-size:13px; flex:1; }
+  .issue .p{ font-size:10.5px; font-family:"IBM Plex Mono", monospace; text-transform:uppercase; letter-spacing:.06em; flex:none; padding:2px 7px; border-radius:5px; }
+  .p.urgent{ background:var(--critical-soft); color:var(--critical); }
+  .p.high{ background:var(--warning-soft); color:var(--warning); }
+  .p.med{ background:var(--surface); color:var(--ink-faint); border:1px solid var(--line); }
+  .empty-note{ font-size:13px; color:var(--ink-faint); font-style:italic; }
+
+  /* ---------- bridge ---------- */
+  .bridgescroll{ overflow-x:auto; }
+  .bridge-wrap{ min-width:760px; }
+  svg.bridge{ width:100%; height:auto; display:block; overflow:visible; }
+  .col-label{
+    font-family:"IBM Plex Mono", monospace; font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
+  }
+  .node-card{ cursor:pointer; }
+  .node-card rect{ fill:var(--surface); stroke:var(--line-strong); stroke-width:1.3; transition:stroke .15s ease, filter .15s ease; }
+  .node-card:hover rect{ stroke:var(--accent); }
+  .node-title{ font-size:12.5px; font-weight:600; fill:var(--ink); font-family:"IBM Plex Sans", sans-serif; }
+  .node-sub{ font-size:10.5px; fill:var(--ink-faint); font-family:"IBM Plex Mono", monospace; }
+  .conn-label{ font-size:10px; fill:var(--ink-faint); font-family:"IBM Plex Mono", monospace; }
+  .conn-label.hot{ fill:var(--critical); font-weight:600; }
+  .conn-label.live{ fill:var(--success); font-weight:600; }
+  .flowpath{ fill:none; stroke:var(--line-strong); stroke-width:1.6; stroke-dasharray:1 7; stroke-linecap:round; }
+  .flowpath.live{ stroke:var(--success); stroke-dasharray:5 5; animation:dash 1.8s linear infinite; }
+  .flowpath.hot{ stroke:var(--critical); stroke-dasharray:5 5; animation:dash 1.2s linear infinite; }
+  @keyframes dash{ to{ stroke-dashoffset:-20; } }
+  @media (prefers-reduced-motion: reduce){ .flowpath.live, .flowpath.hot{ animation:none; } }
+  .ghost rect{ fill:none; stroke:var(--line); stroke-dasharray:3 3; }
+  .ghost text{ fill:var(--ink-faint); }
+  .ghostpath{ fill:none; stroke:var(--line); stroke-width:1.2; stroke-dasharray:2 4; }
+  .side.dim{ opacity:.28; transition:opacity .25s ease; }
+  .flowpath.dim, .conn-label.dim{ opacity:.15; }
+
+  /* ---------- epic progress ---------- */
+  .epicbar{
+    display:flex; flex-wrap:wrap; gap:8px;
+  }
+  .seg{
+    display:flex; align-items:center; gap:8px;
+    background:var(--surface); border:1px solid var(--line); border-radius:7px;
+    padding:8px 10px;
+    min-width:200px; flex:1 1 220px;
+  }
+  .seg .id{ font-family:"IBM Plex Mono", monospace; font-size:11px; font-weight:600; color:var(--ink-soft); flex:none; }
+  .seg .t{ font-size:12.5px; flex:1; }
+  .seg .state{ width:9px; height:9px; border-radius:50%; flex:none; }
+  .state.done{ background:var(--success); }
+  .state.open{ background:var(--ink-faint); }
+  .progresswrap{
+    display:flex; align-items:center; gap:12px; margin-bottom:16px;
+  }
+  .progresstrack{
+    flex:1; height:8px; border-radius:99px; background:var(--surface-2); overflow:hidden;
+  }
+  .progressfill{
+    height:100%; border-radius:99px;
+    background:linear-gradient(90deg, var(--accent), var(--success));
+    transition:width .6s ease;
+  }
+  .progresslabel{ font-family:"IBM Plex Mono", monospace; font-size:12.5px; color:var(--ink-soft); flex:none; }
+
+  footer{
+    margin-top:50px; padding-top:18px; border-top:1px solid var(--line);
+    font-size:12px; color:var(--ink-faint); font-family:"IBM Plex Mono", monospace;
+    display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:space-between;
+  }
+
+  @media (max-width:640px){
+    .wrap{ padding:26px 14px 48px; }
+    .sectionhead{ flex-direction:column; align-items:flex-start; gap:4px; }
+  }
+</style>
+
+<div class="wrap">
+
+  <header class="hero">
+    <span class="eyebrow">mozdIT Bt. · program áttekintés</span>
+    <h1>Program Híd</h1>
+    <p class="lede">MITHOME (mozdIT weboldal + Payload CMS-migráció) és PLATFM (a szélesebb vállalati platform) között hat ponton ér össze a munka. Ez az oldal azt mutatja, hol tartunk, és mi indítja el a következő találkozási pontot.</p>
+    <p class="stamp">Statikus állapotkép — 2026&#8209;09&#8209;10, a Plane MITHOME + PLATFM projektek alapján</p>
+
+    <div class="chiprow">
+      <div class="chip mithome"><span class="dot"></span><span class="proj">MITHOME</span><span class="stat">15 aktív · 2 kész · 7 lezárt duplikátum</span></div>
+      <div class="chip platfm"><span class="dot"></span><span class="proj">PLATFM</span><span class="stat">12 feladat · 1 urgent · 8 roadmap-fázis</span></div>
+    </div>
+
+    <div class="filterbar" role="group" aria-label="Szűrés projekt szerint">
+      <button type="button" data-filter="all" aria-pressed="true">Mindkettő</button>
+      <button type="button" data-filter="mithome" aria-pressed="false">MITHOME</button>
+      <button type="button" data-filter="platfm" aria-pressed="false">PLATFM</button>
+    </div>
+  </header>
+
+  <!-- ===================== PHASE RAIL ===================== -->
+  <section>
+    <div class="sectionhead">
+      <h2>PLATFM roadmap · 8 fázis</h2>
+      <span class="note">sorrend van, dátum nincs — kattints egy fázisra</span>
+    </div>
+
+    <div class="railscroll">
+      <div class="rail" id="rail">
+        <!-- phases injected by JS -->
+      </div>
+    </div>
+
+    <div class="detail" id="phaseDetail"></div>
+  </section>
+
+  <!-- ===================== BRIDGE ===================== -->
+  <section>
+    <div class="sectionhead">
+      <h2>Konvergencia-híd</h2>
+      <span class="note">6 pont, ahol a két projekt ugyanazt a dolgot érinti</span>
+    </div>
+
+    <div class="bridgescroll">
+      <div class="bridge-wrap">
+        <svg class="bridge" viewBox="0 0 940 566" role="img" aria-label="MITHOME és PLATFM közötti hat konvergencia-pont, összekötő nyilakkal és aktiválási feltétellel">
+          <defs>
+            <marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+              <path d="M0,0 L10,5 L0,10 z" fill="var(--line-strong)"></path>
+            </marker>
+            <marker id="arrowLive" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+              <path d="M0,0 L10,5 L0,10 z" fill="var(--success)"></path>
+            </marker>
+            <marker id="arrowHot" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+              <path d="M0,0 L10,5 L0,10 z" fill="var(--critical)"></path>
+            </marker>
+          </defs>
+
+          <text x="40" y="26" class="col-label" fill="var(--accent)">MITHOME · weboldal</text>
+          <text x="900" y="26" class="col-label" fill="#8B6BC9" text-anchor="end">PLATFM · vállalati platform</text>
+
+          <!-- connector paths (drawn first, under nodes) -->
+          <g id="connectors"></g>
+          <!-- nodes -->
+          <g id="leftNodes"></g>
+          <g id="rightNodes"></g>
+
+          <!-- ghost story node -->
+          <g class="ghost" id="ghostNode" transform="translate(392,470)">
+            <rect x="0" y="0" width="156" height="46" rx="8"></rect>
+            <text x="12" y="18" class="node-sub">MITHOME-99 EPIC</text>
+            <text x="12" y="33" class="node-sub">duplikátum · lezárva 09-10</text>
+          </g>
+        </svg>
+      </div>
+    </div>
+  </section>
+
+  <!-- ===================== EPIC PROGRESS ===================== -->
+  <section id="mithomeSection">
+    <div class="sectionhead">
+      <h2>MITHOME · Payload CMS epic</h2>
+      <span class="note">MITHOME-85 alá tartozó feladatok</span>
+    </div>
+
+    <div class="progresswrap">
+      <div class="progresstrack"><div class="progressfill" id="epicFill" style="width:0%"></div></div>
+      <span class="progresslabel" id="epicLabel">2 / 15 kész</span>
+    </div>
+
+    <div class="epicbar" id="epicBar"></div>
+  </section>
+
+  <footer>
+    <span>Forrás: Plane · MITHOME + PLATFM projektek</span>
+    <span>Frissítve: 2026-09-10 · nem szinkronizál élőben</span>
+  </footer>
+
+</div>
+
+<script>
+(function(){
+  var phases = [
+    {n:1, name:"Platform-alapok és governance", status:"progress", issues:[
+      {id:"PLATFM-1", t:"Platform architektúra és komponensfüggőségi nyilvántartás", p:"high"},
+      {id:"PLATFM-5", t:"Üzletmenet-folytonossági és katasztrófa-helyreállítási terv (BCDR)", p:"urgent"},
+      {id:"PLATFM-6", t:"Build vs. Open Source döntési keret és komponensenkénti ADR-ek", p:"high"},
+      {id:"PLATFM-8", t:"Infrastruktúra-kapacitás, értékesíthető készlet és bővítési ROI modell", p:"high"},
+      {id:"PLATFM-9", t:"Magyar mikro- és KKV webszolgáltatási piac kutatása és termékpriorizálás", p:"high"}
+    ]},
+    {n:2, name:"IDM v1 (identitás, RBAC, audit)", status:"open", issues:[
+      {id:"PLATFM-4", t:"Közös jogosultsági modell (RBAC + adatbesorolás) alapjai", p:"high"}
+    ]},
+    {n:3, name:"Content Release réteg", status:"open", issues:[]},
+    {n:4, name:"Központi termékkatalógus", status:"open", issues:[
+      {id:"PLATFM-3", t:"Központi termék- és szolgáltatáskatalógus tervezése (mIT Start/Mid/Pro/Pro Plus)", p:"high"}
+    ]},
+    {n:5, name:"Belső mIT Portal v1", status:"open", issues:[]},
+    {n:6, name:"Messaging Gateway", status:"open", issues:[
+      {id:"PLATFM-2", t:"Központi Messaging Gateway tervezése és első e-mail csatorna", p:"high"}
+    ]},
+    {n:7, name:"Rendelés / számlázás / provisioning", status:"open", issues:[
+      {id:"PLATFM-7", t:"Felügyelt szolgáltatás-teljesítési lánc (rendelés → számlázás → provisioning → üzemeltetés)", p:"high"}
+    ]},
+    {n:8, name:"RAG és tudásréteg", status:"open", issues:[]}
+  ];
+  var unplaced = {name:"Nincs fázisba sorolva", issues:[
+    {id:"PLATFM-10", t:"Kis kapacitásigényű, felügyelt AI-funkciók pilot és ROI-validáció", p:"med"},
+    {id:"PLATFM-12", t:"ADR: AI Gateway / triázs-motor — Hermes Agent vs. alternatívák", p:"high"}
+  ]};
+
+  var rail = document.getElementById("rail");
+  var detail = document.getElementById("phaseDetail");
+
+  function statusLabel(s){
+    if(s==="progress") return "folyamatban";
+    if(s==="urgent") return "sürgős";
+    return "nem indult";
+  }
+
+  function renderDetail(name, issues, sub){
+    var html = "<h3>"+name+"</h3><p class=\"sub\">"+sub+"</p>";
+    if(issues.length===0){
+      html += "<p class=\"empty-note\">Ehhez a fázishoz még nincs Plane-feladat — az előtte lévő fázisok lezárása után nyílik meg.</p>";
+    } else {
+      html += "<div class=\"issuelist\">" + issues.map(function(i){
+        return "<div class=\"issue\"><span class=\"id\">"+i.id+"</span><span class=\"t\">"+i.t+"</span><span class=\"p "+i.p+"\">"+i.p+"</span></div>";
+      }).join("") + "</div>";
+    }
+    detail.innerHTML = html;
+    detail.classList.add("open");
+  }
+
+  var openPhase = null;
+  function togglePhase(el, name, issues, sub){
+    if(openPhase === el){
+      detail.classList.remove("open");
+      openPhase = null;
+      return;
+    }
+    openPhase = el;
+    renderDetail(name, issues, sub);
+  }
+
+  phases.forEach(function(ph){
+    var el = document.createElement("div");
+    el.className = "phase";
+    el.dataset.status = ph.status;
+    el.dataset.side = "platfm";
+    el.innerHTML = "<div class=\"node\">"+ph.n+"</div><div class=\"pname\">"+ph.name+"</div><div class=\"pcount\">"+ph.issues.length+" feladat</div>";
+    el.addEventListener("click", function(){
+      togglePhase(el, ph.n+". fázis · "+ph.name, ph.issues, "Roadmap-sorrend szerinti "+ph.n+". lépés · státusz: "+statusLabel(ph.status));
+    });
+    rail.appendChild(el);
+  });
+
+  var extra = document.createElement("div");
+  extra.className = "phase-extra";
+  extra.dataset.side = "platfm";
+  extra.innerHTML = "<div class=\"tag\">függőben</div><div class=\"pname\">"+unplaced.name+"</div><div class=\"pcount\">"+unplaced.issues.length+" feladat</div>";
+  extra.addEventListener("click", function(){
+    togglePhase(extra, unplaced.name, unplaced.issues, "PLATFM-10 pilot elindult izoláltan, mielőtt a roadmap besorolta volna — 2026-09-10-i döntés");
+  });
+  rail.appendChild(extra);
+
+  // ---------------- bridge ----------------
+  var leftG = document.getElementById("leftNodes");
+  var rightG = document.getElementById("rightNodes");
+  var connG = document.getElementById("connectors");
+
+  var rows = [
+    {
+      left:{t:"Esemény-forrás", sub:"MITHOME-102 · 103 · 105"},
+      right:{t:"AI-triázs pilot + ADR", sub:"PLATFM-10 · 12"},
+      trig:"már aktív", cls:"live"
+    },
+    {
+      left:{t:"Payload Users", sub:"MITHOME-90 · helyi auth"},
+      right:{t:"IDM v1 / RBAC", sub:"PLATFM-4 · 2. fázis"},
+      trig:"IDM v1 indulásakor", cls:""
+    },
+    {
+      left:{t:"Draft & régi CMS", sub:"MITHOME-92 · 93"},
+      right:{t:"Content Release réteg", sub:"3. fázis"},
+      trig:"réteg indulásakor", cls:""
+    },
+    {
+      left:{t:"Szolgáltatások oldal", sub:"Payload Services global"},
+      right:{t:"Termékkatalógus", sub:"PLATFM-3 · 4. fázis"},
+      trig:"katalógus MVP-nél", cls:""
+    },
+    {
+      left:{t:"Kapcsolati form", sub:"e-mail értesítés"},
+      right:{t:"Messaging Gateway", sub:"PLATFM-2 · 6. fázis"},
+      trig:"gateway kész", cls:""
+    },
+    {
+      left:{t:"Mongo mentés", sub:"MITHOME-40 · urgent"},
+      right:{t:"BCDR terv", sub:"PLATFM-5 · RPO 15p / RTO 4ó"},
+      trig:"production induláskor", cls:"hot"
+    }
+  ];
+
+  var top = 60, rowH = 68, boxW = 210, boxH = 46;
+  var leftX = 40, rightX = 940 - 40 - boxW;
+
+  rows.forEach(function(r, idx){
+    var y = top + idx*rowH;
+
+    var lg = document.createElementNS("http://www.w3.org/2000/svg","g");
+    lg.setAttribute("class","node-card"); lg.setAttribute("data-side","mithome");
+    lg.setAttribute("transform","translate("+leftX+","+y+")");
+    lg.innerHTML = '<rect width="'+boxW+'" height="'+boxH+'" rx="8"></rect>'+
+      '<text x="14" y="19" class="node-title">'+r.left.t+'</text>'+
+      '<text x="14" y="34" class="node-sub">'+r.left.sub+'</text>';
+    leftG.appendChild(lg);
+
+    var rg = document.createElementNS("http://www.w3.org/2000/svg","g");
+    rg.setAttribute("class","node-card"); rg.setAttribute("data-side","platfm");
+    rg.setAttribute("transform","translate("+rightX+","+y+")");
+    rg.innerHTML = '<rect width="'+boxW+'" height="'+boxH+'" rx="8"></rect>'+
+      '<text x="14" y="19" class="node-title">'+r.right.t+'</text>'+
+      '<text x="14" y="34" class="node-sub">'+r.right.sub+'</text>';
+    rightG.appendChild(rg);
+
+    var x1 = leftX+boxW, y1 = y+boxH/2, x2 = rightX, y2 = y+boxH/2;
+    var mx = (x1+x2)/2;
+    var d = "M"+x1+","+y1+" C "+mx+","+y1+" "+mx+","+y2+" "+(x2-8)+","+y2;
+    var marker = r.cls==="live" ? "url(#arrowLive)" : (r.cls==="hot" ? "url(#arrowHot)" : "url(#arrow)");
+
+    var path = document.createElementNS("http://www.w3.org/2000/svg","path");
+    path.setAttribute("d", d);
+    path.setAttribute("class","flowpath "+r.cls);
+    path.setAttribute("marker-end", marker);
+    path.setAttribute("data-side","bridge");
+    connG.appendChild(path);
+
+    var label = document.createElementNS("http://www.w3.org/2000/svg","text");
+    label.setAttribute("x", mx);
+    label.setAttribute("y", y1 - 8);
+    label.setAttribute("text-anchor","middle");
+    label.setAttribute("class","conn-label"+(r.cls==="hot"?" hot":r.cls==="live"?" live":""));
+    label.setAttribute("data-side","bridge");
+    label.textContent = r.trig;
+    connG.appendChild(label);
+  });
+
+  // ghost connector: MITHOME-99 (cancelled) -> PLATFM-10
+  var ghostPath = document.createElementNS("http://www.w3.org/2000/svg","path");
+  var gx1 = 392, gy1 = 470+10, gx2 = rightX+8, gy2 = top + 0*rowH + boxH/2;
+  ghostPath.setAttribute("d","M"+gx1+","+gy1+" C "+(gx1-120)+","+gy1+" "+(gx2-40)+","+gy2+" "+gx2+","+gy2);
+  ghostPath.setAttribute("class","ghostpath");
+  connG.insertBefore(ghostPath, connG.firstChild);
+
+  // ---------------- epic progress ----------------
+  var epicItems = [
+    {id:"MITHOME-86", t:"Alapinstallálás: config, MongoDB adapter, admin route", done:true},
+    {id:"MITHOME-87", t:"Home/About/Services/Contact/Common Globals + JSON migráció", done:true},
+    {id:"MITHOME-88", t:"LegalPages collection", done:false},
+    {id:"MITHOME-89", t:"Partners + Media collection", done:false},
+    {id:"MITHOME-90", t:"Users collection: admin bejelentkezés", done:false},
+    {id:"MITHOME-91", t:"Frontend Local API átállás", done:false},
+    {id:"MITHOME-92", t:"Draft/preview és verziózás", done:false},
+    {id:"MITHOME-93", t:"Régi egyedi CMS leépítése", done:false},
+    {id:"MITHOME-94", t:"ContactSubmissions collection", done:false},
+    {id:"MITHOME-95", t:"Dokumentáció frissítése", done:false},
+    {id:"MITHOME-96", t:"Tesztek migrálása", done:false},
+    {id:"MITHOME-97", t:"Deploy/Docker frissítés", done:false},
+    {id:"MITHOME-102", t:"Esemény-emisszió — PLATFM-2 séma", done:false},
+    {id:"MITHOME-103", t:"Esemény-emisszió biztonsága", done:false},
+    {id:"MITHOME-105", t:"MITHOME-31 lezárása a pilottal", done:false}
+  ];
+  var epicBar = document.getElementById("epicBar");
+  epicItems.forEach(function(it){
+    var el = document.createElement("div");
+    el.className = "seg";
+    el.dataset.side = "mithome";
+    el.innerHTML = '<span class="state '+(it.done?"done":"open")+'"></span>'+
+      '<span class="id">'+it.id+'</span><span class="t">'+it.t+'</span>';
+    epicBar.appendChild(el);
+  });
+  var doneCount = epicItems.filter(function(i){return i.done;}).length;
+  document.getElementById("epicFill").style.width = Math.round(doneCount/epicItems.length*100)+"%";
+  document.getElementById("epicLabel").textContent = doneCount+" / "+epicItems.length+" kész";
+
+  // ---------------- filter ----------------
+  var buttons = document.querySelectorAll(".filterbar button");
+  buttons.forEach(function(btn){
+    btn.addEventListener("click", function(){
+      buttons.forEach(function(b){ b.setAttribute("aria-pressed", b===btn ? "true":"false"); });
+      var f = btn.dataset.filter;
+      document.querySelectorAll('[data-side="mithome"]').forEach(function(n){
+        n.classList.toggle("dim", f==="platfm");
+      });
+      document.querySelectorAll('[data-side="platfm"]').forEach(function(n){
+        n.classList.toggle("dim", f==="mithome");
+      });
+      document.querySelectorAll('[data-side="bridge"]').forEach(function(n){
+        n.classList.toggle("dim", f!=="all");
+      });
+    });
+  });
+})();
+</script>