@kb-labs/studio-app 0.6.0 → 2.8.0

package/src/modules/dashboard/components/AiInsightsWidget.tsx

@@ -1,358 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { UIButton, UITypographyText, UITypographyParagraph, UITitle, UIAvatar, UISpin, UITag, UICard, UIInputTextArea } from '@kb-labs/studio-ui-kit';
-import {
-  RobotOutlined,
-  SendOutlined,
-  UserOutlined,
-  BulbOutlined,
-  CopyOutlined,
-  CheckOutlined,
-} from '@ant-design/icons';
-import { useDataSources } from '../../../providers/data-sources-provider';
-import { usePrometheusMetrics, useAdaptersLLMUsage } from '@kb-labs/studio-data-client';
-
-interface Message {
-  id: string;
-  role: 'user' | 'assistant';
-  content: string;
-  timestamp: number;
-  context?: string[];
-}
-
-interface SuggestedQuestion {
-  text: string;
-  category: 'cost' | 'performance' | 'health' | 'optimization';
-}
-
-const SUGGESTED_QUESTIONS: SuggestedQuestion[] = [
-  { text: 'Why is LLM cost higher than usual?', category: 'cost' },
-  { text: "What's causing latency spikes?", category: 'performance' },
-  { text: 'Is the system healthy?', category: 'health' },
-  { text: 'How can I reduce API costs?', category: 'optimization' },
-  { text: 'Which endpoints are slowest?', category: 'performance' },
-  { text: 'Are there any anomalies?', category: 'health' },
-];
-
-// Mock AI response generator based on context
-const generateMockResponse = (question: string, context: {
-  totalRequests: number;
-  errorRate: number;
-  avgLatency: number;
-  totalCost: number;
-  topModel: string;
-}): { content: string; contextUsed: string[] } => {
-  const q = question.toLowerCase();
-  const contextUsed: string[] = [];
-
-  if (q.includes('cost') || q.includes('expensive') || q.includes('spending')) {
-    contextUsed.push('LLM Usage', 'Cost Attribution');
-    return {
-      content: `Based on your current metrics, total costs are **$${context.totalCost.toFixed(2)}** today.
-
-**Key findings:**
-- Your most expensive model is **${context.topModel}** accounting for ~65% of costs
-- Cost per 1K requests: $${(context.totalCost / context.totalRequests * 1000).toFixed(4)}
-
-**Recommendations:**
-1. Consider using a smaller model for simple queries
-2. Implement response caching for repeated questions
-3. Batch similar requests to reduce API overhead`,
-      contextUsed,
-    };
-  }
-
-  if (q.includes('latency') || q.includes('slow') || q.includes('performance')) {
-    contextUsed.push('Prometheus Metrics', 'Performance Data');
-    return {
-      content: `Current average latency is **${context.avgLatency.toFixed(0)}ms**.
-
-**Analysis:**
-- P95 latency is approximately ${(context.avgLatency * 1.5).toFixed(0)}ms
-- ${context.avgLatency > 200 ? '⚠️ Latency is above recommended threshold (200ms)' : '✅ Latency is within acceptable range'}
-
-**Potential causes:**
-1. LLM API response times (external dependency)
-2. Database query complexity
-3. Network latency to vector store
-
-**Suggestions:**
-- Enable response streaming for large outputs
-- Implement request timeouts at 5s
-- Consider caching frequent queries`,
-      contextUsed,
-    };
-  }
-
-  if (q.includes('health') || q.includes('status') || q.includes('ok')) {
-    contextUsed.push('System Health', 'Error Rates');
-    const healthStatus = context.errorRate < 1 ? 'healthy' : context.errorRate < 5 ? 'degraded' : 'critical';
-    return {
-      content: `System status: **${healthStatus.toUpperCase()}**
-
-**Current metrics:**
-- Error rate: ${context.errorRate.toFixed(2)}% ${context.errorRate < 1 ? '✅' : '⚠️'}
-- Total requests: ${context.totalRequests.toLocaleString()}
-- Uptime: ${(100 - context.errorRate).toFixed(2)}%
-
-**Health breakdown:**
-- API Gateway: ✅ Healthy
-- LLM Adapter: ${context.avgLatency < 300 ? '✅ Healthy' : '⚠️ Slow'}
-- Cache Layer: ✅ Healthy
-- Vector Store: ✅ Healthy`,
-      contextUsed,
-    };
-  }
-
-  if (q.includes('reduce') || q.includes('optimize') || q.includes('improve')) {
-    contextUsed.push('Usage Patterns', 'Cost Analysis');
-    return {
-      content: `Here are optimization recommendations based on your usage:
-
-**Cost Optimization:**
-1. Switch to gpt-3.5-turbo for classification tasks (-40% cost)
-2. Implement semantic caching for similar queries (-25% requests)
-3. Use shorter system prompts (-15% tokens)
-
-**Performance Optimization:**
-1. Enable connection pooling for DB queries
-2. Implement request batching for embeddings
-3. Add Redis caching for hot paths
-
-**Estimated savings:** $${(context.totalCost * 0.3).toFixed(2)}/day with these changes`,
-      contextUsed,
-    };
-  }
-
-  // Default response
-  contextUsed.push('General Metrics');
-  return {
-    content: `Based on your dashboard data:
-
-- **Total Requests:** ${context.totalRequests.toLocaleString()}
-- **Error Rate:** ${context.errorRate.toFixed(2)}%
-- **Avg Latency:** ${context.avgLatency.toFixed(0)}ms
-- **Total Cost:** $${context.totalCost.toFixed(2)}
-
-Is there something specific you'd like me to analyze? Try asking about:
-- Cost breakdown and optimization
-- Performance and latency issues
-- System health status
-- Specific endpoint analysis`,
-    contextUsed,
-  };
-};
-
-export function AIInsightsWidget() {
-  const sources = useDataSources();
-  const metrics = usePrometheusMetrics(sources.observability);
-  const llmUsage = useAdaptersLLMUsage(sources.adapters);
-
-  const [messages, setMessages] = useState<Message[]>([]);
-  const [input, setInput] = useState('');
-  const [isTyping, setIsTyping] = useState(false);
-  const [copiedId, setCopiedId] = useState<string | null>(null);
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-
-  // Auto-scroll to bottom
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [messages]);
-
-  // Build context from real data
-  const buildContext = () => ({
-    totalRequests: metrics.data?.requests?.total ?? 0,
-    errorRate: metrics.data?.requests?.total
-      ? ((metrics.data.requests.clientErrors + metrics.data.requests.serverErrors) / metrics.data.requests.total) * 100
-      : 0,
-    avgLatency: (metrics.data?.perPlugin?.reduce((sum, p) => sum + (p.latency?.average ?? 0), 0) ?? 0) /
-      (metrics.data?.perPlugin?.length || 1),
-    totalCost: llmUsage.data?.totalCost ?? 0,
-    topModel: Object.entries(llmUsage.data?.byModel ?? {})
-      .sort(([, a], [, b]) => (b.cost ?? 0) - (a.cost ?? 0))[0]?.[0] ?? 'gpt-4',
-  });
-
-  const sendMessage = async (text: string) => {
-    if (!text.trim()) {return;}
-
-    const userMessage: Message = {
-      id: `user-${Date.now()}`,
-      role: 'user',
-      content: text,
-      timestamp: Date.now(),
-    };
-
-    setMessages(prev => [...prev, userMessage]);
-    setInput('');
-    setIsTyping(true);
-
-    // Simulate AI thinking delay
-    await new Promise<void>(resolve => { setTimeout(resolve, 1000 + Math.random() * 1000); });
-
-    const context = buildContext();
-    const { content, contextUsed } = generateMockResponse(text, context);
-
-    const assistantMessage: Message = {
-      id: `assistant-${Date.now()}`,
-      role: 'assistant',
-      content,
-      timestamp: Date.now(),
-      context: contextUsed,
-    };
-
-    setMessages(prev => [...prev, assistantMessage]);
-    setIsTyping(false);
-  };
-
-  const copyToClipboard = (text: string, id: string) => {
-    navigator.clipboard.writeText(text);
-    setCopiedId(id);
-    setTimeout(() => setCopiedId(null), 2000);
-  };
-
-  const getCategoryColor = (category: string) => {
-    switch (category) {
-      case 'cost': return 'gold';
-      case 'performance': return 'blue';
-      case 'health': return 'green';
-      case 'optimization': return 'purple';
-      default: return 'default';
-    }
-  };
-
-  return (
-    <UICard
-      title={
-        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-          <RobotOutlined />
-          <span>AI Insights</span>
-          <UITag color="blue" style={{ marginLeft: 8 }}>Beta</UITag>
-        </div>
-      }
-      style={{ height: '100%' }}
-      styles={{ body: { padding: 0, display: 'flex', flexDirection: 'column', height: 450 } }}
-    >
-      {/* Messages Area */}
-      <div style={{
-        flex: 1,
-        overflowY: 'auto',
-        padding: 16,
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 12,
-      }}>
-        {messages.length === 0 ? (
-          <div style={{ textAlign: 'center', padding: '40px 20px' }}>
-            <BulbOutlined style={{ fontSize: 48, color: 'var(--border-primary)', marginBottom: 16 }} />
-            <UITitle level={5}>Ask me anything about your system</UITitle>
-            <UITypographyParagraph type="secondary" style={{ fontSize: 13 }}>
-              I can analyze costs, performance, health metrics, and suggest optimizations.
-            </UITypographyParagraph>
-            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, justifyContent: 'center', marginTop: 16 }}>
-              {SUGGESTED_QUESTIONS.slice(0, 4).map((q, i) => (
-                <UITag
-                  key={i}
-                  color={getCategoryColor(q.category)}
-                  style={{ cursor: 'pointer', padding: '4px 12px' }}
-                  onClick={() => sendMessage(q.text)}
-                >
-                  {q.text}
-                </UITag>
-              ))}
-            </div>
-          </div>
-        ) : (
-          messages.map(msg => (
-            <div
-              key={msg.id}
-              style={{
-                display: 'flex',
-                gap: 12,
-                flexDirection: msg.role === 'user' ? 'row-reverse' : 'row',
-              }}
-            >
-              <UIAvatar
-                size={32}
-                icon={msg.role === 'user' ? <UserOutlined /> : <RobotOutlined />}
-                style={{
-                  backgroundColor: msg.role === 'user' ? 'var(--info)' : 'var(--link)',
-                  flexShrink: 0,
-                }}
-              />
-              <div style={{
-                maxWidth: '80%',
-                padding: '10px 14px',
-                borderRadius: 12,
-                backgroundColor: msg.role === 'user' ? 'var(--info)' : 'var(--bg-tertiary)',
-                color: msg.role === 'user' ? 'var(--text-inverse)' : 'var(--text-primary)',
-              }}>
-                <div style={{ whiteSpace: 'pre-wrap', fontSize: 13, lineHeight: 1.6 }}>
-                  {msg.content.split('**').map((part, i) =>
-                    i % 2 === 1 ? <strong key={i}>{part}</strong> : part
-                  )}
-                </div>
-                {msg.context && msg.context.length > 0 && (
-                  <div style={{ marginTop: 8, display: 'flex', gap: 4, flexWrap: 'wrap' }}>
-                    {msg.context.map((ctx, i) => (
-                      <UITag key={i} style={{ fontSize: 10, margin: 0 }}>{ctx}</UITag>
-                    ))}
-                  </div>
-                )}
-                {msg.role === 'assistant' && (
-                  <UIButton
-                    variant="text"
-                    size="small"
-                    icon={copiedId === msg.id ? <CheckOutlined /> : <CopyOutlined />}
-                    style={{ marginTop: 4, padding: '0 4px', height: 20 }}
-                    onClick={() => copyToClipboard(msg.content, msg.id)}
-                  />
-                )}
-              </div>
-            </div>
-          ))
-        )}
-
-        {isTyping && (
-          <div style={{ display: 'flex', gap: 12 }}>
-            <UIAvatar size={32} icon={<RobotOutlined />} style={{ backgroundColor: 'var(--link)' }} />
-            <div style={{
-              padding: '10px 14px',
-              borderRadius: 12,
-              backgroundColor: 'var(--bg-tertiary)',
-            }}>
-              <UISpin size="small" /> <UITypographyText type="secondary" style={{ marginLeft: 8 }}>Analyzing...</UITypographyText>
-            </div>
-          </div>
-        )}
-        <div ref={messagesEndRef} />
-      </div>
-
-      {/* Input Area */}
-      <div style={{
-        padding: 12,
-        borderTop: '1px solid var(--border-primary)',
-        display: 'flex',
-        gap: 8,
-      }}>
-        <UIInputTextArea
-          value={input}
-          onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setInput(e.target.value)}
-          placeholder="Ask about costs, performance, health..."
-          autoSize={{ minRows: 1, maxRows: 3 }}
-          onPressEnter={(e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-            if (!e.shiftKey) {
-              e.preventDefault();
-              sendMessage(input);
-            }
-          }}
-          style={{ flex: 1 }}
-        />
-        <UIButton
-          variant="primary"
-          icon={<SendOutlined />}
-          onClick={() => sendMessage(input)}
-          disabled={!input.trim() || isTyping}
-        />
-      </div>
-    </UICard>
-  );
-}

