@kb-labs/studio-app 0.7.0 → 2.8.0

package/src/hooks/use-devtools-store.ts

@@ -1,25 +0,0 @@
-import { useState, useEffect } from 'react';
-import { devToolsStore } from '@kb-labs/studio-devtools';
-import type { DevToolsChannel } from '@kb-labs/studio-devtools';
-
-export interface UseDevToolsStoreReturn {
-  channels: readonly DevToolsChannel[];
-  clear(): void;
-}
-
-/**
- * Subscribe to the DevTools store and re-render on any change.
- * Uses the same forceUpdate pattern as ReactQueryDevtools.
- */
-export function useDevToolsStore(): UseDevToolsStoreReturn {
-  const [, forceUpdate] = useState(0);
-
-  useEffect(() => {
-    return devToolsStore.subscribe(() => { forceUpdate((n) => n + 1); });
-  }, []);
-
-  return {
-    channels: devToolsStore.getChannels(),
-    clear: () => { devToolsStore.clear(); },
-  };
-}

package/src/hooks/use-feature-flags.ts

@@ -1,101 +0,0 @@
-/**
- * @module @kb-labs/studio-app/hooks/use-feature-flags
- * Hook to access and toggle feature flags
- */
-
-import { useCallback, useMemo } from 'react';
-import { useSettings } from '@/providers/settings-provider';
-import type { FeatureId } from '@/config/feature-flags';
-import { isFeatureEnabled as isEnabled, areDependenciesMet } from '@/config/feature-flags';
-
-export interface UseFeatureFlagsReturn {
-  /** Check if a feature is enabled */
-  isEnabled: (featureId: FeatureId) => boolean;
-  /** Toggle a feature on/off */
-  toggleFeature: (featureId: FeatureId) => void;
-  /** Enable a feature */
-  enableFeature: (featureId: FeatureId) => void;
-  /** Disable a feature */
-  disableFeature: (featureId: FeatureId) => void;
-  /** Get all enabled feature IDs */
-  enabledFeatures: FeatureId[];
-  /** Check if feature dependencies are met */
-  areDependenciesMet: (featureId: FeatureId) => boolean;
-}
-
-export function useFeatureFlags(): UseFeatureFlagsReturn {
-  const { settings, updateSettings } = useSettings();
-  const enabledFeatures = useMemo(() => settings.experimental?.enabledFeatures ?? [], [settings.experimental?.enabledFeatures]);
-
-  // Create a preferences map for efficient lookup
-  const preferences = useMemo(() => {
-    const map: Record<FeatureId, boolean> = {} as Record<FeatureId, boolean>;
-    enabledFeatures.forEach((id) => {
-      map[id] = true;
-    });
-    return map;
-  }, [enabledFeatures]);
-
-  const isFeatureEnabled = useCallback(
-    (featureId: FeatureId): boolean => {
-      return isEnabled(featureId, preferences);
-    },
-    [preferences]
-  );
-
-  const toggleFeature = useCallback(
-    (featureId: FeatureId) => {
-      const currentlyEnabled = enabledFeatures.includes(featureId);
-      const newFeatures = currentlyEnabled
-        ? enabledFeatures.filter((id) => id !== featureId)
-        : [...enabledFeatures, featureId];
-
-      updateSettings({
-        experimental: {
-          enabledFeatures: newFeatures,
-        },
-      });
-    },
-    [enabledFeatures, updateSettings]
-  );
-
-  const enableFeature = useCallback(
-    (featureId: FeatureId) => {
-      if (!enabledFeatures.includes(featureId)) {
-        updateSettings({
-          experimental: {
-            enabledFeatures: [...enabledFeatures, featureId],
-          },
-        });
-      }
-    },
-    [enabledFeatures, updateSettings]
-  );
-
-  const disableFeature = useCallback(
-    (featureId: FeatureId) => {
-      updateSettings({
-        experimental: {
-          enabledFeatures: enabledFeatures.filter((id) => id !== featureId),
-        },
-      });
-    },
-    [enabledFeatures, updateSettings]
-  );
-
-  const checkDependencies = useCallback(
-    (featureId: FeatureId): boolean => {
-      return areDependenciesMet(featureId, preferences);
-    },
-    [preferences]
-  );
-
-  return {
-    isEnabled: isFeatureEnabled,
-    toggleFeature,
-    enableFeature,
-    disableFeature,
-    enabledFeatures,
-    areDependenciesMet: checkDependencies,
-  };
-}

