@theihtisham/devtools-with-cloud 1.0.0

package/src/lib/utils/format.ts

@@ -0,0 +1,142 @@
+/**
+ * Format JSON string with pretty printing and validation.
+ */
+export function formatJson(input: string, indent: number = 2): string {
+  try {
+    const parsed = JSON.parse(input);
+    return JSON.stringify(parsed, null, indent);
+  } catch {
+    return input;
+  }
+}
+
+/**
+ * Minify JSON string.
+ */
+export function minifyJson(input: string): string {
+  try {
+    const parsed = JSON.parse(input);
+    return JSON.stringify(parsed);
+  } catch {
+    return input;
+  }
+}
+
+/**
+ * Validate JSON string and return parsed result or error message.
+ */
+export function validateJson(input: string): { valid: true; data: unknown } | { valid: false; error: string } {
+  try {
+    const data = JSON.parse(input);
+    return { valid: true, data };
+  } catch (e) {
+    const message = e instanceof Error ? e.message : 'Invalid JSON';
+    return { valid: false, error: message };
+  }
+}
+
+/**
+ * Format XML string with proper indentation.
+ */
+export function formatXml(input: string, indent: number = 2): string {
+  const PADDING = ' '.repeat(indent);
+  let formatted = '';
+  let depth = 0;
+
+  // Remove existing whitespace between tags
+  const xml = input.replace(/(>)\s*(<)/g, '$1\n$2').split('\n');
+
+  for (const node of xml) {
+    const trimmed = node.trim();
+    if (trimmed.length === 0) continue;
+
+    // Closing tag
+    if (trimmed.startsWith('</')) {
+      depth = Math.max(0, depth - 1);
+    }
+
+    formatted += PADDING.repeat(depth) + trimmed + '\n';
+
+    // Opening tag (not self-closing, not closing, not processing instruction)
+    if (
+      trimmed.startsWith('<') &&
+      !trimmed.startsWith('</') &&
+      !trimmed.startsWith('<?') &&
+      !trimmed.startsWith('<!') &&
+      !trimmed.endsWith('/>') &&
+      !trimmed.includes('</')
+    ) {
+      depth++;
+    }
+  }
+
+  return formatted.trimEnd();
+}
+
+/**
+ * Format HTML string with proper indentation.
+ */
+export function formatHtml(input: string, indent: number = 2): string {
+  const PADDING = ' '.repeat(indent);
+  const selfClosingTags = new Set([
+    'area', 'base', 'br', 'col', 'embed', 'hr', 'img',
+    'input', 'link', 'meta', 'param', 'source', 'track', 'wbr',
+  ]);
+
+  let formatted = '';
+  let depth = 0;
+
+  // Split on tags
+  const tokens = input.replace(/>\s*</g, '>\n<').split('\n');
+
+  for (const token of tokens) {
+    const trimmed = token.trim();
+    if (trimmed.length === 0) continue;
+
+    // Closing tag
+    const closingMatch = trimmed.match(/^<\/(\w+)/);
+    if (closingMatch) {
+      depth = Math.max(0, depth - 1);
+      formatted += PADDING.repeat(depth) + trimmed + '\n';
+      continue;
+    }
+
+    // Opening tag
+    const openingMatch = trimmed.match(/^<(\w+)/);
+    if (openingMatch) {
+      const tagName = openingMatch[1]?.toLowerCase();
+      formatted += PADDING.repeat(depth) + trimmed + '\n';
+
+      if (tagName && !selfClosingTags.has(tagName) && !trimmed.endsWith('/>')) {
+        depth++;
+      }
+      continue;
+    }
+
+    // Text content
+    formatted += PADDING.repeat(depth) + trimmed + '\n';
+  }
+
+  return formatted.trimEnd();
+}
+
+/**
+ * Format byte size to human-readable string.
+ */
+export function formatBytes(bytes: number): string {
+  if (bytes === 0) return '0 B';
+  const units = ['B', 'KB', 'MB', 'GB'];
+  const k = 1024;
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  const size = bytes / Math.pow(k, i);
+  return `${size.toFixed(i === 0 ? 0 : 1)} ${units[i]}`;
+}
+
+/**
+ * Format duration in milliseconds to human-readable string.
+ */
+export function formatDuration(ms: number): string {
+  if (ms < 1) return `${Math.round(ms * 1000)}us`;
+  if (ms < 1000) return `${Math.round(ms)}ms`;
+  return `${(ms / 1000).toFixed(2)}s`;
+}

