@geekmidas/telescope 1.1.1 → 10.0.0-alpha.0

package/ui/src/components/ExceptionDetail.tsx

@@ -1,100 +0,0 @@
-import type { ExceptionEntry } from '../types';
-
-interface ExceptionDetailProps {
-	exception: ExceptionEntry;
-	onClose: () => void;
-}
-
-export function ExceptionDetail({ exception, onClose }: ExceptionDetailProps) {
-	return (
-		<div className="fixed top-0 right-0 bottom-0 w-1/2 max-w-3xl bg-bg-secondary border-l border-border flex flex-col z-50 shadow-2xl">
-			<div className="flex items-center justify-between p-4 border-b border-border">
-				<h2 className="text-base font-semibold text-red-400">
-					{exception.name}
-				</h2>
-				<button
-					className="text-slate-400 hover:text-slate-100 p-2 text-xl leading-none"
-					onClick={onClose}
-				>
-					&times;
-				</button>
-			</div>
-
-			<div className="flex-1 overflow-y-auto p-4">
-				<section className="mb-6">
-					<h3 className="text-xs font-semibold uppercase text-slate-500 mb-2">
-						Overview
-					</h3>
-					<div className="space-y-2 text-sm">
-						<div className="flex py-2 border-b border-border">
-							<span className="text-slate-500 min-w-32">Message</span>
-							<span className="wrap-break-word">{exception.message}</span>
-						</div>
-						<div className="flex py-2 border-b border-border">
-							<span className="text-slate-500 min-w-32">Handled</span>
-							<span>{exception.handled ? 'Yes' : 'No'}</span>
-						</div>
-						<div className="flex py-2 border-b border-border">
-							<span className="text-slate-500 min-w-32">Timestamp</span>
-							<span>{new Date(exception.timestamp).toLocaleString()}</span>
-						</div>
-						{exception.requestId && (
-							<div className="flex py-2 border-b border-border">
-								<span className="text-slate-500 min-w-32">Request ID</span>
-								<span className="font-mono text-xs">{exception.requestId}</span>
-							</div>
-						)}
-						{exception.tags && exception.tags.length > 0 && (
-							<div className="flex py-2">
-								<span className="text-slate-500 min-w-32">Tags</span>
-								<span>{exception.tags.join(', ')}</span>
-							</div>
-						)}
-					</div>
-				</section>
-
-				{exception.source && (
-					<section className="mb-6">
-						<h3 className="text-xs font-semibold uppercase text-slate-500 mb-2">
-							Source
-						</h3>
-						<div className="text-sm mb-2">
-							<span className="text-slate-500">File: </span>
-							<span>
-								{exception.source.file}
-								{exception.source.line && `:${exception.source.line}`}
-							</span>
-						</div>
-						{exception.source.code && (
-							<pre className="bg-bg-primary border border-border rounded-lg p-4 overflow-x-auto text-xs leading-relaxed">
-								{exception.source.code}
-							</pre>
-						)}
-					</section>
-				)}
-
-				<section className="mb-6">
-					<h3 className="text-xs font-semibold uppercase text-slate-500 mb-2">
-						Stack Trace
-					</h3>
-					<div className="text-xs leading-relaxed space-y-1">
-						{exception.stack.map((frame, index) => (
-							<div key={index} className="text-slate-400">
-								<span className="text-blue-400">
-									{frame.function || '<anonymous>'}
-								</span>
-								{frame.file && (
-									<span className="text-slate-500 ml-2">
-										at {frame.file}
-										{frame.line !== undefined && `:${frame.line}`}
-										{frame.column !== undefined && `:${frame.column}`}
-									</span>
-								)}
-							</div>
-						))}
-					</div>
-				</section>
-			</div>
-		</div>
-	);
-}

package/ui/src/components/FilterBar.tsx

