miku-discord/bot/static/js/status.js

// ============================================================================
// Miku Control Panel — Status Module
// Status display, last prompt, autonomous stats
// ============================================================================

// ===== Status =====

async function loadStatus() {
  try {
    const result = await apiCall('/status');
    const statusDiv = document.getElementById('status');

    if (result.evil_mode !== undefined && result.evil_mode !== evilMode) {
      evilMode = result.evil_mode;
      updateEvilModeUI();
      if (evilMode && result.mood) {
        const moodSelect = document.getElementById('mood');
        if (moodSelect) moodSelect.value = result.mood;
      }
    }

    if (result.mood) {
      const moodSelect = document.getElementById('mood');
      if (moodSelect && moodSelect.querySelector(`option[value="${result.mood}"]`)) {
        moodSelect.value = result.mood;
      }
      currentMood = result.mood;
    }

    let serverMoodsHtml = '';
    if (result.server_moods) {
      serverMoodsHtml = '<div style="margin-top: 0.5rem;"><strong>Server Moods:</strong><br>';
      for (const [guildId, mood] of Object.entries(result.server_moods)) {
        const server = servers.find(s => s.guild_id == guildId);
        const serverName = server ? server.guild_name : `Server ${guildId}`;
        const emojiMap = evilMode ? EVIL_MOOD_EMOJIS : MOOD_EMOJIS;
        serverMoodsHtml += `• ${serverName}: ${mood} ${emojiMap[mood] || ''}<br>`;
      }
      serverMoodsHtml += '</div>';
    }

    const moodEmoji = evilMode ? (EVIL_MOOD_EMOJIS[result.mood] || '') : (MOOD_EMOJIS[result.mood] || '');
    const moodLabel = evilMode ? `😈 ${result.mood} ${moodEmoji}` : `${result.mood} ${moodEmoji}`;

    statusDiv.innerHTML = `
      <div><strong>Status:</strong> ${result.status}</div>
      <div><strong>DM Mood:</strong> ${moodLabel}</div>
      <div><strong>Servers:</strong> ${result.servers}</div>
      <div><strong>Active Schedulers:</strong> ${result.active_schedulers}</div>
      <div style="margin-top: 0.5rem; padding: 0.5rem; background: #2a2a2a; border-radius: 4px; font-size: 0.9rem;">
        <strong>💬 DM Support:</strong> Users can message Miku directly in DMs. She responds to every DM message using the DM mood (auto-rotating every 2 hours).
      </div>
      ${serverMoodsHtml}
    `;
  } catch (error) {
    console.error('Failed to load status:', error);
  }
}

// ===== Prompt History =====

let _promptHistoryCache = [];   // cached history entries from last fetch
let _selectedPromptId = null;  // currently selected entry ID
let _middleTruncation = false; // whether middle-truncation is active

async function loadPromptHistory() {
  const source = localStorage.getItem('miku-prompt-source') || 'all';
  const selectEl = document.getElementById('prompt-history-select');

  try {
    const url = source === 'all' ? '/prompts' : `/prompts?source=${source}`;
    const result = await apiCall(url);
    _promptHistoryCache = result.history || [];

    // Populate dropdown
    const currentValue = selectEl.value;
    selectEl.innerHTML = '';
    if (_promptHistoryCache.length === 0) {
      selectEl.innerHTML = '<option value="">-- No prompts yet --</option>';
    } else {
      _promptHistoryCache.forEach(entry => {
        const ts = entry.timestamp ? new Date(entry.timestamp).toLocaleTimeString() : '?';
        const srcLabel = entry.source === 'cat' ? '🐱' : '🤖';
        const user = entry.user || '?';
        const option = document.createElement('option');
        option.value = entry.id;
        option.textContent = `${srcLabel} #${entry.id} — ${user} — ${ts}`;
        selectEl.appendChild(option);
      });
    }

    // Restore or auto-select the latest entry
    if (_selectedPromptId && _promptHistoryCache.some(e => e.id === _selectedPromptId)) {
      selectEl.value = _selectedPromptId;
    } else if (_promptHistoryCache.length > 0) {
      selectEl.value = _promptHistoryCache[0].id;
    }

    if (selectEl.value) {
      await selectPromptEntry(selectEl.value);
    } else {
      clearPromptDisplay();
    }
  } catch (error) {
    console.error('Failed to load prompt history:', error);
  }
}