package/src/lib/utils/syntax-highlight.ts

@@ -0,0 +1,108 @@
+/**
+ * Lightweight syntax highlighting for JSON/XML/HTML.
+ * Returns HTML string with <span> elements for styling.
+ */
+
+type TokenType = 'key' | 'string' | 'number' | 'boolean' | 'null' | 'bracket' | 'operator';
+
+const TOKEN_CLASSES: Record<TokenType, string> = {
+  key: 'text-blue-400',
+  string: 'text-green-400',
+  number: 'text-orange-400',
+  boolean: 'text-purple-400',
+  null: 'text-gray-500',
+  bracket: 'text-yellow-300',
+  operator: 'text-yellow-300',
+};
+
+function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+function wrapToken(type: TokenType, content: string): string {
+  return `<span class="${TOKEN_CLASSES[type]}">${content}</span>`;
+}
+
+/**
+ * Highlight JSON string with HTML spans.
+ */
+export function highlightJson(json: string): string {
+  const formatted = (() => {
+    try {
+      return JSON.stringify(JSON.parse(json), null, 2);
+    } catch {
+      return json;
+    }
+  })();
+
+  return formatted.replace(
+    /("(?:[^"\\]|\\.)*")\s*:/g,
+    (_, key) => wrapToken('key', escapeHtml(key)) + wrapToken('operator', ':'),
+  ).replace(
+    /:\s*("(?:[^"\\]|\\.)*")/g,
+    (_, val) => ': ' + wrapToken('string', escapeHtml(val)),
+  ).replace(
+    /:\s*(\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)/g,
+    (_, num) => ': ' + wrapToken('number', escapeHtml(num)),
+  ).replace(
+    /:\s*(true|false)/g,
+    (_, bool) => ': ' + wrapToken('boolean', escapeHtml(bool)),
+  ).replace(
+    /:\s*(null)/g,
+    (_, n) => ': ' + wrapToken('null', escapeHtml(n)),
+  ).replace(
+    /([{}[\]])/g,
+    (_, bracket) => wrapToken('bracket', escapeHtml(bracket)),
+  );
+}
+
+/**
+ * Highlight XML with HTML spans.
+ */
+export function highlightXml(xml: string): string {
+  const escaped = escapeHtml(xml);
+
+  return escaped
+    .replace(
+      /(&lt;\/?)([\w:-]+)/g,
+      (_, prefix, tagName) => `<span class="text-gray-500">${prefix}</span><span class="text-red-400">${tagName}</span>`,
+    )
+    .replace(
+      /\s([\w:-]+)(=)(&quot;[^&]*?&quot;)/g,
+      (_, attr, eq, value) =>
+        ` <span class="text-yellow-300">${attr}</span><span class="text-gray-500">${eq}</span><span class="text-green-400">${value}</span>`,
+    )
+    .replace(
+      /(&lt;[\?\/!][^&]*?&gt;)/g,
+      '<span class="text-gray-500">$1</span>',
+    );
+}
+
+/**
+ * Highlight HTTP headers with HTML spans.
+ */
+export function highlightHeaders(headers: string): string {
+  return headers
+    .split('\n')
+    .map((line) => {
+      const colonIndex = line.indexOf(':');
+      if (colonIndex === -1) return escapeHtml(line);
+
+      const name = line.slice(0, colonIndex);
+      const value = line.slice(colonIndex + 1);
+      return `<span class="text-cyan-400">${escapeHtml(name)}</span>:<span class="text-gray-300">${escapeHtml(value)}</span>`;
+    })
+    .join('\n');
+}
+
+/**
+ * Get line numbers HTML for a code block.
+ */
+export function getLineNumbers(code: string): string {
+  const lines = code.split('\n');
+  return lines.map((_, i) => `<span class="block text-right pr-2 text-gray-600 select-none">${i + 1}</span>`).join('');
+}

package/src/lib/utils/validation.ts

