docs: [verified] connect skills-first Roadmap to autonomous Target

scripts/browser/roadmap.cjs

@@ -8,8 +8,8 @@ const fs = require('node:fs');
   const browser = await chromium.launch({headless:true, executablePath:process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE, args:['--no-sandbox']});
   const results = [];
   try {
-    // Intermediate widths must use the readable vertical Roadmap, not shrink five cards.
-    for (const width of [768, 1024, 1280]) {
+    // Intermediate widths must use the readable vertical Roadmap, not shrink the loop.
+    for (const width of [768, 1024]) {
       const context = await browser.newContext({viewport:{width,height:1000}, colorScheme:'light'});
       try {
         const page = await context.newPage();
@@ -31,7 +31,7 @@ const fs = require('node:fs');
             text:[...node.querySelectorAll('text')].map(t => ({text:t.textContent, box:t.getBoundingClientRect().toJSON(), size:parseFloat(getComputedStyle(t).fontSize)*t.getScreenCTM().a}))
           })).sort((a,b) => a.box.y-b.box.y || a.box.x-b.box.x)
         }));
-        assert.deepEqual(geometry.nodes.map(n => n.id), ['assessment','readiness','pilot','expansion','sustain']);
+        assert.deepEqual(geometry.nodes.map(n => n.id), ['skills','autonomy']);
         for (const [index, card] of geometry.nodes.entries()) {
           assert(card.text.length > 0, `${width}: missing text in ${card.id}`);
           assert(card.box.left >= 0 && card.box.top >= 0 && card.box.right <= geometry.width + 1 && card.box.bottom <= geometry.height + 1, `${width}: card outside iframe: ${card.id}`);
@@ -61,16 +61,16 @@ const fs = require('node:fs');
       assert.equal(response.status(), 200);
       assert.equal(await page.locator('h1').innerText(), 'Roadmap');
       const headings = page.locator('.strategy-content > h2');
-      assert.deepEqual((await headings.allTextContents()).map(s => s.replace(/\u200b/g, '')), ['1. Understand code quality and delivery','2. Fix critical readiness gaps','3. Run a bounded pilot','4. Expand only on evidence','5. Sustain and improve']);
+      assert.deepEqual((await headings.allTextContents()).map(s => s.replace(/\u200b/g, '')), ['Two stages toward Target','Stage 1: Delivery first','Improve within each phase','Delivery in practice']);
       const text = await page.locator('.strategy-content').innerText();
-      for (const marker of ['baseline findings', 'process map', 'prioritized gaps', 'alongside the pilot', 'Recommended sequence']) assert(text.includes(marker), marker);
+      for (const marker of ['Humans direct, guide and review throughout', 'Delivery keeps improving', 'system-logic source', 'baseline', 'Target operating model']) assert(text.includes(marker), marker);
       assert(!text.includes('Supporting gate evidence and hold conditions\n\nThese are'));
       if (width < 700) await page.getByRole('button', {name:'Toggle navigation bar'}).click();
       const menu = page.locator('.theme-doc-sidebar-menu .menu__link').filter({visible:true});
       await menu.first().waitFor({state:'visible'});
       assert.deepEqual((await menu.allTextContents()).slice(0,2), ['Target','Roadmap']);
       if (width < 700) await page.getByRole('button', {name:'Close navigation bar'}).click();
-      const panel = page.locator('.archify-panel--story');
+      const panel = page.locator('.archify-panel--story').first();
       const iframe = panel.locator(width > 700 ? '.story-desktop' : '.story-mobile');
       await iframe.scrollIntoViewIfNeeded();
       const frame = await (await iframe.elementHandle()).contentFrame();
@@ -92,7 +92,7 @@ const fs = require('node:fs');
         width:innerWidth, height:innerHeight,
         minLabel:Math.min(...[...svg.querySelectorAll('text[data-node-label]')].map(n => parseFloat(getComputedStyle(n).fontSize)*n.getScreenCTM().a))
       }));
-      assert.deepEqual(geometry.nodes.map(n => n.id), ['assessment','readiness','pilot','expansion','sustain']);
+      assert.deepEqual(geometry.nodes.map(n => n.id), ['skills','autonomy']);
       for (const n of geometry.nodes) assert(n.x >= 0 && n.y >= 0 && n.right <= geometry.width + 1 && n.bottom <= geometry.height + 1);
       assert(geometry.minLabel >= 10, `readable node labels: ${geometry.minLabel}`);
       for (let i=1; i<geometry.nodes.length; i++) {
@@ -125,9 +125,9 @@ const fs = require('node:fs');
       const [download] = await Promise.all([page.waitForEvent('download'), frame.locator('[data-format="svg"]').click()]);
       assert.equal(await download.failure(), null);
       await download.saveAs(`${output}/${width}.svg`);
-      assert(fs.readFileSync(`${output}/${width}.svg`, 'utf8').includes('Understand today'));
+      assert(fs.readFileSync(`${output}/${width}.svg`, 'utf8').includes('Adopt skills'));
       assert(fs.readFileSync(`${output}/${width}.svg`, 'utf8').includes('eldorado-roadmap-typography'));
-      for (const id of ['assessment','readiness','pilot','expansion','sustain']) {
+      for (const id of ['skills','autonomy']) {
         await frame.locator(`svg[role="img"] [data-node-id="${id}"]`).screenshot({path:`${output}/${width}-${id}-card.png`});
       }
       const opener = panel.getByRole('button', {name:/^Expand /});
@@ -159,6 +159,6 @@ const fs = require('node:fs');
       fs.writeFileSync(`${output}/results.json`, JSON.stringify(results,null,2));
       await context.close();
     }
-    console.log(`PASS ${results.length} Roadmap viewports: visible stages/outputs, sidebar, diagram geometry, controls, export and links`);
+    console.log(`PASS ${results.length} Roadmap viewports: three-level story, sidebar, diagram geometry, controls, export and links`);
   } finally {await browser.close();}
 })().catch(error => {console.error(error); process.exitCode = 1;});