feat: enable remote SDK and resilient device orchestration

apps/showcase_ui/src/app/components/chat-interface/chat-interface.component.html

@@ -1,17 +1,17 @@
 <!--
- Copyright 2026 Google LLC
+Copyright 2026 Google LLC
 
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
-     http://www.apache.org/licenses/LICENSE-2.0
+http://www.apache.org/licenses/LICENSE-2.0
 
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
 -->
 
 <div class="chat-interface-container">
@@ -19,267 +19,322 @@
   <header class="chat-header">
     <!-- Tab Selector Header inside row -->
     <div class="tab-selector-bar">
-      <button 
-        class="tab-selector-btn" 
-        [class.active]="agentService.activeTab() === 'tasks'" 
+      <button
+        class="tab-selector-btn"
+        [class.active]="agentService.activeTab() === 'tasks'"
         (click)="agentService.activeTab.set('tasks')"
-      >
+        >
         <span class="material-symbols-outlined tab-icon">list_alt</span>
         <span class="tab-text">Task Queue</span>
       </button>
-      <button 
-        class="tab-selector-btn" 
-        [class.active]="agentService.activeTab() === 'notes'" 
+      <button
+        class="tab-selector-btn"
+        [class.active]="agentService.activeTab() === 'notes'"
         (click)="agentService.activeTab.set('notes')"
-      >
+        >
         <span class="material-symbols-outlined tab-icon">description</span>
         <span class="tab-text">Notes & Plans</span>
       </button>
     </div>
 
     <div class="header-right">
-      <button 
-        *ngIf="agentService.sessions().length > 0 && agentService.activeTab() === 'tasks'"
-        class="btn-clear-history" 
-        (click)="clearHistory()" 
-        title="Clear all tasks and history"
-        aria-label="Clear all tasks and history"
-        [disabled]="isSubmitting"
-      >
-        <span class="material-symbols-outlined">delete</span>
-      </button>
+      @if (agentService.sessions().length > 0 && agentService.activeTab() === 'tasks') {
+        <button
+          class="btn-clear-history"
+          (click)="clearHistory()"
+          title="Clear all tasks and history"
+          aria-label="Clear all tasks and history"
+          [disabled]="isSubmitting()"
+          >
+          <span class="material-symbols-outlined">delete</span>
+        </button>
+      }
     </div>
   </header>
 
   <!-- Scrollable Messages/Content Area -->
   <main class="chat-messages">
     <!-- Tasks Tab Content -->
