docs: center Target lifecycle on autonomous agent

scripts/browser/inline-controls.cjs

@@ -88,7 +88,7 @@ const fs = require('node:fs');
         if (format.startsWith('svg')) {
           const valid = await page.evaluate(xml => {
             const doc = new DOMParser().parseFromString(xml, 'image/svg+xml');
-            return !doc.querySelector('parsererror') && doc.documentElement.localName === 'svg' && doc.querySelectorAll('text').length > 0;
+            return !doc.querySelector('parsererror') && doc.documentElement.localName === 'svg' && doc.querySelectorAll('text').length > 0 && doc.querySelector('#eldorado-cycle-export')?.textContent.includes('stroke-dasharray: 3 9');
           }, bytes.toString());
           assert(valid, format);
         } else {
@@ -117,10 +117,13 @@ const fs = require('node:fs');
       await close.focus(); await page.keyboard.press('Escape');
       assert(await opener.evaluate(n => n === document.activeElement));
       await iframe.scrollIntoViewIfNeeded();
-      await page.evaluate(() => scrollTo(0, 0));
+      await page.evaluate(() => scrollTo({top: 0, behavior: 'instant'}));
+      await page.evaluate(() => new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve))));
       await page.screenshot({path:`${output}/${width}.png`, fullPage:true});
       await frame.locator('#btn-theme').click(); await theme('dark');
-      await page.locator('.strategy-content a[href$="/strategy/target-operating-model/"]').filter({visible:true}).click();
+      // Exercise keyboard navigation without racing the portal's smooth scroll.
+      await page.locator('.strategy-content a[href$="/strategy/target-operating-model/"]').filter({visible:true}).focus();
+      await page.keyboard.press('Enter');
       await page.waitForURL('**/strategy/target-operating-model/');
       await page.getByRole('heading', {name:'Target operating model', exact:true, level:1}).waitFor();
       const next = page.locator(`.archify-panel--story[data-diagram="strategy-target"] > .story-${width > 700 ? 'desktop' : 'mobile'}`);

scripts/browser/sdlc-cycle.cjs

@@ -19,7 +19,7 @@ const fs = require('node:fs');
       await page.waitForURL('**/strategy/target-operating-model/');
       for (const route of ['target-operating-model/', '']) {
         await page.goto(`${base}/eldorado-v1/documentation/strategy/${route}`, {waitUntil:'networkidle'});
-        if (width === 1440) assert.equal(await page.locator('.theme-doc-sidebar-menu .menu__link').first().innerText(), 'Target operating model');
+        if (width === 1440) assert.equal(await page.locator('.theme-doc-sidebar-menu .menu__link').first().innerText(), 'Target');
         const iframe = page.locator(`.archify-panel--story > .story-${width > 700 ? 'desktop' : 'mobile'}`);
         await iframe.scrollIntoViewIfNeeded();
         const frame = await (await iframe.elementHandle()).contentFrame();
@@ -32,15 +32,36 @@ const fs = require('node:fs');
             const box = n.querySelector('rect').getBoundingClientRect();
             return [...n.querySelectorAll('text')].filter(t => {const b=t.getBoundingClientRect();return b.left<box.left||b.right>box.right||b.top<box.top||b.bottom>box.bottom;}).map(t=>t.textContent);
           });
-          return {labels,edges,overflow};
+          const relationships = [...svg.querySelectorAll('path[data-edge-id]')].map(n => ({id:n.dataset.edgeId,from:n.dataset.edgeFrom,to:n.dataset.edgeTo,dash:getComputedStyle(n).strokeDasharray,arrow:n.getAttribute('marker-end')}));
+          const nodes = [...svg.querySelectorAll('[data-node-id]')].map(n => {const r=n.querySelector('rect').getBoundingClientRect();return {id:n.dataset.nodeId,x:r.x+r.width/2,y:r.y+r.height/2};});
+          return {labels,edges,overflow,relationships,nodes};
         });
-        const ids = ['scope','architecture','ui-ux','planning','delivery','uat','releases'];
+        const ids = ['scope','architecture','ui-ux','planning','delivery','uat','security','releases'];
         assert.deepEqual(metrics.edges.map(e=>e.slice(0,2)), ids.map((id,i)=>[id,ids[(i+1)%ids.length]]));
         assert(metrics.edges.every(e=>e[2]?.startsWith('url(')), 'all stages must have arrowheads');
