@geekmidas/studio 0.2.0 → 0.4.0

package/ui/src/providers/StudioProvider.tsx

@@ -0,0 +1,194 @@
+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,194 +1,105 @@
 @import "tailwindcss";
+@import "@geekmidas/ui/styles";
 
 @theme {
-  /* Supabase-inspired dark theme */
-  --color-studio-bg: #171717;
-  --color-studio-surface: #1c1c1c;
-  --color-studio-border: #2e2e2e;
-  --color-studio-hover: #262626;
-  --color-studio-active: #333333;
-  --color-studio-accent: #3ecf8e;
-  --color-studio-accent-hover: #4ade94;
-
-  /* Legacy colors for compatibility */
-  --color-bg-primary: #171717;
-  --color-bg-secondary: #1c1c1c;
-  --color-bg-tertiary: #262626;
-  --color-border: #2e2e2e;
+	/* 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;
+	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-studio-bg);
+	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;
+	width: 8px;
+	height: 8px;
 }
 
 ::-webkit-scrollbar-track {
-  background: transparent;
+	background: transparent;
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #404040;
-  border-radius: 4px;
+	background: #404040;
+	border-radius: 4px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: #525252;
+	background: #525252;
 }
 
 /* Table styles */
 .data-grid {
-  border-collapse: collapse;
-  width: 100%;
+	border-collapse: collapse;
+	width: 100%;
 }
 
 .data-grid th {
-  position: sticky;
-  top: 0;
-  background: var(--color-studio-surface);
-  z-index: 10;
+	position: sticky;
+	top: 0;
+	background: var(--color-surface);
+	z-index: 10;
 }
 
 .data-grid th,
 .data-grid td {
-  border-bottom: 1px solid var(--color-studio-border);
-  text-align: left;
+	border-bottom: 1px solid var(--color-border);
+	text-align: left;
 }
 
 .data-grid tbody tr:hover {
-  background: var(--color-studio-hover);
+	background: var(--color-surface-hover);
 }
 
 /* Row number column */
 .row-number {
-  color: #525252;
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-  user-select: none;
+	color: #525252;
+	font-size: 12px;
+	font-variant-numeric: tabular-nums;
+	user-select: none;
 }
 
 /* NULL value styling */
 .cell-null {
-  color: #525252;
-  font-style: italic;
+	color: #525252;
+	font-style: italic;
 }
 
 /* Filter panel animation */
 .filter-panel {
-  animation: slideDown 0.15s ease-out;
+	animation: slideDown 0.15s ease-out;
 }
 
 @keyframes slideDown {
-  from {
-    opacity: 0;
-    transform: translateY(-8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Button styles */
-.btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.375rem 0.75rem;
-  font-size: 0.875rem;
-  border-radius: 0.375rem;
-  transition: all 0.15s ease;
-  cursor: pointer;
-  border: none;
-  outline: none;
-}
-
-.btn-default {
-  background: var(--color-studio-hover);
-  color: #a3a3a3;
-}
-
-.btn-default:hover {
-  background: var(--color-studio-active);
-  color: #e5e5e5;
-}
-
-.btn-primary {
-  background: var(--color-studio-accent);
-  color: #000;
-}
-
-.btn-primary:hover {
-  background: var(--color-studio-accent-hover);
-}
-
-/* Input styles */
-.input {
-  background: var(--color-studio-bg);
-  border: 1px solid var(--color-studio-border);
-  border-radius: 0.375rem;
-  padding: 0.375rem 0.75rem;
-  font-size: 0.875rem;
-  color: #e5e5e5;
-  outline: none;
-  transition: border-color 0.15s ease;
-}
-
-.input:focus {
-  border-color: var(--color-studio-accent);
-}
-
-.input::placeholder {
-  color: #525252;
-}
-
-/* Select styles */
-.select {
-  background: var(--color-studio-bg);
-  border: 1px solid var(--color-studio-border);
-  border-radius: 0.375rem;
-  padding: 0.375rem 0.75rem;
-  font-size: 0.875rem;
-  color: #e5e5e5;
-  outline: none;
-  cursor: pointer;
-  appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23525252'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 0.5rem center;
-  background-size: 1rem;
-  padding-right: 2rem;
-}
-
-.select:focus {
-  border-color: var(--color-studio-accent);
-}
-
-/* Badge */
-.badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 1.25rem;
-  height: 1.25rem;
-  padding: 0 0.375rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-  border-radius: 9999px;
-  background: var(--color-studio-accent);
-  color: #000;
+	from {
+		opacity: 0;
+		transform: translateY(-8px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
 }

package/ui/src/types.ts

@@ -1,50 +1,174 @@
+// ============================================================================
+// Database Types
+// ============================================================================
+
 export interface ColumnInfo {
-  name: string;
-  type: string;
-  rawType: string;
-  nullable: boolean;
-  isPrimaryKey: boolean;
-  isForeignKey: boolean;
-  foreignKeyTable?: string;
-  foreignKeyColumn?: string;
-  defaultValue?: string;
+	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;
+	name: string;
+	schema: string;
+	columns: ColumnInfo[];
+	primaryKey: string[];
+	estimatedRowCount?: number;
 }
 
 export interface TableSummary {
-  name: string;
-  schema: string;
-  columnCount: number;
-  primaryKey: string[];
-  estimatedRowCount?: number;
+	name: string;
+	schema: string;
+	columnCount: number;
+	primaryKey: string[];
+	estimatedRowCount?: number;
 }
 
 export interface SchemaInfo {
-  tables: TableInfo[];
-  updatedAt: string;
+	tables: TableInfo[];
+	updatedAt: string;
 }
 
 export interface QueryResult {
-  rows: Record<string, unknown>[];
-  hasMore: boolean;
-  nextCursor: string | null;
-  prevCursor: string | null;
+	rows: Record<string, unknown>[];
+	hasMore: boolean;
+	nextCursor: string | null;
+	prevCursor: string | null;
 }
 
 export interface FilterConfig {
-  column: string;
-  operator: string;
-  value: string;
+	column: string;
+	operator: string;
+	value: string;
 }
 
 export interface SortConfig {
-  column: string;
-  direction: 'asc' | 'desc';
+	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/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/app.tsx","./src/api.ts","./src/main.tsx","./src/types.ts","./src/vite-env.d.ts","./src/components/filterpanel.tsx","./src/components/rowdetail.tsx","./src/components/tablelist.tsx","./src/components/tableview.tsx"],"version":"5.8.2"}
+{"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

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