@theihtisham/devtools-with-cloud 1.0.0

package/src/components/response/body-viewer.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { highlightJson, highlightXml, highlightHeaders } from '@/lib/utils/syntax-highlight';
+
+interface BodyViewerProps {
+  body: string;
+  contentType: string;
+  className?: string;
+}
+
+export function BodyViewer({ body, contentType, className }: BodyViewerProps) {
+  const highlighted = contentType.includes('json')
+    ? highlightJson(body)
+    : contentType.includes('xml')
+      ? highlightXml(body)
+      : escapeHtml(body);
+
+  return (
+    <div className={className}>
+      <pre
+        className="text-sm font-mono whitespace-pre-wrap break-all"
+        dangerouslySetInnerHTML={{ __html: highlighted }}
+      />
+    </div>
+  );
+}
+
+function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}

package/src/components/response/headers-viewer.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { highlightHeaders } from '@/lib/utils/syntax-highlight';
+
+interface HeadersViewerProps {
+  headers: Record<string, string>;
+  className?: string;
+}
+
+export function HeadersViewer({ headers, className }: HeadersViewerProps) {
+  const headerStr = Object.entries(headers)
+    .map(([key, value]) => `${key}: ${value}`)
+    .join('\n');
+
+  return (
+    <div className={className}>
+      <pre
+        className="text-sm font-mono whitespace-pre-wrap"
+        dangerouslySetInnerHTML={{ __html: highlightHeaders(headerStr) }}
+      />
+    </div>
+  );
+}

package/src/components/response/status-badge.tsx

@@ -0,0 +1,25 @@
+import { cn } from '@/lib/utils/cn';
+
+interface StatusBadgeProps {
+  status: number;
+  statusText?: string;
+  className?: string;
+}
+
+export function StatusBadge({ status, statusText, className }: StatusBadgeProps) {
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center px-2 py-0.5 rounded text-sm font-mono font-medium',
+        status < 200 && 'bg-gray-500/10 text-gray-400',
+        status >= 200 && status < 300 && 'bg-green-500/10 text-green-400',
+        status >= 300 && status < 400 && 'bg-blue-500/10 text-blue-400',
+        status >= 400 && status < 500 && 'bg-orange-500/10 text-orange-400',
+        status >= 500 && 'bg-red-500/10 text-red-400',
+        className,
+      )}
+    >
+      {status} {statusText}
+    </span>
+  );
+}

