code-dot-org · deploy-code-org · Dec 1, 2025 · Nov 24, 2025 · Nov 25, 2025 · Nov 25, 2025
@@ -1,10 +1,18 @@
+## Warning!!
+
+We have entered Pixel Lock for Hour of AI! All merges to the `staging` branch from Dec 2 through Dec 12 must go through live change review and be deemed critical for supporting the Hour of AI. External contributions will not be accepted at this time.
+
+For non-critical changes, please change your base to `staging-next` and delete this warning. We will merge `staging-next` into `staging` on Dec 15, 2025.
+
+<!-- end warning -->
+
+
 <!--
   A summary of the change, including any relevant background, motivation, and context.
   If relevant, include a description, screenshots, and/or video of the existing and new behavior.
 -->
 
 
-
 ## Links
 <!--  Links to relevant external resources.
       - spec docs, Jira tickets, related PRs, Honeybadger errors, etc.

diff --git a/apps/src/codebridge/FilePreview/HTMLPreview.tsx b/apps/src/codebridge/FilePreview/HTMLPreview.tsx
@@ -17,6 +17,7 @@ import {
   DEFAULT_START_HTML_FILE,
 } from './constants';
 import {HTMLPreviewHeader} from './HTMLPreviewHeader';
+import PreviewStopped from './PreviewStopped';
 
 import moduleStyles from './styles/html-preview.module.scss';
 
