@geekmidas/studio 2.0.1 → 10.0.0-alpha.0

package/ui/src/providers/StudioProvider.tsx

@@ -1,194 +0,0 @@
-import {
-	createContext,
-	type ReactNode,
-	useCallback,
-	useContext,
-	useEffect,
-	useState,
-} from 'react';
-import * as api from '../api';
-import type {
-	ExceptionEntry,
-	LogEntry,
-	MetricsSnapshot,
-	RequestEntry,
-	StudioStats,
-	WebSocketMessage,
-} from '../types';
-
-interface StudioContextValue {
-	// Connection state
-	connected: boolean;
-
-	// Stats
-	stats: StudioStats | null;
-
-	// Data
-	requests: RequestEntry[];
-	logs: LogEntry[];
-	exceptions: ExceptionEntry[];
-
-	// Real-time metrics from WebSocket
-	realtimeMetrics: MetricsSnapshot | null;
-
-	// Loading state
-	loading: boolean;
-
-	// Actions
-	refresh: () => Promise<void>;
-	addRequest: (request: RequestEntry) => void;
-	addLog: (log: LogEntry) => void;
-	addException: (exception: ExceptionEntry) => void;
-}
-
-const StudioContext = createContext<StudioContextValue | null>(null);
-
-export function useStudio() {
-	const context = useContext(StudioContext);
-	if (!context) {
-		throw new Error('useStudio must be used within a StudioProvider');
-	}
-	return context;
-}
-
-interface StudioProviderProps {
-	children: ReactNode;
-}
-
-export function StudioProvider({ children }: StudioProviderProps) {
-	const [connected, setConnected] = useState(false);
-	const [stats, setStats] = useState<StudioStats | null>(null);
-	const [requests, setRequests] = useState<RequestEntry[]>([]);
-	const [logs, setLogs] = useState<LogEntry[]>([]);
-	const [exceptions, setExceptions] = useState<ExceptionEntry[]>([]);
-	const [realtimeMetrics, setRealtimeMetrics] =
-		useState<MetricsSnapshot | null>(null);
-	const [loading, setLoading] = useState(true);
-
-	// Load initial data
-	const loadInitialData = useCallback(async () => {
-		try {
-			setLoading(true);
-			const [statsData, requestsData, exceptionsData, logsData] =
-				await Promise.all([
-					api.getStats(),
-					api.getRequests({ limit: 100 }),
-					api.getExceptions({ limit: 100 }),
-					api.getLogs({ limit: 100 }),
-				]);
-
-			setStats(statsData);
-			setRequests(requestsData);
-			setExceptions(exceptionsData);
-			setLogs(logsData);
-		} catch (_error) {
-		} finally {
-			setLoading(false);
-		}
-	}, []);
-
-	// Refresh data
-	const refresh = useCallback(async () => {
-		await loadInitialData();
-	}, [loadInitialData]);
-
-	// Add new entries
-	const addRequest = useCallback((request: RequestEntry) => {
-		setRequests((prev) => [request, ...prev].slice(0, 100));
-		setStats((prev) =>
-			prev ? { ...prev, requests: prev.requests + 1 } : prev,
-		);
-	}, []);
-
-	const addLog = useCallback((log: LogEntry) => {
-		setLogs((prev) => [log, ...prev].slice(0, 100));
-		setStats((prev) => (prev ? { ...prev, logs: prev.logs + 1 } : prev));
-	}, []);
-
-	const addException = useCallback((exception: ExceptionEntry) => {
-		setExceptions((prev) => [exception, ...prev].slice(0, 100));
-		setStats((prev) =>
-			prev ? { ...prev, exceptions: prev.exceptions + 1 } : prev,
-		);
-	}, []);
-
-	// Load data on mount
-	useEffect(() => {
-		loadInitialData();
-	}, [loadInitialData]);
-
-	// WebSocket connection for real-time updates
-	useEffect(() => {
-		let ws: WebSocket | null = null;
-		let reconnectTimeout: ReturnType<typeof setTimeout>;
-
-		function connect() {
-			try {
-				ws = api.createWebSocket();
-
-				ws.onopen = () => {
-					setConnected(true);
-				};
-
-				ws.onclose = () => {
-					setConnected(false);
-					reconnectTimeout = setTimeout(connect, 3000);
-				};
-
-				ws.onerror = () => {
-					ws?.close();
-				};
-
-				ws.onmessage = (event) => {
-					try {
-						const message: WebSocketMessage = JSON.parse(event.data);
-
-						switch (message.type) {
-							case 'request':
-								addRequest(message.payload as RequestEntry);
-								break;
-							case 'exception':
-								addException(message.payload as ExceptionEntry);
-								break;
-							case 'log':
-								addLog(message.payload as LogEntry);
-								break;
-							case 'metrics':
-								setRealtimeMetrics(message.payload as MetricsSnapshot);
-								break;
-						}
-					} catch {
-						// Ignore parse errors
-					}
-				};
-			} catch {
-				reconnectTimeout = setTimeout(connect, 3000);
-			}
-		}
-
-		connect();
-
-		return () => {
-			clearTimeout(reconnectTimeout);
-			ws?.close();
-		};
-	}, [addRequest, addLog, addException]);
-
-	const value: StudioContextValue = {
-		connected,
-		stats,
-		requests,
-		logs,
-		exceptions,
-		realtimeMetrics,
-		loading,
-		refresh,
-		addRequest,
-		addLog,
-		addException,
-	};
-
-	return (
-		<StudioContext.Provider value={value}>{children}</StudioContext.Provider>
-	);
-}

