@theihtisham/devtools-with-cloud 1.0.0

package/src/lib/websocket/frames.ts

@@ -0,0 +1,96 @@
+/**
+ * WebSocket Frame Utilities — parse, format, and detect WebSocket frame types.
+ */
+
+import type { WSFrame, WSMessageType } from './types';
+
+/**
+ * Parse raw data into a WSFrame representation.
+ * Note: This provides a simplified frame for display purposes.
+ * Full frame parsing requires a proper WebSocket frame decoder.
+ */
+export function parseFrame(data: string | ArrayBuffer): WSFrame {
+  if (typeof data === 'string') {
+    return {
+      isFinal: true,
+      opcode: 0x01, // text frame
+      masked: false,
+      payloadLength: new TextEncoder().encode(data).length,
+      payload: data,
+    };
+  }
+
+  // Binary data
+  const view = new Uint8Array(data);
+  return {
+    isFinal: true,
+    opcode: 0x02, // binary frame
+    masked: false,
+    payloadLength: view.length,
+    payload: `[Binary: ${view.length} bytes]`,
+  };
+}
+
+/**
+ * Format a message for display in the UI.
+ */
+export function formatMessage(data: string, type: WSMessageType): string {
+  switch (type) {
+    case 'json':
+      try {
+        return JSON.stringify(JSON.parse(data), null, 2);
+      } catch {
+        return data;
+      }
+    case 'binary':
+      return `[Binary data: ${data.length} chars]`;
+    case 'ping':
+      return `[PING] ${data}`;
+    case 'pong':
+      return `[PONG] ${data}`;
+    case 'text':
+    default:
+      return data;
+  }
+}
+
+/**
+ * Auto-detect the type of a WebSocket message.
+ */
+export function detectMessageType(data: string): WSMessageType {
+  if (!data) return 'text';
+
+  // Try JSON parse
+  try {
+    const parsed = JSON.parse(data);
+    if (typeof parsed === 'object' && parsed !== null) {
+      return 'json';
+    }
+  } catch {
+    // Not JSON
+  }
+
+  return 'text';
+}
+
+/**
+ * Get a human-readable opcode name.
+ */
+export function getOpcodeName(opcode: number): string {
+  const opcodes: Record<number, string> = {
+    0x00: 'continuation',
+    0x01: 'text',
+    0x02: 'binary',
+    0x08: 'close',
+    0x09: 'ping',
+    0x0a: 'pong',
+  };
+  return opcodes[opcode] ?? `unknown(0x${opcode.toString(16)})`;
+}
+
+/**
+ * Calculate the byte size of a string message.
+ */
+export function getByteSize(data: string): number {
+  return new TextEncoder().encode(data).length;
+}

package/src/lib/websocket/history.ts

