feat(autofix-result): refactor logstream handling with modifier

Replace manual logstream management in AutofixResult component with a
new `logstream-did-update` modifier that handles subscription lifecycle
automatically. This simplifies the component by removing explicit setup,
teardown, and state syncing of Logstream instances.

Update the template to use the modifier for logstream updates and track
logstream content reactively. This ensures better separation of concerns
and reduces boilerplate.

Add `logstream-did-update` modifier that encapsulates subscribing and
unsubscribing to logstreams and invokes a callback on updates.

Overall, these changes improve code clarity, correctness, and maintainability
around logstream update handling.

Author: rohitpaulk

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

@@ -35,14 +35,9 @@
 
   {{#if (eq @autofixRequest.status "in_progress")}}
     <div class="bg-gray-800 border border-gray-700 rounded-sm overflow-y-auto relative grow">
-      <div
-        class="p-3"
-        {{did-insert this.handleMarkdownStreamElementInserted}}
-        {{did-update this.handleDidUpdateAutofixRequestLogstreamId @autofixRequest.logstreamId}}
-        {{will-destroy this.handleWillDestroyMarkdownStreamElement}}
-      >
-        {{#if this.logstream}}
-          <AnsiStream @content={{this.logstream.content}} class="text-xs whitespace-pre-wrap" />
+      <div class="p-3" {{logstream-did-update this.handleLogstreamDidUpdate @autofixRequest.logstreamId}}>
+        {{#if this.logstreamContent}}
+          <AnsiStream @content={{this.logstreamContent}} class="text-xs whitespace-pre-wrap" />
         {{/if}}
       </div>
     </div>

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

@@ -1,12 +1,10 @@
 import AnalyticsEventTrackerService from 'codecrafters-frontend/services/analytics-event-tracker';
-import type Store from '@ember-data/store';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import Logstream from 'codecrafters-frontend/utils/logstream';
 import type AutofixRequestModel from 'codecrafters-frontend/models/autofix-request';
-import type ActionCableConsumerService from 'codecrafters-frontend/services/action-cable-consumer';
+import type Logstream from 'codecrafters-frontend/utils/logstream';
 
 interface Signature {
   Element: HTMLDivElement;
@@ -17,40 +15,21 @@ interface Signature {
 }
 
 export default class AutofixResult extends Component<Signature> {
-  @service declare store: Store;
-  @service declare actionCableConsumer: ActionCableConsumerService;
   @service declare analyticsEventTracker: AnalyticsEventTrackerService;
 
-  @tracked logstream: Logstream | null = null;
   @tracked shouldShowFullLog = false;
+  @tracked logstreamContent: string | null = null;
   @tracked diffIsBlurred = true;
 
   @action
-  handleDidUpdateAutofixRequestLogstreamId() {
-    if (this.logstream && this.args.autofixRequest.logstreamId !== this.logstream.logstreamId) {
-      this.logstream.unsubscribe();
-      this.handleMarkdownStreamElementInserted(); // create a new logstream
-    }
-  }
+  handleLogstreamDidUpdate(logstream: Logstream): void {
+    this.logstreamContent = logstream.content;
 
-  @action
-  handleLogstreamDidPoll(): void {
+    // TODO: See if we're doing this too often?
+    // Ensure we also reload the autofix request to see whether the status has changed
     this.args.autofixRequest.reload();
   }
 
-  @action
-  handleMarkdownStreamElementInserted() {
-    this.logstream = new Logstream(this.args.autofixRequest.logstreamId, this.actionCableConsumer, this.store, this.handleLogstreamDidPoll);
-    this.logstream.subscribe();
-  }
-
-  @action
-  handleWillDestroyMarkdownStreamElement() {
-    if (this.logstream) {
-      this.logstream.unsubscribe();
-    }
-  }
-
   @action
   toggleBlur() {
     if (this.diffIsBlurred) {

app/modifiers/logstream-did-update.ts

@@ -0,0 +1,47 @@
+// Invokes a callback when a logstream is updated.
+// Usage: <div {{logstream-did-update this.handleLogstreamDidUpdate logstreamId}}></div>
+import type ActionCableConsumerService from 'codecrafters-frontend/services/action-cable-consumer';
+import type Store from '@ember-data/store';
+import Logstream from 'codecrafters-frontend/utils/logstream';
+import Modifier from 'ember-modifier';
+import { inject as service } from '@ember/service';
+import { registerDestructor } from '@ember/destroyable';
+import { action } from '@ember/object';
+
+interface Signature {
+  Args: {
+    Positional: [(logstream: Logstream) => void, string];
+  };
+}
+
+export default class LogstreamDidUpdateModifier extends Modifier<Signature> {
+  @service declare actionCableConsumer: ActionCableConsumerService;
+  @service declare store: Store;
+
+  callback?: (logstream: Logstream) => void;
+  logstream?: Logstream;
+
+  @action
+  handleLogstreamDidPoll(): void {
+    this.callback!(this.logstream!);
+  }
+
+  modify(_element: HTMLElement, [callback, logstreamId]: Signature['Args']['Positional']) {
+    this.logstream = new Logstream(logstreamId, this.actionCableConsumer, this.store, this.handleLogstreamDidPoll);
+    this.callback = callback;
+
+    console.log(`subscribing to logstream#${logstreamId}`);
+    this.logstream.subscribe();
+
+    registerDestructor(this, () => {
+      console.log(`unsubscribing from logstream#${logstreamId}`);
+      this.logstream?.unsubscribe();
+    });
+  }
+}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'logstream-did-update': typeof LogstreamDidUpdateModifier;
+  }
+}