package/ui/src/styles.css

@@ -1,105 +0,0 @@
-@import "tailwindcss";
-@import "@geekmidas/ui/styles";
-
-@theme {
-	/* Dev Studio theme - extends @geekmidas/ui theme */
-	--color-studio-bg: var(--color-background);
-	--color-studio-surface: var(--color-surface);
-	--color-studio-border: var(--color-border);
-	--color-studio-hover: var(--color-surface-hover);
-	--color-studio-active: #333333;
-	--color-studio-accent: var(--color-accent);
-	--color-studio-accent-hover: #4ade94;
-
-	/* Legacy colors for compatibility */
-	--color-bg-primary: var(--color-background);
-	--color-bg-secondary: var(--color-surface);
-	--color-bg-tertiary: var(--color-surface-hover);
-}
-
-* {
-	box-sizing: border-box;
-}
-
-body {
-	margin: 0;
-	padding: 0;
-	font-family:
-		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
-		Arial, sans-serif;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	background: var(--color-background);
-}
-
-/* Custom scrollbar */
-::-webkit-scrollbar {
-	width: 8px;
-	height: 8px;
-}
-
-::-webkit-scrollbar-track {
-	background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-	background: #404040;
-	border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-	background: #525252;
-}
-
-/* Table styles */
-.data-grid {
-	border-collapse: collapse;
-	width: 100%;
-}
-
-.data-grid th {
-	position: sticky;
-	top: 0;
-	background: var(--color-surface);
-	z-index: 10;
-}
-
-.data-grid th,
-.data-grid td {
-	border-bottom: 1px solid var(--color-border);
-	text-align: left;
-}
-
-.data-grid tbody tr:hover {
-	background: var(--color-surface-hover);
-}
-
-/* Row number column */
-.row-number {
-	color: #525252;
-	font-size: 12px;
-	font-variant-numeric: tabular-nums;
-	user-select: none;
-}
-
-/* NULL value styling */
-.cell-null {
-	color: #525252;
-	font-style: italic;
-}
-
-/* Filter panel animation */
-.filter-panel {
-	animation: slideDown 0.15s ease-out;
-}
-
-@keyframes slideDown {
-	from {
-		opacity: 0;
-		transform: translateY(-8px);
-	}
-	to {
-		opacity: 1;
-		transform: translateY(0);
-	}
-}

package/ui/src/types.ts

