@kb-labs/studio-app 0.6.0 → 2.8.0

package/src/modules/analytics/components/analytics-date-range-picker.tsx

@@ -1,121 +0,0 @@
-import { useState } from 'react';
-import { UIRangePicker, UISelect, UISpace } from '@kb-labs/studio-ui-kit';
-import { CalendarOutlined } from '@ant-design/icons';
-import dayjs, { type Dayjs } from 'dayjs';
-
-/**
- * Predefined date range presets
- */
-const DATE_PRESETS = [
-  { label: 'Last 7 days', value: 7 as number | 'custom' },
-  { label: 'Last 30 days', value: 30 as number | 'custom' },
-  { label: 'Last 90 days', value: 90 as number | 'custom' },
-  { label: 'Custom range', value: 'custom' as number | 'custom' },
-];
-
-export type DateRangeValue = [Dayjs, Dayjs];
-
-export interface AnalyticsDateRangePickerProps {
-  /**
-   * Current date range value
-   */
-  value: DateRangeValue;
-
-  /**
-   * Callback when date range changes
-   */
-  onChange: (range: DateRangeValue) => void;
-
-  /**
-   * Show preset selector (default: true)
-   */
-  showPresets?: boolean;
-
-  /**
-   * Date format (default: DD/MM/YYYY)
-   */
-  format?: string;
-}
-
-/**
- * Analytics Date Range Picker Component
- *
- * Provides a consistent date range selection UI for all analytics pages.
- * Features:
- * - Quick presets (7/30/90 days)
- * - Custom date range picker
- * - Unified styling
- */
-export function AnalyticsDateRangePicker({
-  value,
-  onChange,
-  showPresets = true,
-  format = 'DD/MM/YYYY',
-}: AnalyticsDateRangePickerProps) {
-  // Determine current preset based on date range
-  const getCurrentPreset = (): number | 'custom' => {
-    const daysDiff = dayjs().diff(value[0], 'days');
-    const isToday = value[1].isSame(dayjs(), 'day');
-
-    if (isToday) {
-      if (daysDiff === 7) {return 7;}
-      if (daysDiff === 30) {return 30;}
-      if (daysDiff === 90) {return 90;}
-    }
-
-    return 'custom';
-  };
-
-  const [selectedPreset, setSelectedPreset] = useState<number | 'custom'>(getCurrentPreset());
-
-  const handlePresetChange = (preset: number | 'custom') => {
-    setSelectedPreset(preset);
-
-    if (preset !== 'custom') {
-      const newRange: DateRangeValue = [
-        dayjs().subtract(preset, 'days'),
-        dayjs(),
-      ];
-      onChange(newRange);
-    }
-  };
-
-  const handleDateChange = (dates: [Dayjs | null, Dayjs | null] | null) => {
-    if (dates && dates[0] && dates[1]) {
-      setSelectedPreset('custom');
-      onChange([dates[0], dates[1]]);
-    }
-  };
-
-  if (!showPresets) {
-    return (
-      <UIRangePicker
-        value={value}
-        onChange={handleDateChange}
-        format={format}
-        allowClear={false}
-        suffixIcon={<CalendarOutlined />}
-      />
-    );
-  }
-
-  return (
-    <UISpace size="small">
-      <UISelect
-        value={selectedPreset}
-        onChange={(v) => handlePresetChange(v as number | 'custom')}
-        options={DATE_PRESETS}
-        style={{ width: 150 }}
-      />
-      {selectedPreset === 'custom' && (
-        <UIRangePicker
-          value={value}
-          onChange={handleDateChange}
-          format={format}
-          allowClear={false}
-          suffixIcon={<CalendarOutlined />}
-        />
-      )}
-    </UISpace>
-  );
-}

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

