@clidey/dory 0.29.0 → 0.30.0

package/src/mdx/websocket-playground.tsx

@@ -1,824 +0,0 @@
-import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
-import { CheckIcon } from '@heroicons/react/24/outline'
-import classNames from 'classnames'
-import { PencilIcon, TrashIcon, XIcon, PlusIcon, MessageCircleIcon } from 'lucide-react'
-import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
-import Dropdown from '../components/dropdown'
-import { Tag } from './tag'
-import { PlayButton } from './api-playground'
-import { Badge, Button, Card, EmptyState, Sheet, SheetContent, SheetHeader, SheetTitle, Input } from '@clidey/ux'
-
-export interface WebSocketServer {
-  url: string;
-  description?: string;
-  protocol?: string;
-}
-
-interface WebSocketPlaygroundProps {
-  url: string
-  title?: string
-  description?: string
-  subprotocols?: string[]
-  headers?: Record<string, string>
-  servers?: WebSocketServer[]
-  authType?: 'bearer' | 'apiKey' | 'basic' | 'none'
-}
-
-interface WebSocketConfig {
-  url: string
-  headers: Record<string, string>
-  subprotocols: string[]
-}
-
-interface WebSocketMessage {
-  id: string
-  type: 'sent' | 'received' | 'error' | 'system'
-  data: string
-  timestamp: number
-  binary?: boolean
-}
-
-export function DisconnectButton(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
-      <path
-        fill="currentColor"
-        d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
-      />
-    </svg>
-  )
-}
-
-function LoadingSpinner(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 20 20" aria-hidden="true" className="animate-spin" {...props}>
-      <path
-        fill="currentColor"
-        d="M10 2a8 8 0 0 1 8 8c0 .3-.02.59-.06.88l-1.99-.22A6 6 0 1 0 4 10c0-.34.03-.67.09-1L2.1 8.78A8 8 0 0 1 10 2Z"
-      />
-    </svg>
-  )
-}
-
-interface WebSocketConfig {
-  headers: Record<string, string>
-  subprotocols: string[]
-}
-
-interface HeadersTabProps {
-  wsConfig: WebSocketConfig
-  setWsConfig: React.Dispatch<React.SetStateAction<WebSocketConfig>>
-}
-
-interface HeaderItem {
-  key: string
-  value: string
-  isEditing: boolean
-  isNew?: boolean
-}
-
-export const HeadersTab = ({ wsConfig, setWsConfig }: HeadersTabProps) => {
-  const [headersList, setHeadersList] = useState<HeaderItem[]>([])
-  const hasInitialized = useRef(false)
-
-  useEffect(() => {
-    if (!hasInitialized.current) {
-      const initialHeaders = Object.entries(wsConfig.headers ?? {}).map(([key, value]) => ({
-        key,
-        value,
-        isEditing: false
-      }))
-      setHeadersList(initialHeaders)
-      hasInitialized.current = true
-    }
-  }, [wsConfig.headers])
-
-  useEffect(() => {
-    const newHeaders: Record<string, string> = {}
-    headersList.forEach(h => {
-      if (h.key.trim()) newHeaders[h.key] = h.value
-    })
-    setWsConfig(prev => ({ ...prev, headers: newHeaders }))
-  }, [headersList, setWsConfig])
-
-  const updateHeader = (index: number, field: 'key' | 'value', value: string) => {
-    setHeadersList(list =>
-      list.map((h, i) => (i === index ? { ...h, [field]: value } : h))
-    )
-  }
-
-  const saveHeader = (index: number) => {
-    setHeadersList(list =>
-      list.map((h, i) => (i === index ? { ...h, isEditing: false, isNew: false } : h))
-    )
-  }
-
-  const cancelEdit = (index: number) => {
-    setHeadersList(list =>
-      list.reduce<HeaderItem[]>((acc, h, i) => {
-        if (i === index) {
-          if (h.isNew) return acc // remove new row if cancelled
-          return [...acc, { ...h, isEditing: false }]
-        }
-        return [...acc, h]
-      }, [])
-    )
-  }
-
-  const editHeader = (index: number) => {
-    setHeadersList(list =>
-      list.map((h, i) => (i === index ? { ...h, isEditing: true } : h))
-    )
-  }
-
-  const removeHeader = (index: number) => {
-    setHeadersList(list => list.filter((_, i) => i !== index))
-  }
-
-  const addEmptyHeaderRow = () => {
-    setHeadersList(list => [
-      ...list,
-      { key: '', value: '', isEditing: true, isNew: true }
-    ])
-  }
-
-  return (
-    <div className="flex flex-col gap-2 px-2 py-4">
-      <div className="flex items-center gap-2 px-2">
-        <span className="text-sm font-medium text-zinc-400 w-32">Key</span>
-        <span className="text-sm font-medium text-zinc-400 flex-1">Value</span>
-      </div>
-      {headersList.map((hdr, idx) => (
-        <div key={idx} className="flex items-center gap-2">
-          {hdr.isEditing ? (
-            <>
-              <Input
-                type="text"
-                value={hdr.key}
-                onChange={e => updateHeader(idx, 'key', (e.target as HTMLInputElement).value)}
-                placeholder="Header name"
-                className="w-32 text-sm"
-              />
-              <Input
-                type="text"
-                value={hdr.value}
-                onChange={e => updateHeader(idx, 'value', (e.target as HTMLInputElement).value)}
-                placeholder="Header value"
-                className="flex-1 text-sm"
-              />
-              <Button onClick={() => saveHeader(idx)} variant="ghost" size="icon" className="text-white h-8 w-8">
-                <CheckIcon className="w-4 h-4" />
-              </Button>
-              <Button onClick={() => cancelEdit(idx)} variant="ghost" size="icon" className="text-white h-8 w-8">
-                <XIcon className="w-4 h-4" />
-              </Button>
-            </>
-          ) : (
-            <>
-              <span className="text-sm text-white w-32 truncate">{hdr.key}</span>
-              <span className="text-sm text-white flex-1 truncate">{hdr.value}</span>
-              <Button onClick={() => editHeader(idx)} variant="ghost" size="icon" className="text-white h-8 w-8">
-                <PencilIcon className="w-4 h-4" />
-              </Button>
-              <Button onClick={() => removeHeader(idx)} variant="ghost" size="icon" className="text-red-400 h-8 w-8">
-                <TrashIcon className="w-4 h-4" />
-              </Button>
-            </>
-          )}
-        </div>
-      ))}
-      <Button onClick={addEmptyHeaderRow} variant="ghost" size="sm" className="mt-2 w-fit">
-        <PlusIcon className="w-4 h-4" /> Add Header
-      </Button>
-    </div>
-  )
-}
-
-interface SubprotocolItem {
-  value: string
-  isEditing: boolean
-  isNew?: boolean
-}
-
-interface SubprotocolsTabProps {
-  subprotocols: string[]
-  setWsConfig: React.Dispatch<React.SetStateAction<WebSocketConfig>>
-}
-
-export const SubprotocolsTab = ({ subprotocols, setWsConfig }: SubprotocolsTabProps) => {
-  const [subprotocolsList, setSubprotocolsList] = useState<SubprotocolItem[]>([])
-  const hasInitialized = useRef(false)
-
-  useEffect(() => {
-    if (!hasInitialized.current) {
-      const initial = subprotocols.map(value => ({
-        value,
-        isEditing: false
-      }))
-      setSubprotocolsList(initial)
-      hasInitialized.current = true
-    }
-  }, [subprotocols])
-
-  useEffect(() => {
-    const newSubprotocols = subprotocolsList
-      .filter(s => s.value.trim())
-      .map(s => s.value)
-    setWsConfig(prev => ({ ...prev, subprotocols: newSubprotocols }))
-  }, [subprotocolsList, setWsConfig])
-
-  const updateSubprotocol = (idx: number, val: string) =>
-    setSubprotocolsList(list => list.map((s, i) =>
-      i === idx ? { ...s, value: val } : s
-    ))
-
-  const saveSubprotocol = (idx: number) =>
-    setSubprotocolsList(list => list.map((s, i) =>
-      i === idx ? { ...s, isEditing: false, isNew: false } : s
-    ))
-
-  const cancelEdit = (idx: number) =>
-    setSubprotocolsList(list =>
-      list.reduce<SubprotocolItem[]>((acc, s, i) => {
-        if (i === idx) {
-          if (s.isNew) return acc
-          return [...acc, { ...s, isEditing: false }]
-        }
-        return [...acc, s]
-      }, [])
-    )
-
-  const editSubprotocol = (idx: number) =>
-    setSubprotocolsList(list =>
-      list.map((s, i) => (i === idx ? { ...s, isEditing: true } : s))
-    )
-
-  const removeSubprotocol = (idx: number) =>
-    setSubprotocolsList(list => list.filter((_, i) => i !== idx))
-
-  const addSubprotocolRow = () =>
-    setSubprotocolsList(list => [
-      ...list, { value: '', isEditing: true, isNew: true }
-    ])
-
-  return (
-    <div className="flex flex-col gap-2 px-2 py-4">
-      <div className="flex items-center gap-2">
-        <span className="text-sm font-medium text-zinc-400 flex-1">Subprotocol</span>
-      </div>
-      {subprotocolsList.map((s, i) => (
-        <div key={i} className="flex items-center gap-2">
-          {s.isEditing ? (
-            <>
-              <Input
-                value={s.value}
-                onChange={e => updateSubprotocol(i, (e.target as HTMLInputElement).value)}
-                placeholder="Subprotocol name"
-                className="flex-1 text-sm"
-              />
-              <Button onClick={() => saveSubprotocol(i)} variant="ghost" size="icon" className="text-white h-8 w-8">
-                <CheckIcon className="w-4 h-4" />
-              </Button>
-              <Button onClick={() => cancelEdit(i)} variant="ghost" size="icon" className="text-white h-8 w-8">
-                <XIcon className="w-4 h-4" />
-              </Button>
-            </>
-          ) : (
-            <>
-              <span className="flex-1 truncate text-sm">{s.value}</span>
-              <Button onClick={() => editSubprotocol(i)} variant="ghost" size="icon" className="text-white h-8 w-8">
-                <PencilIcon className="w-4 h-4" />
-              </Button>
-              <Button onClick={() => removeSubprotocol(i)} variant="ghost" size="icon" className="text-red-400 h-8 w-8">
-                <TrashIcon className="w-4 h-4" />
-              </Button>
-            </>
-          )}
-        </div>
-      ))}
-      <Button onClick={addSubprotocolRow} variant="ghost" size="sm" className="text-sky-400 hover:text-sky-300 mt-2 self-start">
-        + Add Subprotocol
-      </Button>
-    </div>
-  )
-}
-
-type ConnectionState = 'disconnected' | 'connecting' | 'connected' | 'error'
-
-// Internal playground component that contains the actual WebSocket UI
-function WebSocketPlaygroundInternal({
-  url,
-  title,
-  description,
-  subprotocols: defaultSubprotocols = [],
-  headers: defaultHeaders = {},
-  servers = [],
-  authType = 'none'
-}: WebSocketPlaygroundProps) {
-  const [selectedTab, setSelectedTab] = useState(0)
-  const [connectionState, setConnectionState] = useState<ConnectionState>('disconnected')
-  const [messages, setMessages] = useState<WebSocketMessage[]>([])
-  const [messageInput, setMessageInput] = useState('')
-  const [error, setError] = useState<string | null>(null)
-  const [selectedServer, setSelectedServer] = useState<WebSocketServer | null>(servers?.[0] || null)
-  const wsRef = useRef<WebSocket | null>(null)
-  const messageIdRef = useRef(0)
-
-  // WebSocket configuration state
-  const [wsConfig, setWsConfig] = useState<WebSocketConfig>({
-    url: (selectedServer?.url || '') + url,
-    headers: { ...defaultHeaders },
-    subprotocols: [...defaultSubprotocols]
-  })
-
-  // Auth state
-  const [auth, setAuth] = useState({
-    type: authType,
-    token: '',
-    apiKey: '',
-    username: '',
-    password: ''
-  })
-
-  // Update URL when server changes
-  useEffect(() => {
-    if (selectedServer) {
-      setWsConfig(prev => ({ ...prev, url: selectedServer.url + url }))
-    }
-  }, [selectedServer, url])
-
-  const addMessage = useCallback((type: WebSocketMessage['type'], data: string, binary = false) => {
-    const message: WebSocketMessage = {
-      id: (++messageIdRef.current).toString(),
-      type,
-      data,
-      timestamp: Date.now(),
-      binary
-    }
-    setMessages(prev => [...prev, message])
-  }, [])
-
-  const connectWebSocket = useCallback(() => {
-    if (wsRef.current) {
-      wsRef.current.close()
-    }
-
-    setConnectionState('connecting')
-    setError(null)
-
-    try {
-      // Prepare headers based on auth type
-      const headers = { ...wsConfig.headers }
-      
-      switch (auth.type) {
-        case 'bearer':
-          if (auth.token) {
-            headers['Authorization'] = `Bearer ${auth.token}`
-          }
-          break
-        case 'apiKey':
-          if (auth.apiKey) {
-            headers['X-API-Key'] = auth.apiKey
-          }
-          break
-        case 'basic':
-          if (auth.username && auth.password) {
-            headers['Authorization'] = `Basic ${btoa(`${auth.username}:${auth.password}`)}`
-          }
-          break
-      }
-
-      const ws = new WebSocket(wsConfig.url, wsConfig.subprotocols)
-      
-      ws.onopen = () => {
-        setConnectionState('connected')
-        addMessage('system', 'Connected to WebSocket server')
-      }
-
-      ws.onmessage = (event) => {
-        const isBinary = event.data instanceof ArrayBuffer || event.data instanceof Blob
-        const data = isBinary ? 
-          `[Binary data: ${event.data instanceof Blob ? event.data.size : event.data.byteLength} bytes]` : 
-          event.data
-        addMessage('received', data, isBinary)
-      }
-
-      ws.onerror = () => {
-        setConnectionState('error')
-        setError('WebSocket connection error')
-        addMessage('error', 'Connection error occurred')
-      }
-
-      ws.onclose = (event) => {
-        setConnectionState('disconnected')
-        const reason = event.reason || 'Connection closed'
-        addMessage('system', `Disconnected: ${reason} (Code: ${event.code})`)
-      }
-
-      wsRef.current = ws
-    } catch (err) {
-      setConnectionState('error')
-      setError(err instanceof Error ? err.message : 'Failed to connect')
-    }
-  }, [wsConfig, auth, addMessage])
-
-  const disconnectWebSocket = useCallback(() => {
-    if (wsRef.current) {
-      wsRef.current.close()
-      wsRef.current = null
-    }
-  }, [])
-
-  const sendMessage = useCallback(() => {
-    if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN && messageInput.trim()) {
-      try {
-        wsRef.current.send(messageInput)
-        addMessage('sent', messageInput)
-        setMessageInput('')
-      } catch (err) {
-        addMessage('error', `Failed to send message: ${err}`)
-      }
-    }
-  }, [messageInput, addMessage])
-
-  const clearMessages = useCallback(() => {
-    setMessages([])
-  }, [])
-
-  const tabs = [
-    { name: 'Headers', key: 'headers' },
-    { name: 'Subprotocols', key: 'subprotocols' },
-    { name: 'Auth', key: 'auth' }
-  ]
-
-  const getConnectionStatusColor = () => {
-    switch (connectionState) {
-      case 'connected':
-        return 'text-green-400'
-      case 'connecting':
-        return 'text-yellow-400'
-      case 'error':
-        return 'text-red-400'
-      default:
-        return 'text-zinc-400'
-    }
-  }
-
-  const getConnectionStatusText = () => {
-    switch (connectionState) {
-      case 'connected':
-        return 'Connected'
-      case 'connecting':
-        return 'Connecting...'
-      case 'error':
-        return 'Error'
-      default:
-        return 'Disconnected'
-    }
-  }
-
-  return (
-    <div className="my-6 overflow-hidden rounded-2xl">
-      {/* Header */}
-      <div className="flex min-h-[calc(--spacing(12)+1px)] flex-wrap items-start gap-x-4 px-4 pt-2 pb-4 justify-between">
-        <div className="flex items-center gap-3 pt-3">
-          <Tag variant="small">WS</Tag>
-          <span className="font-mono text-sm">{title || url}</span>
-          <div className="flex items-center gap-2">
-            <div className={`w-2 h-2 rounded-full ${connectionState === 'connected' ? 'bg-green-400' : connectionState === 'connecting' ? 'bg-yellow-400' : connectionState === 'error' ? 'bg-red-400' : 'bg-zinc-400'}`} />
-            <span className={`text-xs ${getConnectionStatusColor()}`}>
-              {getConnectionStatusText()}
-            </span>
-          </div>
-        </div>
-        <div className="flex gap-2 ml-auto pt-3">
-          <Button
-            onClick={connectWebSocket}
-            disabled={connectionState === 'connecting' || connectionState === 'connected'}
-            className={classNames(
-              'flex items-center gap-2',
-              connectionState === 'connecting' || connectionState === 'connected'
-                ? 'bg-zinc-600 text-zinc-400 cursor-not-allowed'
-                : 'bg-green-600 text-white hover:bg-green-700'
-            )}
-          >
-            {connectionState === 'connecting' ? (
-              <LoadingSpinner className="h-4 w-4" />
-            ) : (
-              <PlayButton className="h-4 w-4" />
-            )}
-            {connectionState === 'connecting' ? 'Connecting...' : 'Connect'}
-          </Button>
-          <Button
-            onClick={disconnectWebSocket}
-            disabled={connectionState === 'disconnected'}
-            variant="destructive"
-            className={classNames(
-              'flex items-center gap-2',
-              connectionState === 'disconnected' && 'bg-zinc-600 text-zinc-400 cursor-not-allowed'
-            )}
-          >
-            <DisconnectButton className="h-4 w-4" />
-            Disconnect
-          </Button>
-        </div>
-      </div>
-
-      {description && (
-        <p className="text-sm px-4 py-3">{description}</p>
-      )}
-
-      <div className="flex flex-col lg:flex-row gap-4">
-        {/* Configuration */}
-        <div className="flex-1 min-w-0">
-          <div className="flex flex-col gap-2 p-4">
-            <label className="text-sm font-medium">Server</label>
-            <Dropdown
-              buttonLabel={selectedServer?.description || selectedServer?.url || 'Select Server'}
-              items={servers.map(server => ({ 
-                label: server.description || server.url, 
-                onClick: () => setSelectedServer(server) 
-              }))}
-              className="w-full"
-            />
-          </div>
-
-          <div>
-            <TabGroup selectedIndex={selectedTab} onChange={setSelectedTab}>
-              <TabList className="flex">
-                {tabs.map((tab) => (
-                  <Tab
-                    key={tab.key}
-                    className={({ selected }) =>
-                      classNames(
-                        'px-4 py-3 text-sm font-medium transition border-b-2',
-                        selected
-                          ? 'border-brand-foreground text-brand-foreground'
-                          : 'border-transparent text-zinc-400 hover:text-zinc-300'
-                      )
-                    }
-                  >
-                    {tab.name}
-                  </Tab>
-                ))}
-              </TabList>
-
-              <TabPanels className="min-h-[250px]">
-                <TabPanel className="p-4">
-                  <HeadersTab 
-                    wsConfig={wsConfig}
-                    setWsConfig={setWsConfig}
-                  />
-                </TabPanel>
-
-                <TabPanel className="p-4">
-                  <SubprotocolsTab
-                    subprotocols={wsConfig.subprotocols}
-                    setWsConfig={setWsConfig}
-                  />
-                </TabPanel>
-
-                {/* Auth Tab */}
-                <TabPanel className="p-4 space-y-4">
-                  <div className="flex flex-col space-y-2">
-                    <label className="text-sm font-medium">Authentication Type</label>
-                    <Dropdown
-                      buttonLabel={auth.type === 'none' ? 'Select Auth Type' : auth.type.charAt(0).toUpperCase() + auth.type.slice(1)}
-                      items={[
-                        { label: 'None', onClick: () => setAuth(prev => ({ ...prev, type: 'none' })) },
-                        { label: 'Bearer Token', onClick: () => setAuth(prev => ({ ...prev, type: 'bearer' })) },
-                        { label: 'API Key', onClick: () => setAuth(prev => ({ ...prev, type: 'apiKey' })) },
-                        { label: 'Basic Auth', onClick: () => setAuth(prev => ({ ...prev, type: 'basic' })) }
-                      ]}
-                      className="w-full"
-                    />
-                  </div>
-
-                  {auth.type === 'bearer' && (
-                    <div className="space-y-2">
-                      <label className="text-sm font-medium">Bearer Token</label>
-                      <Input
-                        type="password"
-                        value={auth.token}
-                        onChange={(e) => setAuth(prev => ({ ...prev, token: (e.target as HTMLInputElement).value }))}
-                        placeholder="Enter bearer token..."
-                        className="w-full text-sm"
-                      />
-                    </div>
-                  )}
-
-                  {auth.type === 'apiKey' && (
-                    <div className="space-y-2">
-                      <label className="text-sm font-medium">API Key</label>
-                      <Input
-                        type="password"
-                        value={auth.apiKey}
-                        onChange={(e) => setAuth(prev => ({ ...prev, apiKey: (e.target as HTMLInputElement).value }))}
-                        placeholder="Enter API key..."
-                        className="w-full text-sm"
-                      />
-                    </div>
-                  )}
-
-                  {auth.type === 'basic' && (
-                    <div className="space-y-4">
-                      <div className="space-y-2">
-                        <label className="text-sm font-medium">Username</label>
-                        <Input
-                          type="text"
-                          value={auth.username}
-                          onChange={(e) => setAuth(prev => ({ ...prev, username: (e.target as HTMLInputElement).value }))}
-                          placeholder="Enter username..."
-                          className="w-full text-sm"
-                        />
-                      </div>
-                      <div className="space-y-2">
-                        <label className="text-sm font-medium">Password</label>
-                        <Input
-                          type="password"
-                          value={auth.password}
-                          onChange={(e) => setAuth(prev => ({ ...prev, password: (e.target as HTMLInputElement).value }))}
-                          placeholder="Enter password..."
-                          className="w-full text-sm"
-                        />
-                      </div>
-                    </div>
-                  )}
-                </TabPanel>
-              </TabPanels>
-            </TabGroup>
-          </div>
-        </div>
-
-        {/* Messages */}
-        <div className="flex-1 min-w-0">
-          <div>
-            <div className="flex items-center justify-between px-4 py-3">
-              <h3 className="text-sm font-semibold">Messages</h3>
-              <Button
-                onClick={clearMessages}
-                variant="ghost"
-                size="sm"
-                className="text-xs text-zinc-400 hover:text-zinc-300"
-              >
-                Clear
-              </Button>
-            </div>
-            
-            <div className="flex flex-col h-64 overflow-y-auto p-4 space-y-2">
-              {messages.length === 0 ? (
-                <EmptyState icon={<MessageCircleIcon className="h-5 w-5" />} title="No messages yet" description="Connect to start receiving messages" />
-              ) : (
-                messages.map((msg) => (
-                  <div
-                    key={msg.id}
-                    className={classNames(
-                      'flex flex-col gap-1 p-3 rounded-lg text-sm',
-                      msg.type === 'sent' && 'bg-sky-500/10 border border-sky-500/20 ml-8',
-                      msg.type === 'received' && 'bg-green-500/10 border border-green-500/20 mr-8',
-                      msg.type === 'error' && 'bg-red-500/10 border border-red-500/20',
-                      msg.type === 'system' && 'bg-zinc-500/10 border border-zinc-500/20'
-                    )}
-                  >
-                    <div className="flex items-center justify-between">
-                      <span className={classNames(
-                        'text-xs font-medium',
-                        msg.type === 'sent' && 'text-sky-400',
-                        msg.type === 'received' && 'text-green-400',
-                        msg.type === 'error' && 'text-red-400',
-                        msg.type === 'system' && 'text-zinc-400'
-                      )}>
-                        {msg.type === 'sent' ? 'Sent' : 
-                         msg.type === 'received' ? 'Received' : 
-                         msg.type === 'error' ? 'Error' : 'System'}
-                        {msg.binary && ' (Binary)'}
-                      </span>
-                      <span className="text-xs text-zinc-500">
-                        {new Date(msg.timestamp).toLocaleTimeString()}
-                      </span>
-                    </div>
-                    <div className="text-white break-words font-mono text-xs">
-                      {msg.data}
-                    </div>
-                  </div>
-                ))
-              )}
-            </div>
-
-            {/* Send Message */}
-            <div className="p-4">
-              <div className="flex gap-2">
-                <Input
-                  type="text"
-                  value={messageInput}
-                  onChange={(e) => setMessageInput((e.target as HTMLInputElement).value)}
-                  onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
-                  placeholder="Enter message to send..."
-                  disabled={connectionState !== 'connected'}
-                  className="flex-1 text-sm"
-                />
-                <Button
-                  onClick={sendMessage}
-                  disabled={connectionState !== 'connected' || !messageInput.trim()}
-                  className={classNames({
-                    'bg-sky-600 text-white hover:bg-sky-700': connectionState === 'connected' && messageInput.trim()
-                  })}
-                >
-                  Send
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {error && (
-        <div className="p-4">
-          <div className="flex items-center gap-2">
-            <span className="inline-flex items-center rounded-full bg-rose-500/10 px-2 py-1 text-xs font-medium text-rose-400 ring-1 ring-rose-500/20">
-              Error
-            </span>
-          </div>
-          <pre className="text-sm text-rose-400 bg-rose-500/5 p-3 rounded-lg border border-rose-500/20 mt-2">
-            {error}
-          </pre>
-        </div>
-      )}
-    </div>
-  )
-}
-
-// Main exported component with Sheet wrapper
-export function WebSocketPlayground(props: WebSocketPlaygroundProps) {
-  const [showPlayground, setShowPlayground] = useState(false)
-
-  const handleShowPlayground = () => {
-    setShowPlayground(true)
-  }
-
-  return (
-    <div className="max-w-none w-full my-6">
-      <Sheet open={showPlayground} onOpenChange={setShowPlayground} modal={true}>
-        <SheetContent side="bottom" className="h-[90vh] w-full overflow-y-auto p-8">
-          <SheetHeader className="p-0">
-            <SheetTitle>WebSocket Playground</SheetTitle>
-          </SheetHeader>
-          <WebSocketPlaygroundInternal {...props} />
-        </SheetContent>
-      </Sheet>
-
-      <Card className="overflow-hidden py-0 border-1 border-black/10">
-        <div className="flex items-center justify-between px-4 py-3">
-          <div className="flex items-center gap-3">
-            <Tag variant="small">WS</Tag>
-            <span className="font-mono text-sm">{props.title || props.url}</span>
-          </div>
-          <Button
-            onClick={handleShowPlayground}
-            className="flex items-center gap-2"
-          >
-            Try
-            <PlayButton className="h-4 w-4" />
-          </Button>
-        </div>
-
-        {props.description && (
-          <p className="text-sm px-4 py-3">{props.description}</p>
-        )}
-
-        <div className="px-4 py-3">
-          <div className="flex flex-col gap-2">
-            <div className="flex items-center gap-2">
-              <span className="text-xs font-medium text-zinc-400">Endpoint:</span>
-              <Badge>
-                {props.servers?.[0]?.url || 'ws://localhost'}{props.url}
-              </Badge>
-            </div>
-
-            {props.subprotocols && props.subprotocols.length > 0 && (
-              <div className="flex items-center gap-2">
-                <span className="text-xs font-medium text-zinc-400">Subprotocols:</span>
-                <div className="flex gap-1">
-                  {props.subprotocols.map((protocol, idx) => (
-                    <Badge key={idx}>
-                      {protocol}
-                    </Badge>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {props.authType && props.authType !== 'none' && (
-              <div className="flex items-center gap-2">
-                <span className="text-xs font-medium text-zinc-400">Authentication:</span>
-                <Badge>
-                  {props.authType}
-                </Badge>
-              </div>
-            )}
-          </div>
-        </div>
-      </Card>
-    </div>
-  )
-}