@@ -0,0 +1,121 @@
+/**
+ * WebSocket Message History — records, searches, and exports WebSocket messages.
+ */
+
+import type { WSMessage } from './types';
+
+export class MessageHistory {
+  private messages: WSMessage[] = [];
+  private maxSize: number;
+
+  constructor(maxSize: number = 1000) {
+    this.maxSize = maxSize;
+  }
+
+  /**
+   * Record a message (sent or received).
+   * Oldest messages are evicted when maxSize is exceeded.
+   */
+  add(message: WSMessage): void {
+    this.messages.push(message);
+
+    // Evict oldest messages if over capacity
+    while (this.messages.length > this.maxSize) {
+      this.messages.shift();
+    }
+  }
+
+  /**
+   * Get all recorded messages.
+   */
+  getHistory(): WSMessage[] {
+    return [...this.messages];
+  }
+
+  /**
+   * Get messages filtered by direction.
+   */
+  getByDirection(direction: 'sent' | 'received'): WSMessage[] {
+    return this.messages.filter((m) => m.direction === direction);
+  }
+
+  /**
+   * Get messages within a time range.
+   */
+  getByTimeRange(start: number, end: number): WSMessage[] {
+    return this.messages.filter((m) => m.timestamp >= start && m.timestamp <= end);
+  }
+
+  /**
+   * Get the N most recent messages.
+   */
+  getRecent(count: number): WSMessage[] {
+    return this.messages.slice(-count);
+  }
+
+  /**
+   * Clear all recorded messages.
+   */
+  clear(): void {
+    this.messages = [];
+  }
+
+  /**
+   * Get the total number of messages.
+   */
+  get count(): number {
+    return this.messages.length;
+  }
+
+  /**
+   * Get total bytes across all messages.
+   */
+  get totalBytes(): number {
+    return this.messages.reduce((sum, m) => sum + m.size, 0);
+  }
+
+  /**
+   * Search messages by content (substring match).
+   */
+  search(query: string): WSMessage[] {
+    const lowerQuery = query.toLowerCase();
+    return this.messages.filter((m) => m.data.toLowerCase().includes(lowerQuery));
+  }
+
+  /**
+   * Search messages by type.
+   */
+  searchByType(type: WSMessage['type']): WSMessage[] {
+    return this.messages.filter((m) => m.type === type);
+  }
+
+  /**
+   * Export all messages as a JSON string.
+   */
+  export(): string {
+    return JSON.stringify(this.messages, null, 2);
+  }
+
+  /**
+   * Export messages as a JSON array (for programmatic use).
+   */
+  toArray(): WSMessage[] {
+    return this.messages.map((m) => ({ ...m }));
+  }
+
+  /**
+   * Import messages from a JSON string.
+   */
+  import(json: string): void {
+    try {
+      const parsed = JSON.parse(json) as WSMessage[];
+      if (Array.isArray(parsed)) {
+        for (const msg of parsed) {
+          this.add(msg);
+        }
+      }
+    } catch {
+      throw new Error('Invalid JSON: cannot import message history.');
+    }
+  }
+}

package/src/lib/websocket/index.ts

@@ -0,0 +1,25 @@
+/**
+ * WebSocket module — client, message history, and frame utilities.
+ */
+
+export type {
+  WSConfig,
+  WSConnectionState,
+  WSMessage,
+  WSFrame,
+  WSConnection,
+  WSClientEvents,
+  WSMessageType,
+} from './types';
+
+export { WebSocketClient } from './client';
+
+export { MessageHistory } from './history';
+
+export {
+  parseFrame,
+  formatMessage,
+  detectMessageType,
+  getOpcodeName,
+  getByteSize,
+} from './frames';

package/src/lib/websocket/types.ts

@@ -0,0 +1,57 @@
+/**
+ * WebSocket types for the testing client.
+ */
+
+export type WSConnectionState = 'connecting' | 'connected' | 'disconnecting' | 'disconnected';
+
+export type WSMessageType = 'text' | 'json' | 'binary' | 'ping' | 'pong';
+
+export interface WSConfig {
+  url: string;
+  protocols?: string[];
+  headers?: Record<string, string>;
+  /** Auto-reconnect on disconnect */
+  reconnect?: boolean;
+  /** Max reconnect attempts */
+  maxReconnectAttempts?: number;
+  /** Reconnect delay in ms */
+  reconnectDelay?: number;
+}
+
+export interface WSMessage {
+  id: string;
+  direction: 'sent' | 'received';
+  data: string;
+  type: WSMessageType;
+  timestamp: number;
+  size: number;
+}
+
+export interface WSFrame {
+  isFinal: boolean;
+  opcode: number;
+  masked: boolean;
+  payloadLength: number;
+  payload: string;
+}
+
+export interface WSConnection {
+  id: string;
+  url: string;
+  state: WSConnectionState;
+  connectedAt?: number;
+  closedAt?: number;
+  closeCode?: number;
+  closeReason?: string;
+  messageCount: number;
+  bytesReceived: number;
+  bytesSent: number;
+}
+
+export interface WSClientEvents {
+  message: (message: WSMessage) => void;
+  open: () => void;
+  close: (code: number, reason: string) => void;
+  error: (error: Error) => void;
+  stateChange: (state: WSConnectionState) => void;
+}

package/src/types/ai.ts

@@ -0,0 +1,28 @@
+export interface AiTestGeneration {
+  requestId: string;
+  response: unknown;
+  prompt?: string;
+}
+
+export interface AiEndpointDiscovery {
+  code: string;
+  framework: 'express' | 'nextjs' | 'fastapi' | 'django' | 'flask' | 'spring' | 'auto';
+  workspaceId: string;
+}
+
+export interface AiExplanation {
+  response: unknown;
+  question?: string;
+}
+
+export interface AiSuggestion {
+  request: unknown;
+  response?: unknown;
+}
+
+export interface Suggestion {
+  category: 'security' | 'performance' | 'best-practice' | 'error-handling';
+  severity: 'info' | 'warning' | 'critical';
+  title: string;
+  description: string;
+}

