Merge pull request #571 from pbakaus/codex/issue-565-sketch-timeout

Fix stalled missing decision comps
2026-09-12 06:06:37 +03:00 · 2026-08-13 17:06:43 -04:00
parent 628509b948 3a26dcb809
commit 504b8f2a22
2 changed files with 130 additions and 13 deletions
@@ -483,8 +483,9 @@ function page() {
    option.body && option.thesis ? `<p class="detail more">${esc(option.body)}</p>` : '',
  ].filter(Boolean).join('\n            ');
  const media = (option) => {
-    const inspiration = option.heroSrc ? `<figure class="pip" title="Inspiration: the world this direction draws from. Your page will not look like this image.">
-              <img src="${esc(option.heroSrc)}" alt="">
+    const inspirationSrc = option.heroSrc || option.boardSrc;
+    const inspiration = inspirationSrc ? `<figure class="pip" title="Inspiration: the world this direction draws from. Your page will not look like this image.">
+              <img src="${esc(inspirationSrc)}" alt="">
              <figcaption>inspiration</figcaption>
            </figure>` : '';
    const details = hasBack(option) ? flipChip('Details') : '';
@@ -492,10 +493,12 @@ function page() {
    // and a declined card's comp slot is ignored outright.
    if (thumbOnly(option)) return '';
    if (faceComp(option)) {
+      const textOnlyFacts = backFacts(option);
      return `<div class="media comp-pending" data-comp="${esc(option.compSrc)}">
            <div class="shimmer"><span class="comp-note">rendering&hellip;</span></div>
            <img class="comp" alt="" hidden>
            ${inspiration}
+            <template class="text-only-facts">${textOnlyFacts}</template>
            <div class="chips">${expandChip}${details}</div>
          </div>`;
    }
@@ -1018,17 +1021,42 @@ ${buildPath?.toggle ? `<div id="bp-confirm" role="dialog" aria-modal="true" aria
    // A live elapsed count is the difference between "working" and "frozen".
    const tick = setInterval(() => { if (note) note.textContent = 'rendering · ' + Math.round((Date.now() - started) / 1000) + 's'; }, 1000);
    const settle = () => { clearInterval(tick); m.classList.remove('comp-pending', 'stand-in'); m.querySelector('.shimmer')?.remove(); m.querySelector('.stand-in-label')?.remove(); };
-    const standIn = () => {
+    const fallback = () => {
      const pip = m.querySelector('.pip img');
-      if (!pip || m.classList.contains('stand-in')) return;
-      img.src = pip.getAttribute('src'); img.hidden = false;
-      m.classList.add('stand-in');
-      m.querySelector('.shimmer')?.remove();
-      clearInterval(tick);
-      const label = document.createElement('p');
-      label.className = 'stand-in-label';
-      label.textContent = 'inspiration · comp pending';
-      m.appendChild(label);
+      if (pip) {
+        if (m.classList.contains('stand-in')) return false;
+        img.src = pip.getAttribute('src'); img.hidden = false;
+        m.classList.add('stand-in');
+        m.querySelector('.shimmer')?.remove();
+        clearInterval(tick);
+        const label = document.createElement('p');
+        label.className = 'stand-in-label';
+        label.textContent = 'inspiration · comp pending';
+        m.appendChild(label);
+        return false;
+      }
+
+      // No comp and no inspiration is the text-only card the payload would
+      // have rendered without a comp declaration. Bring the complete read
+      // forward before removing the now-unreachable back face.
+      const card = m.closest('.card');
+      const front = card?.querySelector('.face.front');
+      const body = front?.querySelector('.body');
+      const back = card?.querySelector('.face.back');
+      const textOnlyFacts = m.querySelector('template.text-only-facts');
+      const choose = body?.querySelector(':scope > button.choose');
+      if (body && textOnlyFacts && choose) {
+        const plainDetail = body.querySelector(':scope > .detail:not(.more)');
+        [...body.children].filter((el) => el.classList.contains('fact') || el.matches('.detail.more')).forEach((el) => el.remove());
+        choose.before(textOnlyFacts.content.cloneNode(true));
+        if (plainDetail) choose.before(plainDetail);
+      }
+      card?.classList.remove('flipped');
+      front?.classList.add('text-only');
+      back?.remove();
+      settle();
+      m.remove();
+      return true;
    };
    const tryLoad = () => {
      // A slot the user flipped back out of leaves the DOM; let its loop die.
@@ -1037,7 +1065,7 @@ ${buildPath?.toggle ? `<div id="bp-confirm" role="dialog" aria-modal="true" aria
      probe.onload = () => { landTracker.last = Date.now(); img.src = probe.src; img.hidden = false; settle(); };
      probe.onerror = () => {
        const quiet = Date.now() - landTracker.last > 240000;
-        if (Date.now() - started > 240000 && quiet) standIn();
+        if (Date.now() - started > 240000 && quiet && fallback()) return;
        setTimeout(tryLoad, m.classList.contains('stand-in') ? 5000 : 2500);
      };
      probe.src = url + (url.includes('?') ? '&' : '?') + 't=' + Date.now();
@@ -315,6 +315,95 @@ describe('new-work-e2e: serve-question decision page', () => {
    }
  });

+  it('(e1) a missing comp without inspiration settles into a complete text-only card', async () => {
+    const cwd = makeWorkspace();
+    const key = 'missing-comp';
+    const board = makeFakeImage(cwd, 'board fallback', 'board-fallback.png');
+    const payload = {
+      title: 'Choose the visual world',
+      options: [
+        {
+          id: 'assigned', label: 'Shotengai Chalkboard', kicker: 'THE ROLL',
+          thesis: 'A hand-lettered neighborhood noticeboard.',
+          body: 'Program notes explain how the board changes through the day.',
+          palette: ['#18251d', '#f2e8cb'], materials: ['chalk', 'painted timber'],
+          viewport: 'The daily program fills a ruled community board.',
+          case: 'The audience already reads this visual language.',
+          risk: 'Can become nostalgic if the type loses discipline.',
+          comp: path.join(cwd, '.impeccable', 'mocks', 'decision', 'missing.webp'),
+        },
+        {
+          id: 'kept-only', label: 'Kept Line Only',
+          kept: 'Keep the hand-painted timetable as the organizing device.',
+          comp: path.join(cwd, '.impeccable', 'mocks', 'decision', 'kept-missing.webp'),
+        },
+        {
+          id: 'body-only', label: 'Body Line Only',
+          thesis: 'A compact neighborhood notice.',
+          body: 'Body copy must remain present exactly once.',
+          comp: path.join(cwd, '.impeccable', 'mocks', 'decision', 'body-missing.webp'),
+        },
+        {
+          id: 'plain-body', label: 'Plain Body',
+          body: 'Plain body follows the promoted facts.',
+          viewport: 'A compact neighborhood notice fills the first viewport.',
+          comp: path.join(cwd, '.impeccable', 'mocks', 'decision', 'plain-body-missing.webp'),
+        },
+        {
+          id: 'board-only', label: 'Board Fallback',
+          board,
+          comp: path.join(cwd, '.impeccable', 'mocks', 'decision', 'board-missing.webp'),
+        },
+      ],
+      reroll: true,
+      steer: true,
+    };
+    const { url } = await startDaemon(cwd, payload, key);
+    try {
+      const context = await browser.newContext();
+      await context.addInitScript(() => {
+        const realNow = Date.now.bind(Date);
+        let offset = 0;
+        Date.now = () => realNow() + offset;
+        window.__advanceDecisionClock = (ms) => { offset += ms; };
+      });
+      const page = await context.newPage();
+      await page.goto(url, { waitUntil: 'load' });
+      await page.waitForSelector('.card[data-id="assigned"] .media.comp-pending');
+
+      await page.evaluate(() => window.__advanceDecisionClock(241000));
+      await page.waitForFunction(() => ['assigned', 'kept-only', 'body-only', 'plain-body'].every((id) =>
+        !document.querySelector(`.card[data-id="${id}"] .media`)), null, { timeout: 6000 });
+      await page.waitForSelector('.card[data-id="board-only"] .media.stand-in');
+
+      const faceClass = await page.getAttribute('.card[data-id="assigned"] .face.front', 'class');
+      const back = await page.$('.card[data-id="assigned"] .face.back');
+      const frontRead = await page.$eval('.card[data-id="assigned"] .face.front', (el) => el.textContent);
+      const keptOnlyRead = await page.$eval('.card[data-id="kept-only"] .face.front', (el) => el.textContent);
+      const bodyOnlyRead = await page.$eval('.card[data-id="body-only"] .face.front', (el) => el.textContent);
+      const plainBodyOrder = await page.$$eval('.card[data-id="plain-body"] .body > .fact, .card[data-id="plain-body"] .body > .detail',
+        (els) => els.map((el) => el.className));
+      const boardFallbackLabel = await page.$eval('.card[data-id="board-only"] .stand-in-label', (el) => el.textContent);
+      await context.close();
+
+      assert.match(faceClass, /text-only/, 'the settled card uses the text-only layout');
+      assert.equal(back, null, 'the settled card has no unreachable back face');
+      assert.match(frontRead, /First viewport/, 'the full first-viewport fact moves to the front');
+      assert.match(frontRead, /The case/, 'the full case moves to the front');
+      assert.match(frontRead, /Risk/, 'the risk remains readable after the media collapses');
+      assert.match(frontRead, /Program notes explain/, 'thesis-linked body prose moves off the removed back face');
+      assert.match(keptOnlyRead, /Keep the hand-painted timetable/, 'kept-only content survives without a back face');
+      assert.equal(bodyOnlyRead.match(/Body copy must remain present exactly once\./g)?.length, 1,
+        'body prose already on a no-back front is not duplicated');
+      assert.deepEqual(plainBodyOrder, ['fact', 'detail'],
+        'thesis-less body prose follows the facts promoted from the missing comp');
+      assert.equal(boardFallbackLabel, 'inspiration · comp pending', 'board-only art remains as the labeled fallback');
+    } finally {
+      await stopDaemon(cwd, key);
+      rmSync(cwd, { recursive: true, force: true });
+    }
+  });
+
  it('(e2) verdicts route the deck: declined cards demote, reorder to the end, and stay adoptable', async () => {
    const cwd = makeWorkspace();
    const key = 'verdicts';