docs: [verified] answer the six-month AI Architect assignment

scripts/browser/inline-controls.cjs

@@ -12,10 +12,19 @@ const fs = require('node:fs');
       const context = await browser.newContext({viewport: {width, height: 1000}, colorScheme: 'light'});
       const page = await context.newPage();
       await page.goto(`${base}/eldorado-v1/documentation/strategy/`, {waitUntil: 'networkidle'});
-      const panel = page.locator('.archify-panel--story');
+      await page.addStyleTag({content:'html {scroll-behavior:auto !important;}'});
+      await page.getByText('Conditional long-term Target operating model — not the six-month promise',{exact:true}).focus();
+      await page.keyboard.press('Enter');
+      const panel = page.locator('.archify-panel--story[data-diagram="strategy-target"]');
       const iframe = panel.locator(width > 700 ? '.story-desktop' : '.story-mobile');
       await iframe.scrollIntoViewIfNeeded();
       const frame = await (await iframe.elementHandle()).contentFrame();
+      const showControls = () => iframe.evaluate(n => {
+        scrollTo({top:n.getBoundingClientRect().top+scrollY-120,behavior:'instant'});
+        return new Promise(resolve=>requestAnimationFrame(()=>requestAnimationFrame(resolve)));
+      });
+      await showControls();
+      const activate = async selector => {await frame.locator(selector).focus(); await page.keyboard.press('Enter');};
       const theme = async value => {
         await page.waitForFunction(t => document.documentElement.dataset.theme === t, value);
         await frame.waitForFunction(t => document.documentElement.dataset.theme === t, value);
@@ -41,9 +50,9 @@ const fs = require('node:fs');
         assert(menu.y + menu.height <= viewport.y + viewport.height + 1, `${selector} clips vertically`);
       };
       const light = await frame.locator('body').evaluate(n => getComputedStyle(n).backgroundColor);
-      await frame.locator('#btn-theme').click(); await theme('dark');
+      await activate('#btn-theme'); await theme('dark');
       assert.notEqual(await frame.locator('body').evaluate(n => getComputedStyle(n).backgroundColor), light);
-      await frame.locator('#btn-theme').click(); await theme('light');
+      await activate('#btn-theme'); await theme('light');
       // Mobile portal theme control lives in the navigation drawer.
       const portalTheme = async target => {
         if (width <= 700) await page.getByRole('button', {name: 'Toggle navigation bar'}).click();
@@ -52,33 +61,34 @@ const fs = require('node:fs');
           if (await page.locator('html').getAttribute('data-theme') === target) break;
         }
         if (width <= 700) await page.getByRole('button', {name: 'Close navigation bar'}).click();
+        await showControls();
       };
       await portalTheme('dark'); await theme('dark');
       await portalTheme('light'); await theme('light');
       for (const preset of ['signal-flow', 'blueprint', 'editorial', 'classic']) {
-        await frame.locator('#btn-preset').click();
+        await activate('#btn-preset');
         await checkMenu('.preset-menu');
-        await frame.locator(`[data-preset-value="${preset}"]`).click();
+        await activate(`[data-preset-value="${preset}"]`);
         assert.equal(await frame.locator('html').getAttribute('data-preset'), preset);
       }
       // A theme change must not reload the iframe or lose the selected visual preset.
-      await frame.locator('#btn-preset').click();
-      await frame.locator('[data-preset-value="blueprint"]').click();
+      await activate('#btn-preset');
+      await activate('[data-preset-value="blueprint"]');
       await portalTheme('dark'); await theme('dark');
       assert.equal(await frame.locator('html').getAttribute('data-preset'), 'blueprint');
       const exports = [];
       for (const format of ['png', 'jpeg', 'webp', 'svg', 'svg-light', 'svg-dark', 'webm']) {
-        await frame.locator('#btn-export').click();
+        await activate('#btn-export');
         await checkMenu('.export-menu');
         if (format === 'webm' && await frame.locator('[data-format="webm"]').isDisabled()) {
           exports.push({format, unsupported: true});
-          await frame.locator('#btn-export').click();
+          await activate('#btn-export');
           continue;
         }
         console.log(`Export ${width} ${format}`);
         const [download] = await Promise.all([
           page.waitForEvent('download', {timeout: 60000}),
-          frame.locator(`[data-format="${format}"]`).click(),
+          activate(`[data-format="${format}"]`),
         ]);
         assert.equal(await download.failure(), null);
         const path = `${output}/${width}-${format}-${download.suggestedFilename()}`;
@@ -123,14 +133,16 @@ const fs = require('node:fs');
       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 frame.locator('#btn-theme').focus(); await page.keyboard.press('Enter'); 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}).first().focus();
       await page.keyboard.press('Enter');
       await page.waitForURL('**/strategy/roadmap/');
       await page.goBack({waitUntil:'domcontentloaded'});
       await page.waitForURL('**/strategy/target-operating-model/');
-      await page.getByRole('heading', {name:'Target operating model', exact:true, level:1}).waitFor();
+      await page.getByRole('heading', {name:'First six months as AI Architect', exact:true, level:1}).waitFor();
+      await page.getByText('Conditional long-term Target operating model — not the six-month promise',{exact:true}).focus();
+      await page.keyboard.press('Enter');
       const next = page.locator(`.archify-panel--story[data-diagram="strategy-target"] > .story-${width > 700 ? 'desktop' : 'mobile'}`);
       await next.scrollIntoViewIfNeeded();
       await (await (await next.elementHandle()).contentFrame()).waitForFunction(() => document.documentElement.dataset.theme === 'dark');