@@ -1,285 +0,0 @@
-import { useState } from 'react';
-import { UIRow, UICol, UIStatistic, UIAlert, UIProgress, useUITheme } from '@kb-labs/studio-ui-kit';
-import {
-  ClockCircleOutlined,
-  CheckCircleOutlined,
-  CloseCircleOutlined,
-  SaveOutlined,
-  EyeOutlined,
-} from '@ant-design/icons';
-import { UIText, UIStatisticsChart, UICard, UIPage, UIPageHeader } from '@kb-labs/studio-ui-kit';
-import { useAdaptersCacheUsage, useAdaptersCacheDailyStats } 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 Cache Usage Page
- *
- * Displays cache usage statistics:
- * - Hit/miss rates
- * - Performance metrics
- * - Cache efficiency
- */
-export function AnalyticsCachePage() {
-  const { token } = useUITheme();
-  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,
-  } = useAdaptersCacheUsage(sources.adapters, {
-    from: dateRange[0].toISOString(),
-    to: dateRange[1].toISOString(),
-  });
-
-  const {
-    data: dailyStats,
-    isLoading: dailyStatsLoading,
-  } = useAdaptersCacheDailyStats(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="Cache Usage"
-          description="Track cache hit rates and performance optimization"
-        />
-        <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="Cache Usage" description="Cache usage analytics" />
-        <UIAlert
-          message="Failed to Load Cache Usage"
-          description={error?.message || 'Unknown error occurred'}
-          variant="error"
-          showIcon
-          style={{ marginTop: 16 }}
-        />
-      </UIPage>
-    );
-  }
-
-  const hitRateStatus = stats && stats.hitRate >= 80
-    ? 'success'
-    : stats && stats.hitRate >= 60
-    ? 'normal'
-    : 'exception';
-
-  const missRate = stats ? (100 - stats.hitRate).toFixed(1) : 0;
-
-  return (
-    <UIPage width="full">
-      <UIPageHeader
-        title="Cache Usage Analytics"
-        description="Track cache efficiency, hit rates, and performance optimization opportunities"
-        actions={
-          <AnalyticsDateRangePicker
-            value={dateRange}
-            onChange={setDateRange}
-          />
-        }
-      />
-
-      <div style={{ marginTop: 24 }}>
-        {/* Hit Rate Overview */}
-        <UIRow gutter={[16, 16]}>
-          <UICol xs={24}>
-            <UICard>
-              <UIRow gutter={[16, 16]} align="middle">
-                <UICol xs={24} lg={8}>
-                  <div style={{ textAlign: 'center' }}>
-                    <UIProgress
-                      type="circle"
-                      percent={Number((stats?.hitRate ?? 0).toFixed(1))}
-                      status={hitRateStatus}
-                      size={180}
-                      format={(percent) => (
-                        <div>
-                          <div style={{ fontSize: '32px', fontWeight: 'bold' }}>{percent}%</div>
-                          <div style={{ fontSize: '14px', color: token.colorTextTertiary }}>Hit Rate</div>
-                        </div>
-                      )}
-                    />
-                  </div>
-                </UICol>
-                <UICol xs={24} lg={16}>
-                  <UIRow gutter={[16, 16]}>
-                    <UICol xs={12}>
-                      <UIStatistic
-                        title="Total Gets"
-                        value={stats?.totalGets ?? 0}
-                        prefix={<EyeOutlined />}
-                        loading={isLoading}
-                        valueStyle={{ color: 'var(--info)' }}
-                      />
-                    </UICol>
-                    <UICol xs={12}>
-                      <UIStatistic
-                        title="Cache Hits"
-                        value={stats?.hits ?? 0}
-                        prefix={<CheckCircleOutlined />}
-                        loading={isLoading}
-                        valueStyle={{ color: 'var(--success)' }}
-                      />
-                    </UICol>
-                    <UICol xs={12}>
-                      <UIStatistic
-                        title="Cache Misses"
-                        value={stats?.misses ?? 0}
-                        prefix={<CloseCircleOutlined />}
-                        loading={isLoading}
-                        valueStyle={{ color: 'var(--error)' }}
-                      />
-                    </UICol>
-                    <UICol xs={12}>
-                      <UIStatistic
-                        title="Miss Rate"
-                        value={Number(missRate)}
-                        suffix="%"
-                        precision={1}
-                        loading={isLoading}
-                        valueStyle={{ color: 'var(--warning)' }}
-                      />
-                    </UICol>
-                  </UIRow>
-                </UICol>
-              </UIRow>
-            </UICard>
-          </UICol>
-        </UIRow>
-
-        {/* Performance Metrics */}
-        <UIRow gutter={[16, 16]} style={{ marginTop: 16 }}>
-          <UICol xs={24} lg={12}>
-            <UICard title="Read Performance">
-              <UIStatistic
-                title="Avg Get Duration"
-                value={stats?.avgGetDuration ?? 0}
-                prefix={<ClockCircleOutlined />}
-                suffix="ms"
-                precision={2}
-                loading={isLoading}
-              />
-              <div style={{ marginTop: 16 }}>
-                <UIText color="secondary">
-                  Average time to retrieve cached values
-                  {stats && stats.avgGetDuration < 5 && (
-                    <CheckCircleOutlined style={{ color: 'var(--success)', marginLeft: 8 }} />
-                  )}
-                </UIText>
-              </div>
-            </UICard>
-          </UICol>
-          <UICol xs={24} lg={12}>
-            <UICard title="Write Performance">
-              <UIStatistic
-                title="Cache Sets"
-                value={stats?.sets ?? 0}
-                prefix={<SaveOutlined />}
-                loading={isLoading}
-                valueStyle={{ color: 'var(--link)' }}
-              />
-              <div style={{ marginTop: 16 }}>
-                <UIStatistic
-                  title="Avg Set Duration"
-                  value={stats?.avgSetDuration ?? 0}
-                  prefix={<ClockCircleOutlined />}
-                  suffix="ms"
-                  precision={2}
-                  loading={isLoading}
-                />
-              </div>
-            </UICard>
-          </UICol>
-        </UIRow>
-
-        {/* Efficiency Insights */}
-        {stats && stats.totalGets > 0 && (
-          <UICard title="Cache Efficiency Insights" style={{ marginTop: 16 }}>
-            <UIRow gutter={[16, 16]}>
-              <UICol xs={24} sm={8}>
-                <UIStatistic
-                  title="Gets per Set"
-                  value={(stats.totalGets / Math.max(stats.sets, 1)).toFixed(2)}
-                  loading={isLoading}
-                  valueStyle={{ color: 'var(--info)' }}
-                />
-                <UIText color="secondary" style={{ fontSize: 12 }}>
-                  Higher is better (more cache reuse)
-                </UIText>
-              </UICol>
-              <UICol xs={24} sm={8}>
-                <UIStatistic
-                  title="Performance Gain"
-                  value={stats.avgSetDuration > 0 ? (stats.avgSetDuration / Math.max(stats.avgGetDuration, 0.1)).toFixed(1) : 0}
-                  suffix="x"
-                  loading={isLoading}
-                  valueStyle={{ color: 'var(--success)' }}
-                />
-                <UIText color="secondary" style={{ fontSize: 12 }}>
-                  Set is ~{stats.avgSetDuration > 0 ? (stats.avgSetDuration / Math.max(stats.avgGetDuration, 0.1)).toFixed(1) : 0}x slower than get
-                </UIText>
-              </UICol>
-              <UICol xs={24} sm={8}>
-                <UIStatistic
-                  title="Cache Effectiveness"
-                  value={stats.hits > 0 ? ((stats.hits / stats.totalGets) * 100).toFixed(1) : 0}
-                  suffix="%"
-                  loading={isLoading}
-                  valueStyle={{
-                    color: stats.hitRate >= 80 ? 'var(--success)' : stats.hitRate >= 60 ? 'var(--info)' : 'var(--warning)'
-                  }}
-                />
-                <UIText color="secondary" style={{ fontSize: 12 }}>
-                  {stats.hitRate >= 80 ? 'Excellent' : stats.hitRate >= 60 ? 'Good' : 'Needs improvement'}
-                </UIText>
-              </UICol>
-            </UIRow>
-          </UICard>
-        )}
-
-        {/* Daily Usage Chart */}
-        <UIStatisticsChart
-          data={dailyStats}
-          loading={dailyStatsLoading}
-          title="Daily Cache Performance"
-          metrics={[
-            { key: 'totalHits', label: 'Hits' },
-            { key: 'totalMisses', label: 'Misses' },
-            { key: 'hitRate', label: 'Hit Rate (%)', format: (v) => `${v.toFixed(1)}%` },
-          ]}
-        />
-      </div>
-    </UIPage>
-  );
-}

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

