docs: [verified] connect Strategy through practical Delivery journey

scripts/browser/connected-journey.cjs

@@ -0,0 +1,8 @@
+const {chromium}=require('playwright');
+const fs=require('node:fs');const assert=require('node:assert/strict');
+(async()=>{
+ const base=process.argv[2]||'http://127.0.0.1:4173';const out=`.cache/journey-${process.argv[3]||'candidate'}`;fs.mkdirSync(out,{recursive:true});
+ const b=await chromium.launch({executablePath:process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE,args:['--no-sandbox']});const results=[];
+ const steps=[['target-operating-model','roadmap'],['roadmap','stage-01-skills-adoption'],['stage-01-skills-adoption','baseline'],['baseline','measurement'],['measurement','skills-quality'],['skills-quality','skills-governance'],['skills-governance','skills-quality'],['skills-quality','skills-adoption'],['skills-adoption','skills-maintenance'],['skills-maintenance','skills-quality'],['skills-quality','measurement/validated-task-success'],['measurement/validated-task-success','skills-quality'],['skills-maintenance','stage-02-autonomous-agent'],['stage-02-autonomous-agent','stage-01-skills-adoption']];
+ try{for(const width of [1440,390]){const p=await b.newPage({viewport:{width,height:900}});for(const [from,to]of steps){await p.goto(`${base}/eldorado-v1/documentation/strategy/${from}/`,{waitUntil:'networkidle'});const href=`/eldorado-v1/documentation/strategy/${to}/`;const link=p.locator(`article a[href="${href}"]`).filter({visible:true}).first();assert(await link.count(),`${from} → ${to}`);await link.scrollIntoViewIfNeeded();await p.waitForLoadState('networkidle');await link.click();await p.waitForURL(`${base}${href}`);await p.locator('article h1').waitFor();results.push({width,from,to,clicked:true});fs.writeFileSync(`${out}/results.json`,JSON.stringify(results,null,2))}await p.close()}console.log(`PASS ${results.length} real reader handoffs and feedback links`)}finally{await b.close()}
+})().catch(e=>{console.error(e);process.exitCode=1});

scripts/browser/inline-controls.cjs

@@ -125,7 +125,7 @@ const fs = require('node:fs');
       await page.screenshot({path:`${output}/${width}.png`, fullPage:true});
       await frame.locator('#btn-theme').click(); await theme('dark');
       // Exercise keyboard navigation without racing the portal's smooth scroll.
-      await page.locator('.strategy-content a[href$="/strategy/roadmap/"]').filter({visible:true}).focus();
+      await page.locator('.strategy-content a[href$="/strategy/roadmap/"]').filter({visible:true}).first().focus();
       await page.keyboard.press('Enter');
       await page.waitForURL('**/strategy/roadmap/');
       await page.goBack({waitUntil:'domcontentloaded'});

scripts/browser/skills-exports.cjs