package/src/index.css

@@ -1,10 +0,0 @@
-/* Theme variables and base styles - must be first */
-@import './styles/variables.css';
-@import './styles/base.css';
-@import './styles/antd-overrides.css';
-@import './styles/settings.css';
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-

package/src/layouts/dashboard-grid.tsx

@@ -1,122 +0,0 @@
-/**
- * @module @kb-labs/studio-app/layouts/DashboardGrid
- * Dashboard Grid layout - responsive CSS Grid using design tokens
- *
- * Refactored to use spacing tokens and remove inline styles where possible.
- */
-
-import * as React from 'react';
-import { spacing } from '@kb-labs/studio-ui-core';
-import { useUITheme } from '@kb-labs/studio-ui-kit';
-
-export interface DashboardGridProps {
-  children: React.ReactNode;
-  cols?: {
-    sm: number;
-    md: number;
-    lg: number;
-  };
-  rowHeight?: number;
-  gap?: number;
-}
-
-export function DashboardGrid({
-  children,
-  cols = { sm: 4, md: 8, lg: 12 },
-  rowHeight = 8,
-  gap = 16
-}: DashboardGridProps) {
-  const { token } = useUITheme();
-  const childrenArray = React.Children.toArray(children);
-
-  // Use spacing tokens for gap if available
-  const gridGap = gap === 16 ? spacing[4] : gap === 8 ? spacing[2] : `${gap}px`;
-
-  return (
-    <div
-      className="widget-dashboard-grid"
-      style={
-        {
-          '--cols-sm': cols.sm,
-          '--cols-md': cols.md,
-          '--cols-lg': cols.lg,
-          '--row-height': `${rowHeight * 8}px`,
-          '--gap': gridGap,
-          '--border-color': token.colorBorder,
-        } as React.CSSProperties
-      }
-    >
-      {childrenArray.map((child, index) => {
-        // Extract layoutHint from child props if available
-        const layoutHint = (child as React.ReactElement)?.props?.layoutHint || { w: 4, h: 4 };
-        const { w, h, minW, minH, height } = layoutHint;
-
-        // Calculate height based on layoutHint.height
-        let itemHeight: string | undefined;
-        let itemMaxHeight: string | undefined;
-        let itemMinHeight: string | undefined;
-
-        if (height === 'fit-content') {
-          itemHeight = 'fit-content';
-        } else if (typeof height === 'number') {
-          itemHeight = `${height}px`;
-        } else if (height === 'auto' || height === undefined) {
-          // Auto height: use grid rows but allow content to expand
-          itemMinHeight = minH ? `${minH * rowHeight * 8}px` : `${h * rowHeight * 8}px`;
-        } else {
-          // Fallback: use grid-based height calculation
-          itemMinHeight = minH ? `${minH * rowHeight * 8}px` : `${h * rowHeight * 8}px`;
-        }
-
-        return (
-          <div
-            key={index}
-            className="widget-dashboard-grid__item"
-            style={
-              {
-                gridColumn: `span ${w}`,
-                gridRow: height === 'fit-content' ? 'span 1' : `span ${h}`,
-                minWidth: minW ? `${minW * (100 / cols.lg)}%` : undefined,
-                minHeight: itemMinHeight,
-                height: itemHeight,
-                maxHeight: itemMaxHeight,
-              } as React.CSSProperties
-            }
-          >
-            {child}
-          </div>
-        );
-      })}
-      <style>{`
-        .widget-dashboard-grid {
-          display: grid;
-          grid-template-columns: repeat(var(--cols-sm), 1fr);
-          gap: var(--gap);
-          grid-auto-rows: minmax(var(--row-height), auto);
-          align-items: start;
-        }
-        @media (min-width: 768px) {
-          .widget-dashboard-grid {
-            grid-template-columns: repeat(var(--cols-md), 1fr);
-          }
-        }
-        @media (min-width: 1024px) {
-          .widget-dashboard-grid {
-            grid-template-columns: repeat(var(--cols-lg), 1fr);
-          }
-        }
-        .widget-dashboard-grid__item {
-          min-height: var(--row-height);
-          display: flex;
-          flex-direction: column;
-        }
-        .widget-dashboard-grid__item > * {
-          flex: 1;
-          min-height: 0;
-        }
-      `}</style>
-    </div>
-  );
-}
-
-

