@geekmidas/studio 0.1.0 → 0.4.0

package/ui/src/pages/ExceptionsPage.tsx

@@ -0,0 +1,268 @@
+import { NoResults } from '@geekmidas/ui';
+import { AlertTriangle, ArrowLeft, X } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import * as api from '../api';
+import { useStudio } from '../providers/StudioProvider';
+import type { ExceptionEntry } from '../types';
+
+interface ExceptionFilters {
+	search: string;
+}
+
+export function ExceptionsPage() {
+	const { id } = useParams<{ id: string }>();
+	const navigate = useNavigate();
+	const { exceptions: realtimeExceptions } = useStudio();
+
+	const [exceptions, setExceptions] = useState<ExceptionEntry[]>([]);
+	const [selectedException, setSelectedException] =
+		useState<ExceptionEntry | null>(null);
+	const [loading, setLoading] = useState(true);
+	const [filters, setFilters] = useState<ExceptionFilters>({
+		search: '',
+	});
+
+	// Merge realtime exceptions with fetched exceptions
+	useEffect(() => {
+		setExceptions((prev) => {
+			const existingIds = new Set(prev.map((e) => e.id));
+			const newExceptions = realtimeExceptions.filter(
+				(e) => !existingIds.has(e.id),
+			);
+			if (newExceptions.length > 0) {
+				return [...newExceptions, ...prev].slice(0, 100);
+			}
+			return prev;
+		});
+	}, [realtimeExceptions]);
+
+	// Load exceptions
+	const loadExceptions = useCallback(async () => {
+		try {
+			setLoading(true);
+			const data = await api.getExceptions({
+				limit: 100,
+				search: filters.search || undefined,
+			});
+			setExceptions(data);
+		} catch (_error) {
+		} finally {
+			setLoading(false);
+		}
+	}, [filters]);
+
+	useEffect(() => {
+		loadExceptions();
+	}, [loadExceptions]);
+
+	// Load selected exception detail
+	useEffect(() => {
+		if (id) {
+			const existing = exceptions.find((e) => e.id === id);
+			if (existing) {
+				setSelectedException(existing);
+			} else {
+				api.getException(id).then(setSelectedException).catch(console.error);
+			}
+		} else {
+			setSelectedException(null);
+		}
+	}, [id, exceptions]);
+
+	// Filter exceptions
+	const filteredExceptions = useMemo(() => {
+		return exceptions.filter((exception) => {
+			if (filters.search) {
+				const searchLower = filters.search.toLowerCase();
+				if (
+					!exception.name.toLowerCase().includes(searchLower) &&
+					!exception.message.toLowerCase().includes(searchLower)
+				) {
+					return false;
+				}
+			}
+			return true;
+		});
+	}, [exceptions, filters]);
+
+	const hasFilters = filters.search;
+
+	const clearFilters = () => {
+		setFilters({ search: '' });
+	};
+
+	return (
+		<div className="flex h-full">
+			{/* Exception List */}
+			<div className="flex-1 flex flex-col overflow-hidden">
+				{/* Filter Bar */}
+				<div className="p-4 border-b border-border bg-surface flex items-center gap-4">
+					<input
+						type="text"
+						placeholder="Search exceptions..."
+						value={filters.search}
+						onChange={(e) =>
+							setFilters((f) => ({ ...f, search: e.target.value }))
+						}
+						className="flex-1 bg-background border border-border rounded px-3 py-1.5 text-sm focus:outline-none focus:border-accent"
+					/>
+					{hasFilters && (
+						<button
+							onClick={clearFilters}
+							className="text-sm text-muted-foreground hover:text-foreground"
+						>
+							Clear
+						</button>
+					)}
+				</div>
+
+				{/* Exception List */}
+				<div className="flex-1 overflow-auto p-4">
+					{loading ? (
+						<div className="flex items-center justify-center py-16 text-muted-foreground">
+							Loading...
+						</div>
+					) : filteredExceptions.length === 0 ? (
+						<NoResults
+							title={hasFilters ? 'No matching exceptions' : 'No exceptions'}
+							description={
+								hasFilters
+									? 'Try adjusting your filters.'
+									: 'Exceptions will appear here when they occur.'
+							}
+						/>
+					) : (
+						<div className="flex flex-col gap-2">
+							{filteredExceptions.map((exception) => (
+								<div
+									key={exception.id}
+									className={`bg-surface border rounded-lg p-4 cursor-pointer transition-colors hover:border-accent/50 ${
+										selectedException?.id === exception.id
+											? 'border-accent'
+											: 'border-border'
+									}`}
+									onClick={() =>
+										navigate(`/monitoring/exceptions/${exception.id}`)
+									}
+								>
+									<div className="flex justify-between items-center mb-1">
+										<div className="flex items-center gap-2">
+											<AlertTriangle className="h-4 w-4 text-red-400" />
+											<span className="font-medium text-red-400">
+												{exception.name}
+											</span>
+										</div>
+										<span className="text-xs text-muted-foreground">
+											{formatTime(exception.timestamp)}
+										</span>
+									</div>
+									<p className="text-sm text-muted-foreground truncate pl-6">
+										{exception.message}
+									</p>
+								</div>
+							))}
+						</div>
+					)}
+				</div>
+			</div>
+
+			{/* Exception Detail Panel */}
+			{selectedException && (
+				<ExceptionDetailPanel
+					exception={selectedException}
+					onClose={() => navigate('/monitoring/exceptions')}
+				/>
+			)}
+		</div>
+	);
+}
+
+function ExceptionDetailPanel({
+	exception,
+	onClose,
+}: {
+	exception: ExceptionEntry;
+	onClose: () => void;
+}) {
+	return (
+		<div className="w-[600px] border-l border-border bg-surface flex flex-col">
+			{/* Header */}
+			<div className="flex items-center justify-between p-4 border-b border-border">
+				<div className="flex items-center gap-3">
+					<button
+						onClick={onClose}
+						className="p-1 hover:bg-surface-hover rounded"
+					>
+						<ArrowLeft className="h-4 w-4" />
+					</button>
+					<div>
+						<div className="flex items-center gap-2">
+							<AlertTriangle className="h-4 w-4 text-red-400" />
+							<span className="font-medium text-red-400">{exception.name}</span>
+						</div>
+						<p className="text-xs text-muted-foreground mt-1">
+							{formatTime(exception.timestamp)}
+						</p>
+					</div>
+				</div>
+				<button
+					onClick={onClose}
+					className="p-1 hover:bg-surface-hover rounded"
+				>
+					<X className="h-4 w-4" />
+				</button>
+			</div>
+
+			{/* Content */}
+			<div className="flex-1 overflow-auto p-4 space-y-4">
+				{/* Message */}
+				<div>
+					<h4 className="text-sm font-medium mb-2">Message</h4>
+					<p className="text-sm bg-background rounded p-3 break-words text-red-300">
+						{exception.message}
+					</p>
+				</div>
+
+				{/* Request info */}
+				{exception.request && (
+					<div>
+						<h4 className="text-sm font-medium mb-2">Request</h4>
+						<p className="text-sm font-mono bg-background rounded p-3">
+							{exception.request.method} {exception.request.path}
+						</p>
+					</div>
+				)}
+
+				{/* Stack trace */}
+				{exception.stack && (
+					<div>
+						<h4 className="text-sm font-medium mb-2">Stack Trace</h4>
+						<pre className="bg-background rounded p-3 text-xs overflow-auto max-h-[400px] whitespace-pre-wrap">
+							{formatStackTrace(exception.stack)}
+						</pre>
+					</div>
+				)}
+
+				{/* Context */}
+				{exception.context && Object.keys(exception.context).length > 0 && (
+					<div>
+						<h4 className="text-sm font-medium mb-2">Context</h4>
+						<pre className="bg-background rounded p-3 text-xs overflow-auto max-h-[200px]">
+							{JSON.stringify(exception.context, null, 2)}
+						</pre>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
+
+function formatStackTrace(stack: string) {
+	// Highlight file paths and line numbers
+	return stack;
+}
+
+function formatTime(timestamp: string) {
+	return new Date(timestamp).toLocaleString();
+}

package/ui/src/pages/LogsPage.tsx

@@ -0,0 +1,228 @@
+import { LogLevelBadge, NoResults } from '@geekmidas/ui';
+import { X } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import * as api from '../api';
+import { useStudio } from '../providers/StudioProvider';
+import type { LogEntry } from '../types';
+
+interface LogFilters {
+	search: string;
+	level: string;
+}
+
+export function LogsPage() {
+	const { logs: realtimeLogs } = useStudio();
+
+	const [logs, setLogs] = useState<LogEntry[]>([]);
+	const [selectedLog, setSelectedLog] = useState<LogEntry | null>(null);
+	const [loading, setLoading] = useState(true);
+	const [filters, setFilters] = useState<LogFilters>({
+		search: '',
+		level: '',
+	});
+
+	// Merge realtime logs with fetched logs
+	useEffect(() => {
+		setLogs((prev) => {
+			const existingIds = new Set(prev.map((l) => l.id));
+			const newLogs = realtimeLogs.filter((l) => !existingIds.has(l.id));
+			if (newLogs.length > 0) {
+				return [...newLogs, ...prev].slice(0, 100);
+			}
+			return prev;
+		});
+	}, [realtimeLogs]);
+
+	// Load logs
+	const loadLogs = useCallback(async () => {
+		try {
+			setLoading(true);
+			const data = await api.getLogs({
+				limit: 100,
+				search: filters.search || undefined,
+				level: filters.level || undefined,
+			});
+			setLogs(data);
+		} catch (_error) {
+		} finally {
+			setLoading(false);
+		}
+	}, [filters]);
+
+	useEffect(() => {
+		loadLogs();
+	}, [loadLogs]);
+
+	// Filter logs
+	const filteredLogs = useMemo(() => {
+		return logs.filter((log) => {
+			if (
+				filters.search &&
+				!log.message.toLowerCase().includes(filters.search.toLowerCase())
+			) {
+				return false;
+			}
+			if (filters.level && log.level !== filters.level) {
+				return false;
+			}
+			return true;
+		});
+	}, [logs, filters]);
+
+	const hasFilters = filters.search || filters.level;
+
+	const clearFilters = () => {
+		setFilters({ search: '', level: '' });
+	};
+
+	return (
+		<div className="flex h-full">
+			{/* Log List */}
+			<div className="flex-1 flex flex-col overflow-hidden">
+				{/* Filter Bar */}
+				<div className="p-4 border-b border-border bg-surface flex items-center gap-4">
+					<input
+						type="text"
+						placeholder="Search logs..."
+						value={filters.search}
+						onChange={(e) =>
+							setFilters((f) => ({ ...f, search: e.target.value }))
+						}
+						className="flex-1 bg-background border border-border rounded px-3 py-1.5 text-sm focus:outline-none focus:border-accent"
+					/>
+					<select
+						value={filters.level}
+						onChange={(e) =>
+							setFilters((f) => ({ ...f, level: e.target.value }))
+						}
+						className="bg-background border border-border rounded px-3 py-1.5 text-sm focus:outline-none focus:border-accent"
+					>
+						<option value="">All Levels</option>
+						<option value="trace">Trace</option>
+						<option value="debug">Debug</option>
+						<option value="info">Info</option>
+						<option value="warn">Warn</option>
+						<option value="error">Error</option>
+						<option value="fatal">Fatal</option>
+					</select>
+					{hasFilters && (
+						<button
+							onClick={clearFilters}
+							className="text-sm text-muted-foreground hover:text-foreground"
+						>
+							Clear
+						</button>
+					)}
+				</div>
+
+				{/* Log List */}
+				<div className="flex-1 overflow-auto p-4">
+					{loading ? (
+						<div className="flex items-center justify-center py-16 text-muted-foreground">
+							Loading...
+						</div>
+					) : filteredLogs.length === 0 ? (
+						<NoResults
+							title={hasFilters ? 'No matching logs' : 'No logs yet'}
+							description={
+								hasFilters
+									? 'Try adjusting your filters.'
+									: 'Log entries will appear here as they are recorded.'
+							}
+						/>
+					) : (
+						<div className="flex flex-col gap-2">
+							{filteredLogs.map((log) => (
+								<div
+									key={log.id}
+									className={`bg-surface border rounded-lg p-4 cursor-pointer transition-colors hover:border-accent/50 flex items-start gap-4 ${
+										selectedLog?.id === log.id
+											? 'border-accent'
+											: 'border-border'
+									}`}
+									onClick={() => setSelectedLog(log)}
+								>
+									<LogLevelBadge level={log.level as any} size="sm" />
+									<span className="flex-1 text-sm break-words">
+										{log.message}
+									</span>
+									<span className="text-xs text-muted-foreground min-w-20 text-right shrink-0">
+										{formatTime(log.timestamp)}
+									</span>
+								</div>
+							))}
+						</div>
+					)}
+				</div>
+			</div>
+
+			{/* Log Detail Panel */}
+			{selectedLog && (
+				<LogDetailPanel
+					log={selectedLog}
+					onClose={() => setSelectedLog(null)}
+				/>
+			)}
+		</div>
+	);
+}
+
+function LogDetailPanel({
+	log,
+	onClose,
+}: {
+	log: LogEntry;
+	onClose: () => void;
+}) {
+	return (
+		<div className="w-[500px] border-l border-border bg-surface flex flex-col">
+			{/* Header */}
+			<div className="flex items-center justify-between p-4 border-b border-border">
+				<div className="flex items-center gap-3">
+					<LogLevelBadge level={log.level as any} size="md" />
+					<span className="text-sm text-muted-foreground">
+						{formatTime(log.timestamp)}
+					</span>
+				</div>
+				<button
+					onClick={onClose}
+					className="p-1 hover:bg-surface-hover rounded"
+				>
+					<X className="h-4 w-4" />
+				</button>
+			</div>
+
+			{/* Content */}
+			<div className="flex-1 overflow-auto p-4 space-y-4">
+				<div>
+					<h4 className="text-sm font-medium mb-2">Message</h4>
+					<p className="text-sm bg-background rounded p-3 break-words">
+						{log.message}
+					</p>
+				</div>
+
+				{log.requestId && (
+					<div>
+						<h4 className="text-sm font-medium mb-2">Request ID</h4>
+						<p className="text-sm font-mono bg-background rounded p-3">
+							{log.requestId}
+						</p>
+					</div>
+				)}
+
+				{log.context && Object.keys(log.context).length > 0 && (
+					<div>
+						<h4 className="text-sm font-medium mb-2">Context</h4>
+						<pre className="bg-background rounded p-3 text-xs overflow-auto max-h-[400px]">
+							{JSON.stringify(log.context, null, 2)}
+						</pre>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
+
+function formatTime(timestamp: string) {
+	return new Date(timestamp).toLocaleTimeString();
+}

package/ui/src/pages/MonitoringPage.tsx

@@ -0,0 +1,46 @@
+import { AlertTriangle, FileText, Network } from 'lucide-react';
+import { NavLink, Outlet, useLocation } from 'react-router-dom';
+
+const tabs = [
+	{ path: '/monitoring/requests', label: 'Requests', icon: Network },
+	{ path: '/monitoring/logs', label: 'Logs', icon: FileText },
+	{ path: '/monitoring/exceptions', label: 'Exceptions', icon: AlertTriangle },
+] as const;
+
+export function MonitoringPage() {
+	const location = useLocation();
+
+	return (
+		<div className="flex flex-col h-full">
+			{/* Tab Bar */}
+			<div className="bg-surface border-b border-border px-4">
+				<nav className="flex gap-1">
+					{tabs.map((tab) => {
+						const Icon = tab.icon;
+						const isActive = location.pathname.startsWith(tab.path);
+
+						return (
+							<NavLink
+								key={tab.path}
+								to={tab.path}
+								className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
+									isActive
+										? 'text-accent border-accent'
+										: 'text-muted-foreground border-transparent hover:text-foreground hover:border-border'
+								}`}
+							>
+								<Icon className="h-4 w-4" />
+								{tab.label}
+							</NavLink>
+						);
+					})}
+				</nav>
+			</div>
+
+			{/* Content */}
+			<div className="flex-1 overflow-hidden">
+				<Outlet />
+			</div>
+		</div>
+	);
+}