Launch Terminal Instructions experiment for Shell stage 1 and 2

app/components/course-page/course-stage-step/first-stage-tutorial-card.hbs

@@ -1,10 +1,33 @@
 <CoursePage::InstructionsCard @title="How to pass this stage" id="first-stage-tutorial-card" ...attributes>
   <:content>
     <div class="prose dark:prose-invert mb-5">
-      <p>
-        Since this is the first stage, we've included some commented code to help you get started. To pass this stage, simply uncomment the code and
-        submit your changes.
-      </p>
+      {{#if true}}
+        <p>
+          In this stage, you'll implement printing a shell prompt ($) and waiting for user input.
+        </p>
+        <div class="mb-6 bg-slate-800 dark:bg-slate-100 rounded-xl max-w-md shadow-md dark:shadow-slate-600">
+          <div class="flex items-center h-14 px-5 gap-2.5">
+            <div class="size-3 bg-slate-500 dark:bg-slate-300 rounded-full flex-shrink-0"></div>
+            <div class="size-3 bg-slate-500 dark:bg-slate-300 rounded-full flex-shrink-0"></div>
+            <div class="size-3 bg-slate-500 dark:bg-slate-300 rounded-full flex-shrink-0"></div>
+          </div>
+          <div class="pt-0 p-5 cursor-pointer">
+            <div class="flex items-center gap-2 w-fit">
+              <span class="font-mono text-slate-100 dark:text-slate-800">$</span>
+              <span class="relative flex size-6">
+                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
+                {{svg-jar "question-mark-circle" class="size-6 text-blue-500"}}
+              </span>
+              <EmberTooltip @side="right" @text="Print '$ ' to pass this stage." @popperContainer="body" />
+            </div>
+          </div>
+        </div>
+      {{else}}
+        <p>
+          Since this is the first stage, we've included some commented code to help you get started. To pass this stage, simply uncomment the code and
+          submit your changes.
+        </p>
+      {{/if}}
     </div>
 
     <ExpandableStepList @steps={{this.steps}} @onManualStepComplete={{this.handleStepCompletedManually}} class="scroll-mt-32" as |stepList|>

app/components/course-page/course-stage-step/first-stage-tutorial-card.ts

@@ -85,6 +85,10 @@
     return this.coursePageState.manuallyCompletedStepIdsInFirstStageInstructions.includes('navigate-to-file');
   }
 
+  get shouldShowTerminalInstructions() {
+    return this.featureFlags.canSeeTerminalInstructionsForStage1And2;
+  }
+
   get steps() {
     return [
       new NavigateToFileStep(this.args.repository, this.navigateToFileStepIsComplete),

app/components/course-page/course-stage-step/second-stage-tutorial-card.hbs

@@ -2,9 +2,36 @@
   <:content>
     <div class="prose dark:prose-invert mb-5">
       {{#if (eq @repository.course.slug "shell")}}
-        <div class="mb-5 prose-compact">
-          {{markdown-to-html @courseStage.shortInstructionsMarkdown}}
-        </div>
+        {{#if this.shouldShowTerminalInstructions}}
+          <p>
+            In this stage, you'll implement support for handling invalid commands in your shell.
+          </p>
+          <div class="mb-6 bg-slate-800 dark:bg-slate-100 rounded-xl max-w-md shadow-md dark:shadow-slate-600">
+            <div class="flex items-center h-14 px-5 gap-2.5">
+              <div class="size-3 bg-slate-500 dark:bg-slate-300 rounded-full flex-shrink-0"></div>
+              <div class="size-3 bg-slate-500 dark:bg-slate-300 rounded-full flex-shrink-0"></div>
+              <div class="size-3 bg-slate-500 dark:bg-slate-300 rounded-full flex-shrink-0"></div>
+            </div>
+            <div class="pt-0 p-5 font-mono">
+              <div class="flex items-center gap-2 mb-2 text-slate-300 dark:text-slate-600 cursor-pointer w-fit">$
+                <span class="text-red-400">invalid_command</span>
+                <EmberTooltip @side="right" @text="Treat every command as invalid for now." @popperContainer="body" />
+              </div>
+              <div class="flex items-center gap-2 text-slate-100 dark:text-slate-800 cursor-pointer w-fit">
+                invalid_command: command not found
+                <span class="relative flex size-6 cursor-pointer">
+                  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
+                  {{svg-jar "question-mark-circle" class="size-6 text-blue-500"}}
+                </span>
+                <EmberTooltip @side="right" @text="Read the command and print the error message." @popperContainer="body" />
+              </div>
+            </div>
+          </div>
+        {{else}}
+          <div class="mt-2 mb-5 prose-compact">
+            {{markdown-to-html @courseStage.shortInstructionsMarkdown}}
+          </div>
+        {{/if}}
       {{else}}
         <p>
           In this stage, you'll implement your own solution. Unlike stage 1, your repository doesn't contain commented code to pass this stage.

app/components/course-page/course-stage-step/second-stage-tutorial-card.ts

@@ -83,6 +83,10 @@
     );
   }
 
+  get shouldShowTerminalInstructions() {
+    return this.featureFlags.canSeeTerminalInstructionsForStage1And2;
+  }
+
   get steps() {
     return [
       new ImplementSolutionStep(this.args.repository, this.implementSolutionStepIsComplete),

app/services/feature-flags.js

@@ -14,6 +14,10 @@
     return this.currentUser && (this.currentUser.isStaff || this.currentUser.isConceptAuthor);
   }
 
+  get canSeeTerminalInstructionsForStage1And2() {
+    return this.currentUser?.isStaff || this.getFeatureFlagValue('can-see-terminal-instructions-for-stage-1-and-2') === 'test';
+  }
+
   get currentUser() {
     return this.authenticator.currentUser;
   }

types/glint.d.ts

@@ -19,7 +19,7 @@ declare module '@glint/environment-ember-loose/registry' {
     capitalize: HelperLike<{ Return: string; Args: { Positional: [string] } }>;
     'did-resize': ModifierLike<{ Args: { Positional: [(entry: ResizeObserverEntry) => void] } }>;
     EmberTooltip: ComponentLike<{
-      Args: { Named: { text?: string; side?: 'top' | 'bottom' | 'left' | 'right'; delay?: number; duration?: number } };
+      Args: { Named: { text?: string; side?: 'top' | 'bottom' | 'left' | 'right'; delay?: number; duration?: number; popperContainer?: string } };
       Blocks: { default?: [] };
     }>;
     EmberPopover: ComponentLike<{