@@ -7,7 +7,7 @@ const assert=require('node:assert/strict');
  const browser=await chromium.launch({executablePath:process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE,args:['--no-sandbox']});
  const results=[];
  try {
-  for(const topic of ['measurement','baseline','governance','quality','adoption','maintenance']) for(const width of [1440,1024,390,320]){
+  for(const topic of ['measurement','baseline','governance','quality','adoption','maintenance','stage01','stage02']) for(const width of [1440,1024,390,320]){
    const spec=JSON.parse(fs.readFileSync(`diagrams/strategy-${topic}${width<=1100?'-mobile':''}.architecture.json`));
    const page=await browser.newPage({viewport:{width:1200,height:1000}});
    await page.goto('file://'+path.resolve(`${dir}/${topic}-${width}.svg`));
@@ -20,17 +20,23 @@ const assert=require('node:assert/strict');
     // text presence alone cannot detect one label hiding another.
     const labels=[...svg.querySelectorAll('g[data-edge-id]')].filter(el=>el.querySelector('text')).map(el=>({id:el.dataset.edgeId,box:el.getBoundingClientRect()}));
     const labelOverlaps=[];
+    const nodes=[...svg.querySelectorAll('[data-node-id]')].map(el=>({id:el.dataset.nodeId,box:el.getBoundingClientRect()}));
+    const labelNodeOverlaps=[];
+    for(const a of labels)for(const b of nodes){
+     if(Math.min(a.box.right,b.box.right)>Math.max(a.box.left,b.box.left)&&Math.min(a.box.bottom,b.box.bottom)>Math.max(a.box.top,b.box.top))labelNodeOverlaps.push([a.id,b.id]);
+    }
     for(let i=0;i<labels.length;i++)for(let j=i+1;j<labels.length;j++){
      const a=labels[i],b=labels[j];
      if(Math.min(a.box.right,b.box.right)>Math.max(a.box.left,b.box.left)&&Math.min(a.box.bottom,b.box.bottom)>Math.max(a.box.top,b.box.top))labelOverlaps.push([a.id,b.id]);
     }
-    return {labelOverlaps,viewBox:[v.width,v.height],nodes:[...svg.querySelectorAll('[data-node-id]')].map(n=>n.dataset.nodeId),edges:[...svg.querySelectorAll('path[data-edge-id]')].map(n=>n.dataset.edgeId),text:svg.textContent,issues};
+    return {labelOverlaps,labelNodeOverlaps,viewBox:[v.width,v.height],nodes:[...svg.querySelectorAll('[data-node-id]')].map(n=>n.dataset.nodeId),edges:[...svg.querySelectorAll('path[data-edge-id]')].map(n=>n.dataset.edgeId),text:svg.textContent,issues};
    });
    assert.deepEqual(measured.viewBox,spec.meta.viewBox);
    assert.deepEqual(measured.nodes.sort(),spec.components.map(n=>n.id).sort());
    assert.deepEqual(measured.edges.sort(),spec.connections.map(e=>e.id).sort());
    assert.deepEqual(measured.issues,[]);
    assert.deepEqual(measured.labelOverlaps,[],`${topic}-${width}: rendered edge labels overlap`);
+   assert.deepEqual(measured.labelNodeOverlaps,[],`${topic}-${width}: edge label obscures a node`);
    for(const n of spec.components){assert(measured.text.includes(n.label));assert(measured.text.includes(n.tag));for(const line of n.sublabel.split('\n'))assert(measured.text.includes(line));}
    for(const e of spec.connections)if(e.label)assert(measured.text.includes(e.label));
    if(width===1440){

scripts/browser/skills-measurement.cjs

@@ -17,7 +17,9 @@ const fs = require('node:fs');
       assert.equal(response.status(), 200);
       assert.equal(await page.locator('h1').innerText(), 'Skills Measurement');
       assert((await page.title()).startsWith('Skills Measurement |'));
-      assert.equal(await page.locator('.strategy-content details').count(), 0);
+      assert.equal(await page.locator('.strategy-content details').count(), 1);
+      assert.equal(await page.locator('.strategy-content details[open]').count(), 0);
+      assert((await page.locator('.strategy-content details summary').innerText()).includes('Implementation status'));
       assert.equal(await page.locator('.strategy-content h2').count(), 2);
       assert.deepEqual((await page.locator('.strategy-content h3').allTextContents()).map(text => text.replaceAll('\u200b', '')), ['Workflow effectiveness', 'Skills effectiveness & health']);
       assert.equal(await page.locator('.strategy-content ol').count(), 2);

scripts/browser/skills-stories.cjs

@@ -6,10 +6,10 @@ const assert=require('node:assert/strict');
  const out=`.cache/skills-${process.argv[3]||'candidate'}`;fs.mkdirSync(out,{recursive:true});
  const browser=await chromium.launch({executablePath:process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE,args:['--no-sandbox']}); const results=[];
  try {
- for(const topic of ['measurement','baseline','governance','quality','adoption','maintenance']) for(const width of [1440,1024,390,320]) {
+ for(const topic of ['measurement','baseline','governance','quality','adoption','maintenance','stage01','stage02']) for(const width of [1440,1024,390,320]) {
   console.log(`Checking ${topic} at ${width}px`);
   const page=await browser.newPage({viewport:{width,height:900},colorScheme:'light'});const errors=[];page.on('pageerror',e=>errors.push(e.message));
-  const route=['measurement','baseline'].includes(topic)?topic:`skills-${topic}`;
+  const route=topic==='stage01'?'stage-01-skills-adoption':topic==='stage02'?'stage-02-autonomous-agent':['measurement','baseline'].includes(topic)?topic:`skills-${topic}`;
   assert.equal((await page.goto(`${base}/eldorado-v1/documentation/strategy/${route}/`,{waitUntil:'networkidle'})).status(),200);
   const panel=page.locator('.archify-panel--skills');assert.equal(await panel.count(),1);
   const iframe=panel.locator(width>1100?'.story-desktop':'.story-mobile');await iframe.scrollIntoViewIfNeeded();

scripts/browser/strategy-navigation.cjs

@@ -81,6 +81,16 @@ const fs = require('node:fs');
             await closeMenu();
           }
           assert(!await page.evaluate(() => document.documentElement.scrollWidth > innerWidth), `${width}: overflow on ${id}`);
+          if(width===1440 || width===390) {
+            // Full-page capture does not trigger below-fold lazy iframes.
+            for(const iframe of await page.locator('.archify-panel--story > iframe').filter({visible:true}).all()) {
+              await iframe.scrollIntoViewIfNeeded();
+              const frame=await (await iframe.elementHandle()).contentFrame();
+              await frame.locator('.diagram-container > svg').waitFor();
+            }
+            await page.evaluate(()=>scrollTo({top:0,behavior:'instant'}));
+            await page.screenshot({path:`${output}/${width}-${id.replaceAll('/','-')}.png`,fullPage:true,animations:'disabled'});
+          }
         }
         assert((await page.locator('article').innerText()).includes('not deployed autonomy'));
         await page.screenshot({path:`${output}/${width}-stage-02.png`, fullPage:true, animations:'disabled'});

scripts/browser/strategy-story.cjs

@@ -24,7 +24,7 @@ const fs=require('node:fs');
    assert.equal(geometry.nodes.length,(source.components||source.nodes).length,id);
    for(const n of geometry.nodes) assert(n.x>=0 && n.y>=0 && n.right<=geometry.width+1 && n.bottom<=geometry.height+1,`${id} ${width} clipped ${JSON.stringify(n)} / ${geometry.height}`);
    const data=await page.locator('.strategy-content').evaluate(el=>({words:el.innerText.trim().split(/\s+/).length,overflow:document.documentElement.scrollWidth>innerWidth,openDetails:el.querySelectorAll('details[open]').length}));
-   assert(data.words<=(id==='measurement'?1500:id==='roadmap'?600:200),id);assert(!data.overflow,id);assert.equal(data.openDetails,0,id);
+   assert(data.words<=(id==='measurement'?1600:id==='roadmap'?600:550),id);assert(!data.overflow,id);assert.equal(data.openDetails,0,id);
    await page.evaluate(()=>scrollTo({top:0,behavior:'instant'}));await page.screenshot({path:`.cache/story-${label}/${width}-${id}.png`,fullPage:true});
    const opener=panel.getByRole('button',{name:/^Expand /});await opener.click();
    const close=panel.getByRole('button',{name:'Close full-screen diagram',exact:true});await close.waitFor({state:'visible'});
@@ -35,7 +35,7 @@ const fs=require('node:fs');
    // Native close clears open before the queued React onClose restores focus.
    // Wait for its unmount before focusing the next keyboard interaction target.
    await panel.locator('dialog iframe').waitFor({state:'detached'});assert(await opener.evaluate(n=>n===document.activeElement));
-   if(id !== 'measurement') {
+   if(await page.locator('.strategy-content > details > summary').count()) {
    const summary=page.locator('.strategy-content > details > summary').first();
    await summary.focus();await page.keyboard.press('Enter');
    await page.waitForFunction(()=>document.querySelector('.strategy-content > details').open);