@@ -1,162 +0,0 @@
-import type { Tab } from '../types';
-
-export interface RequestFilters {
-	search: string;
-	method: string;
-	status: string;
-}
-
-export interface LogFilters {
-	search: string;
-	level: string;
-}
-
-export interface ExceptionFilters {
-	search: string;
-}
-
-interface FilterBarProps {
-	tab: Tab;
-	requestFilters: RequestFilters;
-	logFilters: LogFilters;
-	exceptionFilters: ExceptionFilters;
-	onRequestFiltersChange: (filters: RequestFilters) => void;
-	onLogFiltersChange: (filters: LogFilters) => void;
-	onExceptionFiltersChange: (filters: ExceptionFilters) => void;
-	onClear: () => void;
-}
-
-const HTTP_METHODS = ['', 'GET', 'POST', 'PUT', 'PATCH', 'DELETE'];
-const STATUS_RANGES = [
-	{ value: '', label: 'All Status' },
-	{ value: '2xx', label: '2xx Success' },
-	{ value: '3xx', label: '3xx Redirect' },
-	{ value: '4xx', label: '4xx Client Error' },
-	{ value: '5xx', label: '5xx Server Error' },
-];
-const LOG_LEVELS = ['', 'debug', 'info', 'warn', 'error'];
-
-export function FilterBar({
-	tab,
-	requestFilters,
-	logFilters,
-	exceptionFilters,
-	onRequestFiltersChange,
-	onLogFiltersChange,
-	onExceptionFiltersChange,
-	onClear,
-}: FilterBarProps) {
-	const hasActiveFilters =
-		(tab === 'requests' &&
-			(requestFilters.search ||
-				requestFilters.method ||
-				requestFilters.status)) ||
-		(tab === 'logs' && (logFilters.search || logFilters.level)) ||
-		(tab === 'exceptions' && exceptionFilters.search);
-
-	return (
-		<div className="bg-bg-secondary border-b border-border px-4 py-3 flex items-center gap-3">
-			{tab === 'requests' && (
-				<>
-					<input
-						type="text"
-						placeholder="Search path..."
-						value={requestFilters.search}
-						onChange={(e) =>
-							onRequestFiltersChange({
-								...requestFilters,
-								search: e.target.value,
-							})
-						}
-						className="bg-bg-tertiary border border-border rounded px-3 py-1.5 text-sm text-slate-100 placeholder-slate-500 focus:outline-none focus:border-blue-500 w-64"
-					/>
-					<select
-						value={requestFilters.method}
-						onChange={(e) =>
-							onRequestFiltersChange({
-								...requestFilters,
-								method: e.target.value,
-							})
-						}
-						className="bg-bg-tertiary border border-border rounded px-3 py-1.5 text-sm text-slate-100 focus:outline-none focus:border-blue-500"
-					>
-						<option value="">All Methods</option>
-						{HTTP_METHODS.filter(Boolean).map((method) => (
-							<option key={method} value={method}>
-								{method}
-							</option>
-						))}
-					</select>
-					<select
-						value={requestFilters.status}
-						onChange={(e) =>
-							onRequestFiltersChange({
-								...requestFilters,
-								status: e.target.value,
-							})
-						}
-						className="bg-bg-tertiary border border-border rounded px-3 py-1.5 text-sm text-slate-100 focus:outline-none focus:border-blue-500"
-					>
-						{STATUS_RANGES.map((range) => (
-							<option key={range.value} value={range.value}>
-								{range.label}
-							</option>
-						))}
-					</select>
-				</>
-			)}
-
-			{tab === 'logs' && (
-				<>
-					<input
-						type="text"
-						placeholder="Search message..."
-						value={logFilters.search}
-						onChange={(e) =>
-							onLogFiltersChange({ ...logFilters, search: e.target.value })
-						}
-						className="bg-bg-tertiary border border-border rounded px-3 py-1.5 text-sm text-slate-100 placeholder-slate-500 focus:outline-none focus:border-blue-500 w-64"
-					/>
-					<select
-						value={logFilters.level}
-						onChange={(e) =>
-							onLogFiltersChange({ ...logFilters, level: e.target.value })
-						}
-						className="bg-bg-tertiary border border-border rounded px-3 py-1.5 text-sm text-slate-100 focus:outline-none focus:border-blue-500"
-					>
-						<option value="">All Levels</option>
-						{LOG_LEVELS.filter(Boolean).map((level) => (
-							<option key={level} value={level}>
-								{level}
-							</option>
-						))}
-					</select>
-				</>
-			)}
-
-			{tab === 'exceptions' && (
-				<input
-					type="text"
-					placeholder="Search exception..."
-					value={exceptionFilters.search}
-					onChange={(e) =>
-						onExceptionFiltersChange({
-							...exceptionFilters,
-							search: e.target.value,
-						})
-					}
-					className="bg-bg-tertiary border border-border rounded px-3 py-1.5 text-sm text-slate-100 placeholder-slate-500 focus:outline-none focus:border-blue-500 w-64"
-				/>
-			)}
-
-			{hasActiveFilters && (
-				<button
-					onClick={onClear}
-					className="text-xs text-slate-400 hover:text-slate-200 px-2 py-1 rounded hover:bg-bg-tertiary transition-colors"
-				>
-					Clear filters
-				</button>
-			)}
-		</div>
-	);
-}