package/src/layouts/index.ts

@@ -1,12 +0,0 @@
-/**
- * @module @kb-labs/studio-app/layouts
- * Layout components
- */
-
-export { DashboardGrid } from './dashboard-grid';
-export type { DashboardGridProps } from './dashboard-grid';
-
-export { TwoPane } from './two-pane';
-export type { TwoPaneProps } from './two-pane';
-
-

package/src/layouts/two-pane.tsx

@@ -1,134 +0,0 @@
-/**
- * @module @kb-labs/studio-app/layouts/TwoPane
- * Two Pane layout - flex-based with optional resizer using design tokens
- *
- * Refactored to use Ant Design theme tokens for colors and transitions.
- */
-
-import * as React from 'react';
-import { useUITheme } from '@kb-labs/studio-ui-kit';
-
-export interface TwoPaneProps {
-  left: React.ReactNode;
-  right: React.ReactNode;
-  leftWidth?: string;
-  resizable?: boolean;
-  minLeftWidth?: string;
-  maxLeftWidth?: string;
-}
-
-export function TwoPane({
-  left,
-  right,
-  leftWidth = '50%',
-  resizable = false,
-  minLeftWidth = '20%',
-  maxLeftWidth = '80%',
-}: TwoPaneProps) {
-  const { token } = useUITheme();
-  const [leftWidthState, setLeftWidthState] = React.useState(leftWidth);
-  const [isResizing, setIsResizing] = React.useState(false);
-  const containerRef = React.useRef<HTMLDivElement>(null);
-
-  const handleMouseDown = () => {
-    if (!resizable) {return;}
-    setIsResizing(true);
-  };
-
-  const handleMouseMove = React.useCallback(
-    (e: MouseEvent) => {
-      if (!isResizing || !containerRef.current) {return;}
-
-      const container = containerRef.current;
-      const rect = container.getBoundingClientRect();
-      const newLeftWidth = ((e.clientX - rect.left) / rect.width) * 100;
-
-      // Apply min/max constraints
-      const min = parseFloat(minLeftWidth);
-      const max = parseFloat(maxLeftWidth);
-      const clamped = Math.max(min, Math.min(max, newLeftWidth));
-
-      setLeftWidthState(`${clamped}%`);
-    },
-    [isResizing, minLeftWidth, maxLeftWidth]
-  );
-
-  const handleMouseUp = () => {
-    setIsResizing(false);
-  };
-
-  React.useEffect(() => {
-    if (isResizing) {
-      document.addEventListener('mousemove', handleMouseMove);
-      document.addEventListener('mouseup', handleMouseUp);
-      return () => {
-        document.removeEventListener('mousemove', handleMouseMove);
-        document.removeEventListener('mouseup', handleMouseUp);
-      };
-    }
-  }, [isResizing, handleMouseMove]);
-
-  return (
-    <div
-      className="widget-two-pane"
-      ref={containerRef}
-      style={
-        {
-          '--border-color': token.colorBorder,
-          '--link-color': token.colorLink,
-          '--transition-duration': `${token.motionDurationMid}`,
-        } as React.CSSProperties
-      }
-    >
-      <div
-        className="widget-two-pane__left"
-        style={
-          {
-            width: leftWidthState,
-            minWidth: minLeftWidth,
-            maxWidth: maxLeftWidth,
-          } as React.CSSProperties
-        }
-      >
-        {left}
-      </div>
-      {resizable && (
-        <div
-          className="widget-two-pane__resizer"
-          onMouseDown={handleMouseDown}
-          data-resizing={isResizing}
-        />
-      )}
-      <div className="widget-two-pane__right">{right}</div>
-      <style>{`
-        .widget-two-pane {
-          display: flex;
-          height: 100%;
-          width: 100%;
-        }
-        .widget-two-pane__left {
-          flex-shrink: 0;
-          overflow: auto;
-          border-right: 1px solid var(--border-color);
-        }
-        .widget-two-pane__resizer {
-          width: 4px;
-          background: var(--border-color);
-          cursor: col-resize;
-          flex-shrink: 0;
-          transition: background var(--transition-duration);
-        }
-        .widget-two-pane__resizer:hover,
-        .widget-two-pane__resizer[data-resizing="true"] {
-          background: var(--link-color);
-        }
-        .widget-two-pane__right {
-          flex: 1;
-          overflow: auto;
-        }
-      `}</style>
-    </div>
-  );
-}
-
-