package/src/components/response/test-results.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { cn } from '@/lib/utils/cn';
+
+interface TestResult {
+  name: string;
+  passed: boolean;
+  error?: string;
+}
+
+interface TestResultsProps {
+  results: TestResult[];
+  className?: string;
+}
+
+export function TestResults({ results, className }: TestResultsProps) {
+  const passed = results.filter((r) => r.passed).length;
+  const total = results.length;
+
+  return (
+    <div className={className}>
+      <div className="flex items-center gap-2 mb-3">
+        <span className={cn(
+          'text-sm font-medium',
+          passed === total ? 'text-green-400' : 'text-orange-400',
+        )}>
+          {passed}/{total} passed
+        </span>
+      </div>
+      <div className="space-y-1">
+        {results.map((result, i) => (
+          <div key={i} className="flex items-start gap-2 text-sm">
+            <span className={cn(
+              'mt-0.5',
+              result.passed ? 'text-green-400' : 'text-red-400',
+            )}>
+              {result.passed ? 'PASS' : 'FAIL'}
+            </span>
+            <div>
+              <span className="text-foreground">{result.name}</span>
+              {result.error && (
+                <p className="text-xs text-destructive mt-0.5">{result.error}</p>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/response/timing-chart.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { getTimingBreakdown, type RequestTiming } from '@/lib/http/timing';
+
+interface TimingChartProps {
+  timing: RequestTiming;
+  className?: string;
+}
+
+export function TimingChart({ timing, className }: TimingChartProps) {
+  const breakdown = getTimingBreakdown(timing);
+
+  return (
+    <div className={className}>
+      <div className="flex h-4 rounded overflow-hidden">
+        {breakdown.map((phase) => (
+          <div
+            key={phase.label}
+            style={{
+              width: `${Math.max(phase.percentage, 2)}%`,
+              backgroundColor: phase.color,
+            }}
+            className="transition-all"
+            title={`${phase.label}: ${phase.value}ms`}
+          />
+        ))}
+      </div>
+      <div className="flex flex-wrap gap-3 mt-2">
+        {breakdown.map((phase) => (
+          <div key={phase.label} className="flex items-center gap-1 text-xs">
+            <div className="w-2 h-2 rounded-full" style={{ backgroundColor: phase.color }} />
+            <span className="text-muted-foreground">{phase.label}:</span>
+            <span className="text-foreground">{phase.value}ms</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/ui/badge.tsx

@@ -0,0 +1,24 @@
+import { cn } from '@/lib/utils/cn';
+
+interface BadgeProps {
+  children: React.ReactNode;
+  variant?: 'default' | 'secondary' | 'destructive' | 'outline';
+  className?: string;
+}
+
+export function Badge({ children, variant = 'default', className }: BadgeProps) {
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
+        variant === 'default' && 'bg-primary/10 text-primary',
+        variant === 'secondary' && 'bg-secondary text-secondary-foreground',
+        variant === 'destructive' && 'bg-destructive/10 text-destructive',
+        variant === 'outline' && 'border border-border text-foreground',
+        className,
+      )}
+    >
+      {children}
+    </span>
+  );
+}

package/src/components/ui/button.tsx

@@ -0,0 +1,32 @@
+import { forwardRef } from 'react';
+import { cn } from '@/lib/utils/cn';
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'default' | 'destructive' | 'outline' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = 'default', size = 'md', ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        className={cn(
+          'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 disabled:pointer-events-none',
+          variant === 'default' && 'bg-primary text-primary-foreground hover:bg-primary/90',
+          variant === 'destructive' && 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+          variant === 'outline' && 'border border-border bg-background text-foreground hover:bg-accent',
+          variant === 'ghost' && 'text-foreground hover:bg-accent',
+          size === 'sm' && 'h-8 px-3 text-xs',
+          size === 'md' && 'h-9 px-4 text-sm',
+          size === 'lg' && 'h-10 px-6 text-base',
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+Button.displayName = 'Button';
+export { Button };

package/src/components/ui/code-editor.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { useCallback } from 'react';
+import { cn } from '@/lib/utils/cn';
+
+interface CodeEditorProps {
+  value: string;
+  onChange?: (value: string) => void;
+  language?: string;
+  readOnly?: boolean;
+  className?: string;
+  placeholder?: string;
+}
+
+/**
+ * Simple code editor component.
+ * Falls back to a plain textarea since Monaco Editor requires dynamic imports
+ * and complex setup that may not work during build.
+ */
+export function CodeEditor({
+  value,
+  onChange,
+  language = 'json',
+  readOnly = false,
+  className,
+  placeholder,
+}: CodeEditorProps) {
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      onChange?.(e.target.value);
+    },
+    [onChange],
+  );
+
+  return (
+    <textarea
+      value={value}
+      onChange={handleChange}
+      readOnly={readOnly}
+      placeholder={placeholder}
+      className={cn(
+        'w-full h-full min-h-[200px] px-3 py-2 rounded-md border border-border bg-background text-foreground font-mono text-sm resize-none',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+        readOnly && 'cursor-default bg-muted/30',
+        className,
+      )}
+      spellCheck={false}
+      data-language={language}
+    />
+  );
+}

package/src/components/ui/dialog.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { type ReactNode } from 'react';
+import { cn } from '@/lib/utils/cn';
+
+interface DialogProps {
+  open: boolean;
+  onClose: () => void;
+  children: ReactNode;
+  className?: string;
+}
+
+export function Dialog({ open, onClose, children, className }: DialogProps) {
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="fixed inset-0 bg-black/50" onClick={onClose} />
+      <div className={cn('relative z-50 w-full max-w-lg rounded-lg border border-border bg-card p-6 shadow-lg', className)}>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+interface DialogHeaderProps {
+  children: ReactNode;
+}
+
+export function DialogHeader({ children }: DialogHeaderProps) {
+  return <div className="mb-4">{children}</div>;
+}
+
+interface DialogTitleProps {
+  children: ReactNode;
+}
+
+export function DialogTitle({ children }: DialogTitleProps) {
+  return <h2 className="text-lg font-semibold text-foreground">{children}</h2>;
+}
+
+interface DialogContentProps {
+  children: ReactNode;
+}
+
+export function DialogContent({ children }: DialogContentProps) {
+  return <div className="mb-4">{children}</div>;
+}
+
+interface DialogFooterProps {
+  children: ReactNode;
+}
+
+export function DialogFooter({ children }: DialogFooterProps) {
+  return <div className="flex justify-end gap-2">{children}</div>;
+}

package/src/components/ui/dropdown.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { useState, useRef, useEffect, type ReactNode } from 'react';
+import { cn } from '@/lib/utils/cn';
+
+interface DropdownProps {
+  trigger: ReactNode;
+  children: ReactNode;
+  className?: string;
+  align?: 'left' | 'right';
+}
+
+export function Dropdown({ trigger, children, className, align = 'left' }: DropdownProps) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  return (
+    <div ref={ref} className="relative inline-block">
+      <div onClick={() => setOpen(!open)}>{trigger}</div>
+      {open && (
+        <div
+          className={cn(
+            'absolute z-50 mt-1 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 shadow-md',
+            align === 'right' ? 'right-0' : 'left-0',
+            className,
+          )}
+        >
+          <div onClick={() => setOpen(false)}>{children}</div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface DropdownItemProps {
+  children: ReactNode;
+  onClick?: () => void;
+  className?: string;
+}
+
+export function DropdownItem({ children, onClick, className }: DropdownItemProps) {
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        'flex w-full items-center rounded-sm px-2 py-1.5 text-sm text-foreground hover:bg-accent transition-colors text-left',
+        className,
+      )}
+    >
+      {children}
+    </button>
+  );
+}

package/src/components/ui/input.tsx

@@ -0,0 +1,22 @@
+import { forwardRef } from 'react';
+import { cn } from '@/lib/utils/cn';
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <input
+        ref={ref}
+        className={cn(
+          'flex h-9 w-full rounded-md border border-border bg-background px-3 py-1 text-sm text-foreground shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+Input.displayName = 'Input';
+export { Input };

package/src/components/ui/key-value-editor.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import { cn } from '@/lib/utils/cn';
+import type { KeyValue } from '@/lib/utils/validation';
+
+interface KeyValueEditorProps {
+  pairs: KeyValue[];
+  onChange: (pairs: KeyValue[]) => void;
+  keyPlaceholder?: string;
+  valuePlaceholder?: string;
+  className?: string;
+}
+
+export function KeyValueEditor({
+  pairs,
+  onChange,
+  keyPlaceholder = 'Key',
+  valuePlaceholder = 'Value',
+  className,
+}: KeyValueEditorProps) {
+  const addPair = () => {
+    onChange([...pairs, { key: '', value: '', enabled: true }]);
+  };
+
+  const removePair = (index: number) => {
+    onChange(pairs.filter((_, i) => i !== index));
+  };
+
+  const updatePair = (index: number, field: keyof KeyValue, value: string | boolean) => {
+    const updated = [...pairs];
+    updated[index] = { ...updated[index]!, [field]: value };
+    onChange(updated);
+  };
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      {pairs.map((pair, i) => (
+        <div key={i} className="flex items-center gap-2">
+          <input
+            type="checkbox"
+            checked={pair.enabled}
+            onChange={(e) => updatePair(i, 'enabled', e.target.checked)}
+            className="h-4 w-4 rounded border-border"
+          />
+          <input
+            type="text"
+            value={pair.key}
+            onChange={(e) => updatePair(i, 'key', e.target.value)}
+            placeholder={keyPlaceholder}
+            className="flex-1 px-2 py-1.5 rounded border border-border bg-background text-foreground text-sm font-mono"
+          />
+          <input
+            type="text"
+            value={pair.value}
+            onChange={(e) => updatePair(i, 'value', e.target.value)}
+            placeholder={valuePlaceholder}
+            className="flex-1 px-2 py-1.5 rounded border border-border bg-background text-foreground text-sm font-mono"
+          />
+          <button
+            onClick={() => removePair(i)}
+            className="text-muted-foreground hover:text-destructive transition-colors text-sm"
+          >
+            x
+          </button>
+        </div>
+      ))}
+      <button
+        onClick={addPair}
+        className="text-sm text-primary hover:text-primary/80 transition-colors"
+      >
+        + Add
+      </button>
+    </div>
+  );
+}

package/src/components/ui/select.tsx

@@ -0,0 +1,24 @@
+import { forwardRef } from 'react';
+import { cn } from '@/lib/utils/cn';
+
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {}
+
+const Select = forwardRef<HTMLSelectElement, SelectProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <select
+        ref={ref}
+        className={cn(
+          'flex h-9 w-full rounded-md border border-border bg-background px-3 py-1 text-sm text-foreground shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </select>
+    );
+  },
+);
+
+Select.displayName = 'Select';
+export { Select };

package/src/components/ui/tabs.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import { createContext, useContext, useState, type ReactNode } from 'react';
+import { cn } from '@/lib/utils/cn';
+
+interface TabsContextValue {
+  activeTab: string;
+  setActiveTab: (tab: string) => void;
+}
+
+const TabsContext = createContext<TabsContextValue | null>(null);
+
+function useTabs(): TabsContextValue {
+  const ctx = useContext(TabsContext);
+  if (!ctx) throw new Error('Tabs components must be used within a Tabs provider');
+  return ctx;
+}
+
+interface TabsProps {
+  defaultValue: string;
+  children: ReactNode;
+  className?: string;
+}
+
+export function Tabs({ defaultValue, children, className }: TabsProps) {
+  const [activeTab, setActiveTab] = useState(defaultValue);
+
+  return (
+    <TabsContext.Provider value={{ activeTab, setActiveTab }}>
+      <div className={cn('', className)}>{children}</div>
+    </TabsContext.Provider>
+  );
+}
+
+interface TabsListProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function TabsList({ children, className }: TabsListProps) {
+  return (
+    <div className={cn('flex border-b border-border', className)}>
+      {children}
+    </div>
+  );
+}
+
+interface TabsTriggerProps {
+  value: string;
+  children: ReactNode;
+  className?: string;
+}
+
+export function TabsTrigger({ value, children, className }: TabsTriggerProps) {
+  const { activeTab, setActiveTab } = useTabs();
+
+  return (
+    <button
+      onClick={() => setActiveTab(value)}
+      className={cn(
+        'px-4 py-2 text-sm transition-colors',
+        activeTab === value
+          ? 'text-primary border-b-2 border-primary'
+          : 'text-muted-foreground hover:text-foreground',
+        className,
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+
+interface TabsContentProps {
+  value: string;
+  children: ReactNode;
+  className?: string;
+}
+
+export function TabsContent({ value, children, className }: TabsContentProps) {
+  const { activeTab } = useTabs();
+
+  if (activeTab !== value) return null;
+
+  return <div className={cn('p-4', className)}>{children}</div>;
+}

package/src/components/ui/textarea.tsx

@@ -0,0 +1,22 @@
+import { forwardRef } from 'react';
+import { cn } from '@/lib/utils/cn';
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        ref={ref}
+        className={cn(
+          'flex min-h-[60px] w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+Textarea.displayName = 'Textarea';
+export { Textarea };