@kb-labs/studio-app 0.6.0

package/src/modules/analytics/pages/analytics-overview-page.tsx

@@ -0,0 +1,336 @@
+import { UIRow, UICol, UIStatistic, UIAlert, UISpace, useUITheme } from '@kb-labs/studio-ui-kit';
+import {
+  ThunderboltOutlined,
+  DatabaseOutlined,
+  CloudOutlined,
+  RocketOutlined,
+  RobotOutlined,
+  FileTextOutlined,
+  SaveOutlined,
+  ArrowRightOutlined,
+  DollarOutlined,
+} from '@ant-design/icons';
+import { UIText, UITitle, UICard, UIPage, UIPageHeader } from '@kb-labs/studio-ui-kit';
+import {
+  useAnalyticsStats,
+  useAdaptersLLMUsage,
+  useAdaptersEmbeddingsUsage,
+  useAdaptersVectorStoreUsage,
+  useAdaptersCacheUsage,
+  useAdaptersStorageUsage,
+} from '@kb-labs/studio-data-client';
+import { useDataSources } from '../../../providers/data-sources-provider';
+import { useNavigate } from 'react-router-dom';
+
+
+/**
+ * Analytics Overview Page
+ *
+ * High-level dashboard showing metrics across all platform adapters:
+ * - Total events tracked
+ * - Adapter health status
+ * - Quick links to detailed views (LLM, Cache, Events, etc.)
+ */
+export function AnalyticsOverviewPage() {
+  const { token } = useUITheme();
+  const sources = useDataSources();
+  const navigate = useNavigate();
+
+  const {
+    data: statsData,
+    isLoading: statsLoading,
+    error: statsError,
+    isError: isStatsError,
+  } = useAnalyticsStats(sources.analytics);
+
+  // Fetch all adapter stats
+  const { data: llmStats } = useAdaptersLLMUsage(sources.adapters);
+  const { data: embeddingsStats } = useAdaptersEmbeddingsUsage(sources.adapters);
+  const { data: vectorstoreStats } = useAdaptersVectorStoreUsage(sources.adapters);
+  const { data: cacheStats } = useAdaptersCacheUsage(sources.adapters);
+  const { data: storageStats } = useAdaptersStorageUsage(sources.adapters);
+
+  // Check if analytics is not configured
+  const analyticsNotConfigured =
+    isStatsError &&
+    statsError instanceof Error &&
+    statsError.message.includes('not support');
+
+  if (analyticsNotConfigured) {
+    return (
+      <UIPage>
+        <UIPageHeader
+          title="Analytics"
+          description="Platform-wide analytics and adapter metrics"
+        />
+        <UIAlert
+          message="Analytics Not Configured"
+          description="Analytics adapter is not configured. Configure an analytics adapter in kb.config.json to track events and metrics."
+          variant="info"
+          showIcon
+          style={{ marginTop: 16 }}
+        />
+      </UIPage>
+    );
+  }
+
+  if (isStatsError) {
+    return (
+      <UIPage>
+        <UIPageHeader title="Analytics" description="Platform-wide analytics" />
+        <UIAlert
+          message="Failed to Load Analytics"
+          description={statsError?.message || 'Unknown error occurred'}
+          variant="error"
+          showIcon
+          style={{ marginTop: 16 }}
+        />
+      </UIPage>
+    );
+  }
+
+  return (
+    <UIPage width="full">
+      <UIPageHeader
+        title="Analytics Overview"
+        description="High-level metrics across all platform adapters"
+      />
+
+      <div style={{ marginTop: 24 }}>
+        {/* Overview Stats */}
+        <UIRow gutter={[16, 16]}>
+          <UICol xs={24} sm={12} lg={6}>
+            <UICard>
+              <UIStatistic
+                title="Total Events"
+                value={statsData?.totalEvents ?? 0}
+                loading={statsLoading}
+                prefix={<ThunderboltOutlined />}
+                valueStyle={{ color: 'var(--info)' }}
+              />
+            </UICard>
+          </UICol>
+          <UICol xs={24} sm={12} lg={6}>
+            <UICard>
+              <UIStatistic
+                title="Event Types"
+                value={statsData ? Object.keys(statsData.byType).length : 0}
+                loading={statsLoading}
+                prefix={<DatabaseOutlined />}
+                valueStyle={{ color: 'var(--success)' }}
+              />
+            </UICard>
+          </UICol>
+          <UICol xs={24} sm={12} lg={6}>
+            <UICard>
+              <UIStatistic
+                title="Sources"
+                value={statsData ? Object.keys(statsData.bySource).length : 0}
+                loading={statsLoading}
+                prefix={<CloudOutlined />}
+                valueStyle={{ color: 'var(--link)' }}
+              />
+            </UICard>
+          </UICol>
+          <UICol xs={24} sm={12} lg={6}>
+            <UICard>
+              <UIStatistic
+                title="Actors"
+                value={statsData ? Object.keys(statsData.byActor).length : 0}
+                loading={statsLoading}
+                prefix={<RocketOutlined />}
+                valueStyle={{ color: 'var(--warning)' }}
+              />
+            </UICard>
+          </UICol>
+        </UIRow>
+
+        {/* Platform Adapters */}
+        <div style={{ marginTop: 32 }}>
+          <UITitle level={4}>Platform Adapters</UITitle>
+          <UIRow gutter={[16, 16]} style={{ marginTop: 16 }}>
+            {/* LLM Adapter */}
+            <UICol xs={24} md={12} lg={8}>
+              <UICard
+                hoverable
+                onClick={() => navigate('/analytics/llm')}
+                style={{ cursor: 'pointer' }}
+              >
+                <UISpace direction="vertical" style={{ width: '100%' }} size="large">
+                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                    <UISpace>
+                      <RobotOutlined style={{ fontSize: 24, color: 'var(--info)' }} />
+                      <UIText weight="semibold" style={{ fontSize: 16 }}>LLM Usage</UIText>
+                    </UISpace>
+                    <ArrowRightOutlined style={{ color: token.colorTextTertiary }} />
+                  </div>
+                  <UIRow gutter={16}>
+                    <UICol span={12}>
+                      <UIStatistic
+                        title="Requests"
+                        value={llmStats?.totalRequests ?? 0}
+                        valueStyle={{ fontSize: 20 }}
+                      />
+                    </UICol>
+                    <UICol span={12}>
+                      <UIStatistic
+                        title="Cost"
+                        value={llmStats?.totalCost ?? 0}
+                        prefix={<DollarOutlined />}
+                        precision={2}
+                        valueStyle={{ fontSize: 20 }}
+                      />
+                    </UICol>
+                  </UIRow>
+                </UISpace>
+              </UICard>
+            </UICol>
+
+            {/* Embeddings Adapter */}
+            <UICol xs={24} md={12} lg={8}>
+              <UICard
+                hoverable
+                onClick={() => navigate('/analytics/embeddings')}
+                style={{ cursor: 'pointer' }}
+              >
+                <UISpace direction="vertical" style={{ width: '100%' }} size="large">
+                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                    <UISpace>
+                      <FileTextOutlined style={{ fontSize: 24, color: 'var(--success)' }} />
+                      <UIText weight="semibold" style={{ fontSize: 16 }}>Embeddings</UIText>
+                    </UISpace>
+                    <ArrowRightOutlined style={{ color: token.colorTextTertiary }} />
+                  </div>
+                  <UIRow gutter={16}>
+                    <UICol span={12}>
+                      <UIStatistic
+                        title="Requests"
+                        value={embeddingsStats?.totalRequests ?? 0}
+                        valueStyle={{ fontSize: 20 }}
+                      />
+                    </UICol>
+                    <UICol span={12}>
+                      <UIStatistic
+                        title="Text Chars"
+                        value={embeddingsStats?.totalTextLength ?? 0}
+                        valueStyle={{ fontSize: 20 }}
+                      />
+                    </UICol>
+                  </UIRow>
+                </UISpace>
+              </UICard>
+            </UICol>
+
+            {/* VectorStore Adapter */}
+            <UICol xs={24} md={12} lg={8}>
+              <UICard
+                hoverable
+                onClick={() => navigate('/analytics/vectorstore')}
+                style={{ cursor: 'pointer' }}
+              >
+                <UISpace direction="vertical" style={{ width: '100%' }} size="large">
+                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                    <UISpace>
+                      <DatabaseOutlined style={{ fontSize: 24, color: 'var(--link)' }} />
+                      <UIText weight="semibold" style={{ fontSize: 16 }}>VectorStore</UIText>
+                    </UISpace>
+                    <ArrowRightOutlined style={{ color: token.colorTextTertiary }} />
+                  </div>
+                  <UIRow gutter={16}>
+                    <UICol span={12}>
+                      <UIStatistic
+                        title="Searches"
+                        value={vectorstoreStats?.searchQueries ?? 0}
+                        valueStyle={{ fontSize: 20 }}
+                      />
+                    </UICol>
+                    <UICol span={12}>
+                      <UIStatistic
+                        title="Avg Score"
+                        value={vectorstoreStats?.avgSearchScore ?? 0}
+                        precision={2}
+                        valueStyle={{ fontSize: 20 }}
+                      />
+                    </UICol>
+                  </UIRow>
+                </UISpace>
+              </UICard>
+            </UICol>
+
+            {/* Cache Adapter */}
+            <UICol xs={24} md={12} lg={8}>
+              <UICard
+                hoverable
+                onClick={() => navigate('/analytics/cache')}
+                style={{ cursor: 'pointer' }}
+              >
+                <UISpace direction="vertical" style={{ width: '100%' }} size="large">
+                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                    <UISpace>
+                      <ThunderboltOutlined style={{ fontSize: 24, color: 'var(--warning)' }} />
+                      <UIText weight="semibold" style={{ fontSize: 16 }}>Cache</UIText>
+                    </UISpace>
+                    <ArrowRightOutlined style={{ color: token.colorTextTertiary }} />
+                  </div>
+                  <UIRow gutter={16}>
+                    <UICol span={12}>
+                      <UIStatistic
+                        title="Hit Rate"
+                        value={cacheStats?.hitRate ?? 0}
+                        suffix="%"
+                        precision={1}
+                        valueStyle={{ fontSize: 20, color: cacheStats && cacheStats.hitRate >= 80 ? 'var(--success)' : 'var(--info)' }}
+                      />
+                    </UICol>
+                    <UICol span={12}>
+                      <UIStatistic
+                        title="Total Gets"
+                        value={cacheStats?.totalGets ?? 0}
+                        valueStyle={{ fontSize: 20 }}
+                      />
+                    </UICol>
+                  </UIRow>
+                </UISpace>
+              </UICard>
+            </UICol>
+
+            {/* Storage Adapter */}
+            <UICol xs={24} md={12} lg={8}>
+              <UICard
+                hoverable
+                onClick={() => navigate('/analytics/storage')}
+                style={{ cursor: 'pointer' }}
+              >
+                <UISpace direction="vertical" style={{ width: '100%' }} size="large">
+                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                    <UISpace>
+                      <SaveOutlined style={{ fontSize: 24, color: 'var(--error)' }} />
+                      <UIText weight="semibold" style={{ fontSize: 16 }}>Storage</UIText>
+                    </UISpace>
+                    <ArrowRightOutlined style={{ color: token.colorTextTertiary }} />
+                  </div>
+                  <UIRow gutter={16}>
+                    <UICol span={12}>
+                      <UIStatistic
+                        title="Reads"
+                        value={storageStats?.readOperations ?? 0}
+                        valueStyle={{ fontSize: 20 }}
+                      />
+                    </UICol>
+                    <UICol span={12}>
+                      <UIStatistic
+                        title="Writes"
+                        value={storageStats?.writeOperations ?? 0}
+                        valueStyle={{ fontSize: 20 }}
+                      />
+                    </UICol>
+                  </UIRow>
+                </UISpace>
+              </UICard>
+            </UICol>
+          </UIRow>
+        </div>
+      </div>
+    </UIPage>
+  );
+}

