rubyrlm 0.1.0

data/lib/rubyrlm/web/public/js/components/charts.js

@@ -0,0 +1,68 @@
+// Charts component - session-level charts
+
+const Charts = {
+  renderSessionCharts(session) {
+    // Render a per-iteration token usage stacked bar chart
+    const iterations = session.iterations || [];
+
+    // Gather per-iteration usage data
+    const usageData = [];
+    iterations.forEach(it => {
+      const d = it.data || it;
+      if (d.usage && (d.usage.prompt_tokens || d.usage.candidate_tokens)) {
+        usageData.push({
+          label: 'Iter ' + (d.iteration || usageData.length + 1),
+          prompt: d.usage.prompt_tokens || 0,
+          candidate: d.usage.candidate_tokens || 0
+        });
+      }
+    });
+
+    if (usageData.length === 0) return;
+
+    // Create or reuse the canvas element inside the usage-summary section
+    const summaryDiv = document.getElementById('usage-summary');
+    if (!summaryDiv) return;
+
+    let chartWrapper = document.getElementById('session-token-chart-wrapper');
+    if (!chartWrapper) {
+      chartWrapper = document.createElement('div');
+      chartWrapper.id = 'session-token-chart-wrapper';
+      chartWrapper.className = 'chart-container chart-container--small';
+      chartWrapper.style.marginTop = '1rem';
+
+      const canvas = document.createElement('canvas');
+      canvas.id = 'session-token-chart';
+      chartWrapper.appendChild(canvas);
+      summaryDiv.appendChild(chartWrapper);
+    }
+
+    // Render stacked bar chart via ChartRenderer
+    ChartRenderer.bar('session-token-chart', {
+      stacked: true,
+      data: {
+        labels: usageData.map(d => d.label),
+        datasets: [
+          {
+            label: 'Prompt Tokens',
+            data: usageData.map(d => d.prompt),
+            backgroundColor: '#10b981',
+            stack: 'tokens'
+          },
+          {
+            label: 'Candidate Tokens',
+            data: usageData.map(d => d.candidate),
+            backgroundColor: '#3b82f6',
+            stack: 'tokens'
+          }
+        ]
+      },
+      options: {
+        scales: {
+          x: { stacked: true },
+          y: { stacked: true }
+        }
+      }
+    });
+  }
+};

data/lib/rubyrlm/web/public/js/components/context-inspector.js

@@ -0,0 +1,94 @@
+// Context data inspector - tree view for exploring context
+
+const ContextInspector = {
+  render(containerId, data) {
+    const container = document.getElementById(containerId);
+    if (!container) return;
+    container.textContent = '';
+
+    if (data == null) {
+      container.textContent = 'No context data';
+      return;
+    }
+
+    const tree = document.createElement('div');
+    tree.className = 'context-tree';
+    this.buildTree(tree, data, 0);
+    container.appendChild(tree);
+  },
+
+  buildTree(parent, data, depth) {
+    if (depth > 5) {
+      const item = document.createElement('div');
+      item.className = 'context-tree__item';
+      item.style.setProperty('--depth', depth);
+      item.textContent = '...';
+      parent.appendChild(item);
+      return;
+    }
+
+    if (typeof data === 'object' && data !== null) {
+      const entries = Array.isArray(data)
+        ? data.map((v, i) => [i, v])
+        : Object.entries(data);
+
+      entries.forEach(([key, value]) => {
+        const item = document.createElement('div');
+        item.className = 'context-tree__item';
+        item.style.setProperty('--depth', depth);
+
+        const isExpandable = typeof value === 'object' && value !== null;
+
+        if (isExpandable) {
+          const toggle = document.createElement('span');
+          toggle.className = 'context-tree__toggle';
+          toggle.textContent = '\u25B6';
+          item.appendChild(toggle);
+
+          const keySpan = document.createElement('span');
+          keySpan.className = 'context-tree__key';
+          keySpan.textContent = key;
+          item.appendChild(keySpan);
+
+          const typeSpan = document.createElement('span');
+          typeSpan.className = 'context-tree__type';
+          typeSpan.textContent = Array.isArray(value)
+            ? ' Array[' + value.length + ']'
+            : ' Object{' + Object.keys(value).length + '}';
+          item.appendChild(typeSpan);
+
+          const childContainer = document.createElement('div');
+          childContainer.style.display = 'none';
+
+          toggle.addEventListener('click', () => {
+            const isOpen = childContainer.style.display !== 'none';
+            childContainer.style.display = isOpen ? 'none' : 'block';
+            toggle.textContent = isOpen ? '\u25B6' : '\u25BC';
+          });
+
+          parent.appendChild(item);
+          this.buildTree(childContainer, value, depth + 1);
+          parent.appendChild(childContainer);
+        } else {
+          const keySpan = document.createElement('span');
+          keySpan.className = 'context-tree__key';
+          keySpan.textContent = key + ': ';
+          item.appendChild(keySpan);
+
+          const valueSpan = document.createElement('span');
+          valueSpan.className = 'context-tree__value';
+          valueSpan.textContent = truncate(String(value), 100);
+          item.appendChild(valueSpan);
+
+          parent.appendChild(item);
+        }
+      });
+    } else {
+      const item = document.createElement('div');
+      item.className = 'context-tree__item';
+      item.style.setProperty('--depth', depth);
+      item.textContent = String(data);
+      parent.appendChild(item);
+    }
+  }
+};

