Merge pull request #3268 from codecrafters-io/pk-branch-7

Add autofix result integration

Author: rohitpaulk

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

@@ -18,19 +18,6 @@
         <span class="font-mono text-xs text-white">Hints generated</span>
       {{/if}}
     </div>
-    {{#unless (eq @autofixRequest.status "in_progress")}}
-      <div
-        class="text-gray-400 underline text-xs px-3 py-2 inline-flex hover:text-gray-300"
-        {{on "click" (fn (mut this.shouldShowFullLog) (not this.shouldShowFullLog))}}
-        role="button"
-      >
-        {{#if this.shouldShowFullLog}}
-          Show summary
-        {{else}}
-          Show Full Log
-        {{/if}}
-      </div>
-    {{/unless}}
   </div>
 
   {{#if (eq @autofixRequest.status "in_progress")}}
@@ -47,15 +34,11 @@
       </div>
     </div>
   {{else}}
-    {{#if this.shouldShowFullLog}}
-      <div class="bg-gray-800 border border-gray-700 rounded-sm grow overflow-y-auto">
-        <div class="p-3">
-          <pre class="font-mono text-xs text-white whitespace-pre-wrap"><code>{{ansi-to-html @autofixRequest.logs}}</code></pre>
-        </div>
-      </div>
-    {{else if (eq @autofixRequest.status "success")}}
+    {{#if (eq @autofixRequest.status "success")}}
       <div class="grow overflow-y-auto">
         <div class="prose prose-sm dark:prose-invert has-prism-highlighting" {{highlight-code-blocks @autofixRequest.explanationMarkdown}}>
+          <h3>Hint: {{@autofixRequest.summary}}</h3>
+
           {{markdown-to-html @autofixRequest.explanationMarkdown}}
         </div>
 
@@ -65,13 +48,6 @@
               Share Feedback
             </TertiaryButton>
           </FeedbackButton>
-
-          <a
-            href="https://docs.codecrafters.io/experimental/ai-hints"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="text-sm text-gray-400 underline"
-          >Learn more</a>.
         </div>
 
         <BlurredOverlay @isBlurred={{this.diffIsBlurred}} @overlayClass="bg-gray-900/20">

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

@@ -1,37 +1,3 @@
 <div class="pb-3 flex flex-col" ...attributes data-test-autofix-section>
-  {{#if this.lastSubmission}}
-    {{#if this.lastAutofixRequest}}
-      <CoursePage::TestResultsBar::AutofixSection::AutofixResult @autofixRequest={{this.lastAutofixRequest}} class="overflow-y-auto grow" />
-    {{else}}
-      <AlertWithIcon class="mb-3">
-        <p>
-          We're testing out a new feature called "AI Hints". This is currently only available on stage 2.
-          <a href="https://docs.codecrafters.io/experimental/ai-hints" target="_blank" rel="noopener noreferrer">Learn more</a>.
-        </p>
-      </AlertWithIcon>
-
-      <CoursePage::TestResultsBar::AutofixSection::CreateAutofixPrompt @submission={{this.lastSubmission}} />
-    {{/if}}
-  {{else}}
-    {{! TODO: Review copy here }}
-    <div class="py-16 flex items-center justify-center grow">
-      <div class="text-gray-500 text-sm">
-        {{#if (eq @activeStep.type "CourseStageStep")}}
-          {{#if (eq @activeStep @currentStep)}}
-            After you've run tests for this stage once, you'll be able to use the "AI Hints" feature here to help automatically fix any issues.
-          {{else}}
-            After you've run tests for the
-            <LinkTo
-              class="font-semibold text-gray-400 underline hover:text-gray-300"
-              @route={{@activeStep.routeParams.route}}
-              @models={{@activeStep.routeParams.models}}
-            >{{@activeStep.title}}</LinkTo>
-            stage, you'll be able to use the "AI Hints" feature here to help automatically fix any issues.
-          {{/if}}
-        {{else}}
-          After you've run tests on your code, you'll be able to use the "AI Hints" feature here to help automatically fix any issues.
-        {{/if}}
-      </div>
-    </div>
-  {{/if}}
+  <CoursePage::TestResultsBar::AutofixSection::AutofixResult @autofixRequest={{@autofixRequest}} class="overflow-y-auto grow" />
 </div>

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

@@ -1,65 +1,15 @@
-import type Store from '@ember-data/store';
-import { service } from '@ember/service';
 import Component from '@glimmer/component';
-import { StepDefinition } from 'codecrafters-frontend/utils/course-page-step-list';
-import type CourseStageStep from 'codecrafters-frontend/utils/course-page-step-list/course-stage-step';
 import type AutofixRequestModel from 'codecrafters-frontend/models/autofix-request';
-import type RepositoryModel from 'codecrafters-frontend/models/repository';
-import { tracked } from '@glimmer/tracking';
-import fieldComparator from 'codecrafters-frontend/utils/field-comparator';
 
 interface Signature {
   Element: HTMLDivElement;
 
   Args: {
-    activeStep: StepDefinition;
-    currentStep: StepDefinition;
-    repository: RepositoryModel;
+    autofixRequest: AutofixRequestModel;
   };
 }
 
-export default class AutofixSection extends Component<Signature> {
-  @service declare store: Store;
-  @tracked autofixCreationError: string | null = null;
-
-  get activeCourseStage() {
-    if (this.args.activeStep.type === 'CourseStageStep') {
-      return this.activeStepAsCourseStageStep.courseStage;
-    } else {
-      return null;
-    }
-  }
-
-  get activeStepAsCourseStageStep() {
-    return this.args.activeStep as CourseStageStep;
-  }
-
-  get lastAutofixRequest(): AutofixRequestModel | null {
-    if (!this.lastSubmission) {
-      return null;
-    }
-
-    return (
-      this.lastSubmission.autofixRequests
-        .filter((item) => !item.isNew)
-        .filter((item) => !item.creatorTypeIsSystem)
-        .sort(fieldComparator('createdAt'))
-        .at(-1) || null
-    );
-  }
-
-  get lastSubmission() {
-    if (!this.activeCourseStage) {
-      return null;
-    }
-
-    if (this.args.repository.lastSubmission.courseStage === this.activeCourseStage) {
-      return this.args.repository.lastSubmission;
-    } else {
-      return null;
-    }
-  }
-}
+export default class AutofixSection extends Component<Signature> {}
 
 declare module '@glint/environment-ember-loose/registry' {
   export default interface Registry {

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

@@ -18,34 +18,45 @@
   {{/if}}
 
   <div
-    class="relative w-full flex flex-col grow overflow-auto {{unless this.isResizing 'transition-[height] duration-200 ease-out'}}"
+    class="relative w-full flex flex-col grow {{unless this.isResizing 'transition-[height] duration-200 ease-out'}}"
     style={{this.expandedContainerStyle}}
     data-test-contents
   >
     {{#if this.isExpanded}}
-      <div class="flex flex-col grow border-b border-gray-800 px-6">
-        <CoursePage::TestResultsBar::TopSection
-          @activeTabSlug={{this.activeTabSlug}}
-          @onActiveTabSlugChange={{fn (mut this.activeTabSlug)}}
-          @availableTabSlugs={{this.availableTabSlugs}}
-          class="mt-3 mb-3"
-        />
+      {{! min-h-0 ensures div doesn't outgrow container !}}
+      <div class="flex gap-6 grow border-b border-gray-800 px-6 min-h-0">
+        <CoursePage::TestResultsBar::Pane
+          @activeTabSlug={{this.activeTabSlugForLeftPane}}
+          @onActiveTabSlugChange={{fn (mut this.activeTabSlugForLeftPane)}}
+          @availableTabSlugs={{this.availableTabSlugsForLeftPane}}
+          class="transition-width duration-200 ease-out {{if this.shouldShowRightPane 'w-1/2' 'w-full'}} grow"
+        >
+          {{#if (eq this.activeTabSlugForLeftPane "logs")}}
+            <CoursePage::TestResultsBar::LogsSection
+              @activeStep={{@activeStep}}
+              @currentStep={{@currentStep}}
+              @repository={{@repository}}
+              class="grow min-h-0"
+            />
+          {{else if (eq this.activeTabSlugForLeftPane "autofix")}}
+            {{! Extra if convinces glint that autofixRequest is not null }}
+            {{#if this.autofixRequestForActiveStep}}
+              <CoursePage::TestResultsBar::AutofixSection @autofixRequest={{this.autofixRequestForActiveStep}} class="grow min-h-0" />
+            {{/if}}
+          {{/if}}
+        </CoursePage::TestResultsBar::Pane>
 
-        {{#if (eq this.activeTabSlug "logs")}}
-          <CoursePage::TestResultsBar::LogsSection
-            @activeStep={{@activeStep}}
-            @currentStep={{@currentStep}}
-            @repository={{@repository}}
-            class="grow overflow-y-auto"
-          />
-        {{else if (eq this.activeTabSlug "autofix")}}
-          <CoursePage::TestResultsBar::AutofixSection
-            @activeStep={{@activeStep}}
-            @currentStep={{@currentStep}}
-            @repository={{@repository}}
-            class="grow overflow-y-auto"
-          />
-        {{/if}}
+        <CoursePage::TestResultsBar::Pane
+          @activeTabSlug={{this.activeTabSlugForRightPane}}
+          @onActiveTabSlugChange={{fn (mut this.activeTabSlugForRightPane)}}
+          @availableTabSlugs={{this.availableTabSlugsForRightPane}}
+          class="transition-[width,opacity] duration-200 ease-out {{if this.shouldShowRightPane 'w-1/2 opacity-100' 'w-[0] opacity-0'}} grow"
+        >
+          {{! Extra if convinces glint that autofixRequest is not null }}
+          {{#if this.autofixRequestForActiveStep}}
+            <CoursePage::TestResultsBar::AutofixSection @autofixRequest={{this.autofixRequestForActiveStep}} class="grow min-h-0" />
+          {{/if}}
+        </CoursePage::TestResultsBar::Pane>
       </div>
 
       <div

app/components/course-page/test-results-bar/index.ts

@@ -9,6 +9,8 @@ import type AuthenticatorService from 'codecrafters-frontend/services/authentica
 import type CoursePageStateService from 'codecrafters-frontend/services/course-page-state';
 import type CourseStageStep from 'codecrafters-frontend/utils/course-page-step-list/course-stage-step';
 import type RepositoryModel from 'codecrafters-frontend/models/repository';
+import fade from 'ember-animated/transitions/fade';
+import type AutofixRequestModel from 'codecrafters-frontend/models/autofix-request';
 
 interface Signature {
   Element: HTMLDivElement;
@@ -20,32 +22,71 @@ interface Signature {
   };
 }
 
+interface ScreenService {
+  width: number;
+}
+
 export default class TestResultsBar extends Component<Signature> {
-  @service declare coursePageState: CoursePageStateService;
+  transition = fade;
+
   @service declare authenticator: AuthenticatorService;
-  @tracked activeTabSlug = 'logs'; // 'logs' | 'autofix'
+  @service declare coursePageState: CoursePageStateService;
+  @service declare screen: ScreenService;
+
+  @tracked activeTabSlugForLeftPane = 'logs'; // 'logs' | 'autofix'
+  @tracked activeTabSlugForRightPane = 'autofix';
   @tracked bottomSectionElement: HTMLDivElement | null = null;
   @tracked expandedContainerHeight = '75vh';
   @tracked isResizing = false;
 
+  get autofixRequestForActiveStep(): AutofixRequestModel | null {
+    if (this.args.activeStep.type !== 'CourseStageStep') {
+      return null;
+    }
+
+    const courseStageStep = this.args.activeStep as CourseStageStep;
+
+    return (
+      (this.args.repository.lastSubmission?.autofixRequests || [])
+        .filter((request) => !request.creatorTypeIsStaff)
+        .filter((request) => request.submission === this.args.repository.lastSubmission)
+        .filter((request) => request.submission.courseStage === courseStageStep.courseStage)
+        .at(-1) || null
+    );
+  }
+
   get availableTabSlugs() {
     if (this.args.activeStep.type === 'CourseStageStep') {
       const courseStageStep = this.args.activeStep as CourseStageStep;
 
       if (courseStageStep.courseStage.isFirst) {
         return ['logs'];
       } else {
-        if (this.authenticator.currentUser?.isStaff) {
+        if (this.authenticator.currentUser?.isStaff && this.autofixRequestForActiveStep) {
           return ['logs', 'autofix'];
         } else {
           return ['logs'];
         }
+
+        // return ['logs'];
       }
     } else {
       return ['logs'];
     }
   }
 
+  get availableTabSlugsForLeftPane() {
+    return this.availableTabSlugs.filter((slug) => !this.availableTabSlugsForRightPane.includes(slug));
+  }
+
+  get availableTabSlugsForRightPane() {
+    if (this.screen.width > 1024 && this.availableTabSlugs.length > 1) {
+      return ['autofix'];
+    } else {
+      return [];
+    }
+  }
+
   get expandedContainerStyle() {
     if (this.isExpanded) {
       return htmlSafe(`height: ${this.expandedContainerHeight}`);
@@ -62,6 +103,10 @@ export default class TestResultsBar extends Component<Signature> {
     return this.coursePageState.testResultsBarIsExpanded;
   }
 
+  get shouldShowRightPane() {
+    return this.availableTabSlugsForRightPane.length > 0;
+  }
+
   @action
   handleCollapseButtonClick() {
     this.coursePageState.testResultsBarIsExpanded = false;

…se-page/test-results-bar/top-section.hbs …ts/course-page/test-results-bar/pane.hbsapp/components/course-page/test-results-bar/top-section.hbs renamed to app/components/course-page/test-results-bar/pane.hbs app/components/course-page/test-results-bar/top-section.hbs renamed to app/components/course-page/test-results-bar/pane.hbs

@@ -1,5 +1,5 @@
-<div class="flex items-center justify-between" ...attributes>
-  <ul class="flex items-center gap-2 overflow-x-auto">
+<div class="flex flex-col" ...attributes>
+  <ul class="flex items-center gap-2 overflow-x-auto mt-3 mb-3 shrink-0">
     {{#each this.tabs as |tab|}}
       <TabHeader
         @size="small"
@@ -10,4 +10,6 @@
       />
     {{/each}}
   </ul>
+
+  {{yield}}
 </div>

…rse-page/test-results-bar/top-section.ts …nts/course-page/test-results-bar/pane.tsapp/components/course-page/test-results-bar/top-section.ts renamed to app/components/course-page/test-results-bar/pane.ts app/components/course-page/test-results-bar/top-section.ts renamed to app/components/course-page/test-results-bar/pane.ts

@@ -9,9 +9,13 @@ interface Signature {
     availableTabSlugs: string[];
     onActiveTabSlugChange: (slug: string) => void;
   };
+
+  Blocks: {
+    default: [];
+  };
 }
 
-export default class TopSection extends Component<Signature> {
+export default class Pane extends Component<Signature> {
   get tabs() {
     const allTabs = [
       {
@@ -37,6 +41,6 @@ export default class TopSection extends Component<Signature> {
 
 declare module '@glint/environment-ember-loose/registry' {
   export default interface Registry {
-    'CoursePage::TestResultsBar::TopSection': typeof TopSection;
+    'CoursePage::TestResultsBar::Pane': typeof Pane;
   }
 }

app/models/autofix-request.ts

@@ -6,17 +6,18 @@ export default class AutofixRequestModel extends Model {
   @belongsTo('submission', { async: false, inverse: 'autofixRequests' }) declare submission: SubmissionModel;
   @belongsTo('repository', { async: false, inverse: 'autofixRequests' }) declare repository: RepositoryModel;
 
-  @attr('string') declare creatorType: 'user' | 'system';
+  @attr('string') declare creatorType: 'user' | 'system' | 'staff';
   @attr() declare changedFiles: { diff: string; filename: string }[]; // free-form JSON
   @attr('date') declare createdAt: Date;
   @attr('string') declare explanationMarkdown: string;
   @attr('string') declare logstreamId: string; // For streaming logs when status is in_progress
   @attr('string') declare logsBase64: string; // Base64-encoded logs
   @attr('number') declare resultDelayInMilliseconds: number | null;
   @attr('string') declare status: string; // 'in_progress' | 'success' | 'failure' | 'error'
+  @attr('string') declare summary: string;
 
-  get creatorTypeIsSystem() {
-    return this.creatorType === 'system';
+  get creatorTypeIsStaff() {
+    return this.creatorType === 'staff';
   }
 
   get logs(): string {