@kb-labs/studio-app 0.6.0

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

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

@@ -0,0 +1,101 @@
+/**
+ * @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

@@ -0,0 +1,10 @@
+/* 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

@@ -0,0 +1,122 @@
+/**
+ * @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

@@ -0,0 +1,12 @@
+/**
+ * @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

@@ -0,0 +1,134 @@
+/**
+ * @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

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

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