async function selectPromptEntry(promptId) {
  if (!promptId) {
    clearPromptDisplay();
    return;
  }

  _selectedPromptId = parseInt(promptId);

  // Try cache first
  let entry = _promptHistoryCache.find(e => e.id === _selectedPromptId);

  // Fall back to API call if not in cache
  if (!entry) {
    try {
      entry = await apiCall(`/prompts/${_selectedPromptId}`);
    } catch (error) {
      console.error('Failed to load prompt entry:', error);
      clearPromptDisplay();
      return;
    }
  }

  if (!entry) {
    clearPromptDisplay();
    return;
  }

  renderPromptEntry(entry);
}

function clearPromptDisplay() {
  document.getElementById('prompt-metadata').innerHTML = '';
  document.getElementById('last-prompt').textContent = '';
}

function renderPromptEntry(entry) {
  // Metadata bar
  const metaEl = document.getElementById('prompt-metadata');
  const ts = entry.timestamp ? new Date(entry.timestamp).toLocaleString() : '?';
  const sourceIcon = entry.source === 'cat' ? '🐱 Cat' : '🤖 Fallback';
  metaEl.innerHTML = `
    <span><span class="prompt-meta-label">#</span><span class="prompt-meta-value">${entry.id}</span></span>
    <span><span class="prompt-meta-label">Source:</span> <span class="prompt-meta-value">${sourceIcon}</span></span>
    <span><span class="prompt-meta-label">User:</span> <span class="prompt-meta-value">${escapeHtml(entry.user || '?')}</span></span>
    <span><span class="prompt-meta-label">Mood:</span> <span class="prompt-meta-value">${escapeHtml(entry.mood || '?')}</span></span>
    <span><span class="prompt-meta-label">Guild:</span> <span class="prompt-meta-value">${escapeHtml(entry.guild || '?')}</span></span>
    <span><span class="prompt-meta-label">Channel:</span> <span class="prompt-meta-value">${escapeHtml(entry.channel || '?')}</span></span>
    <span><span class="prompt-meta-label">Model:</span> <span class="prompt-meta-value">${escapeHtml(entry.model || '?')}</span></span>
    <span><span class="prompt-meta-label">Type:</span> <span class="prompt-meta-value">${escapeHtml(entry.response_type || '?')}</span></span>
    <span><span class="prompt-meta-label">Time:</span> <span class="prompt-meta-value">${ts}</span></span>
  `;

  // Parse full_prompt into sections
  const sections = parsePromptSections(entry.full_prompt || '');

  // Build display HTML with collapsible subsections
  let displayHtml = '';

  if (sections.system) {
    displayHtml += buildCollapsibleSection('System Prompt', sections.system, 'system');
  }
  if (sections.context) {
    displayHtml += buildCollapsibleSection('Context (Memories & Tools)', sections.context, 'context');
  }
  if (sections.conversation) {
    displayHtml += buildCollapsibleSection('Conversation', sections.conversation, 'conversation');
  }
  if (!sections.system && !sections.context && !sections.conversation) {
    // Fallback: show raw full_prompt
    displayHtml += `<pre style="white-space: pre-wrap; word-break: break-word; margin: 0;">${escapeHtml(entry.full_prompt || '')}</pre>`;
  }

  // Response section
  if (entry.response) {
    let responseText = entry.response;
    if (_middleTruncation && responseText.length > 400) {
      responseText = responseText.substring(0, 200) + '\n\n... [truncated middle] ...\n\n' + responseText.substring(responseText.length - 200);
    }
    displayHtml += buildCollapsibleSection('Response', escapeHtml(responseText), 'response');
  }

  // Render into the prompt-display div (using innerHTML for collapsible structure)
  const displayEl = document.getElementById('prompt-display');
  displayEl.innerHTML = displayHtml;

  // Also set the raw text into the <pre> for copy functionality
  let rawText = entry.full_prompt || '';
  if (entry.response) {
    rawText += `\n\n${'═'.repeat(60)}\n[Response]\n${entry.response}`;
  }
  document.getElementById('last-prompt').textContent = rawText;
}

