src/js/client.js

// @ts-nocheck
import * as shared from "./lib/shared.js";
import { createAnalysisController } from "./lib/analysisController.js";
import { createCaptureFlow } from "./lib/captureFlow.js";
import { setCaptureStatus, setButtonState, setScanMs, mountScanIntervalControl, preparePreviewHost } from "./lib/captureUi.js";
import { mountTrackSelection, mountVisionModelControl } from "./lib/captureInputs.js";
import { updateTrackPills, updateManageTracksButtonState, openTracksTab, openPillTarget } from "./lib/dom.js";
import { startCountdownTimer, stopCountdownTimer, scheduleNextScan, updateCountdown } from "./lib/timing.js";
import { captureFrame, drawSyntheticFrame } from "./lib/captureCanvas.js";

const {
  normalizeScanMs,
  readStoredScanMs,
  normalizeVisionModel,
  visionModelLabel,
  readStoredVisionModel,
  readStoredVisionModelRaw,
  formatScanInterval,
  formatCountdown,
  readSoloMode,
  readVisionModelControlValue,
  isSyntheticLoopMode,
  captureModeSuffix,
  effectiveScanMs,
  readLatestAnalysisProject,
  updateSmartDelayFromLatestResult,
  summarizeDebugValue,
  recordDebugTrace,
  storedScanMs,
  state,
} = shared;

export function initCaptureClient() {
  state.smartDelayMs = state.smartDelayMs || 0;
  state.sameProjectStreak = state.sameProjectStreak || 0;
  state.lastProjectName = state.lastProjectName || '';
  state.debugTrace = state.debugTrace || [];
  state.recordDebugTrace = window.__trackwhatDesktopCaptureTrace || state.recordDebugTrace || null;
  window.__trackwhatDesktopCaptureDebug = { trace: () => state.debugTrace.slice(), clear: () => (state.debugTrace = [], []) };
  window['__trackwhatDesktopCaptureTrace']?.('state.init', { scanMs: state.scanMs, automationMode: state.automationMode });

  const analysis = createAnalysisController({ state, scheduleNextScan, setCaptureStatus });
  const flow = createCaptureFlow({
    requestAnalysis: analysis.requestAnalysis,
    recoverStaleAnalysis: analysis.recoverStaleAnalysis,
    setAnalysisPending: analysis.setAnalysisPending,
  });

  function runLocalTestAnalysis() {
    if (!drawSyntheticFrame()) {
      setCaptureStatus('Local test frame could not be rendered.');
      return;
    }
    setCaptureStatus('Analyzing local test frame...');
    analysis.requestAnalysis(false);
  }

  function bindDelegatedClicks() {
    if (window.__trackwhatDesktopCaptureDelegated) return;
    window.__trackwhatDesktopCaptureDelegated = true;
    document.addEventListener('click', (event) => {
      const button = event.target?.closest?.('#desktop-capture-btn');
      if (!button) return;
      window['__trackwhatDesktopCaptureTrace']?.('analysis.click.delegated-capture', { active: state.active, analysisPending: state.analysisPending, allowAnalysisClick: state.allowAnalysisClick });
      event.preventDefault();
      event.stopPropagation();
      event.stopImmediatePropagation();
      state.active ? flow.stopCapture() : void flow.startCapture();
    }, true);
    document.addEventListener('click', (event) => {
      const loopButton = event.target?.closest?.('#loop-toggle-btn');
      if (!loopButton) return;
      window['__trackwhatDesktopCaptureTrace']?.('analysis.click.delegated-loop', { active: state.active, loopPaused: state.loopPaused });
      event.preventDefault();
      event.stopPropagation();
      event.stopImmediatePropagation();
      flow.toggleCaptureLoop();
    }, true);
    document.addEventListener('click', (event) => {
      const analyzeButton = event.target?.closest?.('#analyze-screenshot-btn, #header-analyze-btn');
      if (!analyzeButton) return;
      if (state.allowAnalysisClick) return;
      analysis.recoverStaleAnalysis('delegated-analyze');
      window['__trackwhatDesktopCaptureTrace']?.('analysis.click.delegated-analyze', { active: state.active, analysisPending: state.analysisPending, allowAnalysisClick: state.allowAnalysisClick });
      event.preventDefault();
      event.stopPropagation();
      event.stopImmediatePropagation();
      if (state.analysisPending) {
        setCaptureStatus('Analysis still running. Waiting for completion.');
        return;
      }
      if (state.active) {
        flow.captureAndAnalyze(true, true);
        return;
      }
      void flow.startCapture();
    }, true);
    document.addEventListener('click', (event) => {
      const testButton = event.target?.closest?.('#local-test-analyze-btn');
      if (!testButton) return;
      event.preventDefault();
      event.stopPropagation();
      event.stopImmediatePropagation();
      analysis.recoverStaleAnalysis('delegated-local-test');
      runLocalTestAnalysis();
    }, true);
    document.addEventListener('change', (event) => {
      if (event.target?.closest?.('#solo-mode')) updateTrackPills();
    }, true);
    document.addEventListener('input', (event) => {
      if (event.target?.closest?.('#solo-mode')) updateTrackPills();
    }, true);
  }

  function observeSectionState() {
    if (window.__trackwhatManageTracksObserver) return;
    window.__trackwhatManageTracksObserver = new MutationObserver(() => {
      updateManageTracksButtonState();
    });
    window.__trackwhatManageTracksObserver.observe(document.body, {
      subtree: true,
      childList: true,
      attributes: true,
      attributeFilter: ['class', 'aria-selected'],
    });
  }

  document.addEventListener('click', (event) => {
    const target = event.target;
    if (target instanceof HTMLElement && target.closest('[data-manage-tracks]')) {
      openTracksTab();
      return;
    }
    const pill = target instanceof HTMLElement ? target.closest('.track-pill[data-track-id]') : null;
    if (pill instanceof HTMLElement) openPillTarget(pill);
  });

  window.__trackwhatDesktopCaptureState = state;
  window.__trackwhatDesktopCapture = {
    active: () => state.active,
    start: flow.startCapture,
    stop: flow.stopCapture,
    toggle: flow.toggleCapture,
    toggleLoop: flow.toggleCaptureLoop,
    captureFrame,
    captureAndAnalyze: flow.captureAndAnalyze,
  };

  bindDelegatedClicks();
  mountTrackSelection();
  observeSectionState();
  preparePreviewHost();
  mountScanIntervalControl();
  mountVisionModelControl();
  setButtonState(state.active);
  setScanMs(state.scanMs);
  window.setTimeout(preparePreviewHost, 100);
  window.setTimeout(() => setButtonState(state.active), 50);
  window.setTimeout(updateTrackPills, 75);
  window.setTimeout(updateManageTracksButtonState, 75);
  updateCountdown();
}