Re-Commander/public/app.js

'use strict';

// ── WebSocket to server ──────────────────────────────────────────────────────

let ws;
let connected = false;
let sessionActive = false;
let currentAngles = [0, 0];
let lastSayTx = null;
let lastListenTx = null;
let videoActive = false;
let entities = {}; // entityId → track data

function connectWS() {
  const proto = location.protocol === 'https:' ? 'wss' : 'ws';
  ws = new WebSocket(`${proto}://${location.host}/ws`);

  ws.onopen = () => {
    connected = true;
  };

  ws.onclose = () => {
    connected = false;
    setStatus(false, 'Disconnected — reconnecting…');
    setTimeout(connectWS, 2000);
  };

  ws.onerror = () => {};

  ws.onmessage = (e) => {
    let msg;
    try { msg = JSON.parse(e.data); } catch { return; }
    handleServerMessage(msg);
  };
}

function handleServerMessage(msg) {
  if (msg.type === 'status') {
    sessionActive = !!msg.sessionID;
    currentAngles = msg.angles || [0, 0];
    setStatus(msg.connected && sessionActive,
      msg.connected
        ? (sessionActive ? 'Connected  •  ' + msg.sessionID.slice(0, 8) + '…' : 'Connecting…')
        : 'Disconnected');
    return;
  }

  if (msg.type === 'jiboEvent') {
    handleJiboEvent(msg.body, msg.txId);
  }
}

function handleJiboEvent(body, txId) {
  if (!body) return;
  const evt = body.Event || body.ResponseString || '?';
  if (evt === 'onConfig') return; // heartbeat GetConfig response — suppress from log
  logEvent(evt, body, txId);

  switch (body.Event) {
    case 'onHotWordHeard':
      flashHotword(body.utterance || 'hey jibo', body.score);
      if (document.getElementById('auto-listen-toggle').checked) doListen();
      break;

    case 'onStart':
      if (txId === lastListenTx) {
        clearListenTimeout();
        document.getElementById('listen-result').textContent = '(listening…)';
      }
      break;

    case 'onListenResult': {
      clearListenTimeout();
      const speech = body.Speech || '';
      document.getElementById('listen-result').textContent = '"' + speech + '"';
      if (speech && document.getElementById('llm-toggle').checked) runLLMLoop(speech);
      break;
    }

    case 'onPhotoSaved':
      if (body.url) addPhoto(body.url);
      break;

    case 'onVideoReady':
      if (body.URI) startVideoFeed(body.URI);
      break;

    case 'onEntityGained':
    case 'onEntityUpdate':
      if (body.Tracks) body.Tracks.forEach(t => { entities[t.EntityID] = t; });
      renderEntities();
      break;

    case 'onEntityLost':
      if (body.Tracks) body.Tracks.forEach(t => { delete entities[t.EntityID]; });
      renderEntities();
      break;

    case 'onHeadTouch':
      if (body.Pads) renderHeadTouch(body.Pads);
      break;

    case 'onLookAtAchieved':
      break;

    case 'onStop':
      if (txId === lastListenTx) {
        clearListenTimeout();
        const reason = body.StopReason || body.ListenStopReason || 'stopped';
        document.getElementById('listen-result').textContent = '(stopped: ' + reason + ')';
      }
      break;

    case 'onError':
      if (txId === lastListenTx) {
        clearListenTimeout();
        const errStr = body.EventError?.ErrorString || body.ErrorString || 'unknown error';
        document.getElementById('listen-result').textContent = '(error: ' + errStr + ')';
      }
      break;
  }
}

// ── REST helpers ─────────────────────────────────────────────────────────────

async function api(method, path, body) {
  try {
    const opts = { method, headers: { 'Content-Type': 'application/json' } };
    if (body) opts.body = JSON.stringify(body);
    const res = await fetch(path, opts);
    return await res.json();
  } catch (err) {
    logEvent('api-error: ' + path, { error: err.message }, null);
  }
}

const post = (path, body) => api('POST', path, body);
const get  = (path)       => api('GET',  path);

// ── Status ───────────────────────────────────────────────────────────────────