package/src/modules/analytics/pages/analytics-page.tsx

@@ -0,0 +1,20 @@
+import { EmptyState } from '@/components/empty-state';
+import { BarChart3 } from 'lucide-react';
+import { UIPage, UIPageHeader } from '@kb-labs/studio-ui-kit';
+
+export function AnalyticsPage() {
+  return (
+    <UIPage width="full">
+      <UIPageHeader 
+        title="Analytics"
+        description="Event metrics and performance charts"
+      />
+      <EmptyState
+        icon={<BarChart3 size={32} />}
+        title="Coming Soon"
+        description="Event metrics and performance charts will appear here."
+      />
+    </UIPage>
+  );
+}
+

package/src/modules/analytics/pages/analytics-storage-page.tsx

@@ -0,0 +1,344 @@
+import { useState } from 'react';
+import { UIRow, UICol, UIStatistic, UIAlert } from '@kb-labs/studio-ui-kit';
+import {
+  FileOutlined,
+  UploadOutlined,
+  DownloadOutlined,
+  DeleteOutlined,
+  ClockCircleOutlined,
+  DatabaseOutlined,
+} from '@ant-design/icons';
+import { UIText, UIStatisticsChart, UICard, UIPage, UIPageHeader } from '@kb-labs/studio-ui-kit';
+import { useAdaptersStorageUsage, useAdaptersStorageDailyStats } from '@kb-labs/studio-data-client';
+import { useDataSources } from '../../../providers/data-sources-provider';
+import { AnalyticsDateRangePicker, type DateRangeValue } from '../components/analytics-date-range-picker';
+import dayjs from 'dayjs';
+
+
+/**
+ * Analytics Storage Usage Page
+ *
+ * Displays storage usage statistics:
+ * - Read/write/delete operations
+ * - Bandwidth usage tracking
+ * - Performance metrics
+ */
+export function AnalyticsStoragePage() {
+  const sources = useDataSources();
+
+  // Date range state (default: last 30 days)
+  const [dateRange, setDateRange] = useState<DateRangeValue>([
+    dayjs().subtract(30, 'days'),
+    dayjs(),
+  ]);
+
+  const {
+    data: stats,
+    isLoading,
+    error,
+    isError,
+  } = useAdaptersStorageUsage(sources.adapters, {
+    from: dateRange[0].toISOString(),
+    to: dateRange[1].toISOString(),
+  });
+
+  const {
+    data: dailyStats,
+    isLoading: dailyStatsLoading,
+  } = useAdaptersStorageDailyStats(sources.adapters, {
+    from: dateRange[0].toISOString(),
+    to: dateRange[1].toISOString(),
+  });
+
+  // Check if analytics is not implemented
+  const analyticsNotImplemented =
+    isError &&
+    error instanceof Error &&
+    (error.message.includes('not support') || error.message.includes('not implement'));
+
+  if (analyticsNotImplemented) {
+    return (
+      <UIPage>
+        <UIPageHeader
+          title="Storage Usage"
+          description="Track storage operations and bandwidth usage"
+        />
+        <UIAlert
+          message="Analytics Not Available"
+          description="Analytics adapter does not support reading events. Configure an analytics adapter in kb.config.json that implements getEvents()."
+          variant="info"
+          showIcon
+          style={{ marginTop: 16 }}
+        />
+      </UIPage>
+    );
+  }
+
+  if (isError) {
+    return (
+      <UIPage>
+        <UIPageHeader title="Storage Usage" description="Storage usage analytics" />
+        <UIAlert
+          message="Failed to Load Storage Usage"
+          description={error?.message || 'Unknown error occurred'}
+          variant="error"
+          showIcon
+          style={{ marginTop: 16 }}
+        />
+      </UIPage>
+    );
+  }
+
+  // Format helpers
+  const _formatNumber = (num: number) => num.toLocaleString();
+  const formatSize = (bytes: number) => {
+    if (bytes < 1024) {return `${bytes} B`;}
+    if (bytes < 1024 * 1024) {return `${(bytes / 1024).toFixed(2)} KB`;}
+    if (bytes < 1024 * 1024 * 1024) {return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;}
+    return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+  };
+  const _formatDuration = (ms: number) => (ms < 1000 ? `${ms.toFixed(1)}ms` : `${(ms / 1000).toFixed(2)}s`);
+
+  const totalOperations = stats
+    ? stats.readOperations + stats.writeOperations + stats.deleteOperations
+    : 0;
+
+  const readPercentage = stats && totalOperations > 0
+    ? ((stats.readOperations / totalOperations) * 100).toFixed(1)
+    : 0;
+
+  const writePercentage = stats && totalOperations > 0
+    ? ((stats.writeOperations / totalOperations) * 100).toFixed(1)
+    : 0;
+
+  return (
+    <UIPage width="full">
+      <UIPageHeader
+        title="Storage Usage Analytics"
+        description="Track storage operations, bandwidth usage, and file I/O performance"
+        actions={
+          <AnalyticsDateRangePicker
+            value={dateRange}
+            onChange={setDateRange}
+          />
+        }
+      />
+
+      <div style={{ marginTop: 24 }}>
+        {/* Operations Overview */}
+        <UIRow gutter={[16, 16]}>
+          <UICol xs={24} sm={12} lg={6}>
+            <UICard>
+              <UIStatistic
+                title="Read Operations"
+                value={stats?.readOperations ?? 0}
+                prefix={<DownloadOutlined />}
+                loading={isLoading}
+                valueStyle={{ color: 'var(--info)' }}
+              />
+            </UICard>
+          </UICol>
+          <UICol xs={24} sm={12} lg={6}>
+            <UICard>
+              <UIStatistic
+                title="Write Operations"
+                value={stats?.writeOperations ?? 0}
+                prefix={<UploadOutlined />}
+                loading={isLoading}
+                valueStyle={{ color: 'var(--success)' }}
+              />
+            </UICard>
+          </UICol>
+          <UICol xs={24} sm={12} lg={6}>
+            <UICard>
+              <UIStatistic
+                title="Delete Operations"
+                value={stats?.deleteOperations ?? 0}
+                prefix={<DeleteOutlined />}
+                loading={isLoading}
+                valueStyle={{ color: 'var(--error)' }}
+              />
+            </UICard>
+          </UICol>
+          <UICol xs={24} sm={12} lg={6}>
+            <UICard>
+              <UIStatistic
+                title="Total Operations"
+                value={totalOperations}
+                prefix={<FileOutlined />}
+                loading={isLoading}
+                valueStyle={{ color: 'var(--link)' }}
+              />
+            </UICard>
+          </UICol>
+        </UIRow>
+
+        {/* Bandwidth Usage */}
+        <UIRow gutter={[16, 16]} style={{ marginTop: 16 }}>
+          <UICol xs={24} lg={12}>
+            <UICard title="Bandwidth Usage">
+              <UIRow gutter={[16, 16]}>
+                <UICol span={12}>
+                  <UIStatistic
+                    title="Total Read"
+                    value={formatSize(stats?.totalBytesRead ?? 0)}
+                    prefix={<DownloadOutlined />}
+                    loading={isLoading}
+                    valueStyle={{ color: 'var(--info)' }}
+                  />
+                </UICol>
+                <UICol span={12}>
+                  <UIStatistic
+                    title="Total Written"
+                    value={formatSize(stats?.totalBytesWritten ?? 0)}
+                    prefix={<UploadOutlined />}
+                    loading={isLoading}
+                    valueStyle={{ color: 'var(--success)' }}
+                  />
+                </UICol>
+              </UIRow>
+              <div style={{ marginTop: 16 }}>
+                <UIStatistic
+                  title="Total Bandwidth"
+                  value={formatSize((stats?.totalBytesRead ?? 0) + (stats?.totalBytesWritten ?? 0))}
+                  prefix={<DatabaseOutlined />}
+                  loading={isLoading}
+                  valueStyle={{ color: 'var(--link)' }}
+                />
+              </div>
+            </UICard>
+          </UICol>
+          <UICol xs={24} lg={12}>
+            <UICard title="Performance Metrics">
+              <UIRow gutter={[16, 16]}>
+                <UICol span={12}>
+                  <UIStatistic
+                    title="Avg Read Duration"
+                    value={stats?.avgReadDuration ?? 0}
+                    prefix={<ClockCircleOutlined />}
+                    suffix="ms"
+                    precision={1}
+                    loading={isLoading}
+                  />
+                </UICol>
+                <UICol span={12}>
+                  <UIStatistic
+                    title="Avg Write Duration"
+                    value={stats?.avgWriteDuration ?? 0}
+                    prefix={<ClockCircleOutlined />}
+                    suffix="ms"
+                    precision={1}
+                    loading={isLoading}
+                  />
+                </UICol>
+              </UIRow>
+            </UICard>
+          </UICol>
+        </UIRow>
+
+        {/* Operation Statistics */}
+        {stats && totalOperations > 0 && (
+          <UICard title="Operation Statistics" style={{ marginTop: 16 }}>
+            <UIRow gutter={[16, 16]}>
+              <UICol xs={24} sm={8}>
+                <UIStatistic
+                  title="Read Ratio"
+                  value={Number(readPercentage)}
+                  suffix="%"
+                  precision={1}
+                  loading={isLoading}
+                  valueStyle={{ color: 'var(--info)' }}
+                />
+                <UIText color="secondary" style={{ fontSize: 12 }}>
+                  {readPercentage}% of total operations
+                </UIText>
+              </UICol>
+              <UICol xs={24} sm={8}>
+                <UIStatistic
+                  title="Write Ratio"
+                  value={Number(writePercentage)}
+                  suffix="%"
+                  precision={1}
+                  loading={isLoading}
+                  valueStyle={{ color: 'var(--success)' }}
+                />
+                <UIText color="secondary" style={{ fontSize: 12 }}>
+                  {writePercentage}% of total operations
+                </UIText>
+              </UICol>
+              <UICol xs={24} sm={8}>
+                <UIStatistic
+                  title="Avg Read Size"
+                  value={formatSize(stats.totalBytesRead / Math.max(stats.readOperations, 1))}
+                  loading={isLoading}
+                />
+                <UIText color="secondary" style={{ fontSize: 12 }}>
+                  Per read operation
+                </UIText>
+              </UICol>
+            </UIRow>
+            <UIRow gutter={[16, 16]} style={{ marginTop: 16 }}>
+              <UICol xs={24} sm={8}>
+                <UIStatistic
+                  title="Avg Write Size"
+                  value={formatSize(stats.totalBytesWritten / Math.max(stats.writeOperations, 1))}
+                  loading={isLoading}
+                />
+                <UIText color="secondary" style={{ fontSize: 12 }}>
+                  Per write operation
+                </UIText>
+              </UICol>
+              <UICol xs={24} sm={8}>
+                <UIStatistic
+                  title="Read Throughput"
+                  value={
+                    stats.avgReadDuration > 0
+                      ? formatSize((stats.totalBytesRead / Math.max(stats.readOperations, 1)) / (stats.avgReadDuration / 1000))
+                      : '0 B'
+                  }
+                  suffix="/s"
+                  loading={isLoading}
+                  valueStyle={{ color: 'var(--info)' }}
+                />
+              </UICol>
+              <UICol xs={24} sm={8}>
+                <UIStatistic
+                  title="Write Throughput"
+                  value={
+                    stats.avgWriteDuration > 0
+                      ? formatSize((stats.totalBytesWritten / Math.max(stats.writeOperations, 1)) / (stats.avgWriteDuration / 1000))
+                      : '0 B'
+                  }
+                  suffix="/s"
+                  loading={isLoading}
+                  valueStyle={{ color: 'var(--success)' }}
+                />
+              </UICol>
+            </UIRow>
+          </UICard>
+        )}
+
+        {/* Daily Usage Chart */}
+        <UIStatisticsChart
+          data={dailyStats}
+          loading={dailyStatsLoading}
+          title="Daily Storage Activity"
+          metrics={[
+            {
+              key: 'totalBytesRead',
+              label: 'Bytes Read (MB)',
+              transform: (v) => Math.floor(v / (1024 * 1024)),
+              format: (v) => `${v} MB`,
+            },
+            {
+              key: 'totalBytesWritten',
+              label: 'Bytes Written (MB)',
+              transform: (v) => Math.floor(v / (1024 * 1024)),
+              format: (v) => `${v} MB`,
+            },
+          ]}
+        />
+      </div>
+    </UIPage>
+  );
+}