@kb-labs/studio-app 0.7.0 → 2.8.0

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

@@ -1,152 +0,0 @@
-import React from 'react';
-import { UICard } from '@kb-labs/studio-ui-kit';
-import type { UICardVariant as UICardStatus } from '@kb-labs/studio-ui-kit';
-import './HeroMetricCard.css';
-
-export type MetricStatus = 'healthy' | 'warning' | 'critical' | 'live' | 'default';
-
-export interface HeroMetricCardProps {
-  title: string;
-  value: string | number;
-  subtitle?: string;
-  sparklineData?: number[];
-  trend?: {
-    direction: 'up' | 'down';
-    value: number;
-    isPositive?: boolean;
-  };
-  status?: MetricStatus;
-  pulsing?: boolean;
-  onClick?: () => void;
-  icon?: React.ReactNode;
-}
-
-const statusColors: Record<MetricStatus, string> = {
-  healthy: 'var(--success)',
-  warning: 'var(--warning)',
-  critical: 'var(--error)',
-  live: 'var(--info)',
-  default: 'var(--text-secondary)',
-};
-
-const statusToVariant: Record<MetricStatus, UICardStatus> = {
-  healthy: 'success',
-  warning: 'warning',
-  critical: 'error',
-  live: 'info',
-  default: 'default',
-};
-
-export function HeroMetricCard({
-  title,
-  value,
-  subtitle,
-  sparklineData,
-  trend,
-  status = 'default',
-  pulsing = false,
-  onClick,
-  icon,
-}: HeroMetricCardProps) {
-  const mainColor = statusColors[status];
-
-  return (
-    <UICard
-      className={`hero-metric-card ${onClick ? 'clickable' : ''} ${pulsing ? 'pulsing' : ''}`}
-      status={statusToVariant[status]}
-      onClick={onClick}
-      styles={{ body: { padding: '20px' } }}
-      style={{ cursor: onClick ? 'pointer' : 'default' }}
-    >
-      <div className="hero-metric-header">
-        {icon && <div className="hero-metric-icon">{icon}</div>}
-        <div className="hero-metric-title">{title}</div>
-        {pulsing && (
-          <div className="hero-metric-pulse" style={{ backgroundColor: mainColor }} />
-        )}
-      </div>
-
-      <div className="hero-metric-value" style={{ color: mainColor }}>
-        {value}
-      </div>
-
-      {/* Always render subtitle for consistent height */}
-      <div className="hero-metric-subtitle">
-        {subtitle || '\u00A0'}
-      </div>
-
-      {/* Always show footer for consistent card height */}
-      <div className="hero-metric-footer">
-        <div className="hero-metric-sparkline">
-          {sparklineData && sparklineData.length > 1 && (
-            <Sparkline data={sparklineData} color={mainColor} />
-          )}
-        </div>
-
-        <div className="hero-metric-trend">
-          {trend && (
-            <TrendIndicator
-              direction={trend.direction}
-              value={trend.value}
-              isPositive={trend.isPositive ?? trend.direction === 'up'}
-            />
-          )}
-        </div>
-      </div>
-    </UICard>
-  );
-}
-
-// Sparkline Component
-interface SparklineProps {
-  data: number[];
-  color: string;
-  width?: number;
-  height?: number;
-}
-
-function Sparkline({ data, color, width = 100, height = 30 }: SparklineProps) {
-  if (data.length < 2) {return null;}
-
-  const min = Math.min(...data);
-  const max = Math.max(...data);
-  const range = max - min || 1;
-
-  const points = data.map((value, index) => {
-    const x = (index / (data.length - 1)) * width;
-    const y = height - ((value - min) / range) * height;
-    return `${x},${y}`;
-  }).join(' ');
-
-  return (
-    <svg width={width} height={height} className="sparkline">
-      <polyline
-        points={points}
-        fill="none"
-        stroke={color}
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-// TrendIndicator Component
-interface TrendIndicatorProps {
-  direction: 'up' | 'down';
-  value: number;
-  isPositive: boolean;
-}
-
-function TrendIndicator({ direction, value, isPositive }: TrendIndicatorProps) {
-  const color = isPositive ? 'var(--success)' : 'var(--error)';
-  const arrow = direction === 'up' ? '↑' : '↓';
-
-  return (
-    <div className="trend-indicator" style={{ color }}>
-      <span className="trend-arrow">{arrow}</span>
-      <span className="trend-value">{Math.abs(value).toFixed(1)}%</span>
-    </div>
-  );
-}

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

@@ -1,146 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { UIRow, UICol } from '@kb-labs/studio-ui-kit';
-import { useNavigate } from 'react-router-dom';
-import {
-  RiseOutlined,
-  ApiOutlined,
-  ClockCircleOutlined,
-} from '@ant-design/icons';
-import { HeroMetricCard } from './HeroMetricCard';
-import { useDataSources } from '../../../providers/data-sources-provider';
-import {
-  usePrometheusMetrics,
-  useStateBrokerStats,
-} from '@kb-labs/studio-data-client';
-
-interface MetricsHistoryPoint {
-  timestamp: number;
-  requests: number;
-  uptime: number;
-}
-
-export function HeroMetricsWidget() {
-  const sources = useDataSources();
-  const _navigate = useNavigate();
-
-  // Data hooks with auto-refresh
-  const metrics = usePrometheusMetrics(sources.observability);
-  const stateBroker = useStateBrokerStats(sources.observability);
-
-  // Historical data for sparklines (last 20 data points)
-  const [metricsHistory, setMetricsHistory] = useState<MetricsHistoryPoint[]>([]);
-
-  // Collect metrics history
-  useEffect(() => {
-    if (metrics.data) {
-      const newPoint: MetricsHistoryPoint = {
-        timestamp: Date.now(),
-        requests: metrics.data.requests?.total ?? 0,
-        uptime: calculateUptime(metrics.data),
-      };
-
-      setMetricsHistory(prev => {
-        // Keep last 20 points
-        return [...prev, newPoint].slice(-20);
-      });
-    }
-  }, [metrics.data]);
-
-  // Calculate uptime percentage
-  const calculateUptime = (metricsData: any) => {
-    if (!metricsData?.requests) {return 100;}
-    const total = metricsData.requests.total ?? 0;
-    const success = metricsData.requests.success ?? 0;
-    return total > 0 ? (success / total) * 100 : 100;
-  };
-
-  // Calculate trend from history
-  const calculateTrend = (data: number[]) => {
-    if (data.length < 2) {return null;}
-    const recent = data.slice(-5); // Last 5 points
-    const older = data.slice(-10, -5); // Previous 5 points
-    if (older.length === 0 || recent.length === 0) {return null;}
-
-    const recentAvg = recent.reduce((a, b) => a + b, 0) / recent.length;
-    const olderAvg = older.reduce((a, b) => a + b, 0) / older.length;
-
-    if (olderAvg === 0) {return null;}
-
-    const change = ((recentAvg - olderAvg) / olderAvg) * 100;
-    return {
-      direction: change >= 0 ? 'up' as const : 'down' as const,
-      value: Math.abs(change),
-      isPositive: change >= 0,
-    };
-  };
-
-  // Format uptime seconds to human-readable
-  const formatUptime = (seconds: number | undefined) => {
-    if (!seconds) {return '0s';}
-
-    const days = Math.floor(seconds / 86400);
-    const hours = Math.floor((seconds % 86400) / 3600);
-    const minutes = Math.floor((seconds % 3600) / 60);
-
-    if (days > 0) {return `${days}d ${hours}h`;}
-    if (hours > 0) {return `${hours}h ${minutes}m`;}
-    return `${minutes}m`;
-  };
-
-  // Extract sparkline data
-  const requestsSparkline = metricsHistory.map(p => p.requests);
-  const uptimeSparkline = metricsHistory.map(p => p.uptime);
-
-  // Calculate trends
-  const requestsTrend = calculateTrend(requestsSparkline);
-
-  // Metric values
-  const currentUptime = calculateUptime(metrics.data);
-  const totalRequests = metrics.data?.requests?.total ?? 0;
-  const runtimeSeconds = metrics.data?.uptime?.seconds ?? 0;
-
-  // Determine uptime status
-  const getUptimeStatus = () => {
-    if (currentUptime >= 99) {return 'healthy';}
-    if (currentUptime >= 95) {return 'warning';}
-    return 'critical';
-  };
-
-  return (
-    <UIRow gutter={[16, 16]}>
-      <UICol xs={24} sm={12} lg={8}>
-        <HeroMetricCard
-          title="Uptime"
-          value={`${currentUptime.toFixed(2)}%`}
-          subtitle={stateBroker.data ? `Cache: ${(stateBroker.data.hitRate * 100).toFixed(1)}%` : 'Success rate'}
-          sparklineData={uptimeSparkline}
-          status={getUptimeStatus()}
-          icon={<RiseOutlined />}
-        />
-      </UICol>
-
-      <UICol xs={24} sm={12} lg={8}>
-        <HeroMetricCard
-          title="Total Requests"
-          value={totalRequests.toLocaleString()}
-          subtitle={metrics.data ? `Success: ${metrics.data.requests.success.toLocaleString()}` : 'Loading...'}
-          sparklineData={requestsSparkline}
-          trend={requestsTrend ?? undefined}
-          status="default"
-          icon={<ApiOutlined />}
-        />
-      </UICol>
-
-      <UICol xs={24} sm={12} lg={8}>
-        <HeroMetricCard
-          title="Runtime"
-          value={formatUptime(runtimeSeconds)}
-          subtitle="LIVE"
-          status="live"
-          pulsing={true}
-          icon={<ClockCircleOutlined />}
-        />
-      </UICol>
-    </UIRow>
-  );
-}

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

@@ -1,197 +0,0 @@
-import React from 'react';
-import {
-  UIProgress,
-  UIStatistic,
-  UIRow,
-  UICol,
-  UITag,
-  UIEmptyState,
-  UICard,
-} from '@kb-labs/studio-ui-kit';
-import {
-  CloudServerOutlined,
-  ThunderboltOutlined,
-  DatabaseOutlined,
-  ClockCircleOutlined,
-} from '@ant-design/icons';
-import { useHealthStatus } from '@kb-labs/studio-data-client';
-import { useDataSources } from '../../../providers/data-sources-provider';
-
-function formatBytes(bytes: number): string {
-  if (bytes === 0) {return '0 B';}
-  const k = 1024;
-  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
-}
-
-function formatUptime(seconds: number): string {
-  const days = Math.floor(seconds / 86400);
-  const hours = Math.floor((seconds % 86400) / 3600);
-  const minutes = Math.floor((seconds % 3600) / 60);
-
-  if (days > 0) {return `${days}d ${hours}h ${minutes}m`;}
-  if (hours > 0) {return `${hours}h ${minutes}m`;}
-  return `${minutes}m`;
-}
-
-function getMetricColor(value: number, warningThreshold: number, criticalThreshold: number): string {
-  if (value >= criticalThreshold) {return 'var(--error)';}
-  if (value >= warningThreshold) {return 'var(--warning)';}
-  return 'var(--success)';
-}
-
-export function SystemResourcesWidget() {
-  const sources = useDataSources();
-  const healthQuery = useHealthStatus(sources.system);
-  const snapshot = healthQuery.data?.snapshot;
-  const resources = snapshot?.snapshot;
-  const topOperations = snapshot?.topOperations ?? [];
-  const state = snapshot?.state ?? 'insufficient_data';
-  const cpuPercent = resources?.cpuPercent ?? 0;
-  const rssBytes = resources?.rssBytes ?? 0;
-  const heapUsedBytes = resources?.heapUsedBytes ?? 0;
-  const eventLoopLagMs = resources?.eventLoopLagMs ?? 0;
-  const activeOperations = resources?.activeOperations ?? 0;
-
-  return (
-    <UICard
-      title={
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-          <CloudServerOutlined />
-          <span>Runtime Resources</span>
-          {snapshot && (
-            <UITag color={state === 'active' ? 'green' : state === 'partial_observability' ? 'orange' : 'red'}>
-              {state}
-            </UITag>
-          )}
-        </div>
-      }
-      style={{ height: '100%' }}
-    >
-      {healthQuery.isLoading ? (
-        <div style={{ height: 220, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-tertiary)' }}>
-          Loading runtime resources...
-        </div>
-      ) : !snapshot || !resources ? (
-        <UIEmptyState
-          image={UIEmptyState.PRESENTED_IMAGE_SIMPLE}
-          description="No runtime snapshot available"
-          style={{ marginTop: 40 }}
-        />
-      ) : (
-        <>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
-            <CloudServerOutlined style={{ fontSize: 18, color: 'var(--info)' }} />
-            <span style={{ fontSize: 14, fontWeight: 500 }}>{snapshot.instanceId}</span>
-            <UITag color={snapshot.status === 'healthy' ? 'green' : snapshot.status === 'degraded' ? 'orange' : 'red'}>
-              {snapshot.status}
-            </UITag>
-          </div>
-
-          <UIRow gutter={[16, 16]}>
-            <UICol span={12}>
-              <div>
-                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
-                  <ThunderboltOutlined style={{ color: getMetricColor(cpuPercent, 70, 90) }} />
-                  <span style={{ fontSize: 12, color: 'var(--text-secondary)' }}>CPU Usage</span>
-                </div>
-                <UIProgress
-                  percent={parseFloat(cpuPercent.toFixed(1))}
-                  strokeColor={getMetricColor(cpuPercent, 70, 90)}
-                  size="small"
-                  format={(percent) => `${percent}%`}
-                />
-              </div>
-            </UICol>
-
-            <UICol span={12}>
-              <UIStatistic
-                title={
-                  <span style={{ fontSize: 12, color: 'var(--text-secondary)' }}>
-                    <DatabaseOutlined style={{ marginRight: 4 }} />
-                    RSS
-                  </span>
-                }
-                value={formatBytes(rssBytes)}
-                valueStyle={{ fontSize: 14 }}
-              />
-            </UICol>
-
-            <UICol span={12}>
-              <UIStatistic
-                title={
-                  <span style={{ fontSize: 12, color: 'var(--text-secondary)' }}>
-                    <DatabaseOutlined style={{ marginRight: 4 }} />
-                    Heap Used
-                  </span>
-                }
-                value={formatBytes(heapUsedBytes)}
-                valueStyle={{ fontSize: 14 }}
-              />
-            </UICol>
-
-            <UICol span={12}>
-              <UIStatistic
-                title={
-                  <span style={{ fontSize: 12, color: 'var(--text-secondary)' }}>
-                    <ClockCircleOutlined style={{ marginRight: 4 }} />
-                    Uptime
-                  </span>
-                }
-                value={formatUptime(snapshot.uptimeSec)}
-                valueStyle={{ fontSize: 14 }}
-              />
-            </UICol>
-
-            <UICol span={12}>
-              <UIStatistic
-                title="Event Loop Lag"
-                value={eventLoopLagMs.toFixed(1)}
-                suffix="ms"
-                valueStyle={{
-                  fontSize: 20,
-                  color: getMetricColor(eventLoopLagMs, 100, 200),
-                }}
-              />
-            </UICol>
-
-            <UICol span={12}>
-              <UIStatistic
-                title="Active Operations"
-                value={activeOperations}
-                valueStyle={{ fontSize: 20 }}
-              />
-            </UICol>
-          </UIRow>
-
-          <div style={{ marginTop: 24 }}>
-            <div style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>Top Operations</div>
-            {topOperations.length > 0 ? (
-              topOperations.map((operation) => (
-                <div
-                  key={operation.operation}
-                  style={{
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    padding: '8px 0',
-                    borderTop: '1px solid var(--border-secondary)',
-                    fontSize: 12,
-                  }}
-                >
-                  <span style={{ color: 'var(--text-primary)' }}>{operation.operation.replace(/^http\./, '')}</span>
-                  <span style={{ color: 'var(--text-secondary)' }}>
-                    {operation.count ?? 0} req · {(operation.avgDurationMs ?? 0).toFixed(1)}ms avg
-                  </span>
-                </div>
-              ))
-            ) : (
-              <div style={{ color: 'var(--text-tertiary)', fontSize: 12 }}>No operation samples available</div>
-            )}
-          </div>
-        </>
-      )}
-    </UICard>
-  );
-}

package/src/modules/dashboard/components/dashboard-empty.tsx

@@ -1,22 +0,0 @@
-import { UIEmptyState, UIButton, UIFlex } from '@kb-labs/studio-ui-kit';
-import { PlusOutlined } from '@ant-design/icons';
-
-interface DashboardEmptyProps {
-  onAddWidget: () => void;
-}
-
-export function DashboardEmpty({ onAddWidget }: DashboardEmptyProps) {
-  return (
-    <UIFlex align="center" justify="center" style={{ minHeight: '400px' }}>
-      <UIEmptyState
-        useDefaultImage
-        description="No widgets added yet"
-        action={
-          <UIButton variant="primary" icon={<PlusOutlined />} onClick={onAddWidget}>
-            Add Widget
-          </UIButton>
-        }
-      />
-    </UIFlex>
-  );
-}

package/src/modules/dashboard/components/dashboard-kpis-widget.tsx

@@ -1,59 +0,0 @@
-import { UICard, UIBadge, UIRow, UICol } from '@kb-labs/studio-ui-kit';
-import { HolderOutlined } from '@ant-design/icons';
-import { useRegistryV2 } from '../../../providers/registry-v2-provider';
-import { KBStatCard } from '@/components/ui';
-
-export function DashboardKpisWidget() {
-  const { registry } = useRegistryV2();
-  const health = null as { pluginsMounted: number; pluginsFailed: number; ready: boolean; redisHealthy: boolean; redisEnabled: boolean } | null; // TODO: health status via separate endpoint
-
-  const totalPlugins = registry.plugins?.length ?? 0;
-  const pluginsMounted = health?.pluginsMounted ?? 0;
-  const pluginsFailed = health?.pluginsFailed ?? 0;
-  const systemStatus = health?.ready ? 'Healthy' : 'Degraded';
-  const statusType = health?.ready ? 'success' : 'error';
-
-  return (
-    <UICard
-      title={
-        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-          <HolderOutlined className="drag-handle" style={{ cursor: 'grab', color: 'var(--text-tertiary)' }} />
-          <span>System Status</span>
-          <UIBadge variant={statusType as 'success' | 'error'} />
-        </div>
-      }
-      style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
-      styles={{ body: { flex: 1, padding: '16px' } }}
-    >
-      <UIRow gutter={[16, 16]} style={{ height: '100%' }}>
-        <UICol span={6}>
-          <KBStatCard
-            label="Status"
-            value={systemStatus}
-            variant={health?.ready ? 'positive' : 'negative'}
-          />
-        </UICol>
-        <UICol span={6}>
-          <KBStatCard
-            label="Plugins Mounted"
-            value={`${pluginsMounted} of ${totalPlugins}`}
-          />
-        </UICol>
-        <UICol span={6}>
-          <KBStatCard
-            label="Failed"
-            value={pluginsFailed.toString()}
-            variant={pluginsFailed > 0 ? 'negative' : 'positive'}
-          />
-        </UICol>
-        <UICol span={6}>
-          <KBStatCard
-            label="Redis"
-            value={health?.redisHealthy ? 'Healthy' : health?.redisEnabled ? 'Unhealthy' : 'Disabled'}
-            variant={health?.redisHealthy ? 'positive' : health?.redisEnabled ? 'negative' : 'default'}
-          />
-        </UICol>
-      </UIRow>
-    </UICard>
-  );
-}

package/src/modules/dashboard/components/dashboard-kpis.tsx

@@ -1,13 +0,0 @@
-import { KBStatCard, KBStatGrid } from '@/components/ui';
-
-export function DashboardKpis() {
-  return (
-    <KBStatGrid columns={4}>
-      <KBStatCard label="Audit Status" value="Unavailable" />
-      <KBStatCard label="Packages OK" value="-" />
-      <KBStatCard label="Failed" value="-" />
-      <KBStatCard label="Warnings" value="-" />
-    </KBStatGrid>
-  );
-}
-

package/src/modules/dashboard/components/dashboard-latency-percentiles-widget.tsx

@@ -1,85 +0,0 @@
-import { UICard } from '@kb-labs/studio-ui-kit';
-import { HolderOutlined } from '@ant-design/icons';
-import { Column } from '@ant-design/plots';
-import { usePrometheusMetrics } from '@kb-labs/studio-data-client';
-import { useDataSources } from '../../../providers/data-sources-provider';
-
-export function DashboardLatencyPercentilesWidget() {
-  const sources = useDataSources();
-  const { data: metrics } = usePrometheusMetrics(sources.observability);
-
-  const min = metrics?.latency?.min ?? 0;
-  const average = metrics?.latency?.average ?? 0;
-  const p50 = metrics?.latency?.p50 ?? 0;
-  const p95 = metrics?.latency?.p95 ?? 0;
-  const p99 = metrics?.latency?.p99 ?? 0;
-  const max = metrics?.latency?.max ?? 0;
-
-  const chartData = [
-    { metric: 'Min', value: min, color: 'var(--success)' },
-    { metric: 'Avg', value: average, color: 'var(--info)' },
-    { metric: 'p50', value: p50, color: 'var(--info)' },
-    { metric: 'p95', value: p95, color: 'var(--warning)' },
-    { metric: 'p99', value: p99, color: 'var(--warning)' },
-    { metric: 'Max', value: max, color: 'var(--error)' },
-  ];
-
-  const config = {
-    data: chartData,
-    xField: 'metric',
-    yField: 'value',
-    seriesField: 'metric',
-    columnStyle: (datum: any) => {
-      return {
-        fill: datum.color,
-      };
-    },
-    label: {
-      position: 'top' as const,
-      formatter: (datum: any) => `${datum.value.toFixed(1)}ms`,
-      style: {
-        fontSize: 12,
-        fill: 'var(--text-secondary)',
-      },
-    },
-    xAxis: {
-      label: {
-        style: {
-          fontSize: 12,
-          fill: 'var(--text-secondary)',
-        },
-      },
-    },
-    yAxis: {
-      label: {
-        formatter: (v: string) => `${v}ms`,
-        style: {
-          fontSize: 12,
-          fill: 'var(--text-secondary)',
-        },
-      },
-    },
-    legend: false,
-    height: 280,
-  };
-
-  return (
-    <UICard
-      title={
-        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-          <HolderOutlined className="drag-handle" style={{ cursor: 'grab', color: 'var(--text-tertiary)' }} />
-          <span>Latency Distribution (ms)</span>
-        </div>
-      }
-      style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
-      styles={{ body: { flex: 1, padding: '16px', display: 'flex', flexDirection: 'column' } }}
-    >
-      {metrics && <Column {...config} />}
-      {!metrics && (
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 1 }}>
-          Loading...
-        </div>
-      )}
-    </UICard>
-  );
-}