@kb-labs/studio-app 0.6.0

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

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

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

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

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

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

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

@@ -0,0 +1,85 @@
+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>
+  );
+}