@kb-labs/studio-app 0.6.0 → 2.8.0

package/src/modules/observability/pages/state-broker-page.tsx

@@ -1,229 +0,0 @@
-import {
-  UIRow,
-  UICol,
-  UITable,
-  UICard,
-  UIStatistic,
-  UIProgress,
-  UIAlert,
-  UIIcon,
-} from '@kb-labs/studio-ui-kit';
-import { useStateBrokerStats } from '@kb-labs/studio-data-client';
-import { useDataSources } from '../../../providers/data-sources-provider';
-import type { NamespaceStats } from '@kb-labs/studio-data-client';
-import { UIPage, UIPageHeader } from '@kb-labs/studio-ui-kit';
-
-/**
- * Format uptime in milliseconds to human-readable string
- */
-function formatUptime(ms: number): string {
-  const hours = Math.floor(ms / 3600000);
-  const minutes = Math.floor((ms % 3600000) / 60000);
-
-  if (hours > 0) {
-    return `${hours}h ${minutes}m`;
-  }
-  return `${minutes}m`;
-}
-
-/**
- * Format bytes to human-readable size
- */
-function formatBytes(bytes: number): string {
-  if (bytes === 0) {return '0 B';}
-  const k = 1024;
-  const sizes = ['B', 'KB', 'MB', 'GB'];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return `${Math.round(bytes / Math.pow(k, i) * 100) / 100} ${sizes[i]}`;
-}
-
-/**
- * State Broker Observability Page
- *
- * Shows real-time statistics from the State Broker daemon:
- * - Cache hit/miss rates
- * - Namespace breakdown
- * - Uptime and entry counts
- */
-export function StateBrokerPage() {
-  const sources = useDataSources();
-  const { data, isLoading, error, isError } = useStateBrokerStats(sources.observability);
-
-  if (isError) {
-    return (
-      <UIPage>
-        <UIPageHeader
-          title="State Broker"
-          description="In-memory cache statistics"
-        />
-        <UIAlert
-          message="Failed to load State Broker stats"
-          description={error instanceof Error ? error.message : 'Unknown error. Make sure State Daemon is running on localhost:7777'}
-          variant="error"
-          showIcon
-          style={{ marginBottom: 24 }}
-        />
-      </UIPage>
-    );
-  }
-
-  if (isLoading || !data) {
-    return (
-      <UIPage>
-        <UIPageHeader
-          title="State Broker"
-          description="In-memory cache statistics"
-        />
-        <div style={{ padding: '24px 0', textAlign: 'center' }}>
-          Loading...
-        </div>
-      </UIPage>
-    );
-  }
-
-  const hitRatePercent = Math.round(data.hitRate * 100);
-  const missRatePercent = Math.round(data.missRate * 100);
-
-  return (
-    <UIPage width="full">
-      <UIPageHeader
-        title="State Broker"
-        description="In-memory cache statistics - Auto-refresh every 5s"
-      />
-
-      {/* Overview Stats */}
-      <UIRow gutter={[16, 16]} style={{ marginBottom: 24 }}>
-        <UICol xs={24} sm={12} lg={6}>
-          <UICard>
-            <UIStatistic
-              title="Uptime"
-              value={formatUptime(data.uptime)}
-              prefix={<UIIcon name="ClockCircleOutlined" />}
-            />
-          </UICard>
-        </UICol>
-        <UICol xs={24} sm={12} lg={6}>
-          <UICard>
-            <UIStatistic
-              title="Cache Entries"
-              value={data.totalEntries}
-              prefix={<UIIcon name="DatabaseOutlined" />}
-            />
-          </UICard>
-        </UICol>
-        <UICol xs={24} sm={12} lg={6}>
-          <UICard>
-            <UIStatistic
-              title="Cache Size"
-              value={formatBytes(data.totalSize)}
-              prefix={<UIIcon name="DatabaseOutlined" />}
-            />
-          </UICard>
-        </UICol>
-        <UICol xs={24} sm={12} lg={6}>
-          <UICard>
-            <UIStatistic
-              title="Evictions"
-              value={data.evictions}
-              prefix={<UIIcon name="DeleteOutlined" />}
-            />
-          </UICard>
-        </UICol>
-      </UIRow>
-
-      {/* Hit/Miss Rate */}
-      <UIRow gutter={[16, 16]} style={{ marginBottom: 24 }}>
-        <UICol xs={24} lg={12}>
-          <UICard title="Cache Hit Rate" extra={<UIIcon name="CheckCircleOutlined" style={{ color: '#52c41a' }} />}>
-            <UIProgress
-              percent={hitRatePercent}
-              status={hitRatePercent >= 70 ? 'success' : hitRatePercent >= 50 ? 'normal' : 'exception'}
-              strokeColor={hitRatePercent >= 70 ? '#52c41a' : hitRatePercent >= 50 ? '#1890ff' : '#ff4d4f'}
-            />
-            <div style={{ marginTop: 8, fontSize: 12, color: '#8c8c8c' }}>
-              {hitRatePercent >= 70 ? 'Excellent cache performance' :
-               hitRatePercent >= 50 ? 'Good cache performance' :
-               'Poor cache performance - consider increasing TTL'}
-            </div>
-          </UICard>
-        </UICol>
-        <UICol xs={24} lg={12}>
-          <UICard title="Cache Miss Rate" extra={<UIIcon name="CloseCircleOutlined" style={{ color: '#ff4d4f' }} />}>
-            <UIProgress
-              percent={missRatePercent}
-              status={missRatePercent <= 30 ? 'success' : missRatePercent <= 50 ? 'normal' : 'exception'}
-              strokeColor={missRatePercent <= 30 ? '#52c41a' : missRatePercent <= 50 ? '#faad14' : '#ff4d4f'}
-            />
-            <div style={{ marginTop: 8, fontSize: 12, color: '#8c8c8c' }}>
-              {missRatePercent <= 30 ? 'Low miss rate - good cache efficiency' :
-               missRatePercent <= 50 ? 'Moderate miss rate' :
-               'High miss rate - cache not effective'}
-            </div>
-          </UICard>
-        </UICol>
-      </UIRow>
-
-      {/* Namespaces Table */}
-      <UICard title="Namespaces Breakdown" style={{ marginBottom: 24 }}>
-        <UITable<{ key: string; name: string } & NamespaceStats>
-          dataSource={Object.entries(data.namespaces).map(([name, stats]) => ({
-            key: name,
-            name,
-            ...stats,
-          }))}
-          columns={[
-            {
-              title: 'Namespace',
-              dataIndex: 'name',
-              key: 'name',
-              render: (name: string) => <strong>{name}</strong>,
-            },
-            {
-              title: 'Entries',
-              dataIndex: 'entries',
-              key: 'entries',
-              align: 'right' as const,
-            },
-            {
-              title: 'Hits',
-              dataIndex: 'hits',
-              key: 'hits',
-              align: 'right' as const,
-              render: (hits: number) => (
-                <span style={{ color: '#52c41a' }}>{hits}</span>
-              ),
-            },
-            {
-              title: 'Misses',
-              dataIndex: 'misses',
-              key: 'misses',
-              align: 'right' as const,
-              render: (misses: number) => (
-                <span style={{ color: '#ff4d4f' }}>{misses}</span>
-              ),
-            },
-            {
-              title: 'Hit Rate',
-              key: 'hitRate',
-              align: 'right' as const,
-              render: (_: unknown, record: { hits: number; misses: number }) => {
-                const total = record.hits + record.misses;
-                const rate = total > 0 ? (record.hits / total) * 100 : 0;
-                return `${Math.round(rate)}%`;
-              },
-            },
-            {
-              title: 'Size',
-              dataIndex: 'size',
-              key: 'size',
-              align: 'right' as const,
-              render: (size: number) => formatBytes(size),
-            },
-          ]}
-          pagination={false}
-          size="small"
-        />
-      </UICard>
-    </UIPage>
-  );
-}

