feat: add autofix request card to show test fix hints

Introduce a new AutofixRequestCard component to display hints generated  
for test result autofixes. Show placeholder content while generation  
is in progress and reveal explanations and diffs on success. Add UI  
controls to unblur the fixed code diff, enhancing user interaction.  

Also extend tailwind config with purple color and medium spin animation  
to support new UI styles and animations.

Author: rohitpaulk

app/components/course-page/test-results-bar/autofix-request-card.hbs

@@ -0,0 +1,69 @@
+<div class="bg-gray-850 rounded-sm border border-white/5 p-4 w-full max-w-xl overflow-hidden" ...attributes data-test-autofix-request-card>
+  <AnimatedContainer>
+    {{#animated-value @autofixRequest.status duration=200 use=this.transition as |status|}}
+      {{#if (eq status "in_progress")}}
+        <div class="flex items-center gap-2">
+          <BlinkingDot @color="yellow" class="shrink-0" />
+          <span class="text-lg font-semibold text-white">Generating custom hint...</span>
+        </div>
+      {{else if (eq status "success")}}
+        <span class="text-lg font-semibold text-white">Hint: {{@autofixRequest.summary}}</span>
+      {{/if}}
+    {{/animated-value}}
+
+    <BlurredOverlay @isBlurred={{this.explanationIsBlurred}} @overlayClass="bg-gray-900/20" class="-mx-4 -mb-4">
+      <:content>
+        <div class="p-4">
+          <div class="prose prose-sm dark:prose-invert has-prism-highlighting">
+            {{#if (eq @autofixRequest.status "in_progress")}}
+              <p>
+                This is the content of a sample hint. We use this as a
+                <code>placeholder</code>
+                for the actual hint. It's blurred out so you shouldn't be seeing this...
+              </p>
+            {{else}}
+              {{markdown-to-html @autofixRequest.explanationMarkdown}}
+            {{/if}}
+          </div>
+
+          <BlurredOverlay @isBlurred={{and this.diffIsBlurred (not this.explanationIsBlurred)}} @overlayClass="bg-gray-900/20" class="-mx-4 -mb-4">
+            <:content>
+              <div class="p-4 flex flex-col gap-6">
+                {{#each this.changedFilesForRender key="filename" as |changedFile|}}
+                  <FileDiffCard
+                    @code={{changedFile.diff}}
+                    @filename={{changedFile.filename}}
+                    @forceDarkTheme={{true}}
+                    {{! @glint-expect-error language can be nullable }}
+                    @language={{@autofixRequest.submission.repository.language.slug}}
+                  />
+                {{/each}}
+              </div>
+            </:content>
+            <:overlay>
+              {{#if (eq @autofixRequest.status "success")}}
+                <SecondaryButton class="bg-gray-800 mt-10" {{on "click" (fn (mut this.diffWasUnblurred) true)}}>
+                  <div class="flex items-center gap-2">
+                    <div class="flex">{{svg-jar "eye" class="size-6"}}</div>
+                    Show fixed code
+                  </div>
+                </SecondaryButton>
+              {{/if}}
+            </:overlay>
+          </BlurredOverlay>
+        </div>
+      </:content>
+
+      <:overlay>
+        {{#if (eq @autofixRequest.status "success")}}
+          <SecondaryButton class="bg-gray-800 mt-10" {{on "click" (fn (mut this.explanationWasUnblurred) true)}}>
+            <div class="flex items-center gap-2">
+              <div class="flex">{{svg-jar "eye" class="size-6"}}</div>
+              Explain more?
+            </div>
+          </SecondaryButton>
+        {{/if}}
+      </:overlay>
+    </BlurredOverlay>
+  </AnimatedContainer>
+</div>

app/components/course-page/test-results-bar/autofix-request-card.ts

@@ -0,0 +1,64 @@
+import Component from '@glimmer/component';
+import type AutofixRequestModel from 'codecrafters-frontend/models/autofix-request';
+import fade from 'ember-animated/transitions/fade';
+import { tracked } from '@glimmer/tracking';
+
+interface Signature {
+  Element: HTMLDivElement;
+
+  Args: {
+    autofixRequest: AutofixRequestModel;
+  };
+}
+
+export default class AutofixRequestCard extends Component<Signature> {
+  transition = fade;
+
+  @tracked diffWasUnblurred = false;
+  @tracked explanationWasUnblurred = false;
+
+  get changedFilesForRender(): AutofixRequestModel['changedFiles'] {
+    if (this.args.autofixRequest.status === 'in_progress') {
+      return [
+        {
+          filename: 'placeholder.txt', // TODO: This should be the actual filename
+          diff: `
+  def main():
+-     print("Hello, world!")
++     print("Hello, worlds!")
+
++     foo = calculate(bar)
+
+  if __name__ == "__main__":
+      main()
+`,
+        },
+      ];
+    } else {
+      return this.args.autofixRequest.changedFiles;
+    }
+  }
+
+  get diffIsBlurred() {
+    // We never show a diff unless the autofix request is successful
+    if (this.args.autofixRequest.status !== 'success') {
+      return true;
+    }
+
+    return !this.diffWasUnblurred;
+  }
+
+  get explanationIsBlurred() {
+    if (this.args.autofixRequest.status !== 'success') {
+      return true;
+    }
+
+    return !this.explanationWasUnblurred;
+  }
+}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'CoursePage::TestResultsBar::AutofixRequestCard': typeof AutofixRequestCard;
+  }
+}

app/components/course-page/test-results-bar/autofix-section/index.hbs

@@ -1,3 +1,38 @@
-<div class="pb-3 flex flex-col" ...attributes data-test-autofix-section>
-  <CoursePage::TestResultsBar::AutofixSection::AutofixResult @autofixRequest={{@autofixRequest}} class="overflow-y-auto grow" />
+<div
+  class="flex flex-col items-center justify-center p-6 mb-3 bg-gray-900 rounded-sm border border-white/10 relative"
+  ...attributes
+  data-test-autofix-section
+>
+  <div class="absolute inset-0 flex items-stretch justify-stretch">
+    <div class="w-full relative overflow-hidden rounded-sm">
+      {{! Left blurred gradient }}
+      <div class="w-1/2 h-60 absolute -bottom-32 -left-1/4 opacity-50 animate-spin-medium filter blur-[100px]">
+        <div class="relative">
+          <div class="rounded-full h-60 w-full bg-purple-800"></div>
+          <div class="absolute bottom-24 -left-24 rounded-full h-60 w-full bg-red-800"></div>
+          <div class="absolute top-24 left-24 rounded-full h-60 w-full bg-purple-600"></div>
+        </div>
+      </div>
+
+      {{! Right blurred gradient }}
+      <div class="w-1/2 h-60 absolute -bottom-40 -right-1/4 opacity-50 animate-spin-medium filter blur-[100px]">
+        <div class="relative">
+          <div class="rounded-full h-60 w-full bg-blue-600"></div>
+          <div class="absolute bottom-24 -left-24 rounded-full h-60 w-full bg-blue-700"></div>
+          <div class="absolute top-24 left-24 rounded-full h-60 w-full bg-purple-600"></div>
+        </div>
+      </div>
+      {{! Center blurred gradient }}
+
+      <div class="w-1/2 h-60 absolute top-0 left-1/1 right-1/4 opacity-50 animate-spin-medium filter blur-[100px]">
+        <div class="relative">
+          <div class="rounded-full h-60 w-full bg-blue-600"></div>
+          <div class="absolute bottom-24 -left-24 rounded-full h-60 w-full bg-purple-700"></div>
+          <div class="absolute top-24 left-24 rounded-full h-60 w-full bg-purple-600"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <CoursePage::TestResultsBar::AutofixRequestCard @autofixRequest={{@autofixRequest}} class="z-10" />
 </div>

app/tailwind.config.js

@@ -25,6 +25,7 @@ module.exports = {
       gray: colors.slate,
       green: colors.green,
       indigo: colors.indigo,
+      purple: colors.purple,
       pink: colors.pink,
       red: colors.red,
       sky: colors.sky,
@@ -483,6 +484,7 @@ module.exports = {
         'infinite-slide': 'infinite-slide 30s linear infinite',
         'blink-fast': 'blink 1s step-start infinite',
         'spin-slow': 'spin 16s linear infinite',
+        'spin-medium': 'spin 4s linear infinite',
       },
     },
   },