function setStatus(ok, label) {
  const dot = document.getElementById('status-dot');
  const lbl = document.getElementById('status-label');
  dot.className = ok ? 'ok' : '';
  lbl.textContent = label;
}

// ── Arrow pad ────────────────────────────────────────────────────────────────

// ── Directional step ──────────────────────────────────────────────────────────
// Left/right: angle nudge (preserves psi exactly, no vertical drift).
// Up/down: screen-coord click 30% from center (same math as click-to-look).
// Both endpoints block server-side until the robot acks, so the loop has
// exactly one command in-flight at all times.  Gen counter kills a stale loop
// on direction change after at most one more in-flight step completes.

const STEP_FRAC = 0.30;

let moveGen  = 0;
let moveHeld = false;


// Horizontal steps use pctY slightly above true center to compensate for
// a small downward bias in the camera's optical axis vs the head neutral.
// Tune HORIZ_CENTER_Y if left/right still drifts up or down.
const HORIZ_CENTER_Y = 0.38;

async function runMoveLoop(dir, gen) {
  while (moveHeld && gen === moveGen) {
    let pctX, pctY;
    if (dir === 'left')  { pctX = 0.5 - STEP_FRAC; pctY = HORIZ_CENTER_Y; }
    else if (dir === 'right') { pctX = 0.5 + STEP_FRAC; pctY = HORIZ_CENTER_Y; }
    else if (dir === 'up')    { pctX = 0.5; pctY = 0.5 - STEP_FRAC; }
    else                      { pctX = 0.5; pctY = 0.5 + STEP_FRAC; }
    const x = Math.round((1 - pctX) * 640);
    const y = Math.round(pctY * 480);
    await post('/api/look/step', { x, y });
  }
}

function startMove(dir) {
  moveHeld = true;
  runMoveLoop(dir, ++moveGen);
}

function stopMove() {
  moveHeld = false;
}

function addMoveButton(id, dir) {
  const btn = document.getElementById(id);
  btn.addEventListener('pointerdown',  (e) => { e.preventDefault(); startMove(dir); });
  btn.addEventListener('pointerup',     stopMove);
  btn.addEventListener('pointercancel', stopMove);
  btn.addEventListener('pointerleave',  stopMove);
}

addMoveButton('btn-up',    'up');
addMoveButton('btn-down',  'down');
addMoveButton('btn-left',  'left');
addMoveButton('btn-right', 'right');

// Keyboard arrow keys — browser key-repeat ignored; our await loop is the repeat
const KEY_TO_DIR = { ArrowLeft: 'left', ArrowRight: 'right', ArrowUp: 'up', ArrowDown: 'down' };
const heldKeys = new Set();

document.addEventListener('keydown', (e) => {
  if (['INPUT', 'TEXTAREA', 'SELECT'].includes(document.activeElement.tagName)) return;
  if (e.key === ' ') { e.preventDefault(); post('/api/look/angle', { theta: 0, psi: 0 }); return; }
  const dir = KEY_TO_DIR[e.key];
  if (!dir || e.repeat || heldKeys.has(e.key)) return;
  e.preventDefault();
  heldKeys.add(e.key);
  startMove(dir);
});

document.addEventListener('keyup', (e) => {
  if (!KEY_TO_DIR[e.key]) return;
  heldKeys.delete(e.key);
  stopMove();
});

// ── Click-to-look ─────────────────────────────────────────────────────────────

const cameraWrap = document.getElementById('camera-wrap');
const clickDot   = document.getElementById('click-dot');

cameraWrap.addEventListener('click', (e) => {
  const rect = cameraWrap.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  const pctX = x / rect.width;
  const pctY = y / rect.height;

  // Show click indicator
  clickDot.style.left = x + 'px';
  clickDot.style.top  = y + 'px';
  clickDot.style.display = 'block';
  setTimeout(() => { clickDot.style.display = 'none'; }, 800);

  // Mirror X to match the horizontally-flipped display
  const camX = Math.round((1 - pctX) * 640);
  const camY = Math.round(pctY * 480);
  const track = document.getElementById('track-flag').checked;

  post('/api/look/screen', { x: camX, y: camY, track });
});

