@kb-labs/studio-app 0.7.0 → 2.8.0

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

@@ -1,78 +0,0 @@
-import { UICard, UIRow, UICol } from '@kb-labs/studio-ui-kit';
-import { HolderOutlined } from '@ant-design/icons';
-import { usePrometheusMetrics } from '@kb-labs/studio-data-client';
-import { useDataSources } from '../../../providers/data-sources-provider';
-import { KBStatCard } from '@/components/ui';
-
-export function DashboardMetricsWidget() {
-  const sources = useDataSources();
-  const { data: metrics } = usePrometheusMetrics(sources.observability);
-
-  const totalRequests = metrics?.requests?.total ?? 0;
-  const totalErrors = (metrics?.requests?.clientErrors ?? 0) + (metrics?.requests?.serverErrors ?? 0);
-  const errorRate = totalRequests > 0 ? (totalErrors / totalRequests) * 100 : 0;
-  const avgLatency = metrics?.latency?.average ?? 0;
-  const p95 = metrics?.latency?.p95 ?? 0;
-  const uptime = metrics?.uptime?.seconds ?? 0;
-
-  const formatUptime = (seconds: number): string => {
-    const hours = Math.floor(seconds / 3600);
-    const minutes = Math.floor((seconds % 3600) / 60);
-    if (hours > 0) {
-      return `${hours}h ${minutes}m`;
-    }
-    return `${minutes}m`;
-  };
-
-  return (
-    <UICard
-      title={
-        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-          <HolderOutlined className="drag-handle" style={{ cursor: 'grab', color: 'var(--text-tertiary)' }} />
-          <span>Performance Metrics</span>
-        </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="Requests"
-            value={totalRequests.toLocaleString()}
-          />
-        </UICol>
-        <UICol span={6}>
-          <KBStatCard
-            label="Error Rate"
-            value={`${errorRate.toFixed(1)}%`}
-            variant={errorRate > 5 ? 'negative' : errorRate > 1 ? 'warning' : 'positive'}
-          />
-        </UICol>
-        <UICol span={6}>
-          <KBStatCard
-            label="Latency (avg)"
-            value={`${avgLatency.toFixed(1)}ms`}
-            variant={avgLatency > 500 ? 'negative' : avgLatency > 200 ? 'warning' : 'positive'}
-          />
-        </UICol>
-        <UICol span={6}>
-          <KBStatCard
-            label="Latency (p95/p99)"
-            value={`${p95.toFixed(1)}ms`}
-            variant={p95 > 1000 ? 'negative' : p95 > 500 ? 'warning' : 'positive'}
-          />
-        </UICol>
-      </UIRow>
-      <UIRow gutter={[16, 16]} style={{ marginTop: '16px' }}>
-        <UICol span={6}>
-          <KBStatCard
-            label="Uptime"
-            value={formatUptime(uptime)}
-            variant="positive"
-          />
-        </UICol>
-      </UIRow>
-    </UICard>
-  );
-}

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

@@ -1,67 +0,0 @@
-import { UICard } from '@kb-labs/studio-ui-kit';
-import { UITable } from '@kb-labs/studio-ui-kit';
-import { HolderOutlined } from '@ant-design/icons';
-import { usePrometheusMetrics } from '@kb-labs/studio-data-client';
-import { useDataSources } from '../../../providers/data-sources-provider';
-
-export function DashboardPluginsWidget() {
-  const sources = useDataSources();
-  const { data: metrics } = usePrometheusMetrics(sources.observability);
-
-  const columns = [
-    {
-      title: 'Plugin',
-      dataIndex: 'pluginId',
-      key: 'pluginId',
-      render: (text: string) => text || 'unknown',
-    },
-    {
-      title: 'Requests',
-      dataIndex: 'total',
-      key: 'total',
-      sorter: (a: any, b: any) => a.total - b.total,
-      defaultSortOrder: 'descend' as const,
-    },
-    {
-      title: 'Avg (ms)',
-      dataIndex: 'avgDuration',
-      key: 'avgDuration',
-      render: (value: number) => value.toFixed(0),
-    },
-    {
-      title: 'Max (ms)',
-      dataIndex: 'maxDuration',
-      key: 'maxDuration',
-      render: (value: number) => value.toFixed(0),
-    },
-  ];
-
-  const dataSource = metrics?.perPlugin?.map((plugin, index) => ({
-    key: plugin.pluginId || `plugin-${index}`,
-    pluginId: plugin.pluginId,
-    total: plugin.requests,
-    avgDuration: plugin.latency.average,
-    maxDuration: plugin.latency.max,
-  })) ?? [];
-
-  return (
-    <UICard
-      title={
-        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-          <HolderOutlined className="drag-handle" style={{ cursor: 'grab', color: 'var(--text-tertiary)' }} />
-          <span>Plugin Performance</span>
-        </div>
-      }
-      style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
-      styles={{ body: { flex: 1, padding: '16px', overflow: 'auto' } }}
-    >
-      <UITable
-        columns={columns}
-        dataSource={dataSource}
-        pagination={false}
-        size="small"
-      />
-
-    </UICard>
-  );
-}

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

@@ -1,62 +0,0 @@
-import { HolderOutlined } from '@ant-design/icons';
-import { UILineChart } from '@kb-labs/studio-ui-kit';
-import { useHealthStatus } from '@kb-labs/studio-data-client';
-import { useDataSources } from '../../../providers/data-sources-provider';
-import { UISpin } from '@kb-labs/studio-ui-kit';
-import { UICard } from '@kb-labs/studio-ui-kit';
-
-export function DashboardRequestsWidget() {
-  const sources = useDataSources();
-  const { data: health, isLoading: loading } = useHealthStatus(sources.system);
-
-  const chartData = (health?.snapshot?.topOperations ?? [])
-    .slice(0, 10)
-    .map((item) => ({
-      route: item.operation.replace(/^http\./, ''),
-      requests: item.count ?? 0,
-    }));
-
-  const config = {
-    data: chartData,
-    xField: 'route',
-    yField: 'requests',
-    smooth: true,
-    height: 250,
-    autoFit: true,
-    point: {
-      size: 5,
-      shape: 'circle',
-    },
-    tooltip: {
-      showCrosshairs: true,
-      shared: true,
-    },
-    animation: {
-      appear: {
-        animation: 'path-in',
-        duration: 1000,
-      },
-    },
-  };
-
-  return (
-    <UICard
-      title={
-        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-          <HolderOutlined className="drag-handle" style={{ cursor: 'grab', color: 'var(--text-tertiary)' }} />
-          <span>Top Operations</span>
-          {loading && <UISpin size="small" />}
-        </div>
-      }
-      style={{ height: '100%' }}
-    >
-      {chartData.length > 0 ? (
-        <UILineChart {...config} />
-      ) : (
-        <div style={{ padding: '40px', textAlign: 'center', color: 'var(--text-tertiary)' }}>
-          No operation data available
-        </div>
-      )}
-    </UICard>
-  );
-}

package/src/modules/dashboard/layouts/dashboard-layout.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { Outlet } from 'react-router-dom';
-import { UIPage, UIPageHeader } from '@kb-labs/studio-ui-kit';
-
-export function DashboardLayout() {
-  return (
-    <UIPage width="full">
-      <UIPageHeader
-        title="Intelligence Dashboard"
-        description="Real-time platform observability and performance analytics"
-      />
-
-      <Outlet />
-    </UIPage>
-  );
-}