@@ -61,6 +62,7 @@ export const HTMLPreview: React.FC = () => {
   const [previewViewMode, setPreviewViewMode] = useState<PreviewViewMode>(
     PreviewViewMode.DESKTOP
   );
+  const [isStopped, setIsStopped] = useState<boolean>(false);
   const isPredictLevel = levelProperties?.predictSettings?.isPredictLevel;
   const hasSubmittedPredictResponse = useAppSelector(
     isPredictResponseSubmitted
@@ -150,9 +152,20 @@ export const HTMLPreview: React.FC = () => {
     );
   };
 
+  const onStopPreview = () => {
+    setIsStopped(true);
+    setIsIframeLoaded(false);
+  };
+
+  const onReloadPreview = () => {
+    setIsStopped(false);
+  };
+
   useLifecycleNotifier(LifecycleEvent.LevelLoadStarted, () => {
     // When we switch levels, clear the source so the preview does not show outdated content.
     setDebouncedSource(undefined);
+    // When we switch levels, reset stopped state.
+    setIsStopped(false);
     setIsLevelLoading(true);
   });
 
@@ -287,33 +300,39 @@ export const HTMLPreview: React.FC = () => {
           onToggleFullScreen={toggleFullScreen}
           previewViewMode={previewViewMode}
           setPreviewViewMode={setPreviewViewMode}
+          onStopPreview={onStopPreview}
+          isStopEnabled={!isStopped}
         />
-        {/* This iframe points to the environment-specific version of preview.codeprojects.org. That url will eventually
-            route to InnerHTMLPreview. */}
-        <div
-          ref={previewContainerRef}
-          // This provides a small visual indicator when the iframe is focused after submitting the URL.
-          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-          tabIndex={0}
-          className={moduleStyles.previewWrapper}
-          role="application"
-          aria-label="Web Preview Frame"
-        >
-          <iframe
-            sandbox="allow-scripts allow-same-origin"
-            allow="self"
-            title="Web Preview"
-            ref={iframeRef}
-            id="preview"
-            className={classNames(
-              moduleStyles.previewIframe,
-              previewViewMode === PreviewViewMode.DESKTOP
-                ? moduleStyles.desktopPreviewIframe
-                : moduleStyles.mobilePreviewIframe
-            )}
-            src={`${previewUrl}${previewQueryString}`}
-          />
-        </div>
+        {isStopped ? (
+          <PreviewStopped onReload={onReloadPreview} />
+        ) : (
+          /* This iframe points to the environment-specific version of preview.codeprojects.org. That url will eventually
+            route to InnerHTMLPreview. */
+          <div
+            ref={previewContainerRef}
+            // This provides a small visual indicator when the iframe is focused after submitting the URL.
+            // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+            tabIndex={0}
+            className={moduleStyles.previewWrapper}
+            role="application"
+            aria-label="Web Preview Frame"
+          >
+            <iframe
+              sandbox="allow-scripts allow-same-origin"
+              allow="self"
+              title="Web Preview"
+              ref={iframeRef}
+              id="preview"
+              className={classNames(
+                moduleStyles.previewIframe,
+                previewViewMode === PreviewViewMode.DESKTOP
+                  ? moduleStyles.desktopPreviewIframe
+                  : moduleStyles.mobilePreviewIframe
+              )}
+              src={`${previewUrl}${previewQueryString}`}
+            />
+          </div>
+        )}
       </div>
     </PanelContainer>
   );

diff --git a/apps/src/codebridge/FilePreview/HTMLPreviewHeader.tsx b/apps/src/codebridge/FilePreview/HTMLPreviewHeader.tsx
@@ -3,6 +3,7 @@ import SegmentedButtons, {
   SegmentedButtonsProps,
 } from '@code-dot-org/component-library/segmentedButtons';
 import TextField from '@code-dot-org/component-library/textField';
+import {WithTooltip} from '@code-dot-org/component-library/tooltip';
 import classNames from 'classnames';
 import React from 'react';
 
@@ -25,6 +26,8 @@ interface HTMLPreviewHeaderProps {
   onToggleFullScreen: () => void;
   previewViewMode: PreviewViewMode;
   setPreviewViewMode: (previewViewMode: PreviewViewMode) => void;
+  onStopPreview: () => void;
+  isStopEnabled: boolean;
 }
 
 export const HTMLPreviewHeader: React.FC<HTMLPreviewHeaderProps> = ({
@@ -39,6 +42,8 @@ export const HTMLPreviewHeader: React.FC<HTMLPreviewHeaderProps> = ({
   onToggleFullScreen,
   previewViewMode,
   setPreviewViewMode,
+  onStopPreview,
+  isStopEnabled,
 }) => {
   const isFullScreenView = useAppSelector(state => state.lab.isFullScreenView);
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -127,6 +132,26 @@ export const HTMLPreviewHeader: React.FC<HTMLPreviewHeaderProps> = ({
           className={moduleStyles.iconButton}
         />
       </div>
+      <WithTooltip
+        tooltipProps={{
+          tooltipId: 'stop-preview',
+          direction: 'onBottom',
+          size: 'xs',
+          text: 'Stop preview',
+        }}
+      >
+        <Button
+          onClick={onStopPreview}
+          aria-label={'Stop Preview'}
+          size="xs"
+          type="secondary"
+          disabled={!isStopEnabled}
+          isIconOnly={true}
+          icon={{iconName: 'circle-stop'}}
+          className={moduleStyles.iconButton}
+          color={'destructive'}
+        />
+      </WithTooltip>
       <SegmentedButtons
         className={moduleStyles.previewViewModeButtons}
         {...previewViewModeButtonsProps}

diff --git a/apps/src/codebridge/FilePreview/PreviewStopped.tsx b/apps/src/codebridge/FilePreview/PreviewStopped.tsx
@@ -0,0 +1,32 @@
+import {CodebridgeEmptyState} from '@codebridge/components/CodebridgeEmptyState';
+import React, {MouseEvent} from 'react';
+
+import pageStoppedImage from '@cdo/apps/codebridge/images/preview-stopped-placeholder.png';
+
+interface PreviewStoppedProps {
+  onReload: (
+    event: MouseEvent<HTMLButtonElement> | MouseEvent<HTMLAnchorElement>
+  ) => void;
+}
+
+const PreviewStopped: React.FC<PreviewStoppedProps> = ({onReload}) => {
+  return (
+    <div data-theme="Light">
+      <CodebridgeEmptyState
+        imageProps={{src: pageStoppedImage}}
+        title="Preview Stopped"
+        description="You stopped the preview. If there was an error, review your code or use AI Tutor to help debug before reloading."
+        buttonProps={{
+          text: 'Reload Preview',
+          onClick: onReload,
+          iconLeft: {iconName: 'sync', iconStyle: 'solid'},
+          type: 'secondary',
+          color: 'gray',
+          size: 's',
+        }}
+      />
+    </div>
+  );
+};
+
+export default PreviewStopped;
diff --git a/apps/src/codebridge/components/CodebridgeEmptyState.module.scss b/apps/src/codebridge/components/CodebridgeEmptyState.module.scss
@@ -9,6 +9,7 @@
   align-items: center;
   justify-content: center;
   cursor: default;
+  background-color: var(--background-neutral-primary);
 
   .emptyStateImage {
     width: auto;

diff --git a/apps/src/codebridge/components/CodebridgeEmptyState.tsx b/apps/src/codebridge/components/CodebridgeEmptyState.tsx
@@ -1,3 +1,4 @@
+import {Button, ButtonProps} from '@code-dot-org/component-library/button';
 import Image, {ImageProps} from '@code-dot-org/component-library/image';
 import {
   BodyThreeText,
@@ -14,13 +15,15 @@ export interface CodebridgeEmptyStateProps {
   title?: string;
   description?: string;
   className?: string;
+  buttonProps?: ButtonProps;
 }
 
 export const CodebridgeEmptyState: FC<CodebridgeEmptyStateProps> = ({
   imageProps,
   title,
   description,
   className,
+  buttonProps,
 }) => {
   return (
     <Box
@@ -40,6 +43,7 @@ export const CodebridgeEmptyState: FC<CodebridgeEmptyStateProps> = ({
         )}
         {description && <BodyThreeText>{description}</BodyThreeText>}
       </div>
+      {buttonProps && <Button {...buttonProps} />}
     </Box>
   );
 };
diff --git a/apps/src/codebridge/images/preview-stopped-placeholder.png b/apps/src/codebridge/images/preview-stopped-placeholder.png
diff --git a/apps/src/dance/lab2/views/DanceView.tsx b/apps/src/dance/lab2/views/DanceView.tsx
@@ -133,6 +133,11 @@ const DanceView: React.FunctionComponent<{
     startOver,
   } = useSources<DanceProjectSources>();
 
+  const sourcesRef = useRef(currentSources);
+  useEffect(() => {
+    sourcesRef.current = currentSources;
+  }, [currentSources]);
+
   const mergeSources = useCallback(
     (patch: Partial<DanceProjectSources>, forceSave = false) => {
       const next = {...sourcesRef.current, ...patch};
@@ -468,13 +473,19 @@ const DanceView: React.FunctionComponent<{
       return;
     }
     // In case there is no song set in the current sources, set it to the default.
-    if (!currentSources.selectedSong) {
+    if (!currentSources.selectedSong && !usingMusicProject) {
       const defaultSong = levelProperties.defaultSong;
       const songToUse =
         defaultSong && songData[defaultSong] ? defaultSong : songKeys[0];
       mergeSources({selectedSong: songToUse});
     }
-  }, [songData, currentSources, mergeSources, levelProperties.defaultSong]);
+  }, [
+    songData,
+    currentSources,
+    mergeSources,
+    levelProperties.defaultSong,
+    usingMusicProject,
+  ]);
 
   // Load the selected song whenever it changes in project sources.
   useEffect(() => {
@@ -579,11 +590,6 @@ const DanceView: React.FunctionComponent<{
 
   const settings = useBlocklySettings();
 
-  const sourcesRef = useRef(currentSources);
-  useEffect(() => {
-    sourcesRef.current = currentSources;
-  }, [currentSources]);
-
   if (isShareView) {
     const musicMetadata = loadedMusicProject
       ? musicProjectPlayer.current?.getMetadata()

diff --git a/apps/src/dance/lab2/views/GenerateDance.tsx b/apps/src/dance/lab2/views/GenerateDance.tsx
@@ -129,7 +129,7 @@ const GenerateDance: React.FunctionComponent<GenerateCodeProps> = ({
     if (aiGenerateState === 'none' && blockCount > 1) {
       setAiGenerateState('edited');
     } else if (
-      ['editing', 'edited'].includes(aiGenerateState) &&
+      ['listened', 'editing', 'edited'].includes(aiGenerateState) &&
       blockCount <= 1
     ) {
       resetProgram();
@@ -352,8 +352,6 @@ const GenerateDance: React.FunctionComponent<GenerateCodeProps> = ({
             size="s"
             onClick={() => {
               startOver();
-              setAiGenerateState('none');
-              resetProgram();
               analyticsReporter.sendEvent(
                 EVENTS.DANCE_PARTY_GENERATE_CODE_BACK_TO_PROMPT_CLICKED,
                 {levelPath: window.location.pathname}
@@ -438,8 +436,6 @@ const GenerateDance: React.FunctionComponent<GenerateCodeProps> = ({
               size="s"
               onClick={() => {
                 startOver();
-                setAiGenerateState('none');
-                resetProgram();
                 analyticsReporter.sendEvent(
                   EVENTS.DANCE_PARTY_GENERATE_CODE_BACK_TO_PROMPT_CLICKED,
                   {levelPath: window.location.pathname}

diff --git a/apps/src/p5lab/P5Lab.js b/apps/src/p5lab/P5Lab.js
@@ -1037,11 +1037,7 @@ export default class P5Lab {
     this.p5Wrapper.startExecution();
     this.p5Wrapper.setLoop(true);
 
-    if (
-      !this.JSInterpreter ||
-      !this.JSInterpreter.initialized() ||
-      this.executionError
-    ) {
+    if (this.executionError) {
       return;
     }
 
@@ -1219,7 +1215,7 @@ export default class P5Lab {
    */
   onP5Preload() {
     this.preloadLabAssets()
-      .then(this.runPreloadEventHandler_())
+      .then(() => this.runPreloadEventHandler_())
       .then(() => this.p5Wrapper.notifyPreloadPhaseComplete());
     return false;
   }

diff --git a/apps/src/templates/projects/NewProjectButtons.jsx b/apps/src/templates/projects/NewProjectButtons.jsx
@@ -5,7 +5,7 @@ import React from 'react';
 import {connect} from 'react-redux';
 
 import fontConstants from '@cdo/apps/fontConstants';
-import {studio} from '@cdo/apps/lib/util/urlHelpers';
+import {studio, pegasus} from '@cdo/apps/lib/util/urlHelpers';
 import i18n from '@cdo/locale';
 
 import styleConstants from '../../styleConstants';
@@ -121,7 +121,7 @@ const PROJECT_INFO = {
   music: {
     label: i18n.projectTypeMusic(),
     thumbnail: studio('/shared/images/courses/logo_music.png'),
-    urlOverride: '/s/music-intro-2024/reset',
+    urlOverride: pegasus('/music'),
   },
   pythonlab: {
     label: i18n.projectTypePythonlab(),

@@ -32,7 +32,7 @@ Parameters:
   WorkerInstanceAMI:
     Type: String
     Description: Amazon Machine Image that Autoscaler uses to launch Worker EC2 Instances.
-    Default: ami-09b347c7ebb552ae2
+    Default: ami-041891f7c52014278
   WorkerInstanceType:
     Type: String
     Description: EC2 Instance Type that Autoscaler provisions to run Builds.
@@ -304,7 +304,7 @@ Resources:
         -
           Name: drone-autoscaler
           Essential: true
-          Image: drone/autoscaler:1.13.0
+          Image: drone/autoscaler:1.14.0
           MemoryReservation: 1024
           LogConfiguration:
             LogDriver: awslogs
@@ -407,6 +407,10 @@ Resources:
             # END: Settings for the EC2 Instances that Drone Autoscaler provisions.
 
             # BEGIN: Settings for the Drone Runner ("worker"/"agent") executing on the EC2 Instances provisioned by Autoscaler.
+            -
+              Name: DRONE_AGENT_IMAGE
+              # TODO move back to mainline after drone-runners/drone-runner-docker#79 or similar is merged to update Docker Go client
+              Value: codedotorg/drone-runner-docker
             -
               Name: DRONE_AGENT_CONCURRENCY
               Value: 1