-    <ng-container *ngIf="agentService.activeTab() === 'tasks'">
+    @if (agentService.activeTab() === 'tasks') {
       <!-- Active Queue Section -->
       <div class="queue-section-header">
         <span class="material-symbols-outlined section-icon">bolt</span> Active Queue ({{ activeQueue().length }})
       </div>
-
-      <div *ngIf="activeQueue().length === 0" class="empty-section-placeholder">
-        No active or queued tasks.
-      </div>
-
-      <div 
-        *ngFor="let session of activeQueue(); trackBy: trackSession"
-        class="task-card"
-        [class.selected]="agentService.currentSessionId() === session.session_id"
-        [class.running]="getTaskStatus(session) === 'running'"
-        (click)="selectTask(session.session_id)"
-      >
-        <div class="task-card-header">
-          <span class="task-badge" [ngClass]="getTaskStatus(session)">
-            <span class="status-dot" *ngIf="getTaskStatus(session) === 'running'"></span>
-            {{ getTaskStatus(session) | uppercase }}
-          </span>
-          <div class="task-card-header-actions">
-            <span class="task-device" *ngIf="getDeviceSerial(session)" [title]="'Device: ' + getDeviceSerial(session)">
-              <span class="material-symbols-outlined device-icon">phone_android</span>
-              <span class="device-name">{{ getDeviceSerial(session) }}</span>
+      @if (activeQueue().length === 0) {
+        <div class="empty-section-placeholder">
+          No active or queued tasks.
+        </div>
+      }
+      @for (session of activeQueue(); track trackSession($index, session)) {
+        <div
+          class="task-card"
+          [class.selected]="agentService.currentSessionId() === session.session_id"
+          [class.running]="getTaskStatus(session) === 'running'"
+          (click)="selectTask(session.session_id)"
+          >
+          <div class="task-card-header">
+            <span class="task-badge" [ngClass]="getTaskStatus(session)">
+              @if (getTaskStatus(session) === 'running') {
+                <span class="status-dot"></span>
+              }
+              {{ getTaskStatus(session) | uppercase }}
             </span>
-            <span class="task-time-divider" *ngIf="getDeviceSerial(session)">·</span>
-            <span class="task-time">{{ session.start_time * 1000 | date:'shortTime' }}</span>
-            <button
-              *ngIf="getTaskStatus(session) === 'running' || getTaskStatus(session) === 'paused'"
-              type="button"
-              class="btn-stop-card" 
-              (click)="stopTask(session.session_id, $event)" 
-              title="Stop this task"
-              aria-label="Stop this task"
-            >
-              <span class="material-symbols-outlined">stop_circle</span>
-            </button>
-            <button
-              *ngIf="getTaskStatus(session) !== 'running' && getTaskStatus(session) !== 'paused'"
-              type="button"
-              class="btn-delete-card" 
-              (click)="deleteTask(session.session_id, $event)" 
-              title="Delete this task"
-              aria-label="Delete this task"
-              [disabled]="isSubmitting"
-            >
-              <span class="material-symbols-outlined">delete</span>
-            </button>
+            <div class="task-card-header-actions">
+              @if (getDeviceSerial(session)) {
+                <span class="task-device" [title]="'Device: ' + getDeviceSerial(session)">
+                  <span class="material-symbols-outlined device-icon">phone_android</span>
+                  <span class="device-name">{{ getDeviceSerial(session) }}</span>
+                </span>
+              }
+              @if (getDeviceSerial(session)) {
+                <span class="task-time-divider">·</span>
+              }
+              <span class="task-time">{{ session.start_time * 1000 | date:'shortTime' }}</span>
+              @if (getTaskStatus(session) === 'running' || getTaskStatus(session) === 'paused') {
+                <button
+                  type="button"
+                  class="btn-stop-card"
+                  (click)="stopTask(session.session_id, $event)"
+                  title="Stop this task"
+                  aria-label="Stop this task"
+                  >
+                  <span class="material-symbols-outlined">stop_circle</span>
+                </button>
+              }
+              @if (getTaskStatus(session) !== 'running' && getTaskStatus(session) !== 'paused') {
+                <button
+                  type="button"
+                  class="btn-delete-card"
+                  (click)="deleteTask(session.session_id, $event)"
+                  title="Delete this task"
+                  aria-label="Delete this task"
+                  [disabled]="isSubmitting()"
+                  >
+                  <span class="material-symbols-outlined">delete</span>
+                </button>
+              }
+            </div>
+          </div>
+          <div class="task-goal" title="{{ session.initial_goal }}">
+            {{ session.initial_goal || 'Unnamed Task' }}
+          </div>
+          <div class="task-card-footer">
+            <span class="task-id" [title]="session.session_id">ID: {{ session.session_id }}</span>
+            <span class="task-date">{{ session.start_time * 1000 | date:'MM/dd/yy' }}</span>
           </div>
         </div>
-
-        <div class="task-goal" title="{{ session.initial_goal }}">
-          {{ session.initial_goal || 'Unnamed Task' }}
-        </div>
-
-        <div class="task-card-footer">
-          <span class="task-id" [title]="session.session_id">ID: {{ session.session_id }}</span>
-          <span class="task-date">{{ session.start_time * 1000 | date:'MM/dd/yy' }}</span>
-        </div>
-      </div>
-
+      }
       <!-- Collapsible History Section -->
       <details class="history-section" open>
         <summary class="history-summary">
           <span class="material-symbols-outlined section-icon">history</span> Past Runs & History ({{ historyTasks().length }})
         </summary>
-
         <div class="history-list-wrapper">
-          <div *ngIf="historyTasks().length === 0" class="empty-section-placeholder">
-            No past tasks.
-          </div>
-
-          <div 
-            *ngFor="let session of historyTasks(); trackBy: trackSession"
-            class="task-card"
-            [class.selected]="agentService.currentSessionId() === session.session_id"
-            [class.running]="getTaskStatus(session) === 'running'"
-            (click)="selectTask(session.session_id)"
-          >
-            <div class="task-card-header">
-              <span class="task-badge" [ngClass]="getTaskStatus(session)">
-                <span class="status-dot" *ngIf="getTaskStatus(session) === 'running'"></span>
-                {{ getTaskStatus(session) | uppercase }}
-              </span>
-              <div class="task-card-header-actions">
-                <span class="task-device" *ngIf="getDeviceSerial(session)" [title]="'Device: ' + getDeviceSerial(session)">
-                  <span class="material-symbols-outlined device-icon">phone_android</span>
-                  <span class="device-name">{{ getDeviceSerial(session) }}</span>
+          @if (historyTasks().length === 0) {
+            <div class="empty-section-placeholder">
+              No past tasks.
+            </div>
+          }
+          @for (session of historyTasks(); track trackSession($index, session)) {
+            <div
+              class="task-card"
+              [class.selected]="agentService.currentSessionId() === session.session_id"
+              [class.running]="getTaskStatus(session) === 'running'"
+              (click)="selectTask(session.session_id)"
+              >
+              <div class="task-card-header">
+                <span class="task-badge" [ngClass]="getTaskStatus(session)">
+                  @if (getTaskStatus(session) === 'running') {
+                    <span class="status-dot"></span>
+                  }
+                  {{ getTaskStatus(session) | uppercase }}
                 </span>
-                <span class="task-time-divider" *ngIf="getDeviceSerial(session)">·</span>
-                <span class="task-time">{{ session.start_time * 1000 | date:'shortTime' }}</span>
-              <button
-                *ngIf="getTaskStatus(session) !== 'running' && getTaskStatus(session) !== 'paused'"
-                  type="button"
-                  class="btn-delete-card" 
-                  (click)="deleteTask(session.session_id, $event)" 
-                  title="Delete this task"
-                  aria-label="Delete this task"
-                  [disabled]="isSubmitting"
-                >
-                  <span class="material-symbols-outlined">delete</span>
-                </button>
+                <div class="task-card-header-actions">
+                  @if (getDeviceSerial(session)) {
+                    <span class="task-device" [title]="'Device: ' + getDeviceSerial(session)">
+                      <span class="material-symbols-outlined device-icon">phone_android</span>
+                      <span class="device-name">{{ getDeviceSerial(session) }}</span>
+                    </span>
+                  }
+                  @if (getDeviceSerial(session)) {
+                    <span class="task-time-divider">·</span>
+                  }
+                  <span class="task-time">{{ session.start_time * 1000 | date:'shortTime' }}</span>
+                  @if (getTaskStatus(session) !== 'running' && getTaskStatus(session) !== 'paused') {
+                    <button
+                      type="button"
+                      class="btn-delete-card"
+                      (click)="deleteTask(session.session_id, $event)"
+                      title="Delete this task"
+                      aria-label="Delete this task"
+                      [disabled]="isSubmitting()"
+                      >
+                      <span class="material-symbols-outlined">delete</span>
+                    </button>
+                  }
+                </div>
+              </div>
+              <div class="task-goal" title="{{ session.initial_goal }}">
+                {{ session.initial_goal || 'Unnamed Task' }}
+              </div>
+              <div class="task-card-footer">
+                <span class="task-id" [title]="session.session_id">ID: {{ session.session_id }}</span>
+                <span class="task-date">{{ session.start_time * 1000 | date:'MM/dd/yy' }}</span>
               </div>
             </div>
-
-            <div class="task-goal" title="{{ session.initial_goal }}">
-              {{ session.initial_goal || 'Unnamed Task' }}
-            </div>
-
-            <div class="task-card-footer">
-              <span class="task-id" [title]="session.session_id">ID: {{ session.session_id }}</span>
-              <span class="task-date">{{ session.start_time * 1000 | date:'MM/dd/yy' }}</span>
-            </div>
-          </div>
+          }
         </div>
       </details>
-    </ng-container>
+    }
 
     <!-- Notes Tab Content -->
