@goldensheepai/toknxr-cli 0.2.0 → 0.3.0

package/src/dashboard.tsx

@@ -1,391 +0,0 @@
-// Simple vanilla JavaScript dashboard for browser compatibility
-// This creates a pure HTML/CSS/JS dashboard that works without React
-
-function createDashboard() {
-  const COLORS = {
-    primary: '#6B5BED',
-    secondary: '#9B5BED',
-    accent: '#ED5B9B',
-    success: '#10B981',
-    warning: '#F59E0B',
-    error: '#EF4444',
-    background: '#0F172A',
-    surface: '#1E293B',
-    text: '#F8FAFC',
-    textMuted: '#94A3B8'
-  };
-
-  let stats = null;
-  let lastUpdated = new Date();
-
-  // Create stat card HTML
-  function createStatCard(title: string, value: string | number, icon: string, color: string = COLORS.primary) {
-    return `
-      <div style="background: ${COLORS.surface}; border-radius: 12px; padding: 24px; border: 1px solid ${color}20; box-shadow: 0 4px 6px -1px ${color}10;">
-        <div style="display: flex; align-items: center; justify-content: space-between;">
-          <div>
-            <p style="color: ${COLORS.textMuted}; font-size: 14px; margin: 0 0 8px 0;">${title}</p>
-            <p style="font-size: 32px; font-weight: bold; margin: 0; color: ${COLORS.text};">${value}</p>
-          </div>
-          <div style="font-size: 24px; color: ${color}; opacity: 0.8;">${icon}</div>
-        </div>
-      </div>
-    `;
-  }
-
-  // Create provider card HTML
-  function createProviderChart(name: string, data: any) {
-    return `
-      <div style="background: ${COLORS.surface}; border-radius: 8px; padding: 16px; border: 1px solid ${COLORS.primary}20;">
-        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
-          <h3 style="margin: 0; color: ${COLORS.text}; font-size: 16px;">${name}</h3>
-          <div style="font-size: 12px; color: ${COLORS.textMuted};">${(data.cost || 0).toFixed(2)}</div>
-        </div>
-        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 12px;">
-          <div style="color: ${COLORS.textMuted};">Interactions: <span style="color: ${COLORS.text};">${data.interactions || 0}</span></div>
-          ${data.avgQuality ? `<div style="color: ${COLORS.textMuted};">Quality: <span style="color: ${COLORS.accent};">${data.avgQuality}/100</span></div>` : ''}
-          ${data.avgEffectiveness ? `<div style="color: ${COLORS.textMuted};">Effectiveness: <span style="color: ${COLORS.secondary};">${data.avgEffectiveness}/100</span></div>` : ''}
-        </div>
-      </div>
-    `;
-  }
-
-  // Create recent activity HTML with prompt previews
-  function createRecentActivity(interactions: any[]) {
-    const recentHTML = interactions.slice(-10).map((interaction: any, i: number) => {
-      const qualityColor = !interaction.qualityScore ? COLORS.textMuted :
-        interaction.qualityScore >= 90 ? COLORS.success :
-        interaction.qualityScore >= 70 ? COLORS.warning : COLORS.error;
-
-      const effectivenessColor = !interaction.effectivenessScore ? COLORS.textMuted :
-        interaction.effectivenessScore >= 90 ? COLORS.success :
-        interaction.effectivenessScore >= 70 ? COLORS.warning : COLORS.error;
-
-      const promptPreview = interaction.userPrompt ?
-        (interaction.userPrompt.length > 60 ?
-          interaction.userPrompt.substring(0, 60) + '...' :
-          interaction.userPrompt) : 'No prompt captured';
-
-      return `
-        <div style="padding: 16px 0; border-bottom: ${i < interactions.length - 1 ? `1px solid ${COLORS.primary}10` : 'none'}; cursor: pointer; transition: background-color 0.2s;"
-             onmouseover="this.style.background='${COLORS.primary}08'"
-             onmouseout="this.style.background='transparent'"
-             onclick="showPromptDetails('${interaction.provider}', '${interaction.model}', \`${(interaction.userPrompt || 'N/A').replace(/'/g, "\\'")}\`, \`${(interaction.aiResponse || 'N/A').substring(0, 300).replace(/'/g, "\\'")}\`, ${interaction.qualityScore || 0}, ${interaction.effectivenessScore || 0}, '${interaction.taskType || 'unknown'}', ${interaction.cost || 0})">
-          <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;">
-            <div style="flex: 1;">
-              <div style="color: ${COLORS.text}; font-size: 14px; font-weight: 500; margin-bottom: 4px;">
-                ${interaction.provider} • ${interaction.model}
-              </div>
-              <div style="color: ${COLORS.textMuted}; font-size: 12px; margin-bottom: 6px;">
-                ${new Date(interaction.timestamp).toLocaleTimeString()}
-                ${interaction.taskType ? ` • <span style="color: ${COLORS.accent};">${interaction.taskType}</span>` : ''}
-              </div>
-              <div style="color: ${COLORS.textMuted}; font-size: 11px; font-style: italic; line-height: 1.3; margin-bottom: 8px;">
-                💬 ${promptPreview}
-              </div>
-            </div>
-            <div style="text-align: right; margin-left: 16px;">
-              <div style="color: ${COLORS.success}; font-size: 14px; font-weight: 500; margin-bottom: 4px;">
-                ${interaction.cost.toFixed(4)}
-              </div>
-              <div style="display: flex; gap: 8px; font-size: 12px;">
-                ${interaction.qualityScore ? `<span style="color: ${qualityColor};">Q:${interaction.qualityScore}</span>` : ''}
-                ${interaction.effectivenessScore ? `<span style="color: ${effectivenessColor};">E:${interaction.effectivenessScore}</span>` : ''}
-              </div>
-            </div>
-          </div>
-        </div>
-      `;
-    }).join('');
-
-    return `
-      <div style="background: ${COLORS.surface}; border-radius: 12px; padding: 24px; border: 1px solid ${COLORS.primary}20;">
-        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
-          <h2 style="margin: 0; color: ${COLORS.text};">Recent Activity</h2>
-          <div style="display: flex; gap: 8px;">
-            <input type="text" id="prompt-search" placeholder="Search prompts..." style="background: ${COLORS.background}; border: 1px solid ${COLORS.primary}20; color: ${COLORS.text}; padding: 4px 8px; border-radius: 4px; font-size: 12px;" onkeyup="filterPrompts()">
-            <select id="provider-filter" style="background: ${COLORS.background}; border: 1px solid ${COLORS.primary}20; color: ${COLORS.text}; padding: 4px 8px; border-radius: 4px; font-size: 12px;" onchange="filterPrompts()">
-              <option value="">All Providers</option>
-              <option value="Gemini-Pro">Gemini-Pro</option>
-              <option value="OpenAI-GPT4">OpenAI-GPT4</option>
-              <option value="Anthropic-Claude">Anthropic-Claude</option>
-              <option value="Ollama-Llama3">Ollama-Llama3</option>
-            </select>
-          </div>
-        </div>
-        <div id="activity-list" style="max-height: 400px; overflow-y: auto;">
-          ${recentHTML}
-        </div>
-      </div>
-    `;
-  }
-
-  // Fetch and update stats
-  async function fetchStats() {
-    try {
-      const response = await fetch('/api/stats');
-      if (!response.ok) throw new Error('Failed to fetch stats');
-      const data = await response.json();
-
-      // Transform the data for display
-      const totalCost = data.totals.total || 0;
-      const totalInteractions = data.totals.requestCount || 0;
-      const avgCostPerTask = totalInteractions ? (totalCost / totalInteractions) : 0;
-
-      // Update stats cards
-      document.getElementById('total-cost')!.innerHTML = `${totalCost.toFixed(4)}`;
-      document.getElementById('total-interactions')!.innerHTML = totalInteractions.toString();
-      document.getElementById('avg-cost')!.innerHTML = `${avgCostPerTask.toFixed(4)}`;
-      document.getElementById('waste-rate')!.innerHTML = '0.0%';
-
-      // Update provider cards
-      const providerContainer = document.getElementById('provider-container');
-      if (providerContainer && data.totals.byProvider) {
-        const providerHTML = Object.entries(data.totals.byProvider).map(([name, providerData]) =>
-          createProviderChart(name, {
-            cost: (providerData as any).costUSD || 0,
-            interactions: (providerData as any).requestCount || 0,
-            avgQuality: (providerData as any).avgQualityScore,
-            avgEffectiveness: (providerData as any).avgEffectivenessScore
-          })
-        ).join('');
-        providerContainer.innerHTML = providerHTML;
-      }
-
-      // Update recent activity
-      const activityContainer = document.getElementById('recent-activity');
-      if (activityContainer) {
-        activityContainer.innerHTML = createRecentActivity(data.recentInteractions || []);
-      }
-
-      // Update timestamp
-      lastUpdated = new Date();
-      document.getElementById('last-updated')!.textContent = lastUpdated.toLocaleTimeString();
-
-    } catch (error) {
-      console.error('Dashboard error:', error);
-      document.getElementById('error-message')!.textContent = (error as Error).message;
-      document.getElementById('error-container')!.style.display = 'block';
-    }
-  }
-
-  // Create the complete dashboard HTML
-  const dashboardHTML = `
-    <div style="background: ${COLORS.background}; min-height: 100vh; color: ${COLORS.text}; font-family: system-ui, -apple-system, sans-serif;">
-      <!-- Header -->
-      <header style="background: ${COLORS.surface}; border-bottom: 1px solid ${COLORS.primary}20; padding: 16px 24px;">
-        <div style="display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto;">
-          <div>
-            <h1 style="margin: 0; font-size: 24px; color: ${COLORS.text};">🚀 TokNXR Dashboard</h1>
-            <p style="color: ${COLORS.textMuted}; margin: 4px 0 0 0; font-size: 14px;">
-              Real-time AI Effectiveness & Code Quality Analytics
-            </p>
-          </div>
-          <div style="text-align: right;">
-            <div id="last-updated" style="color: ${COLORS.textMuted}; font-size: 12px;">
-              Last updated: ${lastUpdated.toLocaleTimeString()}
-            </div>
-            <button
-              onclick="fetchStats()"
-              style="background: ${COLORS.primary}; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 12px; margin-top: 4px;"
-            >
-              Refresh
-            </button>
-          </div>
-        </div>
-      </header>
-
-      <!-- Error Message -->
-      <div id="error-container" style="display: none; background: ${COLORS.error}; color: white; padding: 12px 16px; margin: 16px; border-radius: 8px;">
-        Error: <span id="error-message"></span>
-      </div>
-
-      <!-- Main Content -->
-      <main style="padding: 24px; max-width: 1200px; margin: 0 auto;">
-        <!-- Stats Overview -->
-        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; margin-bottom: 32px;">
-          <div style="background: ${COLORS.surface}; border-radius: 12px; padding: 24px; border: 1px solid ${COLORS.success}20;">
-            <div style="display: flex; align-items: center; justify-content: space-between;">
-              <div>
-                <p style="color: ${COLORS.textMuted}; font-size: 14px; margin: 0 0 8px 0;">Total Cost</p>
-                <p id="total-cost" style="font-size: 32px; font-weight: bold; margin: 0; color: ${COLORS.text};">$0.0000</p>
-              </div>
-              <div style="font-size: 24px; color: ${COLORS.success}; opacity: 0.8;">💰</div>
-            </div>
-          </div>
-
-          <div style="background: ${COLORS.surface}; border-radius: 12px; padding: 24px; border: 1px solid ${COLORS.primary}20;">
-            <div style="display: flex; align-items: center; justify-content: space-between;">
-              <div>
-                <p style="color: ${COLORS.textMuted}; font-size: 14px; margin: 0 0 8px 0;">Total Interactions</p>
-                <p id="total-interactions" style="font-size: 32px; font-weight: bold; margin: 0; color: ${COLORS.text};">0</p>
-              </div>
-              <div style="font-size: 24px; color: ${COLORS.primary}; opacity: 0.8;">📊</div>
-            </div>
-          </div>
-
-          <div style="background: ${COLORS.surface}; border-radius: 12px; padding: 24px; border: 1px solid ${COLORS.secondary}20;">
-            <div style="display: flex; align-items: center; justify-content: space-between;">
-              <div>
-                <p style="color: ${COLORS.textMuted}; font-size: 14px; margin: 0 0 8px 0;">Avg Cost per Task</p>
-                <p id="avg-cost" style="font-size: 32px; font-weight: bold; margin: 0; color: ${COLORS.text};">$0.0000</p>
-              </div>
-              <div style="font-size: 24px; color: ${COLORS.secondary}; opacity: 0.8;">🎯</div>
-            </div>
-          </div>
-
-          <div style="background: ${COLORS.surface}; border-radius: 12px; padding: 24px; border: 1px solid ${COLORS.warning}20;">
-            <div style="display: flex; align-items: center; justify-content: space-between;">
-              <div>
-                <p style="color: ${COLORS.textMuted}; font-size: 14px; margin: 0 0 8px 0;">Waste Rate</p>
-                <p id="waste-rate" style="font-size: 32px; font-weight: bold; margin: 0; color: ${COLORS.text};">0.0%</p>
-              </div>
-              <div style="font-size: 24px; color: ${COLORS.warning}; opacity: 0.8;">⚠️</div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Provider Breakdown -->
-        <div id="provider-section" style="margin-bottom: 32px;">
-          <h2 style="color: ${COLORS.text}; margin: 0 0 16px 0;">Provider Breakdown</h2>
-          <div id="provider-container" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px;">
-            <!-- Provider cards will be inserted here -->
-          </div>
-        </div>
-
-        <!-- Recent Activity -->
-        <div id="recent-activity">
-          <!-- Recent activity will be inserted here -->
-        </div>
-      </main>
-
-      <!-- Footer -->
-      <footer style="background: ${COLORS.surface}; border-top: 1px solid ${COLORS.primary}20; padding: 16px 24px; text-align: center; color: ${COLORS.textMuted}; font-size: 12px;">
-        <div style="max-width: 1200px; margin: 0 auto;">
-          TokNXR Dashboard • Real-time AI Analytics • ${new Date().getFullYear()}
-          <br>
-          <span style="color: #FFD700; font-size: 11px; margin-top: 4px; display: block;">
-            🐑 Powered by Golden Sheep AI
-          </span>
-        </div>
-      </footer>
-    </div>
-  `;
-
-  // Set the dashboard content
-  const container = document.getElementById('dashboard-root');
-  if (container) {
-    container.innerHTML = dashboardHTML;
-
-    // Start fetching stats
-    fetchStats();
-
-    // Auto-refresh every 5 seconds
-    setInterval(fetchStats, 5000);
-  }
-}
-
-// Modal for showing prompt details
-  function showPromptDetails(provider: string, model: string, userPrompt: string, aiResponse: string, qualityScore: number, effectivenessScore: number, taskType: string, cost: number) {
-  const modal = document.createElement('div');
-  modal.id = 'prompt-modal';
-  modal.style.cssText = `
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.8);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-    padding: 20px;
-    box-sizing: border-box;
-  `;
-
-  const modalContent = document.createElement('div');
-  modalContent.style.cssText = `
-    background: #1E293B;
-    border-radius: 12px;
-    padding: 24px;
-    max-width: 800px;
-    max-height: 80vh;
-    overflow-y: auto;
-    color: #F8FAFC;
-    border: 1px solid #6B5BED20;
-  `;
-
-  modalContent.innerHTML = `
-    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
-      <h3 style="margin: 0; color: #F8FAFC;">Interaction Details</h3>
-      <button onclick="closePromptModal()" style="background: #6B5BED; color: white; border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer;">✕ Close</button>
-    </div>
-
-    <div style="margin-bottom: 16px;">
-      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px;">
-        <div>
-          <strong>Provider:</strong> ${provider}<br>
-          <strong>Model:</strong> ${model}<br>
-          <strong>Task Type:</strong> ${taskType}<br>
-          <strong>Cost:</strong> $${cost.toFixed(4)}
-        </div>
-        <div>
-          <strong>Quality Score:</strong> ${qualityScore}/100<br>
-          <strong>Effectiveness:</strong> ${effectivenessScore}/100<br>
-          <strong>Status:</strong> ${qualityScore >= 90 ? '🟢 Excellent' : qualityScore >= 70 ? '🟡 Good' : '🔴 Needs Improvement'}
-        </div>
-      </div>
-
-      <div style="margin-bottom: 16px;">
-        <h4 style="margin: 0 0 8px 0; color: #F8FAFC;">📝 User Prompt:</h4>
-        <div style="background: #0F172A; padding: 12px; border-radius: 6px; border: 1px solid #6B5BED20; font-family: monospace; white-space: pre-wrap;">${userPrompt}</div>
-      </div>
-
-      <div>
-        <h4 style="margin: 0 0 8px 0; color: #F8FAFC;">🤖 AI Response:</h4>
-        <div style="background: #0F172A; padding: 12px; border-radius: 6px; border: 1px solid #6B5BED20; font-family: monospace; white-space: pre-wrap; max-height: 200px; overflow-y: auto;">${aiResponse}${aiResponse.length > 300 ? '...' : ''}</div>
-      </div>
-    </div>
-  `;
-
-  modal.appendChild(modalContent);
-  document.body.appendChild(modal);
-
-  // Close modal on outside click
-  modal.addEventListener('click', function(e) {
-    if (e.target === modal) {
-      closePromptModal();
-    }
-  });
-}
-
-function closePromptModal() {
-  const modal = document.getElementById('prompt-modal');
-  if (modal) {
-    modal.remove();
-  }
-}
-
-// Filter prompts based on search and provider filter
-function filterPrompts() {
-  const searchTermValue = (document.getElementById('prompt-search') as HTMLInputElement)?.value.toLowerCase() || '';
-  const providerFilterValue = (document.getElementById('provider-filter') as HTMLSelectElement)?.value || '';
-  const activityItems = document.querySelectorAll('#activity-list > div');
-
-  activityItems.forEach(item => {
-    const text = item.textContent?.toLowerCase() || '';
-    const provider = item.textContent?.split(' • ')[0] || '';
-
-    const shouldShow = text.includes(searchTermValue) && 
-                      (providerFilterValue === '' || text.includes(providerFilterValue.toLowerCase()));
-    (item as HTMLElement).style.display = shouldShow ? 'block' : 'none';
-  });
-}
-
-// Initialize dashboard when DOM is loaded
-if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', createDashboard);
-} else {
-  createDashboard();
-}