@@ -1,174 +0,0 @@
-// ============================================================================
-// Database Types
-// ============================================================================
-
-export interface ColumnInfo {
-	name: string;
-	type: string;
-	rawType: string;
-	nullable: boolean;
-	isPrimaryKey: boolean;
-	isForeignKey: boolean;
-	foreignKeyTable?: string;
-	foreignKeyColumn?: string;
-	defaultValue?: string;
-}
-
-export interface TableInfo {
-	name: string;
-	schema: string;
-	columns: ColumnInfo[];
-	primaryKey: string[];
-	estimatedRowCount?: number;
-}
-
-export interface TableSummary {
-	name: string;
-	schema: string;
-	columnCount: number;
-	primaryKey: string[];
-	estimatedRowCount?: number;
-}
-
-export interface SchemaInfo {
-	tables: TableInfo[];
-	updatedAt: string;
-}
-
-export interface QueryResult {
-	rows: Record<string, unknown>[];
-	hasMore: boolean;
-	nextCursor: string | null;
-	prevCursor: string | null;
-}
-
-export interface FilterConfig {
-	column: string;
-	operator: string;
-	value: string;
-}
-
-export interface SortConfig {
-	column: string;
-	direction: 'asc' | 'desc';
-}
-
-// ============================================================================
-// Monitoring Types (from Telescope)
-// ============================================================================
-
-export interface RequestEntry {
-	id: string;
-	method: string;
-	path: string;
-	status: number;
-	duration: number;
-	timestamp: string;
-	requestHeaders?: Record<string, string>;
-	requestBody?: unknown;
-	responseHeaders?: Record<string, string>;
-	responseBody?: unknown;
-	ip?: string;
-	userAgent?: string;
-}
-
-export interface ExceptionEntry {
-	id: string;
-	name: string;
-	message: string;
-	stack: string;
-	timestamp: string;
-	context?: Record<string, unknown>;
-	request?: {
-		method: string;
-		path: string;
-	};
-}
-
-export interface LogEntry {
-	id: string;
-	level: string;
-	message: string;
-	timestamp: string;
-	context?: Record<string, unknown>;
-	requestId?: string;
-}
-
-export interface StudioStats {
-	requests: number;
-	exceptions: number;
-	logs: number;
-}
-
-export type WebSocketMessage =
-	| { type: 'request'; payload: RequestEntry }
-	| { type: 'exception'; payload: ExceptionEntry }
-	| { type: 'log'; payload: LogEntry }
-	| { type: 'metrics'; payload: MetricsSnapshot };
-
-// ============================================================================
-// Metrics Types
-// ============================================================================
-
-export interface TimeSeriesPoint {
-	timestamp: number;
-	count: number;
-	avgDuration: number;
-	errorCount: number;
-}
-
-export interface RequestMetrics {
-	totalRequests: number;
-	avgDuration: number;
-	p50Duration: number;
-	p95Duration: number;
-	p99Duration: number;
-	errorRate: number;
-	successRate: number;
-	requestsPerSecond: number;
-	timeSeries: TimeSeriesPoint[];
-}
-
-export interface EndpointMetrics {
-	method: string;
-	path: string;
-	count: number;
-	avgDuration: number;
-	p95Duration: number;
-	errorRate: number;
-	lastSeen: number;
-}
-
-export interface EndpointDetails {
-	method: string;
-	path: string;
-	count: number;
-	avgDuration: number;
-	p50Duration: number;
-	p95Duration: number;
-	p99Duration: number;
-	errorRate: number;
-	successRate: number;
-	lastSeen: number;
-	statusDistribution: StatusDistribution;
-	timeSeries: TimeSeriesPoint[];
-}
-
-export interface StatusDistribution {
-	'2xx': number;
-	'3xx': number;
-	'4xx': number;
-	'5xx': number;
-}
-
-export interface MetricsSnapshot {
-	timestamp: number;
-	totalRequests: number;
-	requestsPerSecond: number;
-	avgDuration: number;
-	errorRate: number;
-	p50: number;
-	p95: number;
-	p99: number;
-	statusDistribution: StatusDistribution;
-}

package/ui/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

package/ui/tsconfig.json

@@ -1,21 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "useDefineForClassFields": true,
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["src"]
-}

package/ui/tsconfig.tsbuildinfo

@@ -1 +0,0 @@
-{"root":["./src/app.tsx","./src/api.ts","./src/main.tsx","./src/types.ts","./src/vite-env.d.ts","./src/components/filterpanel.tsx","./src/components/navrail.tsx","./src/components/rowdetail.tsx","./src/components/studioheader.tsx","./src/components/tablelist.tsx","./src/components/tableview.tsx","./src/pages/dashboardpage.tsx","./src/pages/databasepage.tsx","./src/pages/endpointdetailspage.tsx","./src/pages/exceptionspage.tsx","./src/pages/logspage.tsx","./src/pages/monitoringpage.tsx","./src/pages/performancepage.tsx","./src/pages/requestspage.tsx","./src/providers/studioprovider.tsx"],"version":"5.8.2"}

package/ui/vite.config.ts

@@ -1,12 +0,0 @@
-import tailwindcss from '@tailwindcss/vite';
-import react from '@vitejs/plugin-react';
-import { defineConfig } from 'vite';
-
-export default defineConfig({
-	plugins: [react(), tailwindcss()],
-	base: '/__studio/',
-	build: {
-		outDir: '../dist/ui',
-		emptyOutDir: true,
-	},
-});