-    <ng-container *ngIf="agentService.activeTab() === 'notes'">
+    @if (agentService.activeTab() === 'notes') {
       <div class="notes-tab-content">
         <!-- Notes Selector / Pills (Only shown if there are multiple markdown notes) -->
-        <div class="notes-selector-container" *ngIf="noteKeys().length > 1">
-          <div class="notes-selector-list">
-            <button 
-              *ngFor="let key of noteKeys(); trackBy: trackNoteKey"
-              class="note-selector-pill"
-              [class.active]="agentService.selectedNoteKey() === key"
-              (click)="selectNote(key)"
-            >
-              <span class="material-symbols-outlined pill-icon">draft</span>
-              {{ key }}
-            </button>
+        @if (noteKeys().length > 1) {
+          <div class="notes-selector-container">
+            <div class="notes-selector-list">
+              @for (key of noteKeys(); track trackNoteKey($index, key)) {
+                <button
+                  class="note-selector-pill"
+                  [class.active]="agentService.selectedNoteKey() === key"
+                  (click)="selectNote(key)"
+                  >
+                  <span class="material-symbols-outlined pill-icon">draft</span>
+                  {{ key }}
+                </button>
+              }
+            </div>
           </div>
-        </div>
-
-        <div *ngIf="noteKeys().length === 0" class="empty-notes-container">
-          <div class="empty-notes-icon">
-            <span class="material-symbols-outlined">description</span>
+        }
+        @if (noteKeys().length === 0) {
+          <div class="empty-notes-container">
+            <div class="empty-notes-icon">
+              <span class="material-symbols-outlined">description</span>
+            </div>
+            <h4 class="empty-notes-title">No Notes & Plans</h4>
+            <p class="empty-notes-subtitle">No notes or structured plans were recorded for this session.</p>
           </div>
-          <h4 class="empty-notes-title">No Notes & Plans</h4>
-          <p class="empty-notes-subtitle">No notes or structured plans were recorded for this session.</p>
-        </div>
-
+        }
         <!-- Notes Content Viewer (Clean card blocks matching the second screenshot style) -->
-        <div class="note-viewer-cards" *ngIf="noteKeys().length > 0">
-          <!-- Render Note Title if present -->
-          <h2 class="note-title" *ngIf="parsedNote().title">{{ parsedNote().title }}</h2>
-
-          <!-- Render Milestones list as Text Blocks -->
-          <div class="milestones-container" *ngIf="parsedNote().milestones.length > 0">
-            <div 
-              *ngFor="let milestone of parsedNote().milestones; trackBy: trackMilestone" 
-              class="milestone-block"
-              [ngClass]="milestone.type"
-            >
-              <!-- Milestone Title Row with status icon -->
-              <div class="milestone-title-row">
-                <ng-container [ngSwitch]="milestone.type">
-                  <span *ngSwitchCase="'checked'" class="material-symbols-outlined milestone-status-icon checked">check_box</span>
-                  <span *ngSwitchCase="'progress'" class="material-symbols-outlined milestone-status-icon progress">indeterminate_check_box</span>
-                  <span *ngSwitchCase="'unchecked'" class="material-symbols-outlined milestone-status-icon unchecked">check_box_outline_blank</span>
-                </ng-container>
-                <div class="milestone-text">
-                  <span 
-                    *ngFor="let seg of milestone.segments" 
-                    [class.bold-segment]="seg.bold"
-                    [class.code-segment]="seg.code"
-                  >{{ seg.text }}</span>
-                </div>
+        @if (noteKeys().length > 0) {
+          <div class="note-viewer-cards">
+            <!-- Render Note Title if present -->
+            @if (parsedNote().title) {
+              <h2 class="note-title">{{ parsedNote().title }}</h2>
+            }
+            <!-- Render Milestones list as Text Blocks -->
+            @if (parsedNote().milestones.length > 0) {
+              <div class="milestones-container">
+                @for (milestone of parsedNote().milestones; track trackMilestone($index, milestone)) {
+                  <div
+                    class="milestone-block"
+                    [ngClass]="milestone.type"
+                    >
+                    <!-- Milestone Title Row with status icon -->
+                    <div class="milestone-title-row">
+                      @switch (milestone.type) {
+                        @case ('checked') {
+                          <span class="material-symbols-outlined milestone-status-icon checked">check_box</span>
+                        }
+                        @case ('progress') {
+                          <span class="material-symbols-outlined milestone-status-icon progress">indeterminate_check_box</span>
+                        }
+                        @case ('unchecked') {
+                          <span class="material-symbols-outlined milestone-status-icon unchecked">check_box_outline_blank</span>
+                        }
+                      }
+                      <div class="milestone-text">
+                        @for (seg of milestone.segments; track seg) {
+                          <span
+                            [class.bold-segment]="seg.bold"
+                            [class.code-segment]="seg.code"
+                          >{{ seg.text }}</span>
+                        }
+                      </div>
+                    </div>
+                    <!-- Sub-steps list if any -->
+                    @if (milestone.subSteps.length > 0) {
+                      <div class="milestone-substeps">
+                        @for (step of milestone.subSteps; track trackMarkdownLine($index, step)) {
+                          <div
+                            class="substep-row"
+                            [ngClass]="step.type"
+                            [style.padding-left.px]="(step.indent > 2 ? (step.indent - 2) * 12 : 0)"
+                            >
+                            @switch (step.type) {
+                              @case ('checked') {
+                                <span class="material-symbols-outlined check-icon checked">check_box</span>
+                              }
+                              @case ('progress') {
+                                <span class="material-symbols-outlined check-icon progress">indeterminate_check_box</span>
+                              }
+                              @case ('unchecked') {
+                                <span class="material-symbols-outlined check-icon unchecked">check_box_outline_blank</span>
+                              }
+                              @case ('list-item') {
+                                <span class="bullet">•</span>
+                              }
+                            }
+                            @if (step.type !== 'empty') {
+                              <span class="line-text">
+                                @for (seg of step.segments; track seg) {
+                                  <span
+                                    [class.bold-segment]="seg.bold"
+                                    [class.code-segment]="seg.code"
+                                  >{{ seg.text }}</span>
+                                }
+                              </span>
+                            }
+                          </div>
+                        }
+                      </div>
+                    }
+                  </div>
+                }
               </div>
-
-              <!-- Sub-steps list if any -->
-              <div class="milestone-substeps" *ngIf="milestone.subSteps.length > 0">
-                <div 
-                  *ngFor="let step of milestone.subSteps; trackBy: trackMarkdownLine" 
-                  class="substep-row"
-                  [ngClass]="step.type"
-                  [style.padding-left.px]="(step.indent > 2 ? (step.indent - 2) * 12 : 0)"
-                >
-                  <ng-container [ngSwitch]="step.type">
-                    <span *ngSwitchCase="'checked'" class="material-symbols-outlined check-icon checked">check_box</span>
-                    <span *ngSwitchCase="'progress'" class="material-symbols-outlined check-icon progress">indeterminate_check_box</span>
-                    <span *ngSwitchCase="'unchecked'" class="material-symbols-outlined check-icon unchecked">check_box_outline_blank</span>
-                    <span *ngSwitchCase="'list-item'" class="bullet">•</span>
-                  </ng-container>
-                  <span class="line-text" *ngIf="step.type !== 'empty'">
-                    <span 
-                      *ngFor="let seg of step.segments" 
-                      [class.bold-segment]="seg.bold"
-                      [class.code-segment]="seg.code"
-                    >{{ seg.text }}</span>
-                  </span>
-                </div>
+            }
+            <!-- Render any other lines (e.g. text/markdown blocks at the end) -->
+            @if (parsedNote().otherLines.length > 0) {
+              <div class="other-lines-container">
+                @for (line of parsedNote().otherLines; track trackMarkdownLine($index, line)) {
+                  <div
+                    class="md-line"
+                    [ngClass]="line.type"
+                    [style.margin-left.px]="line.indent * 12"
+                    >
+                    @switch (line.type) {
+                      @case ('checked') {
+                        <span class="material-symbols-outlined check-icon checked">check_box</span>
+                      }
+                      @case ('progress') {
+                        <span class="material-symbols-outlined check-icon progress">indeterminate_check_box</span>
+                      }
+                      @case ('unchecked') {
+                        <span class="material-symbols-outlined check-icon unchecked">check_box_outline_blank</span>
+                      }
+                      @case ('list-item') {
+                        <span class="bullet">•</span>
+                      }
+                    }
+                    @if (line.type !== 'empty') {
+                      <span class="line-text">
+                        @for (seg of line.segments; track seg) {
+                          <span
+                            [class.bold-segment]="seg.bold"
+                            [class.code-segment]="seg.code"
+                          >{{ seg.text }}</span>
+                        }
+                      </span>
+                    }
+                  </div>
+                }
               </div>
-            </div>
+            }
           </div>
-
-          <!-- Render any other lines (e.g. text/markdown blocks at the end) -->
-          <div class="other-lines-container" *ngIf="parsedNote().otherLines.length > 0">
-            <div 
-              *ngFor="let line of parsedNote().otherLines; trackBy: trackMarkdownLine"
-              class="md-line"
-              [ngClass]="line.type"
-              [style.margin-left.px]="line.indent * 12"
-            >
-              <ng-container [ngSwitch]="line.type">
-                <span *ngSwitchCase="'checked'" class="material-symbols-outlined check-icon checked">check_box</span>
-                <span *ngSwitchCase="'progress'" class="material-symbols-outlined check-icon progress">indeterminate_check_box</span>
-                <span *ngSwitchCase="'unchecked'" class="material-symbols-outlined check-icon unchecked">check_box_outline_blank</span>
-                <span *ngSwitchCase="'list-item'" class="bullet">•</span>
-              </ng-container>
-              <span class="line-text" *ngIf="line.type !== 'empty'">
-                <span 
-                  *ngFor="let seg of line.segments" 
-                  [class.bold-segment]="seg.bold"
-                  [class.code-segment]="seg.code"
-                >{{ seg.text }}</span>
-              </span>
-            </div>
-          </div>
-        </div>
+        }
       </div>
-    </ng-container>
+    }
   </main>
 </div>
 

