feat(test-results-bar): split logs and autofix into two panes

Refactor test results bar to use separate left and right panes for logs 
and autofix tabs when screen width permits. This improves UI by allowing 
simultaneous display of logs and autofix information on wider screens.

Remove toggle for full autofix logs and show only summary and explanation 
for successful autofix requests to simplify the interface.

Adjust layout in pane component for better flex behavior and consistent 
scrolling experience.

Add fade transition for pane changes and update tab availability logic 
based on user role, active step, and screen size for better UX.

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,31 +18,43 @@
   {{/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">
+      {{! 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.activeTabSlug}}
-          @onActiveTabSlugChange={{fn (mut this.activeTabSlug)}}
-          @availableTabSlugs={{this.availableTabSlugs}}
+          @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.activeTabSlug "logs")}}
+          {{#if (eq this.activeTabSlugForLeftPane "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"
+              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>
+
+        <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>

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;

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

@@ -1,5 +1,5 @@
-<div ...attributes>
-  <ul class="flex items-center gap-2 overflow-x-auto mt-3 mb-3">
+<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"

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 {

mirage/handlers/fake-submission-logs.js

@@ -5,7 +5,14 @@ export default function (server) {
     if (request.queryParams.type === 'success') {
       return new Response(200, {}, '\x1b[92m[stage-1] passed\x1b[0m\n\x1b[92m[stage-2] passed\x1b[0m');
     } else {
-      return new Response(200, {}, '\x1b[91m[stage-1] failure\x1b[0m\n\x1b[91m[stage-2] failure\x1b[0m');
+      // Generate 20 lines of colored failure output for stages 1-20
+      const lines = [];
+
+      for (let i = 1; i <= 20; i++) {
+        lines.push(`\x1b[91m[stage-${i}] failure\x1b[0m`);
+      }
+
+      return new Response(200, {}, lines.join('\n'));
     }
   });
 }