506 lines
23 KiB
JavaScript
506 lines
23 KiB
JavaScript
// ============================================================================
|
|
// 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', 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;">${escapeHtml(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;
|
|
}
|
|
}
|