jamdesk 1.1.174 → 1.1.176

package/vendored/components/mdx/Prompt.tsx

@@ -12,6 +12,7 @@ import {
   type ReactNode,
 } from 'react';
 
+import { useBodyScrollLock } from '@/hooks/useBodyScrollLock';
 import { useOnClickOutside } from '@/hooks/useOnClickOutside';
 import { renderInlineMarkdown } from '@/lib/inline-markdown';
 import { decodePromptSource } from '@/lib/prompt-source-codec';
@@ -70,6 +71,197 @@ function ActionIcon({ action }: { action: ResolvedPromptAction['action'] }): Rea
   return null;
 }
 
+interface PromptCopyButtonProps {
+  copyState: CopyState;
+  className: string;
+  onCopy: () => void;
+}
+
+function PromptCopyButton({
+  copyState,
+  className,
+  onCopy,
+}: PromptCopyButtonProps): ReactElement {
+  const label = copyState === 'copied'
+    ? 'Copied'
+    : copyState === 'error'
+      ? 'Copy failed'
+      : 'Copy prompt';
+  return (
+    <button
+      type="button"
+      aria-label="Copy prompt"
+      title={label}
+      className={className}
+      data-copy-state={copyState}
+      onClick={onCopy}
+    >
+      <i
+        className={copyState === 'copied'
+          ? 'fa-solid fa-check text-[var(--color-success-text)]'
+          : copyState === 'error'
+            ? 'fa-solid fa-triangle-exclamation text-[var(--color-error-text)]'
+            : 'fa-regular fa-copy'}
+        aria-hidden="true"
+      />
+    </button>
+  );
+}
+
+interface PromptDialogProps {
+  isOpen: boolean;
+  prompt: string;
+  title?: string;
+  copyState: CopyState;
+  onCopy: () => void;
+  onClose: () => void;
+}
+
+const contrastSafeFocusClassName = [
+  'focus-visible:outline-none focus-visible:ring-2',
+  'focus-visible:ring-[var(--color-text-primary)] focus-visible:ring-offset-2',
+  'focus-visible:ring-offset-[var(--color-bg-primary)]',
+].join(' ');
+
+const promptUtilityClassName = [
+  'inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-[var(--radius-lg)]',
+  'text-[var(--color-text-tertiary)] transition-colors',
+  'hover:bg-[var(--color-bg-hover)]',
+  'hover:text-[var(--color-primary)]',
+  contrastSafeFocusClassName,
+].join(' ');
+
+const primaryActionClassName = [
+  'inline-flex min-h-10 min-w-0 items-center gap-2 px-4 py-2 text-sm font-semibold',
+  'prompt-primary-action bg-[var(--color-primary)] text-white transition-opacity cursor-pointer',
+  'hover:opacity-90',
+  contrastSafeFocusClassName,
+].join(' ');
+
+function PromptDialog({
+  isOpen,
+  prompt,
+  title,
+  copyState,
+  onCopy,
+  onClose,
+}: PromptDialogProps): ReactElement {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const focusFrameRef = useRef<number | null>(null);
+  useBodyScrollLock(isOpen);
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (isOpen && !dialog.open) {
+      dialog.showModal();
+      focusFrameRef.current = requestAnimationFrame(() => {
+        dialog.querySelector<HTMLButtonElement>('[aria-label="Close prompt"]')?.focus();
+      });
+    } else if (!isOpen && dialog.open) {
+      dialog.close();
+    }
+    return () => {
+      if (focusFrameRef.current !== null) cancelAnimationFrame(focusFrameRef.current);
+    };
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (event: KeyboardEvent): void => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        event.stopPropagation();
+        onClose();
+        return;
+      }
+      if (event.key !== 'Tab' || !dialogRef.current) return;
+      const focusable = Array.from(dialogRef.current.querySelectorAll<HTMLElement>(
+        'button, [href], [tabindex]:not([tabindex="-1"])',
+      )).filter((element) => !element.hasAttribute('disabled'));
+      if (focusable.length === 0) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown, true);
+    return () => window.removeEventListener('keydown', handleKeyDown, true);
+  }, [isOpen, onClose]);
+
+  return (
+    <dialog
+      ref={dialogRef}
+      aria-modal="true"
+      aria-label={title ?? 'Prompt'}
+      className="prompt-dialog m-auto max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-4xl overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-bg-primary)] p-0 text-[var(--color-text-primary)] shadow-[var(--shadow-lg)]"
+      onCancel={(event) => {
+        event.preventDefault();
+        onClose();
+      }}
+      onMouseDown={(event) => {
+        if (event.target === event.currentTarget) onClose();
+      }}
+    >
+      <div className="flex max-h-[calc(100dvh-2rem)] min-h-0 flex-col">
+        <div className="flex shrink-0 items-center justify-between gap-3 border-b border-[var(--color-border)] px-4 py-3">
+          <h2 className="prompt-dialog-title m-0 min-w-0 truncate text-sm font-semibold text-[var(--color-text-primary)]">
+            {title ?? 'Prompt'}
+          </h2>
+          <button
+            type="button"
+            aria-label="Close prompt"
+            className={promptUtilityClassName}
+            onClick={onClose}
+          >
+            <i className="fa-solid fa-xmark" aria-hidden="true" />
+          </button>
+        </div>
+        <div className="flex min-h-0 flex-1 gap-3 overflow-hidden p-4">
+          <pre
+            data-testid="prompt-dialog-source"
+            role="region"
+            aria-label="Prompt source"
+            tabIndex={0}
+            className={`m-0 min-h-0 min-w-0 flex-1 overflow-auto overscroll-contain whitespace-pre-wrap break-words font-mono text-sm leading-6 text-[var(--color-text-primary)] ${contrastSafeFocusClassName}`}
+          >
+            {prompt}
+          </pre>
+          <PromptCopyButton
+            copyState={copyState}
+            className={promptUtilityClassName}
+            onCopy={onCopy}
+          />
+        </div>
+        <span role="status" aria-live="polite" className="sr-only">
+          {copyState === 'copied' ? 'Copied' : copyState === 'error' ? 'Copy failed' : ''}
+        </span>
+      </div>
+      <style jsx>{`
+        .prompt-dialog::backdrop {
+          background: var(--color-text-primary);
+          opacity: 0.6;
+          backdrop-filter: blur(4px);
+        }
+        /* Outranks the docs themes' .prose h2 rules, which reach into the
+           dialog and would inflate this chrome heading. */
+        .prompt-dialog .prompt-dialog-title {
+          margin: 0;
+          font-size: 0.875rem;
+          line-height: 1.5;
+          font-weight: 600;
+          letter-spacing: normal;
+        }
+      `}</style>
+    </dialog>
+  );
+}
+
 export function Prompt({
   children,
   title,
@@ -84,9 +276,12 @@ export function Prompt({
 }: PromptProps): ReactElement {
   const [copyState, setCopyState] = useState<CopyState>('idle');
   const [menuOpen, setMenuOpen] = useState(false);
+  const [dialogOpen, setDialogOpen] = useState(false);
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const copyAttemptRef = useRef(0);
   const mountedRef = useRef(false);
+  const expandTriggerRef = useRef<HTMLButtonElement>(null);
+  const returnFocusFrameRef = useRef<number | null>(null);
   const menuBoundaryRef = useRef<HTMLDivElement>(null);
   const triggerRef = useRef<HTMLButtonElement>(null);
   const itemRefs = useRef<Array<HTMLAnchorElement | null>>([]);
@@ -105,6 +300,8 @@ export function Prompt({
   const hasTitle = Boolean(title?.trim());
   const shouldHidePrompt = hasTitle && (hidePrompt === true || hidePrompt === 'true');
   const authorIcon = resolveAuthorIcon(icon, iconType);
+  const hasDescription = description !== undefined;
+  const hasHeader = hasTitle || resolvedActions.length > 0;
 
   const closeMenu = useCallback(() => {
     setMenuOpen(false);
@@ -115,6 +312,13 @@ export function Prompt({
     triggerRef.current?.focus();
   }, []);
 
+  const closeDialog = useCallback(() => {
+    setDialogOpen(false);
+    returnFocusFrameRef.current = requestAnimationFrame(() => {
+      expandTriggerRef.current?.focus();
+    });
+  }, []);
+
   useOnClickOutside(menuBoundaryRef, closeMenu, menuOpen);
 
   useEffect(() => {
@@ -126,6 +330,12 @@ export function Prompt({
     };
   }, []);
 
+  useEffect(() => () => {
+    if (returnFocusFrameRef.current !== null) {
+      cancelAnimationFrame(returnFocusFrameRef.current);
+    }
+  }, []);
+
   useEffect(() => {
     if (menuOpen) itemRefs.current[0]?.focus();
   }, [menuOpen]);
@@ -193,157 +403,208 @@ export function Prompt({
   }, [closeMenuAndFocusTrigger, secondary.length]);
 
   const rootClassName = [
-    'not-prose my-4 min-w-0 max-w-full overflow-visible',
-    'rounded-[var(--radius-lg)] border border-[var(--color-border)]',
-    'bg-[var(--color-bg-secondary)] text-[var(--color-text-primary)]',
-    'shadow-[var(--shadow-sm)]',
+    'prompt-card-fern not-prose my-4 min-w-0 max-w-full overflow-visible',
+    'rounded-[calc(var(--radius-lg)+0.25rem)] border text-[var(--color-text-primary)]',
     className,
   ].filter(Boolean).join(' ');
 
-  const actionClassName = [
-    'inline-flex min-w-0 max-w-full items-center gap-2 rounded-[var(--radius-lg)]',
-    'border border-[var(--color-border)] px-3 py-2 text-sm font-medium',
-    'text-[var(--color-text-primary)] transition-colors cursor-pointer',
-    'hover:border-[var(--color-primary)] hover:text-[var(--color-primary)]',
-    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]',
-    'disabled:cursor-not-allowed disabled:opacity-50',
-  ].join(' ');
-
   return (
     <section data-testid="prompt-card" className={rootClassName}>
-      <div
-        data-testid={!hasTitle ? 'prompt-body-row' : undefined}
-        className={hasTitle
-          ? 'contents'
-          : 'flex min-w-0 max-w-full flex-wrap items-start gap-3 px-4 py-4'}
-      >
+      {hasHeader ? (
         <div
-          data-testid={hasTitle ? 'prompt-header' : undefined}
-          className={hasTitle
-            ? 'flex min-w-0 max-w-full items-center gap-3 px-4 pt-4'
-            : 'contents'}
+          data-testid="prompt-header"
+          className="flex min-w-0 flex-col items-stretch gap-3 px-4 py-3 sm:flex-row sm:items-center sm:justify-between sm:px-5"
         >
-          <span
-            data-testid="prompt-icon"
-            className="shrink-0 text-[var(--color-primary)]"
-            aria-hidden="true"
-          >
-            <Icon icon={authorIcon} size={18} />
-          </span>
           {hasTitle ? (
-            <h3 className="m-0 min-w-0 max-w-full break-words [overflow-wrap:anywhere] text-base font-semibold text-[var(--color-text-primary)]">
+            <h3 className="prompt-title m-0 w-full min-w-0 break-words [overflow-wrap:anywhere] text-base font-semibold text-[var(--color-text-primary)] sm:w-auto sm:flex-1">
               {title}
             </h3>
           ) : null}
-        </div>
-
-        {!shouldHidePrompt ? (
           <div
-            data-testid="prompt-preview"
-            className={`prompt-preview min-w-0 max-w-full text-sm leading-6 text-[var(--color-text-tertiary)]${hasTitle ? ' mx-4 mt-3' : ' flex-1'}${isSingleLine ? ' prompt-preview-single-line' : ''}`}
+            data-testid="prompt-actions"
+            className="flex min-w-0 max-w-full items-stretch justify-end self-end sm:ml-auto sm:self-auto"
           >
-            {description !== undefined ? renderInlineMarkdown(description) : children}
+            {primary ? (
+              <a
+                href={primary.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label={primary.label}
+                className={`${primaryActionClassName} ${secondary.length > 0 ? 'rounded-l-[var(--radius-lg)]' : 'rounded-[var(--radius-lg)]'}`}
+              >
+                <span aria-hidden="true"><ActionIcon action={primary.action} /></span>
+                <span className="min-w-0 truncate">{primary.label}</span>
+              </a>
+            ) : null}
+            {secondary.length > 0 ? (
+              <div ref={menuBoundaryRef} className="relative flex shrink-0">
+                <button
+                  ref={triggerRef}
+                  type="button"
+                  aria-label="More prompt actions"
+                  aria-haspopup="menu"
+                  aria-expanded={menuOpen}
+                  aria-controls={menuId}
+                  className={`${primaryActionClassName} min-w-10 rounded-r-[var(--radius-lg)] border-l border-[var(--color-bg-primary)] px-3`}
+                  onMouseDown={(event) => {
+                    if (menuOpen) event.preventDefault();
+                  }}
+                  onClick={() => {
+                    setMenuOpen((open) => !open);
+                    if (menuOpen) triggerRef.current?.focus();
+                  }}
+                >
+                  <i className="fa-solid fa-chevron-down text-xs" aria-hidden="true" />
+                </button>
+                {menuOpen ? (
+                  <div
+                    id={menuId}
+                    role="menu"
+                    aria-label="More prompt actions"
+                    className="absolute right-0 top-full z-20 mt-2 w-max max-w-[min(20rem,calc(100vw-2rem))] rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-bg-primary)] p-1 shadow-[var(--shadow-sm)]"
+                    onKeyDown={handleMenuKeyDown}
+                    onBlur={(event) => {
+                      if (!event.currentTarget.contains(event.relatedTarget)) closeMenu();
+                    }}
+                  >
+                    {secondary.map((action, index) => (
+                      <a
+                        key={`${action.label}-${action.href}-${index}`}
+                        ref={(node) => { itemRefs.current[index] = node; }}
+                        role="menuitem"
+                        tabIndex={-1}
+                        href={action.href}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        aria-label={action.label}
+                        className={`prompt-menu-item flex min-h-10 min-w-0 max-w-full cursor-pointer items-center gap-2 rounded-[var(--radius-lg)] px-3 py-2 text-sm text-[var(--color-text-primary)] hover:bg-[var(--color-border)] ${contrastSafeFocusClassName}`}
+                        onClick={closeMenuAndFocusTrigger}
+                      >
+                        <span aria-hidden="true"><ActionIcon action={action.action} /></span>
+                        <span className="min-w-0 truncate">{action.label}</span>
+                      </a>
+                    ))}
+                  </div>
+                ) : null}
+              </div>
+            ) : null}
+            {shouldHidePrompt && hasPrompt ? (
+              <PromptCopyButton
+                copyState={copyState}
+                className={`${promptUtilityClassName} ml-2`}
+                onCopy={copyPrompt}
+              />
+            ) : null}
           </div>
-        ) : null}
+        </div>
+      ) : null}
 
+      {!shouldHidePrompt ? (
         <div
-          data-testid="prompt-actions"
-          className={`flex min-w-0 max-w-full flex-wrap items-center gap-2${hasTitle ? ' px-4 pb-4 pt-3' : ' basis-full sm:ml-auto sm:basis-auto'}`}
+          data-testid="prompt-well"
+          className={`prompt-well mx-3 mb-3 flex min-w-0 items-start gap-3 rounded-[var(--radius-lg)] border bg-[var(--color-bg-primary)] px-3 py-3 sm:mx-4 sm:mb-4 sm:px-4 ${hasHeader ? '' : 'mt-3 sm:mt-4'}`}
         >
-          <button
-            type="button"
-            aria-label="Copy prompt"
-            className={actionClassName}
-            data-copy-state={copyState}
-            disabled={!hasPrompt}
-            onClick={copyPrompt}
+          <span
+            data-testid="prompt-icon"
+            className="mt-1 shrink-0 text-[var(--color-primary)]"
+            aria-hidden="true"
           >
-            <i className="fa-regular fa-copy shrink-0" aria-hidden="true" />
-            <span>{copyState === 'copied' ? 'Copied' : copyState === 'error' ? 'Copy failed' : 'Copy'}</span>
-          </button>
-
-          <span role="status" aria-live="polite" className="sr-only">
-            {copyState === 'copied' ? 'Copied' : copyState === 'error' ? 'Copy failed' : ''}
+            <Icon icon={authorIcon} size={18} />
           </span>
-
-          {primary ? (
-            <a
-              href={primary.href}
-              target="_blank"
-              rel="noopener noreferrer"
-              className={actionClassName}
-              aria-label={primary.label}
-            >
-              <span aria-hidden="true"><ActionIcon action={primary.action} /></span>
-              <span className="min-w-0 truncate">{primary.label}</span>
-            </a>
-          ) : null}
-
-          {secondary.length > 0 ? (
-            <div
-              ref={menuBoundaryRef}
-              className="relative flex min-w-0 max-w-full basis-full w-full shrink-0 justify-end sm:ml-auto sm:basis-auto sm:w-auto sm:shrink"
-            >
+          <div
+            data-testid="prompt-preview"
+            className={`prompt-preview min-w-0 flex-1 text-sm leading-6 text-[var(--color-text-primary)]${hasPrompt && !hasDescription ? ' font-mono whitespace-pre-wrap' : ''}${isSingleLine ? ' prompt-preview-single-line' : ''}`}
+          >
+            {hasDescription ? renderInlineMarkdown(description) : prompt || children}
+          </div>
+          {hasPrompt ? (
+            <div data-testid="prompt-utilities" className="flex shrink-0 items-center gap-1">
               <button
-                ref={triggerRef}
+                ref={expandTriggerRef}
                 type="button"
-                aria-label="More prompt actions"
-                aria-haspopup="menu"
-                aria-expanded={menuOpen}
-                aria-controls={menuId}
-                className={actionClassName}
-                onMouseDown={(event) => {
-                  if (menuOpen) event.preventDefault();
-                }}
-                onClick={() => {
-                  setMenuOpen((open) => !open);
-                  if (menuOpen) triggerRef.current?.focus();
-                }}
+                aria-label="Expand prompt"
+                title="Expand prompt"
+                className={promptUtilityClassName}
+                onClick={() => setDialogOpen(true)}
               >
-                <span>More</span>
-                <i className="fa-solid fa-chevron-down text-xs" aria-hidden="true" />
+                <i className="fa-solid fa-expand" aria-hidden="true" />
               </button>
-
-              {menuOpen ? (
-                <div
-                  id={menuId}
-                  role="menu"
-                  aria-label="More prompt actions"
-                  className="absolute top-full right-0 z-20 mt-2 w-max max-w-[min(20rem,calc(100vw-2rem))] rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-bg-secondary)] p-1 shadow-[var(--shadow-sm)]"
-                  onKeyDown={handleMenuKeyDown}
-                  onBlur={(event) => {
-                    if (!event.currentTarget.contains(event.relatedTarget)) {
-                      closeMenu();
-                    }
-                  }}
-                >
-                  {secondary.map((action, index) => (
-                    <a
-                      key={`${action.label}-${action.href}-${index}`}
-                      ref={(node) => { itemRefs.current[index] = node; }}
-                      role="menuitem"
-                      tabIndex={-1}
-                      href={action.href}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      aria-label={action.label}
-                      className="flex min-w-0 max-w-full cursor-pointer items-center gap-2 rounded-[var(--radius-lg)] px-3 py-2 text-sm text-[var(--color-text-primary)] hover:bg-[var(--color-border)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]"
-                      onClick={closeMenuAndFocusTrigger}
-                    >
-                      <span aria-hidden="true"><ActionIcon action={action.action} /></span>
-                      <span className="min-w-0 truncate">{action.label}</span>
-                    </a>
-                  ))}
-                </div>
-              ) : null}
+              <PromptCopyButton
+                copyState={copyState}
+                className={promptUtilityClassName}
+                onCopy={copyPrompt}
+              />
             </div>
           ) : null}
         </div>
-      </div>
+      ) : null}
+      {!dialogOpen ? (
+        <span role="status" aria-live="polite" className="sr-only">
+          {copyState === 'copied' ? 'Copied' : copyState === 'error' ? 'Copy failed' : ''}
+        </span>
+      ) : null}
+
+      <PromptDialog
+        isOpen={dialogOpen}
+        prompt={prompt}
+        title={hasTitle ? title!.trim() : undefined}
+        copyState={copyState}
+        onCopy={copyPrompt}
+        onClose={closeDialog}
+      />
 
       <style jsx>{`
+        .prompt-card-fern {
+          border-color: var(--color-primary);
+          background: var(--color-bg-secondary);
+        }
+        .prompt-well {
+          border-color: var(--color-border);
+        }
+        .prompt-primary-action {
+          background: var(--color-primary);
+          color: #fff;
+        }
+        .prompt-title {
+          color: var(--color-text-primary);
+        }
+        /* The docs themes' prose CSS is not Tailwind Typography — .prose h3 and
+           .prose a match descendants even inside .not-prose, and the jam theme's
+           body[data-theme] variants outrank Tailwind utilities. These scoped
+           rules win on specificity to keep the header compact and link-free. */
+        .prompt-card-fern .prompt-title {
+          margin: 0;
+          font-size: 1rem;
+          line-height: 1.5;
+          font-weight: 600;
+          letter-spacing: normal;
+        }
+        .prompt-card-fern .prompt-primary-action {
+          text-decoration: none;
+          font-weight: 600;
+        }
+        .prompt-card-fern .prompt-menu-item {
+          text-decoration: none;
+          font-weight: 400;
+          color: var(--color-text-primary);
+        }
+        @supports (color: color-mix(in srgb, black, white)) {
+          .prompt-card-fern {
+            border-color: color-mix(in srgb, var(--color-primary) 48%, var(--color-border));
+            background: color-mix(in srgb, var(--color-primary) 7%, var(--color-bg-primary));
+          }
+          .prompt-well {
+            border-color: color-mix(in srgb, var(--color-border) 88%, var(--color-primary));
+            box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 3%, transparent);
+          }
+          /* 40% primary keeps >=4.5:1 against the card background even when
+             --color-primary is set to the mode's background extreme; 45% fails. */
+          .prompt-card-fern .prompt-title {
+            color: color-mix(in srgb, var(--color-primary) 40%, var(--color-text-primary));
+          }
+        }
         .prompt-preview {
-          max-height: 7.5rem;
+          max-height: 10rem;
           overflow-y: auto;
           overflow-wrap: anywhere;
         }

package/vendored/components/navigation/Sidebar.tsx

@@ -760,7 +760,11 @@ export function Sidebar({ config, layout = 'header-logo', tabsPosition: tabsPosi
     const visibilityClass = showTabsInSidebar ? '' : 'lg:hidden';
 
     return (
-      <div className={`sidebar-tabs flex flex-col gap-2 px-4 pt-2 pb-6 ${visibilityClass}`}>
+      // Inline-start padding is 12px (pl-3), not 16px, so each tab's px-3
+      // padding lands its icon at 24px — flush with the sidebar group icons
+      // (ml-6) below — and the active tab's highlight left edge lands at 12px
+      // to match the lower nav items' pill (.sidebar-scroll ...::before).
+      <div className={`sidebar-tabs flex flex-col gap-2 pl-3 pr-4 pt-2 pb-6 ${visibilityClass}`}>
         {resolvedNav.tabs.map((tab) => {
           const isActive = tab.name === resolvedNav.activeTab;
 

package/vendored/lib/screenshot-capture.ts

@@ -30,9 +30,10 @@ interface CaptureResult {
   error?: string;
 }
 
-// Headroom for the retry path: two 15s page.goto budgets + 3s settle wait
-// already total 33s before the screenshot is even taken. Launch retries
-// (closed-target only) fail fast (<~2s) so they stay inside this 45s race.
+// Headroom for the retry path: two 15s page.goto('load') budgets + 3s retry
+// wait + 2s best-effort networkidle + 1s settle total ~36s worst case before
+// the screenshot is taken. Launch retries (closed-target only) fail fast
+// (<~2s) so they stay inside this 45s race.
 const SCREENSHOT_TIMEOUT_MS = 45000;
 
 // Playwright launch flakes intermittently in the container — the Chromium
@@ -201,22 +202,31 @@ export async function captureHomepageScreenshot(options: CaptureOptions): Promis
       // Cold render after a project-wide revalidation can transiently 404 —
       // retry once on 4xx/5xx, then capture whatever the page shows so the
       // dashboard preview reflects the real state of the site.
+      //
+      // Wait for 'load' (document + images/CSS/fonts), NOT 'networkidle'. A
+      // custom-domain-only subdomain 404s the client's RSC nav prefetches
+      // (`/docs/<page>?_rsc=…`) — they're built from the route and carry no
+      // ?jd_proxy=1 marker — so Next keeps retrying them and a large docs site
+      // (jamdesk-docs) NEVER goes network-idle. 'networkidle' timed out at 15s
+      // and every capture/Retry failed. 'load' fires before the prefetch storm.
+      const gotoOpts = { waitUntil: 'load', timeout: 15000 } as const;
       console.log(`Capturing screenshot from: ${homepageUrl}`);
-      const firstResponse = await page.goto(homepageUrl, {
-        waitUntil: 'networkidle',
-        timeout: 15000,
-      });
+      const firstResponse = await page.goto(homepageUrl, gotoOpts);
       const firstStatus = firstResponse?.status();
 
       if (firstStatus !== undefined && firstStatus >= 400) {
         console.log(`Screenshot got ${firstStatus} on first attempt, retrying once after 3s`);
         await page.waitForTimeout(3000);
-        await page.goto(homepageUrl, {
-          waitUntil: 'networkidle',
-          timeout: 15000,
-        });
+        await page.goto(homepageUrl, gotoOpts);
       }
 
+      // Short best-effort settle for late images/fonts — the page above already
+      // reached 'load', and a never-idle page (see the prefetch note above)
+      // would otherwise burn the full timeout for nothing. Never fail the
+      // capture on it. Mirrors the pdf-service networkidle fallback
+      // (worker-pool.ts).
+      await page.waitForLoadState('networkidle', { timeout: 2000 }).catch(() => {});
+
       // Additional wait for any late-loading content
       await page.waitForTimeout(1000);