package/ui/src/components/LogDetail.tsx

@@ -1,91 +0,0 @@
-import type { LogEntry } from '../types';
-
-interface LogDetailProps {
-	log: LogEntry;
-	onClose: () => void;
-}
-
-export function LogDetail({ log, onClose }: LogDetailProps) {
-	const formatJson = (data: unknown) => {
-		try {
-			return JSON.stringify(data, null, 2);
-		} catch {
-			return String(data);
-		}
-	};
-
-	const getLogLevelColor = (level: string) => {
-		const colors: Record<string, string> = {
-			debug: 'bg-slate-500/20 text-slate-400',
-			info: 'bg-blue-500/20 text-blue-400',
-			warn: 'bg-amber-500/20 text-amber-400',
-			error: 'bg-red-500/20 text-red-400',
-		};
-		return colors[level] || 'bg-slate-500/20 text-slate-400';
-	};
-
-	return (
-		<div className="fixed top-0 right-0 bottom-0 w-1/2 max-w-3xl bg-bg-secondary border-l border-border flex flex-col z-50 shadow-2xl">
-			<div className="flex items-center justify-between p-4 border-b border-border">
-				<h2 className="text-base font-semibold flex items-center gap-2">
-					<span
-						className={`px-2 py-1 rounded text-xs ${getLogLevelColor(log.level)}`}
-					>
-						{log.level}
-					</span>
-					Log Entry
-				</h2>
-				<button
-					className="text-slate-400 hover:text-slate-100 p-2 text-xl leading-none"
-					onClick={onClose}
-				>
-					&times;
-				</button>
-			</div>
-
-			<div className="flex-1 overflow-y-auto p-4">
-				<section className="mb-6">
-					<h3 className="text-xs font-semibold uppercase text-slate-500 mb-2">
-						Overview
-					</h3>
-					<div className="space-y-2 text-sm">
-						<div className="flex py-2 border-b border-border">
-							<span className="text-slate-500 min-w-32">Level</span>
-							<span>{log.level}</span>
-						</div>
-						<div className="flex py-2 border-b border-border">
-							<span className="text-slate-500 min-w-32">Timestamp</span>
-							<span>{new Date(log.timestamp).toLocaleString()}</span>
-						</div>
-						{log.requestId && (
-							<div className="flex py-2">
-								<span className="text-slate-500 min-w-32">Request ID</span>
-								<span className="font-mono text-xs">{log.requestId}</span>
-							</div>
-						)}
-					</div>
-				</section>
-
-				<section className="mb-6">
-					<h3 className="text-xs font-semibold uppercase text-slate-500 mb-2">
-						Message
-					</h3>
-					<pre className="bg-bg-primary border border-border rounded-lg p-4 overflow-x-auto text-xs leading-relaxed whitespace-pre-wrap">
-						{log.message}
-					</pre>
-				</section>
-
-				{log.context && Object.keys(log.context).length > 0 && (
-					<section className="mb-6">
-						<h3 className="text-xs font-semibold uppercase text-slate-500 mb-2">
-							Context
-						</h3>
-						<pre className="bg-bg-primary border border-border rounded-lg p-4 overflow-x-auto text-xs leading-relaxed">
-							{formatJson(log.context)}
-						</pre>
-					</section>
-				)}
-			</div>
-		</div>
-	);
-}

package/ui/src/components/RequestDetail.tsx

