/**
 * 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
 *
 *     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.
 */

import { Component, ChangeDetectionStrategy, NgZone, signal, computed, effect, inject, untracked, DestroyRef, AfterViewInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterLink } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { AgentService, StartupProgressEvent } from '../../services/agent.service';
import { Session, ModelInfo } from '../../core/models/session.model';
import { MarkdownSegment, MarkdownLine, NoteMilestone, ParsedNote } from '../../core/models/markdown.model';
import { StepBlock, PhaseBlock, StepEvent, ActionParam, CheckerResult } from '../../core/models/stream.model';

export const PLANNING_LOADER_PHRASES: string[] = [
  'Planning next step...',
  'Analyzing screen coordinates...',
  'Consulting neural network...',
  'Formulating tactical action plan...',
  'Deciphering UI state & elements...',
  'Synthesizing decision pathways...',
  'Calibrating next move...',
  'Aligning logical vectors...',
  'Evaluating optimal sub-goals...',
  'Gathering sensory inputs...',
  'Computing next interaction...',
  'Optimizing execution strategy...',
  'Simulating probable outcomes...',
  'Summoning AI intuition...',
  'Brewing the next command...',
  'Strategizing tactical moves...'
];

export interface StartupWorkItem extends StartupProgressEvent {
  isActive: boolean;
  elapsed: string;
}

interface StartupWorkStage {
  started: string;
  completed: string;
  completedMessage: string;
}

const STARTUP_WORK_STAGES: StartupWorkStage[] = [
  {
    started: 'device_check',
    completed: 'device_ready',
    completedMessage: 'Android device connected'
  },
  {
    started: 'uiautomator',
    completed: 'uiautomator_ready',
    completedMessage: 'UI Automator is ready'
  },
  {
    started: 'environment',
    completed: 'environment_ready',
    completedMessage: 'Device environment is ready'
  }
];

function formatStartupElapsed(seconds: number): string {
  const safeSeconds = Math.max(0, seconds);
  return safeSeconds < 10
    ? `${safeSeconds.toFixed(1)}s`
    : `${Math.round(safeSeconds)}s`;
}

/**
 * Collapse noisy process-level startup events into the three device preparation
 * operations that are useful to someone watching a run.
 */
export function buildStartupWorkItems(
  events: StartupProgressEvent[],
  nowSeconds: number,
  executionHasOutput: boolean,
  agentIsActive: boolean
): StartupWorkItem[] {
  const byStage = new Map(events.map((event) => [event.stage, event]));
  const firstResponse = byStage.get('first_response');

  return STARTUP_WORK_STAGES.flatMap((stage, stageIndex) => {
    const started = byStage.get(stage.started);
    const explicitlyCompleted = byStage.get(stage.completed);
    if (!started && !explicitlyCompleted) return [];

    const nextStageStarted = STARTUP_WORK_STAGES
      .slice(stageIndex + 1)
      .map((nextStage) => byStage.get(nextStage.started) || byStage.get(nextStage.completed))
      .find((event): event is StartupProgressEvent => Boolean(event));
    const inferredCompletion = stage.started === 'environment'
      ? firstResponse
      : nextStageStarted;
    const completed = explicitlyCompleted || inferredCompletion;
    const isActive = !completed && !executionHasOutput && agentIsActive;
    const startTimestamp = started?.timestamp || explicitlyCompleted?.timestamp || nowSeconds;
    const endTimestamp = completed?.timestamp
      || (isActive ? nowSeconds : events[events.length - 1]?.timestamp || startTimestamp);

    return [{
      ...(explicitlyCompleted || started!),
      message: explicitlyCompleted?.message
        || (completed ? stage.completedMessage : started!.message),
      isActive,
      elapsed: formatStartupElapsed(endTimestamp - startTimestamp)
    }];
  });
}

import {
  parseNote,
  parseNoteLines,
  extractCheckerResult,
  renderMarkdownToHtml
} from '../../utils/markdown-parser.util';

import {
  getActionObject,
  isAndroidAction,
  getActionIcon,
  getActionTitle,
  getActionTargetText,
  getActionInputLabel,
  getActionInputText,
  getActionCoords,
  getActionBounds,
  getActionResourceId,
  getActionClass,
  isActionFailed,
  getActionErrorMessage,
  extractActionExtraParams,
  getStepPreImageUrl,
  getStepPostImageUrl,
  isReportStatusAction,
  getReportStatusValue,
  getReportStatusExplanation
} from '../../utils/action-formatter.util';

import {
  getToolArgs,
  isNoteTool,
  isVideoTool,
  getVideoAnalysisView,
  formatVideoTime,
  getVideoToolTarget,
  isDeviceActionTool,
  isFailureAnalyzerActionTool,
  getToolAgentName,
  shouldShowTool,
  getUniqueGenericTools,
  getToolKey,
  getToolDisplayLabel,
  getToolIcon,
  getToolTitle,
  getToolTargetText,
  getToolInputLabel,
  getToolInputText,
  getToolCoords,
  getToolAnalysisText,
  getToolGenericDetails,
  isAdbCommandTool,
  getAdbCommandLine,
  getAdbCwd,
  getAdbTerminalId,
  isToolFailed,
  getToolErrorMessage,
  extractToolExtraParams,
  isHumanThinking,
  cleanErrorMessage
} from '../../utils/tool-formatter.util';

import { drawActionCoordinatesOnOverlay } from '../../utils/image-overlay.util';

import {
  consolidateLogsToBlocks,
  groupBlocksToPhases,
  extractBlockTokens,
  formatTokenCount,
  getSortedStepEvents,
  compileSessionSummary,
  computeSessionDuration,
  checkPlanningLoader
} from '../../utils/stream-aggregator.util';

export type { MarkdownSegment, MarkdownLine, NoteMilestone, ParsedNote };