@@ -0,0 +1,231 @@
+import { z } from 'zod';
+
+// --- HTTP Method ---
+export const HttpMethodSchema = z.enum([
+  'GET', 'POST', 'PUT', 'PATCH', 'DELETE',
+  'HEAD', 'OPTIONS', 'TRACE', 'CONNECT',
+]);
+export type HttpMethod = z.infer<typeof HttpMethodSchema>;
+
+// --- Key-Value Pair ---
+export const KeyValueSchema = z.object({
+  key: z.string().min(1, 'Key is required'),
+  value: z.string(),
+  enabled: z.boolean().default(true),
+  description: z.string().optional(),
+});
+export type KeyValue = z.infer<typeof KeyValueSchema>;
+
+// --- Body Types ---
+export const BodyTypeSchema = z.enum([
+  'none', 'json', 'form', 'urlencoded', 'raw', 'graphql', 'binary',
+]);
+export type BodyType = z.infer<typeof BodyTypeSchema>;
+
+// --- Request Body ---
+export const RequestBodySchema = z.object({
+  raw: z.string().optional(),
+  form: z.array(KeyValueSchema).optional(),
+  graphql: z.object({
+    query: z.string(),
+    variables: z.string().optional(),
+  }).optional(),
+  binary: z.string().optional(),
+});
+export type RequestBody = z.infer<typeof RequestBodySchema>;
+
+// --- Auth Types ---
+export const AuthTypeSchema = z.enum([
+  'none', 'basic', 'bearer', 'apikey', 'oauth2', 'aws', 'digest', 'ntlm',
+]);
+export type AuthType = z.infer<typeof AuthTypeSchema>;
+
+export const BasicAuthSchema = z.object({
+  type: z.literal('basic'),
+  username: z.string(),
+  password: z.string(),
+});
+
+export const BearerAuthSchema = z.object({
+  type: z.literal('bearer'),
+  token: z.string(),
+  prefix: z.string().default('Bearer'),
+});
+
+export const ApiKeyAuthSchema = z.object({
+  type: z.literal('apikey'),
+  key: z.string(),
+  value: z.string(),
+  addTo: z.enum(['header', 'query', 'cookie']),
+});
+
+export const OAuth2AuthSchema = z.object({
+  type: z.literal('oauth2'),
+  grantType: z.enum(['authorization_code', 'client_credentials', 'implicit', 'password']),
+  accessTokenUrl: z.string().url().optional().or(z.literal('')),
+  authorizationUrl: z.string().url().optional().or(z.literal('')),
+  clientId: z.string().optional(),
+  clientSecret: z.string().optional(),
+  scope: z.string().optional(),
+  token: z.string().optional(),
+  refreshToken: z.string().optional(),
+  tokenType: z.string().default('Bearer'),
+});
+
+export const AwsAuthSchema = z.object({
+  type: z.literal('aws'),
+  accessKey: z.string(),
+  secretKey: z.string(),
+  region: z.string(),
+  service: z.string(),
+  sessionToken: z.string().optional(),
+});
+
+export const DigestAuthSchema = z.object({
+  type: z.literal('digest'),
+  username: z.string(),
+  password: z.string(),
+  realm: z.string().optional(),
+  nonce: z.string().optional(),
+  qop: z.enum(['auth', 'auth-int']).optional(),
+});
+
+export const AuthConfigSchema = z.discriminatedUnion('type', [
+  z.object({ type: z.literal('none') }),
+  BasicAuthSchema,
+  BearerAuthSchema,
+  ApiKeyAuthSchema,
+  OAuth2AuthSchema,
+  AwsAuthSchema,
+  DigestAuthSchema,
+]);
+export type AuthConfig = z.infer<typeof AuthConfigSchema>;
+
+// --- Request Schema ---
+export const CreateRequestSchema = z.object({
+  name: z.string().min(1, 'Name is required').max(200),
+  description: z.string().optional(),
+  collectionId: z.string().min(1, 'Collection ID is required'),
+  method: HttpMethodSchema.default('GET'),
+  url: z.string().min(1, 'URL is required'),
+  headers: z.array(KeyValueSchema).default([]),
+  params: z.array(KeyValueSchema).default([]),
+  body: RequestBodySchema.optional(),
+  bodyType: BodyTypeSchema.default('none'),
+  auth: AuthConfigSchema.optional(),
+  preRequestScript: z.string().optional(),
+  tests: z.string().optional(),
+  sortOrder: z.number().default(0),
+});
+
+export const UpdateRequestSchema = CreateRequestSchema.partial().extend({
+  id: z.string(),
+});
+
+// --- Collection Schema ---
+export const CreateCollectionSchema = z.object({
+  name: z.string().min(1, 'Name is required').max(200),
+  description: z.string().optional(),
+  workspaceId: z.string().min(1, 'Workspace ID is required'),
+  parentId: z.string().optional(),
+  variables: z.record(z.string()).default({}),
+  preScript: z.string().optional(),
+  postScript: z.string().optional(),
+  sortOrder: z.number().default(0),
+});
+
+export const UpdateCollectionSchema = CreateCollectionSchema.partial().extend({
+  id: z.string(),
+});
+
+// --- Workspace Schema ---
+export const CreateWorkspaceSchema = z.object({
+  name: z.string().min(1, 'Name is required').max(200),
+  description: z.string().optional(),
+  userId: z.string().default('demo-user'),
+});
+
+export const UpdateWorkspaceSchema = CreateWorkspaceSchema.partial().extend({
+  id: z.string(),
+});
+
+// --- Environment Schema ---
+export const EnvironmentVariableSchema = z.object({
+  key: z.string().min(1),
+  value: z.string(),
+  type: z.enum(['string', 'number', 'boolean', 'secret']).default('string'),
+  enabled: z.boolean().default(true),
+});
+export type EnvironmentVariable = z.infer<typeof EnvironmentVariableSchema>;
+
+export const CreateEnvironmentSchema = z.object({
+  name: z.string().min(1, 'Name is required').max(200),
+  workspaceId: z.string().min(1, 'Workspace ID is required'),
+  variables: z.array(EnvironmentVariableSchema).default([]),
+  isDefault: z.boolean().default(false),
+});
+
+export const UpdateEnvironmentSchema = CreateEnvironmentSchema.partial().extend({
+  id: z.string(),
+});
+
+// --- Execute Request Schema ---
+export const ExecuteRequestSchema = z.object({
+  method: HttpMethodSchema,
+  url: z.string().min(1, 'URL is required'),
+  headers: z.array(KeyValueSchema).default([]),
+  params: z.array(KeyValueSchema).default([]),
+  body: RequestBodySchema.optional(),
+  bodyType: BodyTypeSchema.default('none'),
+  auth: AuthConfigSchema.optional(),
+  timeout: z.number().min(1).max(300000).default(30000),
+  followRedirects: z.boolean().default(true),
+  maxRedirects: z.number().min(0).max(20).default(5),
+  verifySSL: z.boolean().default(true),
+});
+
+// --- Import Schemas ---
+export const ImportOpenApiSchema = z.object({
+  spec: z.string().min(1, 'OpenAPI spec is required'),
+  workspaceId: z.string().min(1),
+  collectionName: z.string().optional(),
+});
+
+export const ImportPostmanSchema = z.object({
+  collection: z.string().min(1, 'Postman collection is required'),
+  workspaceId: z.string().min(1),
+});
+
+export const ImportCurlSchema = z.object({
+  command: z.string().min(1, 'cURL command is required'),
+  collectionId: z.string().min(1),
+  name: z.string().optional(),
+});
+
+export const ImportHarSchema = z.object({
+  har: z.string().min(1, 'HAR data is required'),
+  collectionId: z.string().min(1),
+});
+
+// --- AI Schemas ---
+export const AiGenerateTestsSchema = z.object({
+  requestId: z.string().min(1),
+  response: z.unknown(),
+  prompt: z.string().optional(),
+});
+
+export const AiDiscoverSchema = z.object({
+  code: z.string().min(1),
+  framework: z.enum(['express', 'nextjs', 'fastapi', 'django', 'flask', 'spring', 'auto']).default('auto'),
+  workspaceId: z.string().min(1),
+});
+
+export const AiExplainSchema = z.object({
+  response: z.unknown(),
+  question: z.string().optional(),
+});
+
+export const AiSuggestSchema = z.object({
+  request: z.unknown(),
+  response: z.unknown().optional(),
+});