@@ -1,143 +0,0 @@
-import type { RequestEntry } from '../types';
-
-interface RequestDetailProps {
-	request: RequestEntry;
-	onClose: () => void;
-}
-
-export function RequestDetail({ request, onClose }: RequestDetailProps) {
-	const formatJson = (data: unknown) => {
-		try {
-			return JSON.stringify(data, null, 2);
-		} catch {
-			return String(data);
-		}
-	};
-
-	const getMethodColor = (method: string) => {
-		const colors: Record<string, string> = {
-			GET: 'bg-green-500/20 text-green-400',
-			POST: 'bg-blue-500/20 text-blue-400',
-			PUT: 'bg-amber-500/20 text-amber-400',
-			PATCH: 'bg-purple-500/20 text-purple-400',
-			DELETE: 'bg-red-500/20 text-red-400',
-		};
-		return colors[method] || 'bg-slate-500/20 text-slate-400';
-	};
-
-	return (
-		<div className="fixed top-0 right-0 bottom-0 w-1/2 max-w-3xl bg-bg-secondary border-l border-border flex flex-col z-50 shadow-2xl">
-			<div className="flex items-center justify-between p-4 border-b border-border">
-				<h2 className="text-base font-semibold flex items-center gap-2">
-					<span
-						className={`px-2 py-1 rounded text-xs ${getMethodColor(request.method)}`}
-					>
-						{request.method}
-					</span>
-					<span className="truncate">{request.path}</span>
-				</h2>
-				<button
-					className="text-slate-400 hover:text-slate-100 p-2 text-xl leading-none"
-					onClick={onClose}
-				>
-					&times;
-				</button>
-			</div>
-
-			<div className="flex-1 overflow-y-auto p-4">
-				<section className="mb-6">
-					<h3 className="text-xs font-semibold uppercase text-slate-500 mb-2">
-						Overview
-					</h3>
-					<div className="space-y-2 text-sm">
-						<div className="flex py-2 border-b border-border">
-							<span className="text-slate-500 min-w-32">Status</span>
-							<span>{request.status}</span>
-						</div>
-						<div className="flex py-2 border-b border-border">
-							<span className="text-slate-500 min-w-32">Duration</span>
-							<span>{request.duration.toFixed(2)}ms</span>
-						</div>
-						<div className="flex py-2 border-b border-border">
-							<span className="text-slate-500 min-w-32">URL</span>
-							<span className="break-all">{request.url}</span>
-						</div>
-						<div className="flex py-2 border-b border-border">
-							<span className="text-slate-500 min-w-32">Timestamp</span>
-							<span>{new Date(request.timestamp).toLocaleString()}</span>
-						</div>
-						{request.ip && (
-							<div className="flex py-2 border-b border-border">
-								<span className="text-slate-500 min-w-32">IP</span>
-								<span>{request.ip}</span>
-							</div>
-						)}
-						{request.userId && (
-							<div className="flex py-2 border-b border-border">
-								<span className="text-slate-500 min-w-32">User ID</span>
-								<span>{request.userId}</span>
-							</div>
-						)}
-						{request.tags && request.tags.length > 0 && (
-							<div className="flex py-2">
-								<span className="text-slate-500 min-w-32">Tags</span>
-								<span>{request.tags.join(', ')}</span>
-							</div>
-						)}
-					</div>
-				</section>
-
-				<section className="mb-6">
-					<h3 className="text-xs font-semibold uppercase text-slate-500 mb-2">
-						Request Headers
-					</h3>
-					<pre className="bg-bg-primary border border-border rounded-lg p-4 overflow-x-auto text-xs leading-relaxed">
-						{formatJson(request.headers)}
-					</pre>
-				</section>
-
-				{request.query && Object.keys(request.query).length > 0 && (
-					<section className="mb-6">
-						<h3 className="text-xs font-semibold uppercase text-slate-500 mb-2">
-							Query Parameters
-						</h3>
-						<pre className="bg-bg-primary border border-border rounded-lg p-4 overflow-x-auto text-xs leading-relaxed">
-							{formatJson(request.query)}
-						</pre>
-					</section>
-				)}
-
-				{request.body !== undefined && (
-					<section className="mb-6">
-						<h3 className="text-xs font-semibold uppercase text-slate-500 mb-2">
-							Request Body
-						</h3>
-						<pre className="bg-bg-primary border border-border rounded-lg p-4 overflow-x-auto text-xs leading-relaxed">
-							{formatJson(request.body)}
-						</pre>
-					</section>
-				)}
-
-				<section className="mb-6">
-					<h3 className="text-xs font-semibold uppercase text-slate-500 mb-2">
-						Response Headers
-					</h3>
-					<pre className="bg-bg-primary border border-border rounded-lg p-4 overflow-x-auto text-xs leading-relaxed">
-						{formatJson(request.responseHeaders)}
-					</pre>
-				</section>
-
-				{request.responseBody !== undefined && (
-					<section className="mb-6">
-						<h3 className="text-xs font-semibold uppercase text-slate-500 mb-2">
-							Response Body
-						</h3>
-						<pre className="bg-bg-primary border border-border rounded-lg p-4 overflow-x-auto text-xs leading-relaxed">
-							{formatJson(request.responseBody)}
-						</pre>
-					</section>
-				)}
-			</div>
-		</div>
-	);
-}

