@kb-labs/studio-app 0.6.0

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

@@ -0,0 +1,358 @@
+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

@@ -0,0 +1,88 @@
+.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

@@ -0,0 +1,125 @@
+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

@@ -0,0 +1,114 @@
+.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;
+}