package/src/types/collection.ts

@@ -0,0 +1,24 @@
+export interface Collection {
+  id: string;
+  name: string;
+  description?: string;
+  workspaceId: string;
+  parentId?: string;
+  variables: Record<string, string>;
+  preScript?: string;
+  postScript?: string;
+  sortOrder: number;
+  createdAt: string;
+  updatedAt: string;
+  children?: Collection[];
+  requests?: CollectionRequest[];
+}
+
+export interface CollectionRequest {
+  id: string;
+  name: string;
+  method: string;
+  url: string;
+  description?: string;
+  sortOrder: number;
+}

package/src/types/environment.ts

@@ -0,0 +1,16 @@
+export interface Environment {
+  id: string;
+  name: string;
+  workspaceId: string;
+  variables: EnvironmentVariable[];
+  isDefault: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface EnvironmentVariable {
+  key: string;
+  value: string;
+  type: 'string' | 'number' | 'boolean' | 'secret';
+  enabled: boolean;
+}

package/src/types/request.ts

@@ -0,0 +1,54 @@
+import type { HttpMethod, KeyValue, BodyType, RequestBody, AuthConfig } from '@/lib/utils/validation';
+
+export interface ApiRequest {
+  id: string;
+  name: string;
+  description?: string;
+  collectionId: string;
+  method: HttpMethod;
+  url: string;
+  headers: KeyValue[];
+  params: KeyValue[];
+  body?: RequestBody;
+  bodyType: BodyType;
+  auth?: AuthConfig;
+  preRequestScript?: string;
+  tests?: string;
+  sortOrder: number;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface CreateApiRequest {
+  name: string;
+  description?: string;
+  collectionId: string;
+  method?: HttpMethod;
+  url: string;
+  headers?: KeyValue[];
+  params?: KeyValue[];
+  body?: RequestBody;
+  bodyType?: BodyType;
+  auth?: AuthConfig;
+  preRequestScript?: string;
+  tests?: string;
+  sortOrder?: number;
+}
+
+export interface UpdateApiRequest extends Partial<CreateApiRequest> {
+  id: string;
+}
+
+export interface ExecuteApiRequest {
+  method: HttpMethod;
+  url: string;
+  headers?: KeyValue[];
+  params?: KeyValue[];
+  body?: RequestBody;
+  bodyType?: BodyType;
+  auth?: AuthConfig;
+  timeout?: number;
+  followRedirects?: boolean;
+  maxRedirects?: number;
+  verifySSL?: boolean;
+}

package/src/types/response.ts

@@ -0,0 +1,37 @@
+export interface ApiResponse {
+  status: number;
+  statusText: string;
+  headers: Record<string, string>;
+  body: string;
+  bodySize: number;
+  timing: {
+    dns: number;
+    tcp: number;
+    tls: number;
+    firstByte: number;
+    total: number;
+  };
+  url: string;
+}
+
+export interface HistoryEntry {
+  id: string;
+  requestId: string;
+  method: string;
+  url: string;
+  status?: number;
+  statusText?: string;
+  headers?: Record<string, string>;
+  body?: string;
+  bodySize?: number;
+  timing?: {
+    dns: number;
+    tcp: number;
+    tls: number;
+    firstByte: number;
+    total: number;
+  };
+  testResults?: unknown;
+  duration?: number;
+  createdAt: string;
+}

package/tailwind.config.ts

@@ -0,0 +1,82 @@
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  content: [
+    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        method: {
+          get: '#61AFFE',
+          post: '#49CC90',
+          put: '#FCA130',
+          patch: '#50E3C2',
+          delete: '#F93E3E',
+          head: '#9012FE',
+          options: '#0D5AA7',
+          trace: '#808080',
+          connect: '#808080',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      keyframes: {
+        'fade-in': {
+          from: { opacity: '0' },
+          to: { opacity: '1' },
+        },
+        'slide-in': {
+          from: { transform: 'translateX(-10px)', opacity: '0' },
+          to: { transform: 'translateX(0)', opacity: '1' },
+        },
+      },
+      animation: {
+        'fade-in': 'fade-in 0.2s ease-out',
+        'slide-in': 'slide-in 0.2s ease-out',
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default config;

package/tests/lib/env/resolver.test.ts

@@ -0,0 +1,108 @@
+import { describe, it, expect } from 'vitest';
+import {
+  resolveVariables,
+  extractVariables,
+  hasUnresolvedVariables,
+} from '@/lib/env/resolver';
+
+describe('resolveVariables', () => {
+  it('should resolve a single variable', () => {
+    expect(resolveVariables('{{base_url}}', { base_url: 'https://api.example.com' }))
+      .toBe('https://api.example.com');
+  });
+
+  it('should resolve multiple variables', () => {
+    expect(
+      resolveVariables('{{base_url}}/users/{{id}}', {
+        base_url: 'https://api.example.com',
+        id: '123',
+      }),
+    ).toBe('https://api.example.com/users/123');
+  });
+
+  it('should leave unresolved variables as-is', () => {
+    expect(resolveVariables('{{unknown}}/path', {})).toBe('{{unknown}}/path');
+  });
+
+  it('should handle mixed resolved and unresolved variables', () => {
+    expect(
+      resolveVariables('{{base_url}}/{{unknown}}', { base_url: 'https://api.example.com' }),
+    ).toBe('https://api.example.com/{{unknown}}');
+  });
+
+  it('should handle string with no variables', () => {
+    expect(resolveVariables('plain string', { key: 'value' })).toBe('plain string');
+  });
+
+  it('should handle empty string', () => {
+    expect(resolveVariables('', { key: 'value' })).toBe('');
+  });
+
+  it('should resolve same variable multiple times', () => {
+    expect(resolveVariables('{{a}}-{{a}}', { a: 'X' })).toBe('X-X');
+  });
+
+  it('should resolve variables in header values', () => {
+    expect(
+      resolveVariables('Bearer {{token}}', { token: 'abc123' }),
+    ).toBe('Bearer abc123');
+  });
+
+  it('should only resolve word-character variable names', () => {
+    // {{base-url}} with hyphen should NOT match \w+ pattern
+    expect(resolveVariables('{{base-url}}', { 'base-url': 'test' })).toBe('{{base-url}}');
+  });
+
+  it('should handle adjacent variables', () => {
+    expect(resolveVariables('{{a}}{{b}}', { a: 'hello', b: 'world' })).toBe('helloworld');
+  });
+});
+
+describe('extractVariables', () => {
+  it('should extract single variable', () => {
+    expect(extractVariables('{{base_url}}')).toEqual(['base_url']);
+  });
+
+  it('should extract multiple unique variables', () => {
+    expect(extractVariables('{{a}} and {{b}}')).toEqual(['a', 'b']);
+  });
+
+  it('should deduplicate variables', () => {
+    expect(extractVariables('{{a}} {{a}}')).toEqual(['a']);
+  });
+
+  it('should return empty array for no variables', () => {
+    expect(extractVariables('no variables here')).toEqual([]);
+  });
+
+  it('should return empty array for empty string', () => {
+    expect(extractVariables('')).toEqual([]);
+  });
+
+  it('should extract variables in complex strings', () => {
+    const result = extractVariables('https://{{host}}/api/{{version}}/users/{{user_id}}');
+    expect(result).toEqual(['host', 'version', 'user_id']);
+  });
+});
+
+describe('hasUnresolvedVariables', () => {
+  it('should return true for string with variables', () => {
+    expect(hasUnresolvedVariables('{{base_url}}')).toBe(true);
+  });
+
+  it('should return false for plain string', () => {
+    expect(hasUnresolvedVariables('https://api.example.com')).toBe(false);
+  });
+
+  it('should return false for empty string', () => {
+    expect(hasUnresolvedVariables('')).toBe(false);
+  });
+
+  it('should return true for string with multiple variables', () => {
+    expect(hasUnresolvedVariables('{{a}}/{{b}}')).toBe(true);
+  });
+
+  it('should return true even for single variable among text', () => {
+    expect(hasUnresolvedVariables('prefix/{{var}}/suffix')).toBe(true);
+  });
+});