// ── Say ───────────────────────────────────────────────────────────────────────

document.getElementById('btn-say').addEventListener('click', async () => {
  const text = document.getElementById('say-text').value.trim();
  if (!text) return;
  const r = await post('/api/say', { text });
  if (r) lastSayTx = r.txId;
});

document.getElementById('btn-say-cancel').addEventListener('click', () => {
  if (lastSayTx) post('/api/cancel', { txId: lastSayTx });
});

// ── Listen ────────────────────────────────────────────────────────────────────

let listenClientTimer = null;

function clearListenTimeout() {
  if (listenClientTimer) { clearTimeout(listenClientTimer); listenClientTimer = null; }
}

async function doListen() {
  clearListenTimeout();
  document.getElementById('listen-result').textContent = '(waiting for robot…)';
  const maxNoSpeech = parseInt(document.getElementById('listen-max-nosp').value) || 5000;
  const maxSpeech   = parseInt(document.getElementById('listen-max-speech').value) || 10000;
  const r = await post('/api/listen', { maxSpeech, maxNoSpeech });
  if (r) {
    lastListenTx = r.txId;
    const clientTimeout = Math.max(maxSpeech, maxNoSpeech) + 16000;
    listenClientTimer = setTimeout(() => {
      document.getElementById('listen-result').textContent =
        '(timed out — cloud ASR may be unavailable)';
    }, clientTimeout);
  }
}

document.getElementById('btn-listen').addEventListener('click', doListen);

document.getElementById('btn-listen-cancel').addEventListener('click', () => {
  clearListenTimeout();
  if (lastListenTx) post('/api/cancel', { txId: lastListenTx });
  document.getElementById('listen-result').textContent = '(cancelled)';
});

// ── Auto-listen + Voice AI ────────────────────────────────────────────────────

let llmHistory = []; // [{role:'user'|'assistant', content:string}]

function llmStatus(msg) {
  document.getElementById('llm-status').textContent = msg;
}

async function runLLMLoop(speechText) {
  llmHistory.push({ role: 'user', content: speechText });
  llmStatus('Thinking…');

  const endpoint    = document.getElementById('llm-endpoint').value.trim();
  const model       = document.getElementById('llm-model').value.trim();
  const systemPrompt = document.getElementById('llm-system-prompt').value.trim();

  const r = await post('/api/llm/chat', {
    messages: llmHistory,
    endpoint:     endpoint     || undefined,
    model:        model        || undefined,
    systemPrompt: systemPrompt || undefined,
  });

  if (!r || r.error) {
    llmStatus('LLM error: ' + (r?.error || 'no response'));
    llmHistory.pop(); // undo the user push so history stays consistent
    return;
  }

  const reply = r.reply;
  llmHistory.push({ role: 'assistant', content: reply });
  llmStatus(`[${llmHistory.length / 2} turns] Last: "${reply.slice(0, 60)}${reply.length > 60 ? '…' : ''}"`);

  // Fill say box so user can see what Jibo is about to say
  document.getElementById('say-text').value = reply;
  await post('/api/say', { text: reply });
}

document.getElementById('btn-llm-clear').addEventListener('click', () => {
  llmHistory = [];
  llmStatus('Conversation cleared.');
});

// ── Attention ─────────────────────────────────────────────────────────────────

document.querySelectorAll('.attn-btn').forEach(btn => {
  btn.addEventListener('click', function () {
    document.querySelectorAll('.attn-btn').forEach(b => b.classList.remove('active'));
    this.classList.add('active');
    post('/api/attention', { mode: this.dataset.mode });
  });
});

// ── Volume ────────────────────────────────────────────────────────────────────

document.getElementById('volume-slider').addEventListener('input', function () {
  document.getElementById('volume-label').textContent =
    Math.round(this.value * 100) + '%';
});

document.getElementById('btn-set-volume').addEventListener('click', () => {
  const level = parseFloat(document.getElementById('volume-slider').value);
  post('/api/volume', { level });
});

// ── Camera / Video ────────────────────────────────────────────────────────────

let videoTxId = null;

