@kb-labs/studio-app 0.6.0

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

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

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

@@ -0,0 +1,133 @@
+/**
+ * @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'),
+    },
+  ],
+};