feat(logstream-section): simplify toolCall text and improve animations

Refactor toolCall text rendering to a single string instead of 
textComponents array for clearer and more concise display. 
Wrap each toolCall in an AnimatedContainer and apply distinct 
listTransition for improved animation handling of tool call items.
Update text getters to directly return the full status string, 
improving maintainability and readability.
Remove redundant placeholder toolCalls when no events exist to 
streamline UI logic. These changes enhance UX by providing smoother 
transitions and clearer status messages.

Author: rohitpaulk

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

@@ -1,17 +1,18 @@
 <div class="overflow-y-auto h-32" {{did-insert this.handleDidInsertEventsContainer}} ...attributes>
   <AnimatedContainer>
-    {{#animated-each this.toolCalls key="tool_call_id" use=this.transition duration=300 as |toolCall|}}
-      <div>
-        {{#animated-if (eq toolCall.status "in_progress") use=this.transition duration=300}}
-          <div class="text-xs text-gray-300">
-            <TextShimmer @text={{concat toolCall.textComponents "1"}} />
-          </div>
-        {{else}}
-          <div class="text-xs text-gray-500">
-            {{get toolCall.textComponents "0"}}
-            {{get toolCall.textComponents "1"}}
-          </div>
-        {{/animated-if}}
+    {{#animated-each this.toolCalls key="tool_call_id" use=this.listTransition duration=300 as |toolCall|}}
+      <div class="py-0.5">
+        <AnimatedContainer>
+          {{#animated-if (eq toolCall.status "in_progress") use=this.transition duration=300}}
+            <div class="text-xs text-gray-300">
+              <TextShimmer @text={{toolCall.text}} />
+            </div>
+          {{else}}
+            <div class="text-xs text-gray-500">
+              {{toolCall.text}}
+            </div>
+          {{/animated-if}}
+        </AnimatedContainer>
       </div>
     {{/animated-each}}
   </AnimatedContainer>

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

@@ -1,13 +1,15 @@
 import Component from '@glimmer/component';
 import Logstream from 'codecrafters-frontend/utils/logstream';
+import fade from 'ember-animated/transitions/fade';
+import move from 'ember-animated/motions/move';
 import type ActionCableConsumerService from 'codecrafters-frontend/services/action-cable-consumer';
 import type AutofixRequestModel from 'codecrafters-frontend/models/autofix-request';
 import type Store from '@ember-data/store';
 import { action } from '@ember/object';
+import { fadeIn, fadeOut } from 'ember-animated/motions/opacity';
+import { next } from '@ember/runloop';
 import { service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
-import { next } from '@ember/runloop';
-import fade from 'ember-animated/transitions/fade';
 
 interface Signature {
   Element: HTMLDivElement;
@@ -46,55 +48,66 @@ class ToolCall {
     this.status = 'in_progress';
   }
 
-  get textComponents(): [string, string] {
+  get text(): string {
     switch (this.tool_name) {
       case 'read':
         if (this.status === 'in_progress') {
-          return ['Reading', 'abcd.rb'];
+          return `Reading ${this.tool_arguments['path']!}`;
         } else {
-          return ['Read', 'abcd.rb'];
+          return `Read ${this.tool_arguments['path']!}`;
         }
 
       case 'edit':
         if (this.status === 'in_progress') {
-          return ['Editing', 'abcd.rb'];
+          return `Editing ${this.tool_arguments['path']!}`;
+        } else {
+          return `Edited ${this.tool_arguments['path']!}`;
+        }
+
+      case 'write':
+        if (this.status === 'in_progress') {
+          return `Creating ${this.tool_arguments['path']!}`;
         } else {
-          return ['Edited', 'abcd.rb'];
+          return `Created ${this.tool_arguments['path']!}`;
         }
 
       case 'delete':
         if (this.status === 'in_progress') {
-          return ['Deleting', 'abcd.rb'];
+          return `Deleting ${this.tool_arguments['path']!}`;
         } else {
-          return ['Deleted', 'abcd.rb'];
+          return `Deleted ${this.tool_arguments['path']!}`;
         }
 
       case 'list':
         if (this.status === 'in_progress') {
-          return ['Listing', ''];
+          return 'Listing files';
         } else {
-          return ['Listed', ''];
+          return 'Listed files';
         }
 
       case 'bash':
         if (this.status === 'in_progress') {
-          return ['Running', 'tests'];
+          return 'Running tests';
         } else {
-          return ['Ran', 'tests'];
+          return 'Ran tests';
         }
 
       // This is a fake tool call that we insert for UI display purposes
       case 'analyze':
         if (this.status === 'in_progress') {
-          return ['Analyzing', 'codebase'];
+          return 'Analyzing codebase';
         } else {
-          return ['Analyzed', 'codebase'];
+          return 'Analyzed codebase';
         }
 
       default:
-        return [this.tool_name, ''];
+        return this.tool_name;
     }
   }
+
+  isAnalysisAction(): boolean {
+    return this.tool_name === 'analyze' || this.tool_name === 'read' || this.tool_name === 'list';
+  }
 }
 
 export default class LogstreamSection extends Component<Signature> {
@@ -141,10 +154,6 @@ export default class LogstreamSection extends Component<Signature> {
   get toolCalls(): ToolCall[] {
     const result: ToolCall[] = [];
 
-    if (this.events.length === 0) {
-      result.push(new ToolCall('fake-tool-call-id', 'analyze', {}));
-    }
-
     for (const event of this.events) {
       if (event.event === 'tool_call_start') {
         result.push(new ToolCall(event.params.tool_call_id, event.params.tool_name, event.params.tool_arguments || {}));
@@ -153,6 +162,25 @@ export default class LogstreamSection extends Component<Signature> {
       }
     }
 
+    if (result.every((toolCall) => toolCall.isAnalysisAction())) {
+      // Show an in-progress analysis action if all tool calls are analysis actions.
+      result.push(new ToolCall('fake-tool-call-id', 'analyze', {}));
+    } else {
+      const analysisToolCall = new ToolCall('fake-tool-call-id', 'analyze', {});
+      analysisToolCall.status = 'completed';
+
+      let lastAnalysisActionIndex = -1;
+
+      for (let i = result.length - 1; i >= 0; i--) {
+        if (result[i]!.isAnalysisAction()) {
+          lastAnalysisActionIndex = i;
+          break;
+        }
+      }
+
+      result.splice(lastAnalysisActionIndex + 1, 0, analysisToolCall);
+    }
+
     return result;
   }
 
@@ -161,6 +189,22 @@ export default class LogstreamSection extends Component<Signature> {
     this.eventsContainer = eventsContainer;
   }
 
+  // @ts-expect-error ember-animated not typed
+  // eslint-disable-next-line require-yield
+  *listTransition({ insertedSprites, keptSprites, removedSprites }) {
+    for (const sprite of keptSprites) {
+      move(sprite);
+    }
+
+    for (const sprite of insertedSprites) {
+      fadeIn(sprite);
+    }
+
+    for (const sprite of removedSprites) {
+      fadeOut(sprite);
+    }
+  }
+
   willDestroy() {
     super.willDestroy();