document.getElementById('btn-video-start').addEventListener('click', async () => {
  const r = await post('/api/video/start', { duration: 0 });
  if (r) videoTxId = r.txId;
  document.getElementById('video-status').textContent = 'Waiting for VideoReady…';
});

document.getElementById('btn-video-stop').addEventListener('click', () => {
  post('/api/video/stop', {});
  stopVideoFeed();
});

function startVideoFeed(uri) {
  const feed = document.getElementById('camera-feed');
  const noFeed = document.getElementById('camera-no-feed');
  feed.src = '/proxy/stream?uri=' + encodeURIComponent(uri);
  feed.style.display = 'block';
  noFeed.style.display = 'none';
  document.getElementById('video-status').textContent = 'Streaming';
  videoActive = true;

  feed.onerror = () => {
    stopVideoFeed();
    document.getElementById('video-status').textContent = 'Stream error';
  };
}

function stopVideoFeed() {
  const feed = document.getElementById('camera-feed');
  feed.src = '';
  feed.style.display = 'none';
  document.getElementById('camera-no-feed').style.display = '';
  document.getElementById('video-status').textContent = '';
  videoActive = false;
}

// ── Take Photo ────────────────────────────────────────────────────────────────

document.getElementById('btn-photo').addEventListener('click', () => {
  post('/api/photo', {
    camera:     document.getElementById('photo-camera').value,
    resolution: document.getElementById('photo-res').value
  });
});

function addPhoto(url) {
  const strip = document.getElementById('photo-strip');
  const img = document.createElement('img');
  img.src = url;
  img.title = url;
  img.addEventListener('click', () => openPhotoModal(img.src));
  strip.prepend(img);
  // Show photo in camera area if not streaming video
  if (!videoActive) {
    const feed = document.getElementById('camera-feed');
    const noFeed = document.getElementById('camera-no-feed');
    feed.src = img.src;
    feed.style.display = 'block';
    noFeed.style.display = 'none';
  }
}

// ── Photo modal ───────────────────────────────────────────────────────────────

function openPhotoModal(src) {
  document.getElementById('photo-modal-img').src = src;
  document.getElementById('photo-modal').classList.add('open');
}

document.getElementById('photo-modal').addEventListener('click', (e) => {
  if (e.target === e.currentTarget || e.target.id === 'photo-modal-close') {
    document.getElementById('photo-modal').classList.remove('open');
  }
});

// ── Display controls ──────────────────────────────────────────────────────────

document.getElementById('btn-eye').addEventListener('click', () => {
  post('/api/display/eye', {});
});

document.getElementById('btn-play-anim').addEventListener('click', () => {
  const name = document.getElementById('eye-anim-select').value;
  if (name) post('/api/display/anim', { name });
});

document.getElementById('btn-display-text').addEventListener('click', () => {
  const text = document.getElementById('display-text').value.trim();
  if (!text) return;
  post('/api/display/text', { text });
});

document.getElementById('btn-display-image').addEventListener('click', () => {
  const src = document.getElementById('display-img-src').value.trim();
  if (!src) return;
  post('/api/display/image', { src });
});

// ── Entities ──────────────────────────────────────────────────────────────────

function renderEntities() {
  const list = document.getElementById('entity-list');
  const ids = Object.keys(entities);
  if (ids.length === 0) {
    list.innerHTML = '<div style="color:var(--muted);font-size:12px;">No entities tracked</div>';
    return;
  }
  list.innerHTML = ids.map(id => {
    const t = entities[id];
    const sc = t.ScreenCoords ? t.ScreenCoords.map(v => v.toFixed(0)).join(',') : '?';
    return `<div class="entity-item" data-id="${id}">
      <span>${t.Type || 'Person'} #${id} (${t.Confidence || 0}%)<br>
      <span style="color:var(--muted);font-size:11px;">screen: [${sc}]</span></span>
      <button class="track-btn btn" onclick="trackEntity(${id})">Track</button>
    </div>`;
  }).join('');
}

window.trackEntity = function (entityId) {
  post('/api/look/entity', { entityId, track: true });
};

// ── Head Touch ────────────────────────────────────────────────────────────────

