@geekmidas/telescope 0.0.1

package/ui/src/components/ExceptionDetail.tsx

@@ -0,0 +1,100 @@
+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/LogDetail.tsx

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

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

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

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

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

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

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

@@ -0,0 +1,54 @@
+import { existsSync } from 'fs';
+import { resolve } from '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

@@ -0,0 +1,20 @@
+{
+  "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

@@ -0,0 +1,14 @@
+{
+  "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/logdetail.tsx",
+    "./src/components/requestdetail.tsx"
+  ],
+  "version": "5.8.2"
+}

package/ui/vite.config.ts

@@ -0,0 +1,13 @@
+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,
+  },
+});