package/src/modules/observability/pages/system-events-page.tsx

@@ -1,255 +0,0 @@
-import {
-  UICard,
-  UIAlert,
-  UIBadge,
-  UITag,
-  UITimeline,
-  UIRow,
-  UICol,
-  UIStatistic,
-  UIIcon,
-} from '@kb-labs/studio-ui-kit';
-import { useSystemEvents } from '@kb-labs/studio-data-client';
-import { useDataSources } from '../../../providers/data-sources-provider';
-import type { RegistryEvent, HealthEvent } from '@kb-labs/studio-data-client';
-import { UIPage, UIPageHeader } from '@kb-labs/studio-ui-kit';
-
-/**
- * Format timestamp to time string
- */
-function formatTime(timestamp: string): string {
-  return new Date(timestamp).toLocaleTimeString();
-}
-
-/**
- * System Events Live Feed Page
- *
- * Shows real-time system events from /events/registry SSE stream:
- * - Registry updates (plugin registration, checksums)
- * - Health status changes
- * - Redis state transitions
- * - Plugin mount events
- */
-export function SystemEventsPage() {
-  const sources = useDataSources();
-  const { events, isConnected, error } = useSystemEvents(sources.observability);
-
-  const latestHealth = events.find((e) => e.type === 'health') as HealthEvent | undefined;
-  const latestRegistry = events.find((e) => e.type === 'registry') as RegistryEvent | undefined;
-
-  return (
-    <UIPage width="full">
-      <UIPageHeader
-        title="System Events"
-        description="Real-time system event stream - Auto-updates via Server-Sent Events"
-      />
-
-      {/* Connection Status */}
-      {!isConnected && !error && (
-        <UIAlert
-          message="Connecting to event stream..."
-          variant="info"
-          showIcon
-          icon={<UIIcon name="SyncOutlined" spin />}
-          style={{ marginBottom: 24 }}
-        />
-      )}
-
-      {error && (
-        <UIAlert
-          message="Connection failed"
-          description={error.message + ' - Make sure REST API is running on localhost:5050'}
-          variant="error"
-          showIcon
-          style={{ marginBottom: 24 }}
-        />
-      )}
-
-      {isConnected && (
-        <UIAlert
-          message="Connected to event stream"
-          variant="success"
-          showIcon
-          icon={<UIIcon name="CheckCircleOutlined" />}
-          style={{ marginBottom: 24 }}
-        />
-      )}
-
-      {/* Current System Status */}
-      <UIRow gutter={[16, 16]} style={{ marginBottom: 24 }}>
-        <UICol xs={24} lg={12}>
-          <UICard
-            title="Latest Health Status"
-            extra={
-              latestHealth ? (
-                <UIBadge
-                  variant={latestHealth.ready ? 'success' : 'error'}
-                >
-                  {latestHealth.ready ? 'Ready' : 'Not Ready'}
-                </UIBadge>
-              ) : null
-            }
-          >
-            {latestHealth ? (
-              <UIRow gutter={16}>
-                <UICol span={8}>
-                  <UIStatistic
-                    title="Status"
-                    value={latestHealth.status}
-                    valueStyle={{ color: latestHealth.status === 'healthy' ? '#52c41a' : '#ff4d4f' }}
-                  />
-                </UICol>
-                <UICol span={8}>
-                  <UIStatistic
-                    title="Plugins Mounted"
-                    value={latestHealth.pluginsMounted ?? 0}
-                    suffix={latestHealth.pluginsMounted !== undefined && latestHealth.pluginsFailed !== undefined
-                      ? `/ ${latestHealth.pluginsMounted + latestHealth.pluginsFailed}`
-                      : ''}
-                  />
-                </UICol>
-                <UICol span={8}>
-                  <UIStatistic
-                    title="Redis"
-                    value={latestHealth.redisEnabled
-                      ? (latestHealth.redisHealthy ? 'Healthy' : 'Unhealthy')
-                      : 'Disabled'}
-                    valueStyle={{
-                      color: !latestHealth.redisEnabled
-                        ? '#8c8c8c'
-                        : (latestHealth.redisHealthy ? '#52c41a' : '#ff4d4f')
-                    }}
-                  />
-                </UICol>
-              </UIRow>
-            ) : (
-              <UIAlert message="No health data received yet" variant="info" showIcon />
-            )}
-          </UICard>
-        </UICol>
-
-        <UICol xs={24} lg={12}>
-          <UICard
-            title="Latest Registry"
-            extra={
-              latestRegistry ? (
-                <UITag color={latestRegistry.stale ? 'orange' : 'green'}>
-                  {latestRegistry.stale ? 'Stale' : 'Fresh'}
-                </UITag>
-              ) : null
-            }
-          >
-            {latestRegistry ? (
-              <UIRow gutter={16}>
-                <UICol span={12}>
-                  <UIStatistic
-                    title="Revision"
-                    value={String(latestRegistry.rev).substring(0, 8)}
-                    valueStyle={{ fontSize: 18 }}
-                  />
-                </UICol>
-                <UICol span={12}>
-                  <UIStatistic
-                    title="Generated"
-                    value={formatTime(latestRegistry.generatedAt)}
-                    valueStyle={{ fontSize: 18 }}
-                  />
-                </UICol>
-              </UIRow>
-            ) : (
-              <UIAlert message="No registry data received yet" variant="info" showIcon />
-            )}
-          </UICard>
-        </UICol>
-      </UIRow>
-
-      {/* Event Timeline */}
-      <UICard
-        title="Live Event Feed"
-        extra={
-          <UIBadge
-            count={events.length}
-            overflowCount={99}
-            style={{ backgroundColor: '#1890ff' }}
-          />
-        }
-      >
-        {events.length > 0 ? (
-          <UITimeline
-            items={events.map((event, index) => {
-              if (event.type === 'health') {
-                const healthEvent = event as HealthEvent;
-                return {
-                  key: index,
-                  color: healthEvent.ready ? 'green' : 'red',
-                  dot: healthEvent.ready ? <UIIcon name="CheckCircleOutlined" /> : <UIIcon name="CloseCircleOutlined" />,
-                  children: (
-                    <div>
-                      <div style={{ marginBottom: 4 }}>
-                        <UITag color="blue">HEALTH</UITag>
-                        <UITag color={healthEvent.status === 'healthy' ? 'green' : 'red'}>
-                          {healthEvent.status}
-                        </UITag>
-                        {healthEvent.ready && <UITag color="green">READY</UITag>}
-                        {!healthEvent.ready && healthEvent.reason && (
-                          <UITag color="orange">{healthEvent.reason}</UITag>
-                        )}
-                        <span style={{ fontSize: 12, color: '#8c8c8c', marginLeft: 8 }}>
-                          {formatTime(healthEvent.ts)}
-                        </span>
-                      </div>
-                      <div style={{ fontSize: 13 }}>
-                        {healthEvent.pluginsMounted !== undefined && healthEvent.pluginsFailed !== undefined ? (
-                          <>Plugins: {healthEvent.pluginsMounted} mounted, {healthEvent.pluginsFailed} failed</>
-                        ) : (
-                          <>Plugins: status unavailable</>
-                        )}
-                        {healthEvent.redisEnabled && (
-                          <> | Redis: {healthEvent.redisHealthy ? 'healthy' : 'unhealthy'}</>
-                        )}
-                      </div>
-                    </div>
-                  ),
-                };
-              } else {
-                const registryEvent = event as RegistryEvent;
-                return {
-                  key: index,
-                  color: registryEvent.stale ? 'orange' : 'blue',
-                  dot: <UIIcon name="ApiOutlined" />,
-                  children: (
-                    <div>
-                      <div style={{ marginBottom: 4 }}>
-                        <UITag color="purple">REGISTRY</UITag>
-                        <UITag>{String(registryEvent.rev).substring(0, 8)}</UITag>
-                        {registryEvent.stale && <UITag color="orange">STALE</UITag>}
-                        {registryEvent.partial && <UITag color="orange">PARTIAL</UITag>}
-                        <span style={{ fontSize: 12, color: '#8c8c8c', marginLeft: 8 }}>
-                          {formatTime(registryEvent.generatedAt)}
-                        </span>
-                      </div>
-                      {registryEvent.checksum && (
-                        <div style={{ fontSize: 13 }}>
-                          Checksum: {registryEvent.checksum.substring(0, 16)}...
-                          {registryEvent.previousChecksum && ' (changed)'}
-                        </div>
-                      )}
-                    </div>
-                  ),
-                };
-              }
-            })}
-          />
-        ) : (
-          <UIAlert
-            message="No events received yet"
-            description="Waiting for system events..."
-            variant="info"
-            showIcon
-            icon={<UIIcon name="SyncOutlined" spin />}
-          />
-        )}
-      </UICard>
-    </UIPage>
-  );
-}