@@ -1,274 +0,0 @@
-import { useState } from 'react';
-import { UIRow, UICol, UIStatistic, UIAlert, UIProgress } from '@kb-labs/studio-ui-kit';
-import {
-  ApiOutlined,
-  DollarOutlined,
-  FileTextOutlined,
-  ClockCircleOutlined,
-  WarningOutlined,
-  TeamOutlined,
-  GroupOutlined,
-} from '@ant-design/icons';
-import { UIText, UIStatisticsChart, UICard, UIPage, UIPageHeader } from '@kb-labs/studio-ui-kit';
-import { useAdaptersEmbeddingsUsage, useAdaptersEmbeddingsDailyStats } from '@kb-labs/studio-data-client';
-import { useDataSources } from '../../../providers/data-sources-provider';
-import { AnalyticsDateRangePicker, type DateRangeValue } from '../components/analytics-date-range-picker';
-import { formatCost } from '../utils/formatters';
-import dayjs from 'dayjs';
-
-
-/**
- * Analytics Embeddings Usage Page
- *
- * Displays embeddings usage statistics:
- * - Total requests and text volume
- * - Cost tracking
- * - Batch efficiency metrics
- * - Performance metrics
- */
-export function AnalyticsEmbeddingsPage() {
-  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,
-  } = useAdaptersEmbeddingsUsage(sources.adapters, {
-    from: dateRange[0].toISOString(),
-    to: dateRange[1].toISOString(),
-  });
-
-  const {
-    data: dailyStats,
-    isLoading: dailyStatsLoading,
-  } = useAdaptersEmbeddingsDailyStats(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="Embeddings Usage"
-          description="Track embeddings API usage, costs, and batch efficiency"
-        />
-        <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="Embeddings Usage" description="Embeddings usage analytics" />
-        <UIAlert
-          message="Failed to Load Embeddings Usage"
-          description={error?.message || 'Unknown error occurred'}
-          variant="error"
-          showIcon
-          style={{ marginTop: 16 }}
-        />
-      </UIPage>
-    );
-  }
-
-  const batchPercentage = stats ? ((stats.batchRequests / stats.totalRequests) * 100).toFixed(1) : 0;
-
-  return (
-    <UIPage width="full">
-      <UIPageHeader
-        title="Embeddings Usage Analytics"
-        description="Track embeddings API usage, costs, and batch processing efficiency"
-        actions={
-          <AnalyticsDateRangePicker
-            value={dateRange}
-            onChange={setDateRange}
-          />
-        }
-      />
-
-      <div style={{ marginTop: 24 }}>
-        {/* Overview Stats */}
-        <UIRow gutter={[16, 16]}>
-          <UICol xs={24} sm={12} lg={6}>
-            <UICard>
-              <UIStatistic
-                title="Total Requests"
-                value={stats?.totalRequests ?? 0}
-                prefix={<ApiOutlined />}
-                loading={isLoading}
-                valueStyle={{ color: 'var(--info)' }}
-              />
-            </UICard>
-          </UICol>
-          <UICol xs={24} sm={12} lg={6}>
-            <UICard>
-              <UIStatistic
-                title="Text Processed"
-                value={stats?.totalTextLength ?? 0}
-                prefix={<FileTextOutlined />}
-                suffix="chars"
-                loading={isLoading}
-                valueStyle={{ color: 'var(--success)' }}
-              />
-            </UICard>
-          </UICol>
-          <UICol xs={24} sm={12} lg={6}>
-            <UICard>
-              <UIStatistic
-                title="Total Cost"
-                value={stats?.totalCost ?? 0}
-                prefix={<DollarOutlined />}
-                precision={4}
-                loading={isLoading}
-                valueStyle={{ color: 'var(--error)' }}
-              />
-            </UICard>
-          </UICol>
-          <UICol xs={24} sm={12} lg={6}>
-            <UICard>
-              <UIStatistic
-                title="Errors"
-                value={stats?.errors ?? 0}
-                prefix={<WarningOutlined />}
-                loading={isLoading}
-                valueStyle={{ color: stats && stats.errors > 0 ? 'var(--warning)' : 'var(--success)' }}
-              />
-            </UICard>
-          </UICol>
-        </UIRow>
-
-        {/* Batch Efficiency */}
-        <UIRow gutter={[16, 16]} style={{ marginTop: 16 }}>
-          <UICol xs={24} lg={12}>
-            <UICard title="Batch Processing">
-              <UIRow gutter={[16, 16]}>
-                <UICol span={12}>
-                  <UIStatistic
-                    title="Single Requests"
-                    value={stats?.singleRequests ?? 0}
-                    prefix={<TeamOutlined />}
-                    loading={isLoading}
-                  />
-                </UICol>
-                <UICol span={12}>
-                  <UIStatistic
-                    title="Batch Requests"
-                    value={stats?.batchRequests ?? 0}
-                    prefix={<GroupOutlined />}
-                    loading={isLoading}
-                  />
-                </UICol>
-              </UIRow>
-              <div style={{ marginTop: 16 }}>
-                <UIText color="secondary">Batch Request Ratio</UIText>
-                <UIProgress
-                  percent={Number(batchPercentage)}
-                  status={Number(batchPercentage) > 50 ? 'success' : 'normal'}
-                  format={(percent) => `${percent}%`}
-                />
-              </div>
-            </UICard>
-          </UICol>
-          <UICol xs={24} lg={12}>
-            <UICard title="Performance Metrics">
-              <UIRow gutter={[16, 16]}>
-                <UICol span={12}>
-                  <UIStatistic
-                    title="Avg Duration"
-                    value={stats?.avgDurationMs ?? 0}
-                    prefix={<ClockCircleOutlined />}
-                    suffix="ms"
-                    precision={0}
-                    loading={isLoading}
-                  />
-                </UICol>
-                <UICol span={12}>
-                  <UIStatistic
-                    title="Avg Batch Size"
-                    value={stats?.avgBatchSize ?? 0}
-                    precision={1}
-                    loading={isLoading}
-                    valueStyle={{ color: 'var(--link)' }}
-                  />
-                </UICol>
-              </UIRow>
-            </UICard>
-          </UICol>
-        </UIRow>
-
-        {/* Cost Analysis */}
-        {stats && stats.totalRequests > 0 && (
-          <UICard title="Cost Analysis" style={{ marginTop: 16 }}>
-            <UIRow gutter={[16, 16]}>
-              <UICol xs={24} sm={8}>
-                <UIStatistic
-                  title="Cost per Request"
-                  value={(stats.totalCost / stats.totalRequests).toFixed(6)}
-                  prefix="$"
-                  loading={isLoading}
-                />
-              </UICol>
-              <UICol xs={24} sm={8}>
-                <UIStatistic
-                  title="Cost per 1K Characters"
-                  value={((stats.totalCost / stats.totalTextLength) * 1000).toFixed(6)}
-                  prefix="$"
-                  loading={isLoading}
-                />
-              </UICol>
-              <UICol xs={24} sm={8}>
-                <UIStatistic
-                  title="Avg Text Length"
-                  value={Math.round(stats.totalTextLength / stats.totalRequests)}
-                  suffix="chars"
-                  loading={isLoading}
-                />
-              </UICol>
-            </UIRow>
-          </UICard>
-        )}
-
-        {/* Daily Usage Chart */}
-        <UIStatisticsChart
-          data={dailyStats}
-          loading={dailyStatsLoading}
-          title="Daily Embeddings Trend"
-          metrics={[
-            { key: 'count', label: 'Requests' },
-            {
-              key: 'totalTokens',
-              label: 'Tokens (K)',
-              transform: (v) => Math.floor(v / 1000),
-            },
-            {
-              key: 'totalCost',
-              label: 'Cost ($)',
-              format: formatCost,
-            },
-          ]}
-        />
-      </div>
-    </UIPage>
-  );
-}