@Component({
  selector: 'app-agent-stream',
  standalone: true,
  imports: [CommonModule, FormsModule],
  templateUrl: './agent-stream.component.html',
  styleUrl: './agent-stream.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AgentStreamComponent implements AfterViewInit {
  public agentService = inject(AgentService);
  private http = inject(HttpClient);
  private destroyRef = inject(DestroyRef);
  private zone = inject(NgZone);

  // Auto-scroll state tracking
  public isUserAtBottom = true;
  private resizeObserver: ResizeObserver | null = null;
  private streamLogsContainer: HTMLElement | null = null;
  private autoScrollTimer: ReturnType<typeof setTimeout> | null = null;
  private autoScrollStreamBoxes = false;
  private onContainerScroll = () => {
    const container = this.streamLogsContainer;
    if (!container) return;
    const threshold = 150;
    const distanceToBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
    this.isUserAtBottom = distanceToBottom <= threshold;
  };

  // Dynamic Planning Loader Game-style Phrases
  public currentPlanningText = signal<string>(PLANNING_LOADER_PHRASES[0]);
  private planningIntervalId: any = null;
  private currentPhraseIndex = 0;

  // Top Nav Dropdown States
  public isTaskDropdownOpen = signal<boolean>(false);
  public isNotesDropdownOpen = signal<boolean>(false);

  // Zoom Modal State
  public selectedZoomImage = signal<string | null>(null);
  public selectedZoomAction = signal<any | null>(null);

  // Signals and properties for managing delayed collapsing of thought streams
  public collapsedStreams = signal<Set<string>>(new Set<string>());
  private scheduledCollapses = new Set<string>();

  // Signals and maps for typewriter effect simulation. All active typewriters
  // are driven by ONE requestAnimationFrame loop (run outside the Angular
  // zone) that batches every text advance into a single signal update.
  public typedTextsSignal = signal<Record<string, string>>({});
  private typingTargets = new Map<string, {
    blockId: string;
    isThinking: boolean;
    execId?: string;
    fallbackText: string;
  }>();
  private typingRafId: number | null = null;
  private lastTypingTimestamp = 0;
  // ≈ legacy pace of 8 characters every 12ms interval tick.
  private static readonly TYPING_CHARS_PER_SECOND = 667;
  private static readonly TYPING_MIN_FRAME_MS = 28;

  // Rendered-markdown memo per template slot: returning the identical string
  // instance for unchanged text lets the [innerHTML] binding skip re-sanitizing
  // and re-parsing the whole fragment on every change-detection pass.
  private markdownHtmlCache = new Map<string, { source: string; html: string }>();
  // Thinking-text extraction memo (includes the JSON-detection heuristics).
  private thinkingTextCache = new WeakMap<any, { native: string | null; raw: string | null }>();
  private deviceSerialCache = new WeakMap<Session, string | null>();

  // Set to track expanded and collapsed state of action cards
  public expandedActionCards = signal<Set<string>>(new Set<string>());
  public collapsedActionCards = signal<Set<string>>(new Set<string>());
  public retryClock = signal<number>(Date.now());

  // Performance caches for parameter and event extractions
  private actionParamsCache = new WeakMap<any, ActionParam[]>();
  private toolParamsCache = new WeakMap<any, ActionParam[]>();
  private sortedEventsCache = new WeakMap<any, { signature: string; events: StepEvent[] }>();

  // Top Nav Task Queue Computed Properties
  public activeQueue = computed(() => {
    const list = this.agentService.sessions().filter((s) => {
      const status = this.getTaskStatus(s);
      return status === 'running' || status === 'paused' || status === 'pending';
    });
    return list.sort((a, b) => {
      const statusA = this.getTaskStatus(a);
      const statusB = this.getTaskStatus(b);
      const isRunA = statusA === 'running' || statusA === 'paused';
      const isRunB = statusB === 'running' || statusB === 'paused';
      if (isRunA && !isRunB) return -1;
      if (!isRunA && isRunB) return 1;
      return (a.start_time || 0) - (b.start_time || 0);
    });
  });

  public historyTasks = computed(() => {
    return this.agentService.sessions().filter((s) => {
      const status = this.getTaskStatus(s);
      return status === 'completed' || status === 'failed' || status === 'cancelled';
    });
  });

  // Top Nav Notes Computed Properties
  public currentNoteContent = computed(() => {
    const notes = this.agentService.currentNotes();
    const key = this.agentService.selectedNoteKey();
    return notes[key] || '';
  });

  public noteKeys = computed(() => {
    return Object.keys(this.agentService.currentNotes()).filter(key => key.toLowerCase().endsWith('.md'));
  });


  public outputterReport = computed(() => {
    const notes = this.agentService.currentNotes();
    return notes['output.md'] || null;
  });

  // Memoized so the Task Report card is not re-parsed (and its DOM rebuilt)
  // on every change-detection pass while streams are typing.
  public parsedOutputReport = computed<ParsedNote | null>(() => {
    const report = this.outputterReport();
    return report ? parseNote(report) : null;
  });

  public parsedNote = computed<ParsedNote>(() => {
    return this.getParsedNote(this.currentNoteContent());
  });

  // Stream Log Filtering & Aggregation Computed Properties
  public filteredLogs = computed(() => {
    const logs = this.agentService.sessionLogs();
    const currentSessionId = this.agentService.currentSessionId();
    if (!currentSessionId) return logs;
    return logs.filter((log: any) => {
      const logSessionId = log.session_id || log.data?.session_id;
      return !logSessionId || logSessionId === currentSessionId;
    });
  });

  public sessionSummary = computed(() => {
    return compileSessionSummary(this.filteredLogs());
  });

  public showPlanningLoader = computed(() => {
    const isRunning = this.agentService.agentStatus() === 'running';
    const currentSessionId = this.agentService.currentSessionId();
    const runningSessionId = this.agentService.runningSessionId();
    const isCurrentRunningSession = !currentSessionId || currentSessionId === runningSessionId;
    return checkPlanningLoader(this.filteredLogs(), isRunning, isCurrentRunningSession);
  });

  public isViewingPausedTask = computed(() => {
    // A live task_paused event and the polled runner status must agree before
    // recovery controls are shown. This prevents a stale failure trace from
    // offering Resume while the active task is still reported as running.
    if (!this.agentService.isPaused() || this.agentService.agentStatus() !== 'paused') return false;

    const currentSessionId = this.agentService.currentSessionId();
    const pausedSessionId = this.agentService.runningSessionId();
    return !currentSessionId || currentSessionId === pausedSessionId;
  });

  public sessionDuration = computed(() => {
    const currentSession = this.agentService.sessions().find(s => s.session_id === this.agentService.currentSessionId());
    return computeSessionDuration(currentSession?.start_time || 0, this.filteredLogs());
  });

  public consolidatedBlocks = computed<StepBlock[]>(() => {
    return consolidateLogsToBlocks(this.filteredLogs());
  });

  public phases = computed<PhaseBlock[]>(() => {
    const currentSession = this.agentService.sessions().find(s => s.session_id === this.agentService.currentSessionId());
    return groupBlocksToPhases(this.consolidatedBlocks(), currentSession?.start_time || 0);
  });

  public startupWorkItems = computed(() => {
    this.retryClock();
    const events = this.agentService.currentStartupProgress();
    const agentIsActive = ['running', 'paused'].includes(this.agentService.agentStatus());
    return buildStartupWorkItems(
      events,
      Date.now() / 1000,
      this.consolidatedBlocks().length > 0,
      agentIsActive
    );
  });

  public startupPreparationIsRunning = computed(() => {
    return this.startupWorkItems().some((item) => item.isActive);
  });

  public startupPreparationIsComplete = computed(() => {
    const items = this.startupWorkItems();
    return items.length > 0 && !items.some((item) => item.isActive);
  });

  public startupPreparationDuration = computed(() => {
    const items = this.startupWorkItems();
    if (items.length === 0) return 0;

    const events = this.agentService.currentStartupProgress();
    const startedAt = events[0]?.timestamp || items[0].timestamp;
    const completedAt = events.find((event) => event.stage === 'environment_ready')?.timestamp
      || events.find((event) => event.stage === 'first_response')?.timestamp;
    const endedAt = this.startupPreparationIsRunning()
      ? Date.now() / 1000
      : completedAt || Math.max(...items.map((item) => item.timestamp));

    return Math.max(1, Math.round(endedAt - startedAt));
  });

  private retryablePauseTrace = computed<any | null>(() => {
    if (!this.isViewingPausedTask()) return null;

    const blocks = this.consolidatedBlocks();
    for (let blockIndex = blocks.length - 1; blockIndex >= 0; blockIndex--) {
      const tools = blocks[blockIndex]?.data?.generic_tools;
      if (!Array.isArray(tools)) continue;

      for (let toolIndex = tools.length - 1; toolIndex >= 0; toolIndex--) {
        const tool = tools[toolIndex];
        // Older persisted traces used the llm_pause name without adding the
        // newer payload.pause marker. Treat both contracts consistently.
        if (this.isDisplayableLLMFailure(tool)) {
          return tool;
        }
      }
    }
    return null;
  });

  public hasVisibleBlocks(phase: any): boolean {
    if (!phase || !phase.blocks) return false;
    return phase.blocks.some((b: any) => this.hasVisibleContent(b));
  }

  constructor() {
    // The retry clock only needs to tick while something on screen is timing
    // (startup progress, LLM retry countdowns). An idle page stays quiet.
    this.zone.runOutsideAngular(() => {
      const retryClockInterval = setInterval(() => {
        const status = this.agentService.agentStatus();
        if (status === 'running' || status === 'paused' || this.agentService.isRetrying()) {
          this.retryClock.set(Date.now());
        }
      }, 1000);
      this.destroyRef.onDestroy(() => clearInterval(retryClockInterval));
    });

    // Auto scroll stream box during active text streaming
    effect(() => {
      const logs = this.filteredLogs();
      const activeStream = logs.find(log => log.type === 'llm_stream' && !log.data?.isCompleted);
      if (activeStream) {
        this.scheduleAutoScroll(true);
      }
    });

    // Auto scroll main log list when new logs are added or typewriter updates
    effect(() => {
      this.consolidatedBlocks();
      this.typedTextsSignal();
      this.scheduleAutoScroll(false);
    });

    // Typewriter drive logic: triggers typing when block appears or expands
    effect(() => {
      const blocks = this.consolidatedBlocks();
      blocks.forEach(block => {
        const blockId = block.id;
        const rawText = this.getRawThinking(block) || '';
        const nativeText = this.getNativeThinking(block) || '';

        untracked(() => {
          // Handle Raw Thinking (Work)
          const currentRecord = this.typedTextsSignal();
          if (rawText) {
            if (!(blockId in currentRecord)) {
              if (block.data?.isCompleted) {
                this.typedTextsSignal.update(r => ({ ...r, [blockId]: rawText }));
              } else {
                this.typedTextsSignal.update(r => ({ ...r, [blockId]: '' }));
                this.startTyping(blockId, rawText, false);
              }
            } else {
              const currentVal = currentRecord[blockId] || '';
              if (currentVal.length < rawText.length && !this.typingTargets.has(blockId)) {
                if (block.data?.isCompleted) {
                  this.typedTextsSignal.update(r => ({ ...r, [blockId]: rawText }));
                } else {
                  this.startTyping(blockId, rawText, false);
                }
              }
            }
          }

          // Handle Native Thinking (Thought)
          const nativeKey = blockId + '-native';
          if (nativeText) {
            const execId = block.data?.execution_id || block.data?.step_id || blockId;
            if (!(nativeKey in currentRecord)) {
              if (block.data?.isCompleted) {
                this.typedTextsSignal.update(r => ({ ...r, [nativeKey]: nativeText }));
                this.collapsedStreams.update(set => {
                  const newSet = new Set(set);
                  newSet.add(execId);
                  return newSet;
                });
              } else {
                this.typedTextsSignal.update(r => ({ ...r, [nativeKey]: '' }));
                this.startTyping(nativeKey, nativeText, true, execId);
              }
            } else {
              const currentVal = currentRecord[nativeKey] || '';
              if (currentVal.length < nativeText.length && !this.typingTargets.has(nativeKey)) {
                if (block.data?.isCompleted) {
                  this.typedTextsSignal.update(r => ({ ...r, [nativeKey]: nativeText }));
                  this.collapsedStreams.update(set => {
                    const newSet = new Set(set);
                    newSet.add(execId);
                    return newSet;
                  });
                } else {
                  this.startTyping(nativeKey, nativeText, true, execId);
                }
              }
            }
          }
        });
      });
    });

    // Reset typewriter and collapse states when session changes
    effect(() => {
      this.agentService.currentSessionId();
      untracked(() => {
        this.stopTypingLoop();
        this.typedTextsSignal.set({});
        this.markdownHtmlCache.clear();
        this.scheduledCollapses.clear();
        this.collapsedStreams.set(new Set<string>());
        this.isUserAtBottom = true;
        
        setTimeout(() => {
          const container = document.querySelector('.stream-logs-content');
          if (container) {
            container.scrollTop = container.scrollHeight;
          }
        }, 100);
      });
    });

    // Periodically rotate loading text like game loading screen hints
    effect(() => {
      const isLoading = this.showPlanningLoader();
      if (isLoading) {
        if (!this.planningIntervalId) {
          this.currentPhraseIndex = Math.floor(Math.random() * PLANNING_LOADER_PHRASES.length);
          this.currentPlanningText.set(PLANNING_LOADER_PHRASES[this.currentPhraseIndex]);

          this.planningIntervalId = setInterval(() => {
            this.currentPhraseIndex = (this.currentPhraseIndex + 1) % PLANNING_LOADER_PHRASES.length;
            this.currentPlanningText.set(PLANNING_LOADER_PHRASES[this.currentPhraseIndex]);
          }, 2800);
        }
      } else {
        if (this.planningIntervalId) {
          clearInterval(this.planningIntervalId);
          this.planningIntervalId = null;
        }
      }
    });

    this.destroyRef.onDestroy(() => {
      if (this.planningIntervalId) {
        clearInterval(this.planningIntervalId);
        this.planningIntervalId = null;
      }
      if (this.resizeObserver) {
        this.resizeObserver.disconnect();
        this.resizeObserver = null;
      }
      this.stopTypingLoop();
      if (this.autoScrollTimer) {
        clearTimeout(this.autoScrollTimer);
        this.autoScrollTimer = null;
      }
      if (this.streamLogsContainer) {
        this.streamLogsContainer.removeEventListener('scroll', this.onContainerScroll);
        this.streamLogsContainer = null;
      }
    });
  }

  public ngAfterViewInit(): void {
    const container = document.querySelector('.stream-logs-content') as HTMLElement | null;
    this.streamLogsContainer = container;
    if (!container) return;

    // The scroll listener lives outside the Angular zone: tracking the
    // user's scroll position must not trigger change detection per frame.
    this.zone.runOutsideAngular(() => {
      container.addEventListener('scroll', this.onContainerScroll, { passive: true });
    });

    if (typeof ResizeObserver !== 'undefined') {
      this.resizeObserver = new ResizeObserver(() => {
        if (this.isUserAtBottom) {
          this.scheduleAutoScroll(false);
        }
      });
      this.resizeObserver.observe(container);
    }
  }

  /**
   * Coalesce every auto-scroll request into one deferred pass that batches all
   * DOM reads before all writes, instead of thrashing layout per update.
   */
  private scheduleAutoScroll(includeStreamBoxes: boolean): void {
    this.autoScrollStreamBoxes = this.autoScrollStreamBoxes || includeStreamBoxes;
    if (this.autoScrollTimer) return;
    this.zone.runOutsideAngular(() => {
      this.autoScrollTimer = setTimeout(() => {
        this.autoScrollTimer = null;
        const includeBoxes = this.autoScrollStreamBoxes;
        this.autoScrollStreamBoxes = false;

        const boxes = includeBoxes
          ? (Array.from(document.getElementsByClassName('stream-box')) as HTMLElement[])
          : [];
        const boxTargets = boxes.map((el) => el.scrollHeight);
        const container = this.streamLogsContainer;
        const containerTarget = container && this.isUserAtBottom ? container.scrollHeight : null;

        boxes.forEach((el, i) => { el.scrollTop = boxTargets[i]; });
        if (container && containerTarget !== null) {
          container.scrollTop = containerTarget;
        }
      }, 50);
    });
  }

  // Top Nav Action Methods
  public toggleTaskDropdown(event: Event): void {
    event.stopPropagation();
    this.isTaskDropdownOpen.update(v => !v);
    if (this.isTaskDropdownOpen()) {
      this.isNotesDropdownOpen.set(false);
    }
  }

  public toggleNotesDropdown(event: Event): void {
    event.stopPropagation();
    this.isNotesDropdownOpen.update((v) => !v);
    if (this.isNotesDropdownOpen()) {
      this.isTaskDropdownOpen.set(false);
    }
  }

  public openOutputterNote(event?: Event): void {
    if (event) event.stopPropagation();
    this.agentService.selectedNoteKey.set('output.md');
    this.isNotesDropdownOpen.set(true);
    this.isTaskDropdownOpen.set(false);
  }

  public closeAllDropdowns(): void {
    this.isTaskDropdownOpen.set(false);
    this.isNotesDropdownOpen.set(false);
  }

  public getTaskStatus(session: Session): 'running' | 'paused' | 'completed' | 'pending' | 'failed' | 'cancelled' {
    if (session.status) {
      const s = session.status.toLowerCase();
      if (s === 'completed' || s === 'success' || s === 'failed' || s === 'cancelled') {
        return (s === 'success' ? 'completed' : s) as any;
      }
      if (s === 'running' || s === 'paused' || s === 'pending') {
        return s as any;
      }
    }
    if (session.session_id === this.agentService.runningSessionId() && (this.agentService.agentStatus() === 'running' || this.agentService.agentStatus() === 'paused')) {
      return this.agentService.agentStatus() as 'running' | 'paused';
    }
    return 'completed';
  }

  /**
   * 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') {
      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') {
          resolved = s;
        }
      } catch {
        // ignore
      }
    }
    this.deviceSerialCache.set(session, resolved);
    return resolved;
  }

  public selectTask(sessionId: string, event?: Event): void {
    if (event) event.stopPropagation();
    this.agentService.selectSession(sessionId, true);
    this.isTaskDropdownOpen.set(false);
  }

  public stopTask(sessionId: string, event?: Event): void {
    if (event) event.stopPropagation();
    this.agentService.stopTask(sessionId, false);
  }

  public deleteTask(sessionId: string, event?: Event): void {
    if (event) event.stopPropagation();
    if (!confirm(`Are you sure you want to delete this task? This cannot be undone.`)) {
      return;
    }
    this.agentService.deleteSession(sessionId).subscribe({
      error: (err) => {
        console.error(`Failed to delete session ${sessionId}:`, err);
      }
    });
  }

  public selectNote(key: string, event?: Event): void {
    if (event) event.stopPropagation();
    this.agentService.selectedNoteKey.set(key);
  }

  public getParsedNote(content: string): ParsedNote {
    return parseNote(content);
  }

  public getParsedNoteLines(content: string): MarkdownLine[] {
    return parseNoteLines(content);
  }

  // Typewriter & Delayed Collapse
  private startTyping(key: string, targetText: string, isThinking: boolean = false, execId?: string) {
    const blockId = key.endsWith('-native') ? key.replace('-native', '') : key;
    this.typingTargets.set(key, { blockId, isThinking, execId, fallbackText: targetText });
    this.ensureTypingLoop();
  }

  private ensureTypingLoop(): void {
    if (this.typingRafId !== null) return;
    this.lastTypingTimestamp = performance.now();
    this.zone.runOutsideAngular(() => {
      const step = (now: number) => {
        this.typingRafId = null;
        const elapsed = now - this.lastTypingTimestamp;
        if (elapsed >= AgentStreamComponent.TYPING_MIN_FRAME_MS) {
          this.lastTypingTimestamp = now;
          this.advanceTyping(elapsed);
        }
        if (this.typingTargets.size > 0) {
          this.typingRafId = requestAnimationFrame(step);
        }
      };
      this.typingRafId = requestAnimationFrame(step);
    });
  }

  private stopTypingLoop(): void {
    this.typingTargets.clear();
    if (this.typingRafId !== null) {
      cancelAnimationFrame(this.typingRafId);
      this.typingRafId = null;
    }
  }

  /**
   * Advance every active typewriter by the elapsed wall time and publish all
   * changes as one signal update (one render pass per animation frame at most).
   */
  private advanceTyping(elapsedMs: number): void {
    const blocks = untracked(() => this.consolidatedBlocks());
    const currentRecord = untracked(() => this.typedTextsSignal());
    const chars = Math.max(
      1,
      Math.round(AgentStreamComponent.TYPING_CHARS_PER_SECOND * elapsedMs / 1000)
    );
    const updates: Record<string, string> = {};
    let hasUpdates = false;

    for (const [key, typing] of this.typingTargets) {
      const block = blocks.find((b) => b.id === typing.blockId);
      let target = typing.fallbackText;
      if (block) {
        target = (typing.isThinking ? this.getNativeThinking(block) : this.getRawThinking(block))
          || typing.fallbackText;
      }

      const current = currentRecord[key] || '';
      if (current.length < target.length) {
        updates[key] = target.slice(0, Math.min(current.length + chars, target.length));
        hasUpdates = true;
      } else if (block?.data?.isCompleted) {
        this.typingTargets.delete(key);
        if (typing.isThinking && typing.execId) {
          this.triggerDelayedCollapse(typing.execId);
        }
      }
    }

    if (hasUpdates) {
      this.typedTextsSignal.update((r) => ({ ...r, ...updates }));
    }
  }

  private triggerDelayedCollapse(execId: string) {
    if (!this.scheduledCollapses.has(execId)) {
      this.scheduledCollapses.add(execId);
      setTimeout(() => {
        this.collapsedStreams.update((set: Set<string>) => {
          const newSet = new Set(set);
          newSet.add(execId);
          return newSet;
        });
      }, 1000);
    }
  }

  public onDetailsToggle(event: Event, execId: string): void {
    const details = event.target as HTMLDetailsElement;
    const isOpen = details.open;
    this.collapsedStreams.update((set: Set<string>) => {
      const newSet = new Set(set);
      if (isOpen) {
        newSet.delete(execId);
      } else {
        newSet.add(execId);
      }
      return newSet;
    });
  }

  public toggleCollapse(execId: string): void {
    this.collapsedStreams.update((set: Set<string>) => {
      const newSet = new Set(set);
      if (newSet.has(execId)) {
        newSet.delete(execId);
      } else {
        newSet.add(execId);
      }
      return newSet;
    });
  }

  // Android Action Delegation Methods
  public getActionObject(action: any): any {
    return getActionObject(action);
  }

  public isAndroidAction(action: any): boolean {
    return isAndroidAction(action);
  }

  public getActionIcon(action: any): string {
    return getActionIcon(action);
  }

  public getActionTitle(action: any): string {
    return getActionTitle(action);
  }

  public getActionTargetText(action: any): string {
    return getActionTargetText(action);
  }

  public getActionInputLabel(action: any): string {
    return getActionInputLabel(action);
  }

  public getActionInputText(action: any): string {
    return getActionInputText(action);
  }

  public getActionCoords(action: any): string {
    return getActionCoords(action);
  }

  public isActionFailed(action: any, stepData?: any): boolean {
    return isActionFailed(action, stepData);
  }

  public getActionErrorMessage(action: any, stepData?: any): string {
    return getActionErrorMessage(action, stepData);
  }

  public isActionExpanded(cardId: string, defaultExpanded: boolean = false): boolean {
    if (this.collapsedActionCards().has(cardId)) return false;
    if (this.expandedActionCards().has(cardId)) return true;
    return defaultExpanded;
  }

  public toggleActionExpanded(cardId: string, event?: Event, defaultExpanded: boolean = false): void {
    if (event) {
      event.stopPropagation();
    }
    const isCurrentlyExpanded = this.isActionExpanded(cardId, defaultExpanded);
    if (isCurrentlyExpanded) {
      this.expandedActionCards.update(set => {
        const newSet = new Set(set);
        newSet.delete(cardId);
        return newSet;
      });
      this.collapsedActionCards.update(set => {
        const newSet = new Set(set);
        newSet.add(cardId);
        return newSet;
      });
    } else {
      this.collapsedActionCards.update(set => {
        const newSet = new Set(set);
        newSet.delete(cardId);
        return newSet;
      });
      this.expandedActionCards.update(set => {
        const newSet = new Set(set);
        newSet.add(cardId);
        return newSet;
      });
    }
  }

  public getActionBounds(action: any): string {
    return getActionBounds(action);
  }

  public getActionResourceId(action: any): string {
    return getActionResourceId(action);
  }

  public getActionClass(action: any): string {
    return getActionClass(action);
  }

  public getActionExtraParams(action: any): ActionParam[] {
    return extractActionExtraParams(action, this.actionParamsCache);
  }

  public getToolExtraParams(toolData: any): ActionParam[] {
    return extractToolExtraParams(toolData, this.toolParamsCache);
  }

  public getStepPreImageUrl(stepData: any, actionData?: any): string | null {
    return getStepPreImageUrl(stepData, actionData);
  }

  public getStepPostImageUrl(stepData: any, actionData?: any): string | null {
    return getStepPostImageUrl(stepData, actionData);
  }

  // Zoom Modal & Overlay Methods
  public openImageModal(url: string, actionObj?: any, event?: Event): void {
    if (event) {
      event.stopPropagation();
    }
    this.selectedZoomImage.set(url);
    this.selectedZoomAction.set(actionObj || null);
  }

  public closeImageModal(event?: Event): void {
    if (event) {
      event.stopPropagation();
    }
    this.selectedZoomImage.set(null);
    this.selectedZoomAction.set(null);
  }

  public onImageLoad(img: HTMLImageElement, overlay: HTMLElement, actionObj: any): void {
    if (!img || !overlay) return;
    try {
      this.drawActionCoordinatesOnOverlay(img, overlay, actionObj);
    } catch (e) {
      console.warn('Failed to draw action overlay:', e);
    }
  }

  public drawActionCoordinatesOnOverlay(img: HTMLImageElement, overlay: HTMLElement, actionObj: any): void {
    drawActionCoordinatesOnOverlay(img, overlay, actionObj);
  }

  // Generic Tool Delegation Methods

  /**
   * First save_note call per note key, derived once per blocks change instead
   * of re-scanning every block for every rendered tool row.
   */
  private firstSaveNoteByKey = computed<Map<string, any>>(() => {
    const firstByKey = new Map<string, any>();
    for (const block of this.consolidatedBlocks()) {
      if (block.type === 'step' && block.data.generic_tools) {
        for (const t of this.getUniqueGenericTools(block.data.generic_tools)) {
          if (t.name && t.name.toLowerCase() === 'save_note') {
            const key = this.getToolKey(t);
            if (key && !firstByKey.has(key)) {
              firstByKey.set(key, t);
            }
          }
        }
      }
    }
    return firstByKey;
  });

  public isFirstSaveNoteForKey(tool: any): boolean {
    if (!tool || !tool.name || tool.name.toLowerCase() !== 'save_note') {
      return false;
    }
    const key = this.getToolKey(tool);
    if (!key) return true;

    const firstCall = this.firstSaveNoteByKey().get(key);
    if (!firstCall) return true;
    return (tool.trace_id && firstCall.trace_id)
      ? tool.trace_id === firstCall.trace_id
      : tool === firstCall;
  }

  public getToolDisplayLabel(tool: any): string {
    return getToolDisplayLabel(tool, this.isFirstSaveNoteForKey(tool));
  }

  public isNoteTool(tool: any): boolean {
    return isNoteTool(tool);
  }

  public isVideoTool(tool: any): boolean {
    return isVideoTool(tool);
  }

  public getVideoToolTarget(tool: any): string | null {
    return getVideoToolTarget(tool);
  }

  public getVideoAnalysisLabel(tool: any): string {
    return getVideoAnalysisView(tool)?.title || 'Analyzing screen recording';
  }

  public getVideoAnalysisRangeLabel(tool: any): string {
    const range = getVideoAnalysisView(tool)?.requestedRange;
    if (!range) return 'Screen recording';
    return `${formatVideoTime(range.start)}–${formatVideoTime(range.end)}`;
  }

  public getVideoAnalysisDetail(tool: any): string {
    const view = getVideoAnalysisView(tool);
    if (!view || view.totalCount <= 1) return '';
    if (view.outcome === 'running' || view.outcome === 'recovering') {
      return view.completedCount > 0
        ? `${view.completedCount}/${view.totalCount} segments saved`
        : '';
    }
    if (view.outcome === 'partial') {
      return `${view.completedCount}/${view.totalCount} segments saved`;
    }
    return '';
  }

  public isVideoAnalysisAttention(tool: any): boolean {
    const outcome = getVideoAnalysisView(tool)?.outcome;
    return outcome === 'partial' || outcome === 'failed';
  }

  public onVideoToolClick(toolData: any): void {
    const curSessionId = this.agentService.currentSessionId();
    if (curSessionId) {
      const start = getVideoAnalysisView(toolData)?.requestedRange?.start;
      this.agentService.openVideoPlayer(curSessionId, undefined, undefined, start);
    }
  }

  public getScreenRecordingButtonTitle(): string {
    if (this.agentService.isCurrentSessionRunning()) {
      return 'Task is currently running (Recording screen)';
    }
    if (this.agentService.currentSessionRecordingStatus() === 'processing') {
      return 'Preparing screen recording...';
    }
    if (this.agentService.currentSessionVideoUrl()) {
      return 'Play Screen Recording Video';
    }
    if (this.agentService.hasCurrentSessionStepFrames()) {
      return this.agentService.currentSessionRecordingStatus() === 'failed'
        ? 'Video recording failed — Click to replay step-by-step screenshots'
        : 'Play step-by-step screenshots replay';
    }
    if (this.agentService.currentSessionRecordingStatus() === 'failed') {
      return 'Screen recording generation failed';
    }
    return 'Screen Recording';
  }

  public isDeviceActionTool(tool: any): boolean {
    return isDeviceActionTool(tool);
  }

  public isFailureAnalyzerActionTool(tool: any): boolean {
    return isDeviceActionTool(tool);
  }

  public getToolAgentName(tool: any): string | null {
    return getToolAgentName(tool);
  }

  public shouldShowTool(tool: any, stepData?: any): boolean {
    return shouldShowTool(tool, stepData);
  }

  public getUniqueGenericTools(tools: any[] | undefined): any[] {
    return getUniqueGenericTools(tools);
  }

  public getSortedStepEvents(stepData: any): StepEvent[] {
    return getSortedStepEvents(stepData, this.sortedEventsCache);
  }

  /**
   * Memoized per block-data object: templates call these many times per
   * change-detection pass, and the raw-thinking path runs JSON-detection
   * heuristics over the full text.
   */
  private getThinkingTexts(data: any): { native: string | null; raw: string | null } {
    let entry = this.thinkingTextCache.get(data);
    if (!entry) {
      const nativeText = data.operator_native_thinking || (data.stream_type === 'thinking' ? data.text : null);
      const rawText = data.operator_raw_thinking || (data.stream_type === 'text' ? data.text : null);
      entry = {
        native: nativeText && nativeText.trim() ? nativeText : null,
        raw: rawText && rawText.trim() && this.isHumanThinking(rawText) ? rawText : null
      };
      this.thinkingTextCache.set(data, entry);
    }
    return entry;
  }

  public getNativeThinking(block: any): string | null {
    if (!block || !block.data) return null;
    return this.getThinkingTexts(block.data).native;
  }

  public getRawThinking(block: any): string | null {
    if (!block || !block.data) return null;
    return this.getThinkingTexts(block.data).raw;
  }

  public hasVisibleContent(block: any): boolean {
    if (!block) return false;
    const hasNative = Boolean(this.getNativeThinking(block));
    const hasRaw = Boolean(this.getRawThinking(block));
    const hasVisibleTools = Boolean(block.data?.generic_tools) && block.data.generic_tools.some((t: any) =>
      this.shouldShowTool(t, block.data)
      || this.isDisplayableLLMFailure(t)
      || this.isLLMRetry(t)
      || this.isReportStatusAction(t)
    );
    const hasAndroidActions = Boolean(block.data?.action_taken) && (this.isAndroidAction(block.data.action_taken) || this.isReportStatusAction(block.data.action_taken));
    return hasNative || hasRaw || hasVisibleTools || hasAndroidActions;
  }

  public isReportStatusAction(action: any): boolean {
    return isReportStatusAction(action);
  }

  public getReportStatusValue(action: any): string {
    return getReportStatusValue(action);
  }

  public getReportStatusExplanation(action: any): string {
    return getReportStatusExplanation(action);
  }

  public isHumanThinking(text: string | null): boolean {
    return isHumanThinking(text);
  }

  public isTerminalLLMFailure(tool: any): boolean {
    return !!tool && this.retryablePauseTrace() === tool;
  }

  public isDisplayableLLMFailure(tool: any): boolean {
    return tool?.type === 'llm_call'
      && tool?.status === 'failed'
      && (tool?.name === 'llm_pause' || tool?.payload?.pause === true);
  }

  public resumePausedTask(event: Event): void {
    event.stopPropagation();
    this.agentService.resumeTask();
  }

  public getLLMErrorText(tool: any): string {
    const noDetails = 'The AI provider did not return error details after the request failed.';
    if (!tool) return noDetails;
    const rawError = tool.payload?.error || tool.error;
    if (!rawError) return noDetails;
    const cleaned = this.cleanErrorMessage(rawError);
    return cleaned === 'Unknown error' ? noDetails : cleaned;
  }

  public isLLMRetry(tool: any): boolean {
    return tool?.type === 'llm_call'
      && tool?.status === 'retrying'
      && tool?.payload?.source === 'provider_sdk'
      && ['google', 'gemini'].includes(String(tool?.payload?.provider || '').toLowerCase());
  }

  public getLLMRetryEntries(tool: any): any[] {
    const retries = tool?.payload?.retries;
    return Array.isArray(retries) && retries.length > 0 ? retries : [tool?.payload || tool];
  }

  public getLLMFailureRetryEntries(tool: any): any[] {
    const retries = tool?.payload?.retries;
    if (!Array.isArray(retries)) return [];
    return retries.filter((retry: any) =>
      retry?.source === 'provider_sdk'
      && ['google', 'gemini'].includes(String(retry?.provider || '').toLowerCase())
    );
  }

  public hasLLMFailureRetryEntries(tool: any): boolean {
    return this.getLLMFailureRetryEntries(tool).length > 0;
  }

  public getLLMRetryEntryDelay(entry: any): string | null {
    const delay = Number(entry?.delay);
    if (!Number.isFinite(delay) || delay <= 0) return null;
    return `${delay.toFixed(2).replace(/\.00$/, '')}s`;
  }

  public getLLMRetryEntryWaited(entry: any): string {
    const delay = Number(entry?.delay);
    if (!Number.isFinite(delay) || delay <= 0) return '0s';

    const rawStartedAt = Number(entry?.scheduled_at ?? entry?.timestamp);
    if (!Number.isFinite(rawStartedAt) || rawStartedAt <= 0) {
      return this.formatLLMDuration(delay);
    }
    const startedAtMs = rawStartedAt < 1e11 ? rawStartedAt * 1000 : rawStartedAt;
    const elapsed = Math.min(delay, Math.max(0, (this.retryClock() - startedAtMs) / 1000));
    return this.formatLLMDuration(elapsed);
  }

  public isLLMRetryEntryWaiting(entry: any): boolean {
    const delay = Number(entry?.delay);
    const rawStartedAt = Number(entry?.scheduled_at ?? entry?.timestamp);
    if (!Number.isFinite(delay) || delay <= 0 || !Number.isFinite(rawStartedAt)) return false;
    const startedAtMs = rawStartedAt < 1e11 ? rawStartedAt * 1000 : rawStartedAt;
    return this.retryClock() < startedAtMs + delay * 1000;
  }

  public getLLMFailureWaited(tool: any): string | null {
    const waited = Number(tool?.payload?.waited_seconds);
    if (!Number.isFinite(waited) || waited < 0) return null;
    return this.formatLLMDuration(waited);
  }

  public formatLLMDuration(seconds: number): string {
    if (seconds < 0.05) return '0s';
    if (seconds < 10) return `${seconds.toFixed(1).replace(/\.0$/, '')}s`;
    return `${Math.round(seconds)}s`;
  }

  public cleanErrorMessage(rawError: any): string {
    return cleanErrorMessage(rawError);
  }

  public getToolKey(tool: any): string | null {
    return getToolKey(tool);
  }

  public getToolCallName(action: any): string {
    const act = this.getActionObject(action);
    if (!act) return 'Tool';
    const label = this.getToolDisplayLabel(act);
    const key = this.getToolKey(act);
    return key ? `${label}: ${key}` : label;
  }

  public getToolCallLabel(action: any): string {
    return this.getToolCallName(action);
  }

  public isToolFailed(tool: any): boolean {
    return isToolFailed(tool);
  }

  public getToolErrorMessage(tool: any): string {
    return getToolErrorMessage(tool);
  }

  public getToolArgs(tool: any): any {
    return getToolArgs(tool);
  }

  public getToolIcon(tool: any): string {
    return getToolIcon(tool);
  }

  public getToolTitle(tool: any): string {
    return getToolTitle(tool);
  }

  public getToolTargetText(tool: any): string {
    return getToolTargetText(tool);
  }

  public getToolInputLabel(tool: any): string {
    return getToolInputLabel(tool);
  }

  public getToolInputText(tool: any): string {
    return getToolInputText(tool);
  }

  public getToolCoords(tool: any): string {
    return getToolCoords(tool);
  }

  public getToolAnalysisText(tool: any): string {
    return getToolAnalysisText(tool);
  }

  public getToolGenericDetails(tool: any): string {
    return getToolGenericDetails(tool);
  }

  public isAdbCommandTool(tool: any): boolean {
    return isAdbCommandTool(tool);
  }

  public getAdbCommandLine(tool: any): string {
    return getAdbCommandLine(tool);
  }

  public getAdbCwd(tool: any): string {
    return getAdbCwd(tool);
  }

  public getAdbTerminalId(tool: any): string {
    return getAdbTerminalId(tool);
  }

  public onSessionChange(event: Event): void {
    const selectElement = event.target as HTMLSelectElement;
    const sessionId = selectElement.value;
    if (sessionId) {
      this.agentService.selectSession(sessionId, true);
    }
  }

  public isStepEvent(eventType: string): boolean {
    return eventType === 'step_recorded' || eventType === 'step_updated';
  }

  public getCheckerResult(text: string): CheckerResult | null {
    return extractCheckerResult(text);
  }

  public isShortContent(data: any): boolean {
    if (!data) return true;
    const str = typeof data === 'string' ? data : JSON.stringify(data);
    return str.length < 200;
  }

  public formatJson(data: any): string {
    if (typeof data === 'string') {
      try {
        return JSON.stringify(JSON.parse(data), null, 2);
      } catch {
        return data;
      }
    }
    return JSON.stringify(data, null, 2);
  }

  public getStatusLabel(status: string): string {
    switch (status) {
      case 'idle':
        return 'Idle';
      case 'running':
        return 'Running';
      case 'completed':
        return 'Completed';
      case 'offline':
        return 'Offline';
      default:
        return status.toUpperCase();
    }
  }

  /**
   * Render markdown with a per-slot memo. Returning the identical cached
   * string instance for unchanged text means the [innerHTML] binding sees the
   * same reference and skips DOM/sanitizer work entirely.
   */
  public renderMarkdown(text: string, cacheKey?: string): string {
    if (!text) return '';
    if (!cacheKey) {
      return renderMarkdownToHtml(text);
    }
    const cached = this.markdownHtmlCache.get(cacheKey);
    if (cached && cached.source === text) {
      return cached.html;
    }
    const html = renderMarkdownToHtml(text);
    this.markdownHtmlCache.set(cacheKey, { source: text, html });
    return html;
  }

  public onToolKeyClick(key: string): void {
    this.agentService.selectedNoteKey.set(key);
    this.agentService.activeTab.set('notes');
    
    const sessionId = this.agentService.currentSessionId();
    if (sessionId) {
      this.agentService.fetchNotes(sessionId);
    }
  }

  public trackSession(index: number, session: Session): string {
    return session.session_id;
  }

  public trackNoteKey(index: number, key: string): string {
    return key;
  }

  public trackMilestone(index: number, milestone: NoteMilestone): number {
    return milestone.index;
  }

  public trackMarkdownLine(index: number, line: MarkdownLine): number {
    return index;
  }

  public trackPhase(index: number, phase: any): string {
    return phase.id;
  }

  public trackBlock(index: number, block: any): string {
    return block.id;
  }

  public trackTool(index: number, tool: any): string {
    return tool.trace_id || index.toString();
  }

  public trackStepEvent(index: number, item: { type: string; data: any; timestamp?: number }): string {
    if (!item || !item.data) return index.toString();
    // A step has at most one thinking and one text event; keying them by type
    // alone keeps their DOM stable while the streamed text grows (keying by
    // text length would tear down and rebuild the node on every chunk).
    if (item.type === 'thinking' || item.type === 'text') {
      return item.type;
    }
    return item.type + '-' + (item.data.trace_id
      || item.data.timestamp || item.data.start_time || item.data.created_at || item.data.id
      || ((item.data.action || item.data.name || '') + '-' + index));
  }

  public trackParam(index: number, param: { key: string; value: string }): string {
    return param.key;
  }

  public getModelDisplayName(name: string | undefined | null): string {
    if (!name) return 'Flash';
    const lower = name.toLowerCase();
    if (lower.includes('pro')) return 'Pro';
    if (lower.includes('flash')) return 'Flash';
    return name.replace(/^artemis\s+/i, '');
  }

  public getModelIcon(name: string | undefined | null): string {
    if (!name) return 'bolt';
    const lower = name.toLowerCase();
    if (lower.includes('pro')) return 'diamond';
    if (lower.includes('flash')) return 'bolt';
    return 'smart_toy';
  }

  public getModelClass(name: string | undefined | null): string {
    if (!name) return 'is-flash';
    const lower = name.toLowerCase();
    if (lower.includes('pro')) return 'is-pro';
    if (lower.includes('flash')) return 'is-flash';
    return '';
  }

  public getArchitectureTooltip(model?: ModelInfo | null): string {
    if (!model) return 'Agent Architecture: ARTEMIS Flash (Reactive Fast Loop)';
    const name = this.getModelDisplayName(model.name);
    const isPro = name.toLowerCase().includes('pro');
    const archDesc = isPro
      ? 'ARTEMIS Pro (Multi-Agent Cognitive State Graph)'
      : 'ARTEMIS Flash (Reactive Fast Loop)';
    if (model.id) {
      return `Agent Architecture: ${archDesc} · LLM: ${model.id} (${model.provider || 'google'})`;
    }
    return `Agent Architecture: ${archDesc}`;
  }

  public formatTokenCount(tokens?: number): string {
    return formatTokenCount(tokens);
  }

  public getTokenTooltip(phase: PhaseBlock): string {
    if (!phase.tokens) return '';
    if (phase.promptTokens && phase.completionTokens) {
      return `Consumed: ${phase.tokens.toLocaleString()} tokens (${phase.promptTokens.toLocaleString()} in / ${phase.completionTokens.toLocaleString()} out)`;
    }
    return `Consumed: ${phase.tokens.toLocaleString()} tokens`;
  }

  public isCurrentSessionActive(): boolean {
    const status = this.agentService.agentStatus();
    if (status !== 'running') return false;
    const currentId = this.agentService.currentSessionId();
    const runningId = this.agentService.runningSessionId();
    if (currentId && runningId && currentId !== runningId) {
      return false;
    }
    const currentSession = this.agentService.sessions().find(s => s.session_id === currentId);
    if (currentSession && (currentSession.status === 'completed' || currentSession.status === 'failed' || currentSession.status === 'cancelled')) {
      return false;
    }
    return true;
  }

  public isItemRunning(item: any, block: any): boolean {
    if (!item || !item.data) return false;
    if (!this.isCurrentSessionActive()) return false;
    if (item.data.status === 'success' || item.data.status === 'failed' || item.data.status === 'cancelled') return false;
    if (this.isReportStatusAction(item.data) || this.isReportStatusAction(item.data?.action_taken)) return false;
    if (item.data.status === 'running') return true;

    // Check if session is currently running and this is the active trailing item
    const blocks = this.consolidatedBlocks();
    const lastBlock = blocks.length > 0 ? blocks[blocks.length - 1] : null;
    if (lastBlock && (lastBlock.id === block?.id || !block?.data?.isCompleted)) {
      const events = this.getSortedStepEvents(block.data);
      const lastEvent = events.length > 0 ? events[events.length - 1] : null;
      if (lastEvent && (lastEvent.data?.trace_id === item.data?.trace_id || lastEvent === item)) {
        return true;
      }
    }
    return false;
  }

  public isBlockRunning(block: any): boolean {
    if (!block || !block.data) return false;
    if (!this.isCurrentSessionActive()) return false;
    if (this.isReportStatusAction(block.data.action_taken) || block.data?.status === 'completed' || block.data?.status === 'failed' || block.data?.status === 'cancelled') return false;
    if (block.data.isCompleted === false) return true;
    const blocks = this.consolidatedBlocks();
    const lastBlock = blocks.length > 0 ? blocks[blocks.length - 1] : null;
    return lastBlock?.id === block.id;
  }
}