@kb-labs/studio-app 0.6.0

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

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

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

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

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