+        assert.equal(metrics.nodes.length, 18);
+        const governs = metrics.relationships.filter(e=>e.id.startsWith('govern-'));
+        const contributions = metrics.relationships.filter(e=>e.id.startsWith('contribute-'));
+        assert.deepEqual(governs.map(e=>[e.from,e.to]), ids.map(id=>['agent',id]));
+        assert.deepEqual(contributions.map(e=>[e.from,e.to]), ids.map(id=>[`code-${id}`,id]));
+        assert(governs.every(e=>e.dash==='3px, 9px' && e.arrow?.startsWith('url(')));
+        assert(contributions.every(e=>e.dash==='12px, 8px' && e.arrow?.startsWith('url(')));
+        assert(metrics.relationships.some(e=>e.from==='humans' && e.to==='agent'));
+        if (width > 700) {
+          const agent = metrics.nodes.find(n=>n.id==='agent');
+          const phases = metrics.nodes.filter(n=>ids.includes(n.id));
+          for (const axis of ['x','y']) assert(Math.abs(agent[axis]-(Math.min(...phases.map(n=>n[axis]))+Math.max(...phases.map(n=>n[axis])))/2)<1);
+          for (const id of ids) {
+            const phase=phases.find(n=>n.id===id), code=metrics.nodes.find(n=>n.id===`code-${id}`);
+            assert(Math.hypot(code.x-agent.x,code.y-agent.y)>Math.hypot(phase.x-agent.x,phase.y-agent.y));
+          }
+        }
         assert(metrics.labels.every(n=>n.px>=14), JSON.stringify(metrics.labels));
         assert.deepEqual(metrics.overflow, []);
         assert(!await page.evaluate(()=>document.documentElement.scrollWidth>innerWidth));
-        await page.evaluate(()=>scrollTo(0,0));
+        await page.evaluate(()=>scrollTo({top:0,behavior:'instant'}));
+        await page.waitForFunction(()=>scrollY===0);
+        await page.evaluate(()=>new Promise(resolve=>requestAnimationFrame(()=>requestAnimationFrame(resolve))));
         await page.screenshot({path:`${output}/${width}-${route ? 'target' : 'landing'}.png`,fullPage:true});
         results.push({width,route,...metrics});
         fs.writeFileSync(`${output}/results.json`,JSON.stringify(results,null,2));

scripts/browser/strategy-story.cjs

@@ -19,18 +19,21 @@ const fs=require('node:fs');
     const nodes=[...svg.querySelectorAll('[data-node-id]')].map(n=>{const r=n.getBoundingClientRect();return {id:n.id,x:r.x,y:r.y,right:r.right,bottom:r.bottom};});
     return {width:innerWidth,height:innerHeight,nodes,svg:svg.getBoundingClientRect().toJSON(),minLabel:Math.min(...[...svg.querySelectorAll('text[data-node-label]')].map(n=>parseFloat(getComputedStyle(n).fontSize)*n.getScreenCTM().a))};
    });
-   assert(geometry.nodes.length>=5 && geometry.nodes.length<=(['index','target-operating-model'].includes(id)?9:7),id);
+   assert(geometry.nodes.length>=5 && geometry.nodes.length<=(['index','target-operating-model'].includes(id)?18:7),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<=200,id);assert(!data.overflow,id);assert.equal(data.openDetails,0,id);
-   await page.evaluate(()=>scrollTo(0,0));await page.screenshot({path:`.cache/story-${label}/${width}-${id}.png`,fullPage:true});
+   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'});
    assert.equal(await close.innerText(),'×');assert(await close.evaluate(n=>n===document.activeElement));
    const box=await close.boundingBox();assert.equal(box.width,44);assert.equal(box.height,44);
    await close.click();assert(await opener.evaluate(n=>n===document.activeElement));
    await opener.click();await close.waitFor({state:'visible'});await page.keyboard.press('Escape');await page.waitForFunction(()=>!document.querySelector('.archify-panel--story dialog').open);assert(await opener.evaluate(n=>n===document.activeElement));
-   const summary=page.locator('.strategy-content > details > summary').first();await summary.click();assert(await summary.evaluate(n=>n.parentElement.open));await summary.click();
+   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);
+   await page.keyboard.press('Enter');
    results.push({id,width,...data,geometry,modalClick:true,modalEscape:true,focusRestored:true,details:true});fs.writeFileSync(`.cache/story-${label}/results.json`,JSON.stringify(results,null,2));
   }
   await page.goto(`${base}/eldorado-v1/documentation/strategy/measurement/#validated-task-success`,{waitUntil:'networkidle'});