package/ui/src/main.tsx

@@ -1,10 +0,0 @@
-import { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
-import { App } from './App';
-import './styles.css';
-
-createRoot(document.getElementById('root')!).render(
-	<StrictMode>
-		<App />
-	</StrictMode>,
-);

package/ui/src/styles.css

@@ -1,11 +0,0 @@
-@import "tailwindcss";
-
-@theme {
-	--color-bg-primary: #0f172a;
-	--color-bg-secondary: #1e293b;
-	--color-bg-tertiary: #334155;
-	--color-border: #334155;
-	--font-family-mono:
-		ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
-		monospace;
-}

package/ui/src/types.ts

@@ -1,63 +0,0 @@
-export interface RequestEntry {
-	id: string;
-	method: string;
-	path: string;
-	url: string;
-	headers: Record<string, string>;
-	body?: unknown;
-	query?: Record<string, string>;
-	status: number;
-	responseHeaders: Record<string, string>;
-	responseBody?: unknown;
-	duration: number;
-	timestamp: string;
-	ip?: string;
-	userId?: string;
-	tags?: string[];
-}
-
-export interface ExceptionEntry {
-	id: string;
-	name: string;
-	message: string;
-	stack: Array<{
-		file?: string;
-		line?: number;
-		column?: number;
-		function?: string;
-	}>;
-	source?: {
-		file?: string;
-		line?: number;
-		code?: string;
-	};
-	requestId?: string;
-	timestamp: string;
-	handled: boolean;
-	tags?: string[];
-}
-
-export interface LogEntry {
-	id: string;
-	level: 'debug' | 'info' | 'warn' | 'error';
-	message: string;
-	context?: Record<string, unknown>;
-	requestId?: string;
-	timestamp: string;
-}
-
-export interface TelescopeStats {
-	requests: number;
-	exceptions: number;
-	logs: number;
-	oldestEntry?: string;
-	newestEntry?: string;
-}
-
-export type Tab = 'requests' | 'exceptions' | 'logs';
-
-export interface WebSocketMessage {
-	type: 'request' | 'exception' | 'log' | 'connected';
-	payload: unknown;
-	timestamp: number;
-}

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

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

package/ui/src/vite-plugin-gkm-config.ts

@@ -1,54 +0,0 @@
-import { existsSync } from 'node:fs';
-import { resolve } from 'node:path';
-import type { Plugin } from 'vite';
-
-interface GkmConfig {
-	server?: boolean | { port?: number };
-	telescope?: { port?: number };
-}
-
-/**
- * Vite plugin that reads configuration from gkm.config.ts
- * to configure the dev server proxy.
- */
-export function gkmConfigPlugin(): Plugin {
-	let serverPort = 3000;
-
-	return {
-		name: 'gkm-config',
-		async config() {
-			const cwd = process.cwd();
-			const configPath = resolve(cwd, 'gkm.config.ts');
-
-			if (existsSync(configPath)) {
-				try {
-					const config = (await import(configPath)).default as GkmConfig;
-
-					// Check for telescope.port first, then server.port
-					if (config.telescope?.port) {
-						serverPort = config.telescope.port;
-					} else if (typeof config.server === 'object' && config.server.port) {
-						serverPort = config.server.port;
-					}
-				} catch {
-					// Silently fall back to default port
-				}
-			}
-
-			return {
-				server: {
-					proxy: {
-						'/__telescope/api': {
-							target: `http://localhost:${serverPort}`,
-							changeOrigin: true,
-						},
-						'/__telescope/ws': {
-							target: `ws://localhost:${serverPort}`,
-							ws: true,
-						},
-					},
-				},
-			};
-		},
-	};
-}

package/ui/tsconfig.json

@@ -1,20 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "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/vite-plugin-gkm-config.ts","./src/components/exceptiondetail.tsx","./src/components/filterbar.tsx","./src/components/logdetail.tsx","./src/components/requestdetail.tsx"],"version":"5.8.2"}

package/ui/vite.config.ts

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