function parsePromptSections(fullPrompt) {
  const sections = { system: null, context: null, conversation: null };

  if (!fullPrompt) return sections;

  // Try to split on known section markers
  const contextMatch = fullPrompt.match(/# Context\s*\n([\s\S]*?)(?=\n# Conversation|\nHuman:|\n$)/);
  const convMatch = fullPrompt.match(/# Conversation until now:\s*\n([\s\S]*)/);

  if (contextMatch) {
    // Everything before # Context is the system prompt
    const contextIdx = fullPrompt.indexOf('# Context');
    if (contextIdx > 0) {
      sections.system = fullPrompt.substring(0, contextIdx).trim();
    }
    sections.context = contextMatch[1].trim();
  }

  if (convMatch) {
    sections.conversation = convMatch[1].trim();
  } else {
    // Try alternative: "Human:" at the end
    const humanMatch = fullPrompt.match(/\nHuman:([\s\S]*)/);
    if (humanMatch && fullPrompt.indexOf('Human:') > fullPrompt.indexOf('# Context')) {
      sections.conversation = 'Human:' + humanMatch[1].trim();
    }
  }

  // If no # Context marker, try "System:" prefix (fallback prompts)
  if (!sections.system && !sections.context) {
    const sysMatch = fullPrompt.match(/^System:\s*([\s\S]*?)(?=\nMessages:)/);
    const msgMatch = fullPrompt.match(/Messages:\s*([\s\S]*)/);
    if (sysMatch) {
      sections.system = sysMatch[1].trim();
    }
    if (msgMatch) {
      sections.conversation = msgMatch[1].trim();
    }
  }

  return sections;
}

function buildCollapsibleSection(title, content, sectionId) {
  const uniqueId = `prompt-section-${sectionId}-${Date.now()}`;
  return `
    <div class="prompt-subsection-header" onclick="togglePromptSubsection('${uniqueId}')">
      ▼ ${escapeHtml(title)}
    </div>
    <div class="prompt-subsection-body" id="${uniqueId}">
      <pre style="white-space: pre-wrap; word-break: break-word; background: #1a1a1a; padding: 0.5rem; border-radius: 4px; font-size: 0.8rem; line-height: 1.4; margin: 0.25rem 0;">${content}</pre>
    </div>`;
}

function togglePromptSubsection(id) {
  const body = document.getElementById(id);
  if (!body) return;
  const header = body.previousElementSibling;
  if (body.classList.contains('collapsed')) {
    body.classList.remove('collapsed');
    if (header) header.innerHTML = header.innerHTML.replace('▶', '▼');
  } else {
    body.classList.add('collapsed');
    if (header) header.innerHTML = header.innerHTML.replace('▼', '▶');
  }
}

function togglePromptHistoryCollapse() {
  const section = document.getElementById('prompt-history-section');
  const toggle = document.getElementById('prompt-history-toggle');
  if (section.classList.contains('collapsed')) {
    section.classList.remove('collapsed');
    toggle.textContent = '▼ Prompt History';
  } else {
    section.classList.add('collapsed');
    toggle.textContent = '▶ Prompt History';
  }
}

function copyPromptToClipboard() {
  const rawText = document.getElementById('last-prompt').textContent;
  if (!rawText) return;
  navigator.clipboard.writeText(rawText).then(() => {
    showNotification('Prompt copied to clipboard', 'success');
  }).catch(err => {
    console.error('Failed to copy:', err);
    showNotification('Failed to copy', 'error');
  });
}

function toggleMiddleTruncation() {
  _middleTruncation = document.getElementById('prompt-truncate-toggle').checked;
  // Re-render current entry
  if (_selectedPromptId) {
    selectPromptEntry(_selectedPromptId);
  }
}

// Legacy compatibility — called from core.js on page load / tab switch
// Redirects to the new loadPromptHistory()
async function loadLastPrompt() {
  await loadPromptHistory();
}

// ===== Autonomous Stats =====

async function loadAutonomousStats() {
  const serverSelect = document.getElementById('autonomous-server-select');
  const selectedGuildId = serverSelect.value;

  if (!selectedGuildId) {
    document.getElementById('autonomous-stats-display').innerHTML = '<p style="color: #aaa;">Please select a server to view autonomous stats.</p>';
    return;
  }

  try {
    const data = await apiCall('/autonomous/stats');

    if (!data.servers || !data.servers[selectedGuildId]) {
      document.getElementById('autonomous-stats-display').innerHTML = '<p style="color: #ff5555;">Server not found or not initialized.</p>';
      return;
    }

    const serverData = data.servers[selectedGuildId];
    displayAutonomousStats(serverData);
  } catch (error) {
    console.error('Failed to load autonomous stats:', error);
  }
}

function displayAutonomousStats(data) {
  const container = document.getElementById('autonomous-stats-display');

  if (!data.context) {
    container.innerHTML = `
      <div style="background: #2a2a2a; padding: 1.5rem; border-radius: 8px;">
        <h4 style="color: #61dafb; margin-top: 0;">⚠️ Context Not Initialized</h4>
        <p>This server hasn't had any activity yet. Context tracking will begin once messages are sent.</p>
        <div style="margin-top: 1rem; padding: 1rem; background: #1e1e1e; border-radius: 4px;">
          <strong>Current Mood:</strong> ${data.mood} ${MOOD_EMOJIS[data.mood] || ''}<br>
          <strong>Energy:</strong> ${data.mood_profile.energy}<br>
          <strong>Sociability:</strong> ${data.mood_profile.sociability}<br>
          <strong>Impulsiveness:</strong> ${data.mood_profile.impulsiveness}
        </div>
      </div>
    `;
    return;
  }

  const ctx = data.context;
  const profile = data.mood_profile;

  const lastActionMin = Math.floor(ctx.time_since_last_action / 60);
  const lastInteractionMin = Math.floor(ctx.time_since_last_interaction / 60);

  container.innerHTML = `
    <div style="background: #2a2a2a; padding: 1.5rem; border-radius: 8px; margin-bottom: 1rem;">
      <h4 style="color: #61dafb; margin-top: 0;">🎭 Mood & Personality Profile</h4>
      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
        <div style="background: #1e1e1e; padding: 1rem; border-radius: 4px;">
          <div style="font-size: 0.9rem; color: #aaa; margin-bottom: 0.3rem;">Current Mood</div>
          <div style="font-size: 1.5rem; font-weight: bold;">${data.mood} ${MOOD_EMOJIS[data.mood] || ''}</div>
        </div>
        <div style="background: #1e1e1e; padding: 1rem; border-radius: 4px;">
          <div style="font-size: 0.9rem; color: #aaa; margin-bottom: 0.3rem;">Energy Level</div>
          <div style="font-size: 1.5rem; font-weight: bold; color: ${getStatColor(profile.energy)}">${(profile.energy * 100).toFixed(0)}%</div>
          <div style="width: 100%; height: 6px; background: #333; border-radius: 3px; margin-top: 0.5rem;">
            <div style="width: ${profile.energy * 100}%; height: 100%; background: ${getStatColor(profile.energy)}; border-radius: 3px;"></div>
          </div>
        </div>
        <div style="background: #1e1e1e; padding: 1rem; border-radius: 4px;">
          <div style="font-size: 0.9rem; color: #aaa; margin-bottom: 0.3rem;">Sociability</div>
          <div style="font-size: 1.5rem; font-weight: bold; color: ${getStatColor(profile.sociability)}">${(profile.sociability * 100).toFixed(0)}%</div>
          <div style="width: 100%; height: 6px; background: #333; border-radius: 3px; margin-top: 0.5rem;">
            <div style="width: ${profile.sociability * 100}%; height: 100%; background: ${getStatColor(profile.sociability)}; border-radius: 3px;"></div>
          </div>
        </div>
        <div style="background: #1e1e1e; padding: 1rem; border-radius: 4px;">
          <div style="font-size: 0.9rem; color: #aaa; margin-bottom: 0.3rem;">Impulsiveness</div>
          <div style="font-size: 1.5rem; font-weight: bold; color: ${getStatColor(profile.impulsiveness)}">${(profile.impulsiveness * 100).toFixed(0)}%</div>
          <div style="width: 100%; height: 6px; background: #333; border-radius: 3px; margin-top: 0.5rem;">
            <div style="width: ${profile.impulsiveness * 100}%; height: 100%; background: ${getStatColor(profile.impulsiveness)}; border-radius: 3px;"></div>
          </div>
        </div>
      </div>
    </div>

    <div style="background: #2a2a2a; padding: 1.5rem; border-radius: 8px; margin-bottom: 1rem;">
      <h4 style="color: #61dafb; margin-top: 0;">📈 Activity Metrics</h4>
      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
        <div style="background: #1e1e1e; padding: 1rem; border-radius: 4px;">
          <div style="font-size: 0.9rem; color: #aaa;">Messages (Last 5 min) <span style="color: #666;">⚡ ephemeral</span></div>
          <div style="font-size: 1.8rem; font-weight: bold; color: #4caf50;">${ctx.messages_last_5min}</div>
        </div>
        <div style="background: #1e1e1e; padding: 1rem; border-radius: 4px;">
          <div style="font-size: 0.9rem; color: #aaa;">Messages (Last Hour) <span style="color: #666;">⚡ ephemeral</span></div>
          <div style="font-size: 1.8rem; font-weight: bold; color: #2196f3;">${ctx.messages_last_hour}</div>
        </div>
        <div style="background: #1e1e1e; padding: 1rem; border-radius: 4px;">
          <div style="font-size: 0.9rem; color: #aaa;">Conversation Momentum <span style="color: #4caf50;">💾 saved</span></div>
          <div style="font-size: 1.8rem; font-weight: bold; color: ${getMomentumColor(ctx.conversation_momentum)}">${(ctx.conversation_momentum * 100).toFixed(0)}%</div>
          <div style="font-size: 0.75rem; color: #888; margin-top: 0.3rem;">Decays with downtime (half-life: 10min)</div>
        </div>
        <div style="background: #1e1e1e; padding: 1rem; border-radius: 4px;">
          <div style="font-size: 0.9rem; color: #aaa;">Unique Users Active <span style="color: #666;">⚡ ephemeral</span></div>
          <div style="font-size: 1.8rem; font-weight: bold; color: #ff9800;">${ctx.unique_users_active}</div>
        </div>
      </div>
    </div>

    <div style="background: #2a2a2a; padding: 1.5rem; border-radius: 8px; margin-bottom: 1rem;">
      <h4 style="color: #61dafb; margin-top: 0;">👥 User Events</h4>
      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
        <div style="background: #1e1e1e; padding: 1rem; border-radius: 4px;">
          <div style="font-size: 0.9rem; color: #aaa;">Users Joined Recently</div>
          <div style="font-size: 1.8rem; font-weight: bold; color: #4caf50;">${ctx.users_joined_recently}</div>
        </div>
        <div style="background: #1e1e1e; padding: 1rem; border-radius: 4px;">
          <div style="font-size: 0.9rem; color: #aaa;">Status Changes</div>
          <div style="font-size: 1.8rem; font-weight: bold; color: #2196f3;">${ctx.users_status_changed}</div>
        </div>
        <div style="background: #1e1e1e; padding: 1rem; border-radius: 4px;">
          <div style="font-size: 0.9rem; color: #aaa;">Active Activities</div>
          <div style="font-size: 1.8rem; font-weight: bold; color: #9c27b0;">${ctx.users_started_activity.length}</div>
          ${ctx.users_started_activity.length > 0 ? `<div style="font-size: 0.8rem; margin-top: 0.5rem; color: #aaa;">${ctx.users_started_activity.join(', ')}</div>` : ''}
        </div>
      </div>
    </div>

    <div style="background: #2a2a2a; padding: 1.5rem; border-radius: 8px; margin-bottom: 1rem;">
      <h4 style="color: #61dafb; margin-top: 0;">⏱️ Timing & Context</h4>
      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
        <div style="background: #1e1e1e; padding: 1rem; border-radius: 4px;">
          <div style="font-size: 0.9rem; color: #aaa;">Time Since Last Action <span style="color: #4caf50;">💾 saved</span></div>
          <div style="font-size: 1.8rem; font-weight: bold; color: #ff5722;">${lastActionMin} min</div>
          <div style="font-size: 0.8rem; color: #888;">${ctx.time_since_last_action.toFixed(1)}s</div>
        </div>
        <div style="background: #1e1e1e; padding: 1rem; border-radius: 4px;">
          <div style="font-size: 0.9rem; color: #aaa;">Time Since Last Interaction <span style="color: #4caf50;">💾 saved</span></div>
          <div style="font-size: 1.8rem; font-weight: bold; color: #ff9800;">${lastInteractionMin} min</div>
          <div style="font-size: 0.8rem; color: #888;">${ctx.time_since_last_interaction.toFixed(1)}s</div>
        </div>
        <div style="background: #1e1e1e; padding: 1rem; border-radius: 4px;">
          <div style="font-size: 0.9rem; color: #aaa;">Messages Since Last Appearance <span style="color: #4caf50;">💾 saved</span></div>
          <div style="font-size: 1.8rem; font-weight: bold; color: #2196f3;">${ctx.messages_since_last_appearance}</div>
        </div>
        <div style="background: #1e1e1e; padding: 1rem; border-radius: 4px;">
          <div style="font-size: 0.9rem; color: #aaa;">Current Time Context <span style="color: #666;">⚡ ephemeral</span></div>
          <div style="font-size: 1.5rem; font-weight: bold; color: #61dafb;">${ctx.hour_of_day}:00</div>
          <div style="font-size: 0.8rem; color: #888;">${ctx.is_weekend ? '📅 Weekend' : '📆 Weekday'}</div>
        </div>
      </div>
    </div>

    <div style="background: #2a2a2a; padding: 1.5rem; border-radius: 8px;">
      <h4 style="color: #61dafb; margin-top: 0;">🧠 Base Energy Level</h4>
      <div style="background: #1e1e1e; padding: 1rem; border-radius: 4px;">
        <div style="font-size: 0.9rem; color: #aaa; margin-bottom: 0.5rem;">From current mood personality</div>
        <div style="font-size: 2rem; font-weight: bold; color: ${getStatColor(ctx.mood_energy_level)}">${(ctx.mood_energy_level * 100).toFixed(0)}%</div>
        <div style="width: 100%; height: 10px; background: #333; border-radius: 5px; margin-top: 0.5rem;">
          <div style="width: ${ctx.mood_energy_level * 100}%; height: 100%; background: ${getStatColor(ctx.mood_energy_level)}; border-radius: 5px;"></div>
        </div>
        <div style="font-size: 0.85rem; color: #888; margin-top: 0.5rem;">
          💡 Combined with activity metrics to determine action likelihood.<br>
          📝 High energy = shorter wait times, higher action chance.<br>
          💾 <strong>Persisted across restarts</strong>
        </div>
      </div>
    </div>
  `;
}

function getStatColor(value) {
  if (value >= 0.8) return '#4caf50';
  if (value >= 0.6) return '#8bc34a';
  if (value >= 0.4) return '#ffc107';
  if (value >= 0.2) return '#ff9800';
  return '#f44336';
}

function getMomentumColor(value) {
  if (value >= 0.7) return '#4caf50';
  if (value >= 0.4) return '#2196f3';
  return '#9e9e9e';
}

function populateAutonomousServerDropdown() {
  const select = document.getElementById('autonomous-server-select');
  if (!select) return;

  const currentValue = select.value;
  select.innerHTML = '<option value="">-- Select a server --</option>';

  servers.forEach(server => {
    const option = document.createElement('option');
    option.value = server.guild_id;
    option.textContent = `${server.guild_name} (${server.guild_id})`;
    select.appendChild(option);
  });

  if (currentValue && servers.some(s => String(s.guild_id) === currentValue)) {
    select.value = currentValue;
  }
}