package/src/modules/dashboard/components/AnimatedMetricCard.css

@@ -1,88 +0,0 @@
-.animated-metric-card {
-  position: relative;
-  overflow: hidden;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-}
-
-.animated-metric-card:hover {
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-  transform: translateY(-2px);
-}
-
-.animated-metric-card.animating::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: linear-gradient(
-    90deg,
-    transparent 0%,
-    currentColor 50%,
-    transparent 100%
-  );
-  animation: shimmer 1s ease-in-out;
-}
-
-@keyframes shimmer {
-  0% {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-}
-
-.animated-metric-card:hover .metric-icon {
-  opacity: 0.3 !important;
-  transform: scale(1.1);
-}
-
-.metric-icon {
-  transition: all 0.3s ease;
-}
-
-/* Pulse animation for real-time updates */
-@keyframes pulse {
-  0% {
-    box-shadow: 0 0 0 0 rgba(24, 144, 255, 0.4);
-  }
-  70% {
-    box-shadow: 0 0 0 10px rgba(24, 144, 255, 0);
-  }
-  100% {
-    box-shadow: 0 0 0 0 rgba(24, 144, 255, 0);
-  }
-}
-
-.animated-metric-card.live {
-  animation: pulse 2s infinite;
-}
-
-/* Loading skeleton animation */
-@keyframes skeleton-loading {
-  0% {
-    background-position: -200px 0;
-  }
-  100% {
-    background-position: calc(200px + 100%) 0;
-  }
-}
-
-.animated-metric-card .ant-skeleton {
-  background: linear-gradient(
-    90deg,
-    #f0f0f0 25%,
-    #e0e0e0 50%,
-    #f0f0f0 75%
-  );
-  background-size: 200px 100%;
-  animation: skeleton-loading 1.5s ease-in-out infinite;
-}

package/src/modules/dashboard/components/AnimatedMetricCard.tsx

@@ -1,125 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { UICard, UIStatistic } from '@kb-labs/studio-ui-kit';
-import './AnimatedMetricCard.css';
-
-export interface AnimatedMetricCardProps {
-  title: string;
-  value: number;
-  previousValue?: number;
-  suffix?: string;
-  prefix?: string;
-  precision?: number;
-  icon?: React.ReactNode;
-  color?: string;
-  animationDuration?: number; // ms
-  loading?: boolean;
-}
-
-export function AnimatedMetricCard({
-  title,
-  value,
-  previousValue,
-  suffix,
-  prefix,
-  precision = 0,
-  icon,
-  color = 'var(--info)',
-  animationDuration = 1000,
-  loading = false,
-}: AnimatedMetricCardProps) {
-  const [displayValue, setDisplayValue] = useState(previousValue ?? value);
-  const [isAnimating, setIsAnimating] = useState(false);
-
-  useEffect(() => {
-    if (value === displayValue) {return;}
-
-    setIsAnimating(true);
-    const startValue = displayValue;
-    const endValue = value;
-    const startTime = Date.now();
-    const duration = animationDuration;
-
-    const animate = () => {
-      const now = Date.now();
-      const elapsed = now - startTime;
-      const progress = Math.min(elapsed / duration, 1);
-
-      // Easing function (easeOutCubic)
-      const eased = 1 - Math.pow(1 - progress, 3);
-      const current = startValue + (endValue - startValue) * eased;
-
-      setDisplayValue(current);
-
-      if (progress < 1) {
-        requestAnimationFrame(animate);
-      } else {
-        setIsAnimating(false);
-      }
-    };
-
-    requestAnimationFrame(animate);
-  }, [value, animationDuration, displayValue]);
-
-  const hasChange = previousValue !== undefined && previousValue !== value;
-  const changePercent = hasChange ? ((value - previousValue!) / previousValue!) * 100 : 0;
-  const isIncrease = changePercent > 0;
-
-  return (
-    <UICard
-      variant="borderless"
-      className={`animated-metric-card ${isAnimating ? 'animating' : ''}`}
-      style={{
-        borderLeft: `4px solid ${color}`,
-        transition: 'all 0.3s ease',
-      }}
-      loading={loading}
-    >
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-        <div style={{ flex: 1 }}>
-          <UIStatistic
-            title={title}
-            value={displayValue}
-            precision={precision}
-            suffix={suffix}
-            prefix={prefix}
-            valueStyle={{
-              fontSize: 32,
-              fontWeight: 600,
-              color,
-              transition: 'color 0.3s ease',
-            }}
-          />
-          {hasChange && (
-            <div
-              style={{
-                marginTop: 8,
-                fontSize: 12,
-                color: isIncrease ? 'var(--success)' : 'var(--error)',
-                display: 'flex',
-                alignItems: 'center',
-                gap: 4,
-              }}
-            >
-              <span>{isIncrease ? '↑' : '↓'}</span>
-              <span>{Math.abs(changePercent).toFixed(1)}%</span>
-              <span style={{ color: 'var(--text-tertiary)' }}>from previous</span>
-            </div>
-          )}
-        </div>
-        {icon && (
-          <div
-            style={{
-              fontSize: 48,
-              color,
-              opacity: 0.2,
-              transition: 'opacity 0.3s ease',
-            }}
-            className="metric-icon"
-          >
-            {icon}
-          </div>
-        )}
-      </div>
-    </UICard>
-  );
-}

package/src/modules/dashboard/components/HeroMetricCard.css

@@ -1,114 +0,0 @@
-.hero-metric-card {
-  transition: all 0.2s ease;
-  position: relative;
-  overflow: hidden;
-  box-shadow: none;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-
-.hero-metric-card.clickable:hover {
-  border-color: var(--border-secondary);
-  box-shadow: 0 2px 8px var(--shadow-hover);
-}
-
-.hero-metric-card.pulsing {
-  /* Subtle pulse - just the dot, no shadow animation */
-}
-
-.hero-metric-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 12px;
-}
-
-.hero-metric-icon {
-  font-size: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.hero-metric-title {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--text-secondary);
-  flex: 1;
-}
-
-.hero-metric-pulse {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  animation: pulse-dot 2s infinite;
-}
-
-@keyframes pulse-dot {
-  0%, 100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  50% {
-    opacity: 0.5;
-    transform: scale(1.2);
-  }
-}
-
-.hero-metric-value {
-  font-size: 36px;
-  font-weight: 700;
-  line-height: 1.1;
-  margin-bottom: 4px;
-  font-family: var(--font-heading);
-  letter-spacing: -0.02em;
-}
-
-.hero-metric-subtitle {
-  font-size: 12px;
-  color: var(--text-tertiary);
-  margin-bottom: 12px;
-}
-
-.hero-metric-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  margin-top: auto;
-  padding-top: 12px;
-  border-top: 1px solid var(--border-primary);
-  min-height: 42px;
-}
-
-.hero-metric-sparkline {
-  flex: 1;
-  min-width: 0;
-}
-
-.sparkline {
-  display: block;
-  width: 100%;
-}
-
-.hero-metric-trend {
-  flex-shrink: 0;
-}
-
-.trend-indicator {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.trend-arrow {
-  font-size: 16px;
-}
-
-.trend-value {
-  font-size: 12px;
-}