package/src/main.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { App } from './App';
-import '@kb-labs/studio-ui-kit/dist/index.css';
-import { registerIconRenderer } from '@kb-labs/studio-ui-kit';
-import { renderIcon } from './components/ui/icons';
-import './index.css';
-
-registerIconRenderer(renderIcon);
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);

package/src/modules/analytics/components/analytics-daily-stats-chart.tsx

@@ -1,257 +0,0 @@
-import { useMemo } from 'react';
-import { UIText, UICard, UIAreaChart, useChartColors } from '@kb-labs/studio-ui-kit';
-import type { DailyStats } from '@kb-labs/studio-data-client';
-import dayjs from 'dayjs';
-
-/**
- * Configuration for chart metrics
- */
-export interface ChartMetricConfig {
-  /**
-   * Metric key from DailyStats.metrics
-   */
-  key: string;
-
-  /**
-   * Display label for the metric
-   */
-  label: string;
-
-  /**
-   * Optional transformer function to convert raw value to display value
-   * Example: (v) => v / 1000 to convert tokens to K tokens
-   */
-  transform?: (value: number) => number;
-
-  /**
-   * Optional formatter for tooltip
-   */
-  format?: (value: number) => string;
-}
-
-export interface AnalyticsDailyStatsChartProps {
-  /**
-   * Daily statistics data
-   */
-  data: DailyStats[] | undefined;
-
-  /**
-   * Loading state
-   */
-  loading?: boolean;
-
-  /**
-   * Chart title
-   */
-  title: string;
-
-  /**
-   * Metrics to display on the chart
-   * Each metric will be shown as a separate line
-   */
-  metrics: ChartMetricConfig[];
-
-  /**
-   * Optional card style
-   */
-  style?: React.CSSProperties;
-
-  /**
-   * Chart height in pixels
-   */
-  height?: number;
-}
-
-/**
- * Reusable daily statistics chart component
- *
- * Displays time-series chart with multiple metrics for analytics pages.
- * Used across LLM, Embeddings, VectorStore, Cache, and Storage analytics.
- *
- * @example
- * ```tsx
- * <AnalyticsDailyStatsChart
- *   data={dailyStats}
- *   loading={isLoading}
- *   title="Daily LLM Usage Trend"
- *   metrics={[
- *     { key: 'count', label: 'Requests' },
- *     { key: 'totalTokens', label: 'Tokens (K)', transform: (v) => v / 1000 },
- *     { key: 'totalCost', label: 'Cost ($)', format: (v) => `$${v.toFixed(2)}` },
- *   ]}
- * />
- * ```
- */
-export function AnalyticsDailyStatsChart({
-  data,
-  loading = false,
-  title,
-  metrics,
-  style,
-  height = 350,
-}: AnalyticsDailyStatsChartProps) {
-  const palette = useChartColors();
-
-  // Memoize chart colors to ensure stability across renders
-  const chartColors = useMemo(() => {
-    console.log('[useMemo] Input:', {
-      paletteColors: palette.colors,
-      isArray: Array.isArray(palette.colors),
-      length: palette.colors?.length,
-      first3: palette.colors.slice(0, 3),
-      metricsLength: metrics.length,
-    });
-
-    const result = palette.colors.slice(0, metrics.length);
-
-    console.log('[useMemo] Output:', {
-      result,
-      isArray: Array.isArray(result),
-      length: result.length,
-    });
-
-    return result;
-  }, [palette.colors, metrics.length]);
-
-  console.log('[AnalyticsDailyStatsChart] Colors:', {
-    metricsCount: metrics.length,
-    chartColors,
-    paletteColors: palette.colors,
-  });
-
-  // Transform data for chart
-  const chartData =
-    data?.flatMap((stat) => {
-      const rows: Array<{ date: string; category: string; value: number }> = [];
-
-      for (const metric of metrics) {
-        let value: number;
-
-        if (metric.key === 'count') {
-          // Special case: count is top-level field
-          value = stat.count;
-        } else {
-          // Extract from metrics object
-          value = stat.metrics?.[metric.key] ?? 0;
-        }
-
-        // Apply transformation if provided
-        if (metric.transform) {
-          value = metric.transform(value);
-        }
-
-        rows.push({
-          date: dayjs(stat.date).format('YYYY-MM-DD'), // Ensure consistent date format
-          category: metric.label,
-          value,
-        });
-      }
-
-      return rows;
-    }) ?? [];
-
-  console.log('[AnalyticsDailyStatsChart] Chart data:', {
-    dataLength: chartData.length,
-    uniqueCategories: [...new Set(chartData.map(d => d.category))],
-    sampleData: chartData.slice(0, 3),
-  });
-
-   
-  const cardStyle = { marginTop: 16, ...style } as any;
-  return (
-    <UICard title={title} style={cardStyle}>
-      {loading && (
-        <div style={{ textAlign: 'center', padding: '40px 0' }}>
-          <UIText color="secondary">Loading chart data...</UIText>
-        </div>
-      )}
-
-      {!loading && chartData.length > 0 && (
-        <div>
-          {/* Custom Legend */}
-          <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 12, gap: 16 }}>
-            {metrics.map((metric, index) => (
-              <div key={metric.label} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-                <span
-                  style={{
-                    display: 'inline-block',
-                    width: 10,
-                    height: 10,
-                    borderRadius: '50%',
-                    backgroundColor: chartColors[index % chartColors.length],
-                  }}
-                />
-                <span style={{ fontSize: 13, fontWeight: 500 }}>{metric.label}</span>
-              </div>
-            ))}
-          </div>
-
-          <UIAreaChart
-            data={chartData}
-            xField="date"
-            yField="value"
-            colorField="category"
-            colors={chartColors}
-            height={height}
-            axis={{
-              x: {
-                label: {
-                  autoRotate: false,
-                },
-              },
-              y: {
-                label: {
-                  formatter: (v: string) => {
-                    const num = Number(v);
-                    if (num >= 1000000) {return `${(num / 1000000).toFixed(1)}M`;}
-                    if (num >= 1000) {return `${(num / 1000).toFixed(1)}K`;}
-                    return num.toLocaleString();
-                  },
-                },
-              },
-            }}
-            style={{
-              fillOpacity: 0.3,
-            }}
-            legend={false}
-            tooltip={{
-              title: (d: any) => d.date,
-              items: [
-                (d: any) => {
-                  const metric = metrics.find((m) => m.label === d.category);
-                  const metricIndex = metrics.findIndex((m) => m.label === d.category);
-                  let formattedValue = d.value?.toLocaleString() || '0';
-
-                  if (metric?.format && d.value != null) {
-                    formattedValue = metric.format(d.value);
-                  }
-
-                  const tooltipColor = chartColors[metricIndex >= 0 ? metricIndex : 0];
-
-                  console.log('[Tooltip] Color:', {
-                    category: d.category,
-                    metricIndex,
-                    tooltipColor,
-                    chartColors,
-                  });
-
-                  return {
-                    name: d.category,
-                    value: formattedValue,
-                    color: tooltipColor,
-                  };
-                },
-              ],
-            }}
-          />
-        </div>
-      )}
-
-      {!loading && chartData.length === 0 && (
-        <div style={{ textAlign: 'center', padding: '40px 0' }}>
-          <UIText color="secondary">No data available for the selected date range</UIText>
-        </div>
-      )}
-    </UICard>
-  );
-}