const padNames = ['frontLeft', 'middleLeft', 'backLeft', 'frontRight', 'middleRight', 'backRight'];

function renderHeadTouch(pads) {
  padNames.forEach((name, i) => {
    const el = document.querySelector(`.pad-indicator[data-pad="${name}"]`);
    if (el) el.classList.toggle('active', !!pads[i]);
  });
  // Clear after 1s
  setTimeout(() => padNames.forEach(name => {
    const el = document.querySelector(`.pad-indicator[data-pad="${name}"]`);
    if (el) el.classList.remove('active');
  }), 1000);
}

// ── Subscriptions (toggle) ────────────────────────────────────────────────────

// Subscriptions are always-on by default (server subscribes on session start).
// Buttons here allow re-subscribing if needed.
['entity', 'motion', 'headtouch'].forEach(sub => {
  document.getElementById('btn-sub-' + sub).addEventListener('click', function () {
    const map = { entity: 'Entity', motion: 'Motion', headtouch: 'HeadTouch' };
    post('/api/look/angle', {}); // ping/no-op to keep conn; subscriptions are server-managed
  });
});

// ── Tabs ──────────────────────────────────────────────────────────────────────

document.querySelectorAll('.tab-btn').forEach(btn => {
  btn.addEventListener('click', function () {
    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
    document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
    this.classList.add('active');
    document.getElementById(this.dataset.tab).classList.add('active');
  });
});

// ── Event log ─────────────────────────────────────────────────────────────────

const MAX_LOG = 200;

function logEvent(eventName, body, txId) {
  const log = document.getElementById('event-log');
  const now = new Date().toLocaleTimeString();

  // Pick color class
  let cls = 'evt';
  if (eventName.toLowerCase().includes('error')) cls = 'evt-error';
  else if (eventName === 'MotionDetected') cls = 'evt-motion';
  else if (['TrackGained', 'TrackUpdate', 'TrackLost'].includes(eventName)) cls = 'evt-entity';

  // Short summary of body
  let detail = '';
  if (body.Speech)        detail = ' "' + body.Speech + '"';
  else if (body.URI)      detail = ' ' + body.URI;
  else if (body.ErrorString) detail = ' ' + body.ErrorString;

  const el = document.createElement('div');
  el.className = 'log-entry';
  el.innerHTML = `<span class="ts">${now}</span> <span class="${cls}">${eventName}</span>${detail}`;
  log.prepend(el);

  // Trim
  while (log.children.length > MAX_LOG) log.removeChild(log.lastChild);
}

document.getElementById('btn-clear-log').addEventListener('click', () => {
  document.getElementById('event-log').innerHTML = '';
});

// ── Hotword indicator ─────────────────────────────────────────────────────────

let hotwordTimer = null;

function flashHotword(utterance, score) {
  const el = document.getElementById('hotword-indicator');
  if (!el) return;
  el.textContent = '🎙 "' + utterance + '"  (score: ' + (score || 0).toFixed(0) + ')';
  el.classList.add('active');
  clearTimeout(hotwordTimer);
  hotwordTimer = setTimeout(() => el.classList.remove('active'), 3000);
}

// ── Menu: Robot & Mode Selection ────────────────────────────────────────────

let selectedRobot = null;
let selectedMode = 'commander';

// Get the selected robot and mode from sessionStorage
function initializeMode() {
  selectedRobot = sessionStorage.getItem('selectedRobot') || 'jibo-001';
  selectedMode = sessionStorage.getItem('selectedMode') || 'commander';
}

// Back to home button
document.getElementById('btn-back-home')?.addEventListener('click', () => {
  window.location.href = 'index.html';
});

// ── Initialization ───────────────────────────────────────────────────────────

connectWS();
initializeMode();

// Populate LLM fields from server config (.env defaults)
get('/api/config').then(cfg => {
  if (!cfg) return;
  if (cfg.llmEndpoint)     document.getElementById('llm-endpoint').value      = cfg.llmEndpoint;
  if (cfg.llmModel)        document.getElementById('llm-model').value          = cfg.llmModel;
  if (cfg.llmSystemPrompt) document.getElementById('llm-system-prompt').value  = cfg.llmSystemPrompt;
});