apps/showcase_ui/src/app/components/chat-interface/chat-interface.component.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Component, inject, computed } from '@angular/core';
+import { Component, ChangeDetectionStrategy, inject, computed, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { AgentService } from '../../services/agent.service';
@@ -29,14 +29,20 @@ export type { MarkdownSegment, MarkdownLine, NoteMilestone, ParsedNote };
   standalone: true,
   imports: [CommonModule, FormsModule],
   templateUrl: './chat-interface.component.html',
-  styleUrl: './chat-interface.component.scss'
+  styleUrl: './chat-interface.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ChatInterfaceComponent {
   public agentService = inject(AgentService);
 
   public taskInput: string = '';
-  public isSubmitting: boolean = false;
-  public errorMessage: string | null = null;
+  // Signals so async completion handlers refresh this OnPush view.
+  public isSubmitting = signal<boolean>(false);
+  public errorMessage = signal<string | null>(null);
+
+  // Device-serial resolution can require a JSON.parse of device_info; memoize
+  // it per session object so template re-evaluation stays cheap.
+  private deviceSerialCache = new WeakMap<Session, string | null>();
 
   /**
    * Filtered computed list of active tasks (running or pending) sorted by status and submission order
@@ -76,23 +82,23 @@ export class ChatInterfaceComponent {
       return;
     }
 
-    this.isSubmitting = true;
-    this.errorMessage = null;
+    this.isSubmitting.set(true);
+    this.errorMessage.set(null);
 
     this.agentService.runTask(goal).subscribe({
       next: (res) => {
         this.taskInput = '';
-        this.isSubmitting = false;
+        this.isSubmitting.set(false);
         // Fetch status to refresh sessions list and select new session
         this.agentService.fetchStatus();
       },
       error: (err) => {
         console.error('Failed to submit task:', err);
-        this.isSubmitting = false;
-        this.errorMessage = err.error?.detail || 'The runner is busy. Please wait for the current task to finish.';
+        this.isSubmitting.set(false);
+        this.errorMessage.set(err.error?.detail || 'The runner is busy. Please wait for the current task to finish.');
         // Auto-dismiss error banner after 5 seconds
         setTimeout(() => {
-          this.errorMessage = null;
+          this.errorMessage.set(null);
         }, 5000);
       }
     });
@@ -103,11 +109,11 @@ export class ChatInterfaceComponent {
    */
   public stopTask(sessionId: string, event: MouseEvent): void {
     event.stopPropagation();
-    this.isSubmitting = true;
-    this.errorMessage = null;
+    this.isSubmitting.set(true);
+    this.errorMessage.set(null);
     this.agentService.stopTask(sessionId, false);
     setTimeout(() => {
-      this.isSubmitting = false;
+      this.isSubmitting.set(false);
     }, 400);
   }
 
@@ -115,11 +121,11 @@ export class ChatInterfaceComponent {
    * Stop the currently running task and optionally clear the backend queue
    */
   public stopTasks(stopAll: boolean = false): void {
-    this.isSubmitting = true;
-    this.errorMessage = null;
+    this.isSubmitting.set(true);
+    this.errorMessage.set(null);
     this.agentService.stopTask(stopAll);
     setTimeout(() => {
-      this.isSubmitting = false;
+      this.isSubmitting.set(false);
     }, 400);
   }
 
@@ -130,16 +136,16 @@ export class ChatInterfaceComponent {
     if (!confirm('Are you sure you want to clear all tasks and history? This cannot be undone.')) {
       return;
     }
-    this.isSubmitting = true;
-    this.errorMessage = null;
+    this.isSubmitting.set(true);
+    this.errorMessage.set(null);
     this.agentService.clearAllHistory().subscribe({
       next: () => {
-        this.isSubmitting = false;
+        this.isSubmitting.set(false);
       },
       error: (err: any) => {
         console.error('Failed to clear history:', err);
-        this.isSubmitting = false;
-        this.errorMessage = err.error?.detail || 'Failed to clear history.';
+        this.isSubmitting.set(false);
+        this.errorMessage.set(err.error?.detail || 'Failed to clear history.');
       }
     });
   }
@@ -152,16 +158,16 @@ export class ChatInterfaceComponent {
     if (!confirm(`Are you sure you want to delete this task? This cannot be undone.`)) {
       return;
     }
-    this.isSubmitting = true;
-    this.errorMessage = null;
+    this.isSubmitting.set(true);
+    this.errorMessage.set(null);
     this.agentService.deleteSession(sessionId).subscribe({
       next: () => {
-        this.isSubmitting = false;
+        this.isSubmitting.set(false);
       },
       error: (err: any) => {
         console.error(`Failed to delete task ${sessionId}:`, err);
-        this.isSubmitting = false;
-        this.errorMessage = err.error?.detail || 'Failed to delete task.';
+        this.isSubmitting.set(false);
+        this.errorMessage.set(err.error?.detail || 'Failed to delete task.');
       }
     });
   }
@@ -189,22 +195,26 @@ export class ChatInterfaceComponent {
    * Determine the device serial number for the session
    */
   public getDeviceSerial(session: Session): string | null {
+    if (this.deviceSerialCache.has(session)) {
+      return this.deviceSerialCache.get(session) ?? null;
+    }
+    let resolved: string | null = null;
     const serial = session.device_serial || session.device_id;
     if (serial && serial !== 'pending' && serial !== 'null' && serial !== 'undefined') {
-      return serial;
-    }
-    if (session.device_info) {
+      resolved = serial;
+    } else if (session.device_info) {
       try {
         const info = typeof session.device_info === 'string' ? JSON.parse(session.device_info) : session.device_info;
         const s = info?.device_id || info?.device_serial;
         if (s && s !== 'pending' && s !== 'null' && s !== 'undefined') {
-          return s;
+          resolved = s;
         }
       } catch {
         // ignore
       }
     }
-    return null;
+    this.deviceSerialCache.set(session, resolved);
+    return resolved;
   }
 
   /**