@kb-labs/studio-app 0.7.0 → 2.8.0

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

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

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

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