package/src/modules/observability/routes/index.tsx

@@ -1,133 +0,0 @@
-/**
- * @module @kb-labs/studio-app/modules/observability/routes
- * Observability module routing configuration
- */
-
-import type { RouteObject } from 'react-router-dom';
-import { StateBrokerPage } from '../pages/state-broker-page';
-import { DevKitPage } from '../pages/devkit-page';
-import { PrometheusMetricsPage } from '../pages/prometheus-metrics-page';
-import { SystemEventsPage } from '../pages/system-events-page';
-import { LogsPage } from '../pages/logs-page';
-import { LogDetailPage } from '../pages/log-detail-page';
-import { IncidentsPage } from '../pages/incidents-page';
-import { IncidentDetailPage } from '../pages/incident-detail-page';
-import { ErrorBoundary } from '../../../components/error-boundary';
-import { renderIcon } from '../../../routes/helpers';
-import type { NavigationItem } from '@/components/ui';
-
-// Route paths
-const PATHS = {
-  STATE_BROKER: '/observability/state-broker',
-  DEVKIT: '/observability/devkit',
-  PROMETHEUS: '/observability/prometheus-metrics',
-  EVENTS: '/observability/system-events',
-  LOGS: '/observability/logs',
-  LOG_DETAIL: '/observability/logs/:id',
-  INCIDENTS: '/observability/incidents',
-  INCIDENT_DETAIL: '/observability/incidents/:id',
-} as const;
-
-// Route keys
-const KEYS = {
-  MODULE: 'observability',
-  STATE_BROKER: 'observability-state-broker',
-  DEVKIT: 'observability-devkit',
-  PROMETHEUS: 'observability-prometheus',
-  EVENTS: 'observability-events',
-  LOGS: 'observability-logs',
-  INCIDENTS: 'observability-incidents',
-} as const;
-
-/**
- * Observability routes
- */
-export const observabilityRoutes: RouteObject[] = [
-  {
-    path: PATHS.STATE_BROKER,
-    element: <StateBrokerPage />,
-    errorElement: <ErrorBoundary />,
-  },
-  {
-    path: PATHS.DEVKIT,
-    element: <DevKitPage />,
-    errorElement: <ErrorBoundary />,
-  },
-  {
-    path: PATHS.PROMETHEUS,
-    element: <PrometheusMetricsPage />,
-    errorElement: <ErrorBoundary />,
-  },
-  {
-    path: PATHS.EVENTS,
-    element: <SystemEventsPage />,
-    errorElement: <ErrorBoundary />,
-  },
-  {
-    path: PATHS.LOGS,
-    element: <LogsPage />,
-    errorElement: <ErrorBoundary />,
-  },
-  {
-    path: PATHS.LOG_DETAIL,
-    element: <LogDetailPage />,
-    errorElement: <ErrorBoundary />,
-  },
-  {
-    path: PATHS.INCIDENTS,
-    element: <IncidentsPage />,
-    errorElement: <ErrorBoundary />,
-  },
-  {
-    path: PATHS.INCIDENT_DETAIL,
-    element: <IncidentDetailPage />,
-    errorElement: <ErrorBoundary />,
-  },
-];
-
-/**
- * Observability navigation item for sidebar
- */
-export const observabilityNavigation: NavigationItem = {
-  key: KEYS.MODULE,
-  label: 'Observability',
-  icon: renderIcon('EyeOutlined'),
-  children: [
-    {
-      key: KEYS.STATE_BROKER,
-      label: 'State Broker',
-      path: PATHS.STATE_BROKER,
-      icon: renderIcon('ApiOutlined'),
-    },
-    {
-      key: KEYS.DEVKIT,
-      label: 'DevKit',
-      path: PATHS.DEVKIT,
-      icon: renderIcon('ToolOutlined'),
-    },
-    {
-      key: KEYS.PROMETHEUS,
-      label: 'Metrics',
-      path: PATHS.PROMETHEUS,
-      icon: renderIcon('LineChartOutlined'),
-    },
-    {
-      key: KEYS.EVENTS,
-      label: 'System Events',
-      path: PATHS.EVENTS,
-      icon: renderIcon('BellOutlined'),
-    },
-    {
-      key: KEYS.LOGS,
-      label: 'Logs',
-      path: PATHS.LOGS,
-      icon: renderIcon('FileTextOutlined'),
-    },
-    {
-      key: KEYS.INCIDENTS,
-      label: 'Incidents',
-      path: PATHS.INCIDENTS,
-      icon: renderIcon('WarningOutlined'),
-    },
-  ],
-};