data/lib/rubyrlm/web/public/js/components/exec-chain.js

@@ -0,0 +1,105 @@
+// Exec chain Mermaid flowchart component
+
+const ExecChain = {
+  async render(session) {
+    const iterations = session.iterations || [];
+    if (iterations.length === 0) return;
+
+    const definition = this.buildDefinition(session);
+    await DiagramRenderer.render('exec-chain-diagram', definition);
+    this.setupClickHandlers();
+  },
+
+  setupClickHandlers() {
+    const container = document.getElementById('exec-chain-diagram');
+    if (!container) return;
+
+    // Mermaid creates SVG nodes with class 'node'
+    const nodes = container.querySelectorAll('.node');
+    nodes.forEach(node => {
+      node.style.cursor = 'pointer';
+      node.addEventListener('click', () => {
+        // Extract sequence number from node ID
+        const id = node.id || '';
+        const match = id.match(/N(\d+)/);
+        if (match) {
+          const stepId = 'step-' + match[1];
+          const target = document.getElementById(stepId);
+          if (target) {
+            // Switch to timeline view if in flow view
+            if (App.currentView === 'flow') {
+              setView('timeline');
+            }
+            setTimeout(() => {
+              target.scrollIntoView({ behavior: 'smooth' });
+              target.classList.add('timeline-card--expanded');
+              // Flash highlight
+              target.style.boxShadow = '0 0 0 2px var(--color-accent)';
+              setTimeout(() => { target.style.boxShadow = ''; }, 2000);
+            }, 100);
+          }
+        }
+      });
+    });
+  },
+
+  buildDefinition(session) {
+    const iterations = session.iterations || [];
+    const prompt = session.run_start?.prompt || 'Query';
+    let lines = ['graph TD'];
+
+    lines.push('  S["' + this.escape(truncate(prompt, 40)) + '"]');
+
+    iterations.forEach((it, i) => {
+      const d = it.data || it;
+      const sequence = i + 1
+      const nodeId = 'N' + sequence;
+      const isSubmit = d.action === 'final' || d.action === 'forced_final';
+      const isError = !isSubmit && d.execution && !d.execution.ok;
+
+      if (isSubmit) {
+        const label = this.escape(truncate(d.answer || 'Final', 30));
+        lines.push('  ' + nodeId + '["' + label + '"]');
+        lines.push('  style ' + nodeId + ' fill:#1e3a5f,stroke:#3b82f6,color:#93c5fd');
+      } else {
+        const codeLine = (d.code || '').split('\n')[0];
+        const label = this.escape(truncate(codeLine, 35));
+        lines.push('  ' + nodeId + '["Exec ' + d.iteration + ': ' + label + '"]');
+
+        if (isError) {
+          lines.push('  style ' + nodeId + ' fill:#3b1010,stroke:#ef4444,color:#fca5a5');
+        } else {
+          lines.push('  style ' + nodeId + ' fill:#0a2e1a,stroke:#10b981,color:#6ee7b7');
+        }
+      }
+
+      // Edges
+      const prevId = i === 0 ? 'S' : ('N' + i);
+      let edgeLabel = '';
+
+      if (i > 0) {
+        const prevD = iterations[i - 1].data || iterations[i - 1];
+        if (prevD.execution) {
+          if (!prevD.execution.ok) {
+            edgeLabel = this.escape(truncate(prevD.execution.error_class || 'error', 20));
+          } else if (prevD.execution.value_preview) {
+            edgeLabel = this.escape(truncate(prevD.execution.value_preview, 20));
+          }
+        }
+      }
+
+      if (edgeLabel) {
+        lines.push('  ' + prevId + ' -->|"' + edgeLabel + '"| ' + nodeId);
+      } else {
+        lines.push('  ' + prevId + ' --> ' + nodeId);
+      }
+    });
+
+    lines.push('  style S fill:#1a1a1a,stroke:#888,color:#e5e5e5');
+    return lines.join('\n');
+  },
+
+  escape(str) {
+    return (str || '').replace(/"/g, "'").replace(/[<>{}|]/g, ' ');
+  }
+};

data/lib/rubyrlm/web/public/js/components/kpi-dashboard.js

@@ -0,0 +1,187 @@
+// KPI Dashboard component for analytics view
+
+const KPIDashboard = {
+  async load(days = null) {
+    try {
+      const url = days && days > 0 ? `/api/analytics?days=${days}` : '/api/analytics';
+      const data = await fetchJSON(url);
+      this.render(data);
+    } catch (err) {
+      const grid = document.getElementById('kpi-section');
+      grid.textContent = '';
+      const errDiv = document.createElement('div');
+      errDiv.className = 'node';
+      errDiv.textContent = 'Failed to load analytics: ' + err.message;
+      grid.appendChild(errDiv);
+    }
+  },
+
+  render(data) {
+    if (data.total_sessions === 0) {
+      const grid = document.getElementById('kpi-section');
+      grid.textContent = '';
+      const empty = document.createElement('div');
+      empty.className = 'main-view__empty';
+      empty.style.gridColumn = '1 / -1';
+      const icon = document.createElement('i');
+      icon.className = 'fa-solid fa-chart-pie';
+      empty.appendChild(icon);
+      const msg = document.createElement('p');
+      msg.textContent = 'No session data available. Run some queries to see analytics.';
+      empty.appendChild(msg);
+      grid.appendChild(empty);
+      return;
+    }
+    this.renderKPIs(data);
+    this.renderTokenChart(data);
+    this.renderModelChart(data);
+    this.renderErrorChart(data);
+  },
+
+  renderKPIs(data) {
+    const grid = document.getElementById('kpi-section');
+    grid.textContent = '';
+
+    const kpis = [
+      { label: 'Total Sessions', value: data.total_sessions, format: 'number', status: null, icon: 'fa-list-check' },
+      { label: 'Avg Steps/Session', value: data.avg_iterations_per_session, format: 'decimal', status: null, icon: 'fa-shoe-prints' },
+      { label: 'Total Tokens', value: data.total_tokens, format: 'number', status: null, icon: 'fa-coins' },
+      { label: 'Total Cost', value: data.total_cost, format: 'cost', status: null, icon: 'fa-dollar-sign' },
+      {
+        label: 'Success Rate', value: data.success_rate, format: 'percent',
+        status: data.success_rate >= 90 ? 'healthy' : data.success_rate >= 70 ? 'warning' : 'critical', icon: 'fa-circle-check'
+      },
+      { label: 'Avg Latency', value: data.avg_latency_per_iteration, format: 'duration', status: null, icon: 'fa-clock' },
+      {
+        label: 'Repair Rate', value: data.repair_rate, format: 'percent',
+        status: data.repair_rate <= 5 ? 'healthy' : data.repair_rate <= 15 ? 'warning' : 'critical', icon: 'fa-wrench'
+      }
+    ];
+
+    kpis.forEach((kpi, i) => {
+      const card = document.createElement('div');
+      card.className = 'kpi-card';
+      card.style.setProperty('--i', i);
+      card.classList.add('animate-scale');
+
+      const label = document.createElement('div');
+      label.className = 'kpi-card__label';
+      if (kpi.icon) {
+        const icon = document.createElement('i');
+        icon.className = 'fa-solid ' + kpi.icon;
+        icon.style.marginRight = '0.5rem';
+        label.appendChild(icon);
+      }
+      label.appendChild(document.createTextNode(kpi.label));
+      card.appendChild(label);
+
+      const value = document.createElement('div');
+      value.className = 'kpi-card__value';
+      switch (kpi.format) {
+        case 'number': value.textContent = formatNumber(kpi.value); break;
+        case 'decimal': value.textContent = (kpi.value || 0).toFixed(1); break;
+        case 'percent': value.textContent = (kpi.value || 0).toFixed(1) + '%'; break;
+        case 'duration': value.textContent = formatDuration(kpi.value); break;
+        case 'cost': value.textContent = '$' + (kpi.value || 0).toFixed(4); break;
+        default: value.textContent = kpi.value;
+      }
+      card.appendChild(value);
+
+      if (kpi.status) {
+        const badge = document.createElement('div');
+        badge.className = 'kpi-card__status kpi-card__status--' + kpi.status;
+        badge.textContent = kpi.status.charAt(0).toUpperCase() + kpi.status.slice(1);
+        card.appendChild(badge);
+      }
+
+      grid.appendChild(card);
+    });
+  },
+
+  renderTokenChart(data) {
+    const series = data.time_series || [];
+    if (series.length === 0) return;
+
+    const colors = ChartRenderer.getThemeColors();
+    ChartRenderer.bar('token-chart', {
+      stacked: true,
+      data: {
+        labels: series.map(s => s.date),
+        datasets: [
+          {
+            label: 'Prompt Tokens',
+            data: series.map(s => s.prompt_tokens || 0),
+            backgroundColor: colors.accent + '80'
+          },
+          {
+            label: 'Candidate Tokens',
+            data: series.map(s => s.candidate_tokens || 0),
+            backgroundColor: colors.info + '60'
+          },
+          {
+            label: 'Cached Tokens',
+            data: series.map(s => s.cached_content_tokens || 0),
+            backgroundColor: colors.success + '60'
+          }
+        ]
+      }
+    });
+  },
+
+  renderModelChart(data) {
+    const models = data.model_breakdown || {};
+    const entries = Object.entries(models);
+    if (entries.length === 0) return;
+
+    const palette = ['#10b981', '#3b82f6', '#f59e0b', '#ef4444', '#8b5cf6'];
+    ChartRenderer.pie('model-chart', {
+      data: {
+        labels: entries.map(([m]) => m),
+        datasets: [{
+          data: entries.map(([, v]) => v.sessions),
+          backgroundColor: entries.map((_, i) => palette[i % palette.length] + 'cc')
+        }]
+      }
+    });
+  },
+
+  renderErrorChart(data) {
+    const errors = data.top_error_classes || {};
+    const entries = Object.entries(errors);
+    if (entries.length === 0) {
+      const container = document.getElementById('error-analysis');
+      if (container) {
+        const msg = document.createElement('div');
+        msg.style.cssText = 'padding:2rem;text-align:center;color:var(--color-text-muted);';
+        msg.textContent = 'No errors recorded';
+        container.querySelector('.chart-container')?.appendChild(msg);
+      }
+      return;
+    }
+
+    const colors = ChartRenderer.getThemeColors();
+    ChartRenderer.bar('error-chart', {
+      data: {
+        labels: entries.map(([cls]) => cls),
+        datasets: [{
+          label: 'Count',
+          data: entries.map(([, count]) => count),
+          backgroundColor: colors.error + '80'
+        }]
+      }
+    });
+  },
+
+  init() {
+    const filter = document.getElementById('kpi-time-filter');
+    if (filter) {
+      filter.addEventListener('change', (e) => {
+        this.load(e.target.value);
+      });
+    }
+  }
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+  KPIDashboard.init();
+});