package/src/lib/websocket/client.ts

@@ -0,0 +1,182 @@
+/**
+ * WebSocket Client — manages WebSocket connections for testing.
+ *
+ * In a browser context, this uses the native WebSocket API.
+ * In Node.js test environments, the caller provides a mock or ws library.
+ */
+
+import type { WSConfig, WSConnectionState, WSMessage, WSClientEvents } from './types';
+import { detectMessageType } from './frames';
+
+type MessageHandler = WSClientEvents['message'];
+type OpenHandler = WSClientEvents['open'];
+type CloseHandler = WSClientEvents['close'];
+type ErrorHandler = WSClientEvents['error'];
+type StateChangeHandler = WSClientEvents['stateChange'];
+
+export class WebSocketClient {
+  private ws: WebSocket | null = null;
+  private config: WSConfig;
+  private state: WSConnectionState = 'disconnected';
+  private reconnectAttempts = 0;
+
+  private messageHandlers: Set<MessageHandler> = new Set();
+  private openHandlers: Set<OpenHandler> = new Set();
+  private closeHandlers: Set<CloseHandler> = new Set();
+  private errorHandlers: Set<ErrorHandler> = new Set();
+  private stateChangeHandlers: Set<StateChangeHandler> = new Set();
+
+  constructor(config: WSConfig) {
+    this.config = config;
+  }
+
+  /**
+   * Establish a WebSocket connection.
+   */
+  connect(): Promise<void> {
+    return new Promise((resolve, reject) => {
+      if (this.state === 'connected' || this.state === 'connecting') {
+        resolve();
+        return;
+      }
+
+      this.setState('connecting');
+
+      try {
+        const protocols = this.config.protocols?.length ? this.config.protocols : undefined;
+        this.ws = new WebSocket(this.config.url, protocols);
+
+        this.ws.onopen = () => {
+          this.setState('connected');
+          this.reconnectAttempts = 0;
+          this.openHandlers.forEach((h) => h());
+          resolve();
+        };
+
+        this.ws.onmessage = (event: MessageEvent) => {
+          const data = typeof event.data === 'string' ? event.data : '[binary data]';
+          const message = this.createMessage('received', data);
+          this.messageHandlers.forEach((h) => h(message));
+        };
+
+        this.ws.onclose = (event: CloseEvent) => {
+          this.setState('disconnected');
+          this.closeHandlers.forEach((h) => h(event.code, event.reason));
+
+          if (this.config.reconnect && this.reconnectAttempts < (this.config.maxReconnectAttempts ?? 5)) {
+            this.reconnectAttempts++;
+            setTimeout(() => this.connect(), this.config.reconnectDelay ?? 1000);
+          }
+        };
+
+        this.ws.onerror = () => {
+          const error = new Error(`WebSocket error connecting to ${this.config.url}`);
+          this.errorHandlers.forEach((h) => h(error));
+          if (this.state === 'connecting') {
+            reject(error);
+          }
+        };
+      } catch (err) {
+        this.setState('disconnected');
+        reject(err);
+      }
+    });
+  }
+
+  /**
+   * Send a text or binary message.
+   */
+  send(message: string): void {
+    if (!this.ws || this.state !== 'connected') {
+      throw new Error('WebSocket is not connected');
+    }
+
+    this.ws.send(message);
+    const msg = this.createMessage('sent', message);
+    this.messageHandlers.forEach((h) => h(msg));
+  }
+
+  /**
+   * Register a message handler.
+   */
+  onMessage(handler: MessageHandler): () => void {
+    this.messageHandlers.add(handler);
+    return () => this.messageHandlers.delete(handler);
+  }
+
+  /**
+   * Register an open handler.
+   */
+  onOpen(handler: OpenHandler): () => void {
+    this.openHandlers.add(handler);
+    return () => this.openHandlers.delete(handler);
+  }
+
+  /**
+   * Register a close handler.
+   */
+  onClose(handler: CloseHandler): () => void {
+    this.closeHandlers.add(handler);
+    return () => this.closeHandlers.delete(handler);
+  }
+
+  /**
+   * Register an error handler.
+   */
+  onError(handler: ErrorHandler): () => void {
+    this.errorHandlers.add(handler);
+    return () => this.errorHandlers.delete(handler);
+  }
+
+  /**
+   * Register a state change handler.
+   */
+  onStateChange(handler: StateChangeHandler): () => void {
+    this.stateChangeHandlers.add(handler);
+    return () => this.stateChangeHandlers.delete(handler);
+  }
+
+  /**
+   * Close the connection.
+   */
+  close(code: number = 1000, reason: string = ''): void {
+    this.setState('disconnecting');
+    this.ws?.close(code, reason);
+    this.ws = null;
+  }
+
+  /**
+   * Get the current connection state.
+   */
+  getState(): WSConnectionState {
+    return this.state;
+  }
+
+  /**
+   * Get the URL this client is connected to.
+   */
+  getUrl(): string {
+    return this.config.url;
+  }
+
+  private setState(newState: WSConnectionState): void {
+    this.state = newState;
+    this.stateChangeHandlers.forEach((h) => h(newState));
+  }
+
+  private createMessage(direction: 'sent' | 'received', data: string): WSMessage {
+    return {
+      id: generateId(),
+      direction,
+      data,
+      type: detectMessageType(data),
+      timestamp: Date.now(),
+      size: new TextEncoder().encode(data).length,
+    };
+  }
+}
+
+let idCounter = 0;
+function generateId(): string {
+  return `ws_${Date.now()}_${++idCounter}`;
+}