create-fluxstack 1.15.0 → 1.16.0

package/core/client/components/LiveDebugger.tsx

@@ -1,1324 +0,0 @@
-// FluxStack Live Debugger - Draggable Floating Window
-//
-// A floating, draggable, resizable debug panel for inspecting Live Components.
-// Toggle with Ctrl+Shift+D or click the small badge in the corner.
-//
-// Usage:
-//   import { LiveDebugger } from '@/core/client'
-//   <LiveDebugger />
-
-import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react'
-import { useLiveDebugger, type DebugEvent, type DebugEventType, type ComponentSnapshot } from '@fluxstack/live-react'
-
-// ===== Debugger Settings =====
-
-export interface DebuggerSettings {
-  fontSize: 'xs' | 'sm' | 'md' | 'lg'
-  showTimestamps: boolean
-  compactMode: boolean
-  wordWrap: boolean
-  maxEvents: number
-}
-
-const FONT_SIZES: Record<DebuggerSettings['fontSize'], number> = {
-  xs: 9,
-  sm: 10,
-  md: 11,
-  lg: 13,
-}
-
-const DEFAULT_SETTINGS: DebuggerSettings = {
-  fontSize: 'sm',
-  showTimestamps: true,
-  compactMode: false,
-  wordWrap: false,
-  maxEvents: 300,
-}
-
-const SETTINGS_KEY = 'fluxstack-debugger-settings'
-
-function loadSettings(): DebuggerSettings {
-  try {
-    const stored = localStorage.getItem(SETTINGS_KEY)
-    if (stored) return { ...DEFAULT_SETTINGS, ...JSON.parse(stored) }
-  } catch { /* ignore */ }
-  return { ...DEFAULT_SETTINGS }
-}
-
-function saveSettings(settings: DebuggerSettings) {
-  try {
-    localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings))
-  } catch { /* ignore */ }
-}
-
-// ===== Event Type Groups =====
-
-type EventGroup = 'lifecycle' | 'state' | 'actions' | 'rooms' | 'connection' | 'errors'
-
-const EVENT_GROUPS: Record<EventGroup, { label: string; color: string; types: DebugEventType[] }> = {
-  lifecycle: {
-    label: 'Lifecycle',
-    color: '#22c55e',
-    types: ['COMPONENT_MOUNT', 'COMPONENT_UNMOUNT', 'COMPONENT_REHYDRATE'],
-  },
-  state: {
-    label: 'State',
-    color: '#3b82f6',
-    types: ['STATE_CHANGE'],
-  },
-  actions: {
-    label: 'Actions',
-    color: '#8b5cf6',
-    types: ['ACTION_CALL', 'ACTION_RESULT', 'ACTION_ERROR'],
-  },
-  rooms: {
-    label: 'Rooms',
-    color: '#10b981',
-    types: ['ROOM_JOIN', 'ROOM_LEAVE', 'ROOM_EMIT', 'ROOM_EVENT_RECEIVED'],
-  },
-  connection: {
-    label: 'WS',
-    color: '#06b6d4',
-    types: ['WS_CONNECT', 'WS_DISCONNECT'],
-  },
-  errors: {
-    label: 'Errors',
-    color: '#ef4444',
-    types: ['ERROR'],
-  },
-}
-
-const ALL_GROUPS = Object.keys(EVENT_GROUPS) as EventGroup[]
-
-const COLORS: Record<string, string> = {
-  COMPONENT_MOUNT: '#22c55e',
-  COMPONENT_UNMOUNT: '#ef4444',
-  COMPONENT_REHYDRATE: '#f59e0b',
-  STATE_CHANGE: '#3b82f6',
-  ACTION_CALL: '#8b5cf6',
-  ACTION_RESULT: '#06b6d4',
-  ACTION_ERROR: '#ef4444',
-  ROOM_JOIN: '#10b981',
-  ROOM_LEAVE: '#f97316',
-  ROOM_EMIT: '#6366f1',
-  ROOM_EVENT_RECEIVED: '#6366f1',
-  WS_CONNECT: '#22c55e',
-  WS_DISCONNECT: '#ef4444',
-  ERROR: '#dc2626',
-}
-
-const LABELS: Record<string, string> = {
-  COMPONENT_MOUNT: 'MOUNT',
-  COMPONENT_UNMOUNT: 'UNMOUNT',
-  COMPONENT_REHYDRATE: 'REHYDRATE',
-  STATE_CHANGE: 'STATE',
-  ACTION_CALL: 'ACTION',
-  ACTION_RESULT: 'RESULT',
-  ACTION_ERROR: 'ERR',
-  ROOM_JOIN: 'JOIN',
-  ROOM_LEAVE: 'LEAVE',
-  ROOM_EMIT: 'EMIT',
-  ROOM_EVENT_RECEIVED: 'ROOM_EVT',
-  WS_CONNECT: 'CONNECT',
-  WS_DISCONNECT: 'DISCONNECT',
-  ERROR: 'ERROR',
-}
-
-// ===== Collapsible JSON Tree Viewer =====
-
-function jsonPreview(data: unknown): string {
-  if (data === null || data === undefined) return String(data)
-  if (typeof data !== 'object') return JSON.stringify(data)
-  if (Array.isArray(data)) {
-    if (data.length === 0) return '[]'
-    const items = data.slice(0, 3).map(jsonPreview).join(', ')
-    return data.length <= 3 ? `[${items}]` : `[${items}, ...+${data.length - 3}]`
-  }
-  const entries = Object.entries(data as Record<string, unknown>)
-  if (entries.length === 0) return '{}'
-  const items = entries.slice(0, 3).map(([k, v]) => {
-    const val = typeof v === 'object' && v !== null
-      ? (Array.isArray(v) ? `[${v.length}]` : `{${Object.keys(v).length}}`)
-      : JSON.stringify(v)
-    return `${k}: ${val}`
-  }).join(', ')
-  return entries.length <= 3 ? `{ ${items} }` : `{ ${items}, ...+${entries.length - 3} }`
-}
-
-function isExpandable(data: unknown): boolean {
-  return data !== null && typeof data === 'object' && (
-    Array.isArray(data) ? data.length > 0 : Object.keys(data as object).length > 0
-  )
-}
-
-function JsonNode({ label, data, defaultOpen = false }: {
-  label?: string | number
-  data: unknown
-  defaultOpen?: boolean
-}) {
-  const [open, setOpen] = useState(defaultOpen)
-  const expandable = isExpandable(data)
-
-  // Primitives
-  if (!expandable) {
-    let rendered: React.ReactNode
-    if (data === null || data === undefined) rendered = <span style={{ color: '#6b7280' }}>{String(data)}</span>
-    else if (typeof data === 'boolean') rendered = <span style={{ color: '#f59e0b' }}>{String(data)}</span>
-    else if (typeof data === 'number') rendered = <span style={{ color: '#60a5fa' }}>{data}</span>
-    else if (typeof data === 'string') {
-      const display = data.length > 120 ? data.slice(0, 120) + '...' : data
-      rendered = <span style={{ color: '#34d399' }}>"{display}"</span>
-    } else {
-      rendered = <span>{String(data)}</span>
-    }
-
-    return (
-      <div style={{ lineHeight: '1.6', paddingLeft: 2 }}>
-        {label !== undefined && (
-          <>
-            <span style={{ color: typeof label === 'number' ? '#60a5fa' : '#c084fc' }}>{label}</span>
-            <span style={{ color: '#6b7280' }}>: </span>
-          </>
-        )}
-        {rendered}
-      </div>
-    )
-  }
-
-  // Expandable (object / array)
-  const isArray = Array.isArray(data)
-  const entries = isArray
-    ? (data as unknown[]).map((v, i) => [i, v] as [number, unknown])
-    : Object.entries(data as Record<string, unknown>)
-  const bracketOpen = isArray ? '[' : '{'
-  const bracketClose = isArray ? ']' : '}'
-
-  return (
-    <div style={{ lineHeight: '1.6' }}>
-      <div
-        onClick={() => setOpen(!open)}
-        style={{ cursor: 'pointer', display: 'flex', alignItems: 'flex-start', gap: 2, paddingLeft: 2 }}
-      >
-        <span style={{
-          color: '#475569', fontSize: 8, width: 10, flexShrink: 0,
-          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
-          paddingTop: 4, userSelect: 'none',
-        }}>
-          {open ? '\u25BC' : '\u25B6'}
-        </span>
-        <span>
-          {label !== undefined && (
-            <>
-              <span style={{ color: typeof label === 'number' ? '#60a5fa' : '#c084fc' }}>{label}</span>
-              <span style={{ color: '#6b7280' }}>: </span>
-            </>
-          )}
-          {!open && (
-            <span style={{ color: '#64748b' }}>
-              {bracketOpen} {jsonPreview(data).slice(1, -1)} {bracketClose}
-            </span>
-          )}
-          {open && (
-            <span style={{ color: '#64748b' }}>
-              {bracketOpen}
-              <span style={{ color: '#475569', fontSize: 9, marginLeft: 4 }}>
-                {entries.length} {isArray ? (entries.length === 1 ? 'item' : 'items') : (entries.length === 1 ? 'key' : 'keys')}
-              </span>
-            </span>
-          )}
-        </span>
-      </div>
-      {open && (
-        <div style={{ paddingLeft: 14 }}>
-          {entries.map(([key, val]) => (
-            <JsonNode
-              key={String(key)}
-              label={key}
-              data={val}
-              defaultOpen={false}
-            />
-          ))}
-          <div style={{ color: '#64748b', paddingLeft: 2 }}>{bracketClose}</div>
-        </div>
-      )}
-    </div>
-  )
-}
-
-function Json({ data, depth = 0 }: { data: unknown; depth?: number }) {
-  return <JsonNode data={data} defaultOpen={depth === 0} />
-}
-
-// ===== Event Summary =====
-
-function eventSummary(e: DebugEvent): string {
-  switch (e.type) {
-    case 'STATE_CHANGE': {
-      const delta = e.data.delta as Record<string, unknown> | undefined
-      if (!delta) return ''
-      const keys = Object.keys(delta)
-      if (keys.length <= 2) return keys.map(k => `${k}=${JSON.stringify(delta[k])}`).join(' ')
-      return `${keys.length} props`
-    }
-    case 'ACTION_CALL':
-      return String(e.data.action || '')
-    case 'ACTION_RESULT':
-      return `${e.data.action} ${e.data.duration}ms`
-    case 'ACTION_ERROR':
-      return `${e.data.action}: ${e.data.error}`
-    case 'ROOM_JOIN':
-    case 'ROOM_LEAVE':
-      return String(e.data.roomId || '')
-    case 'ROOM_EMIT':
-      return `${e.data.event} -> ${e.data.roomId}`
-    case 'ERROR':
-      return String(e.data.error || '')
-    default:
-      return ''
-  }
-}
-
-function displayName(comp: ComponentSnapshot): string {
-  return comp.debugLabel || comp.componentName
-}
-
-// ===== Drag Hook =====
-
-function useDrag(
-  initialPos: { x: number; y: number },
-  onDragEnd?: (pos: { x: number; y: number }) => void
-) {
-  const [pos, setPos] = useState(initialPos)
-  const dragging = useRef(false)
-  const offset = useRef({ x: 0, y: 0 })
-
-  const onMouseDown = useCallback((e: React.MouseEvent) => {
-    // Only drag from title bar, not from buttons
-    if ((e.target as HTMLElement).closest('button, input, select')) return
-    dragging.current = true
-    offset.current = { x: e.clientX - pos.x, y: e.clientY - pos.y }
-    e.preventDefault()
-  }, [pos])
-
-  useEffect(() => {
-    const onMouseMove = (e: MouseEvent) => {
-      if (!dragging.current) return
-      const newX = Math.max(0, Math.min(window.innerWidth - 100, e.clientX - offset.current.x))
-      const newY = Math.max(0, Math.min(window.innerHeight - 40, e.clientY - offset.current.y))
-      setPos({ x: newX, y: newY })
-    }
-    const onMouseUp = () => {
-      if (dragging.current) {
-        dragging.current = false
-        onDragEnd?.(pos)
-      }
-    }
-    window.addEventListener('mousemove', onMouseMove)
-    window.addEventListener('mouseup', onMouseUp)
-    return () => {
-      window.removeEventListener('mousemove', onMouseMove)
-      window.removeEventListener('mouseup', onMouseUp)
-    }
-  }, [pos, onDragEnd])
-
-  return { pos, setPos, onMouseDown }
-}
-
-// ===== Resize Hook =====
-
-function useResize(
-  initialSize: { w: number; h: number },
-  minSize = { w: 420, h: 300 }
-) {
-  const [size, setSize] = useState(initialSize)
-  const resizing = useRef(false)
-  const startData = useRef({ mouseX: 0, mouseY: 0, w: 0, h: 0 })
-
-  const onResizeStart = useCallback((e: React.MouseEvent) => {
-    resizing.current = true
-    startData.current = { mouseX: e.clientX, mouseY: e.clientY, w: size.w, h: size.h }
-    e.preventDefault()
-    e.stopPropagation()
-  }, [size])
-
-  useEffect(() => {
-    const onMouseMove = (e: MouseEvent) => {
-      if (!resizing.current) return
-      const dw = e.clientX - startData.current.mouseX
-      const dh = e.clientY - startData.current.mouseY
-      setSize({
-        w: Math.max(minSize.w, startData.current.w + dw),
-        h: Math.max(minSize.h, startData.current.h + dh),
-      })
-    }
-    const onMouseUp = () => { resizing.current = false }
-    window.addEventListener('mousemove', onMouseMove)
-    window.addEventListener('mouseup', onMouseUp)
-    return () => {
-      window.removeEventListener('mousemove', onMouseMove)
-      window.removeEventListener('mouseup', onMouseUp)
-    }
-  }, [minSize.w, minSize.h])
-
-  return { size, onResizeStart }
-}
-
-// ===== Component Card =====
-
-function ComponentCard({
-  comp,
-  isSelected,
-  onSelect,
-}: {
-  comp: ComponentSnapshot
-  isSelected: boolean
-  onSelect: () => void
-}) {
-  return (
-    <button
-      onClick={onSelect}
-      style={{
-        width: '100%', textAlign: 'left', cursor: 'pointer',
-        padding: '6px 8px', borderRadius: 4, border: 'none',
-        background: isSelected ? '#1e293b' : 'transparent',
-        color: '#e2e8f0', fontFamily: 'monospace', fontSize: 11,
-        display: 'flex', flexDirection: 'column', gap: 1,
-        transition: 'background 0.15s',
-      }}
-    >
-      <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
-        <span style={{ color: '#22c55e', fontSize: 6 }}>&#9679;</span>
-        <strong style={{ fontSize: 11 }}>{displayName(comp)}</strong>
-      </div>
-      {comp.debugLabel && (
-        <div style={{ fontSize: 9, color: '#64748b', paddingLeft: 11 }}>{comp.componentName}</div>
-      )}
-      <div style={{ display: 'flex', gap: 8, color: '#64748b', fontSize: 9, paddingLeft: 11 }}>
-        <span>S:{comp.stateChangeCount}</span>
-        <span>A:{comp.actionCount}</span>
-        {comp.errorCount > 0 && <span style={{ color: '#f87171' }}>E:{comp.errorCount}</span>}
-      </div>
-    </button>
-  )
-}
-
-// ===== Filter Bar =====
-
-function FilterBar({
-  activeGroups,
-  toggleGroup,
-  search,
-  setSearch,
-  groupCounts,
-}: {
-  activeGroups: Set<EventGroup>
-  toggleGroup: (g: EventGroup) => void
-  search: string
-  setSearch: (s: string) => void
-  groupCounts: Record<EventGroup, number>
-}) {
-  return (
-    <div style={{
-      display: 'flex', alignItems: 'center', gap: 4,
-      padding: '4px 8px', borderBottom: '1px solid #1e293b',
-      flexShrink: 0, flexWrap: 'wrap',
-    }}>
-      {ALL_GROUPS.map(g => {
-        const group = EVENT_GROUPS[g]
-        const active = activeGroups.has(g)
-        const count = groupCounts[g] || 0
-        return (
-          <button
-            key={g}
-            onClick={() => toggleGroup(g)}
-            style={{
-              padding: '2px 6px', borderRadius: 3,
-              border: `1px solid ${active ? group.color + '60' : '#1e293b'}`,
-              cursor: 'pointer', fontFamily: 'monospace', fontSize: 9,
-              background: active ? group.color + '20' : 'transparent',
-              color: active ? group.color : '#475569',
-              transition: 'all 0.15s',
-              display: 'flex', alignItems: 'center', gap: 3,
-            }}
-          >
-            {group.label}
-            {count > 0 && (
-              <span style={{
-                fontSize: 8, color: active ? group.color : '#374151',
-                fontWeight: 600,
-              }}>
-                {count}
-              </span>
-            )}
-          </button>
-        )
-      })}
-      <div style={{ flex: 1 }} />
-      <input
-        type="text"
-        value={search}
-        onChange={e => setSearch(e.target.value)}
-        placeholder="Search..."
-        style={{
-          width: 120, padding: '2px 6px', borderRadius: 3,
-          border: '1px solid #1e293b', background: '#0f172a',
-          color: '#e2e8f0', fontFamily: 'monospace', fontSize: 10,
-          outline: 'none',
-        }}
-        onFocus={e => { e.target.style.borderColor = '#334155' }}
-        onBlur={e => { e.target.style.borderColor = '#1e293b' }}
-      />
-    </div>
-  )
-}
-
-// ===== Settings Panel =====
-
-function SettingsPanel({
-  settings,
-  onChange,
-}: {
-  settings: DebuggerSettings
-  onChange: (patch: Partial<DebuggerSettings>) => void
-}) {
-  const sectionStyle: React.CSSProperties = {
-    marginBottom: 14,
-  }
-  const labelStyle: React.CSSProperties = {
-    fontFamily: 'monospace', fontSize: 9, color: '#64748b',
-    textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 6,
-    display: 'block',
-  }
-  const rowStyle: React.CSSProperties = {
-    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-    padding: '5px 0',
-  }
-  const descStyle: React.CSSProperties = {
-    fontFamily: 'monospace', fontSize: 10, color: '#94a3b8',
-  }
-
-  return (
-    <div style={{ flex: 1, overflow: 'auto', padding: 10 }}>
-      {/* Font Size */}
-      <div style={sectionStyle}>
-        <span style={labelStyle}>Font Size</span>
-        <div style={{ display: 'flex', gap: 4 }}>
-          {(['xs', 'sm', 'md', 'lg'] as const).map(size => (
-            <button
-              key={size}
-              onClick={() => onChange({ fontSize: size })}
-              style={{
-                flex: 1, padding: '5px 0', borderRadius: 4, border: 'none', cursor: 'pointer',
-                fontFamily: 'monospace', fontSize: FONT_SIZES[size], fontWeight: 600,
-                background: settings.fontSize === size ? '#1e3a5f' : '#1e293b',
-                color: settings.fontSize === size ? '#60a5fa' : '#64748b',
-                transition: 'all 0.15s',
-              }}
-            >
-              {size.toUpperCase()}
-            </button>
-          ))}
-        </div>
-        <div style={{
-          fontFamily: 'monospace', fontSize: 9, color: '#475569',
-          marginTop: 4, textAlign: 'center',
-        }}>
-          Preview: {FONT_SIZES[settings.fontSize]}px
-        </div>
-      </div>
-
-      {/* Max Events */}
-      <div style={sectionStyle}>
-        <span style={labelStyle}>Max Events in Buffer</span>
-        <div style={{ display: 'flex', gap: 4 }}>
-          {[100, 300, 500, 1000].map(n => (
-            <button
-              key={n}
-              onClick={() => onChange({ maxEvents: n })}
-              style={{
-                flex: 1, padding: '5px 0', borderRadius: 4, border: 'none', cursor: 'pointer',
-                fontFamily: 'monospace', fontSize: 10, fontWeight: 600,
-                background: settings.maxEvents === n ? '#1e3a5f' : '#1e293b',
-                color: settings.maxEvents === n ? '#60a5fa' : '#64748b',
-                transition: 'all 0.15s',
-              }}
-            >
-              {n}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Toggles */}
-      <div style={sectionStyle}>
-        <span style={labelStyle}>Display</span>
-
-        <div style={rowStyle}>
-          <span style={descStyle}>Show timestamps</span>
-          <ToggleSwitch
-            checked={settings.showTimestamps}
-            onChange={v => onChange({ showTimestamps: v })}
-          />
-        </div>
-
-        <div style={rowStyle}>
-          <span style={descStyle}>Compact mode</span>
-          <ToggleSwitch
-            checked={settings.compactMode}
-            onChange={v => onChange({ compactMode: v })}
-          />
-        </div>
-
-        <div style={rowStyle}>
-          <span style={descStyle}>Word wrap in data</span>
-          <ToggleSwitch
-            checked={settings.wordWrap}
-            onChange={v => onChange({ wordWrap: v })}
-          />
-        </div>
-      </div>
-
-      {/* Reset */}
-      <button
-        onClick={() => onChange(DEFAULT_SETTINGS)}
-        style={{
-          width: '100%', padding: '6px 0', borderRadius: 4, border: '1px solid #1e293b',
-          cursor: 'pointer', fontFamily: 'monospace', fontSize: 10,
-          background: 'transparent', color: '#64748b',
-          transition: 'all 0.15s',
-        }}
-      >
-        Reset to defaults
-      </button>
-    </div>
-  )
-}
-
-function ToggleSwitch({ checked, onChange }: { checked: boolean; onChange: (v: boolean) => void }) {
-  return (
-    <button
-      onClick={() => onChange(!checked)}
-      style={{
-        width: 32, height: 18, borderRadius: 9, border: 'none', cursor: 'pointer',
-        background: checked ? '#2563eb' : '#334155',
-        position: 'relative', padding: 0, transition: 'background 0.2s',
-        flexShrink: 0,
-      }}
-    >
-      <span style={{
-        position: 'absolute', top: 2, left: checked ? 16 : 2,
-        width: 14, height: 14, borderRadius: '50%',
-        background: '#fff', transition: 'left 0.2s',
-        boxShadow: '0 1px 3px rgba(0,0,0,0.3)',
-      }} />
-    </button>
-  )
-}
-
-// ===== Main Component =====
-
-export interface LiveDebuggerProps {
-  /** Start open. Default: false */
-  defaultOpen?: boolean
-  /** Initial position. Default: bottom-right corner */
-  defaultPosition?: { x: number; y: number }
-  /** Initial size. Default: 680x420 */
-  defaultSize?: { w: number; h: number }
-  /** Force enable even in production. Default: false */
-  force?: boolean
-}
-
-export function LiveDebugger({
-  defaultOpen = false,
-  defaultPosition,
-  defaultSize = { w: 680, h: 420 },
-  force = false,
-}: LiveDebuggerProps) {
-  const [settings, setSettingsState] = useState<DebuggerSettings>(loadSettings)
-  const updateSettings = useCallback((patch: Partial<DebuggerSettings>) => {
-    setSettingsState(prev => {
-      const next = { ...prev, ...patch }
-      saveSettings(next)
-      return next
-    })
-  }, [])
-  const fs = FONT_SIZES[settings.fontSize]
-
-  const dbg = useLiveDebugger({ maxEvents: settings.maxEvents })
-  const [open, setOpen] = useState(defaultOpen)
-  const [tab, setTab] = useState<'events' | 'state' | 'rooms' | 'settings'>('events')
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const [expandedEvents, setExpandedEvents] = useState<Set<string>>(new Set())
-  const [activeGroups, setActiveGroups] = useState<Set<EventGroup>>(new Set(ALL_GROUPS))
-  const [search, setSearch] = useState('')
-  const feedRef = useRef<HTMLDivElement>(null)
-  const [autoScroll, setAutoScroll] = useState(true)
-
-  // Default position: bottom-right with padding
-  const initPos = defaultPosition ?? {
-    x: typeof window !== 'undefined' ? window.innerWidth - defaultSize.w - 16 : 100,
-    y: typeof window !== 'undefined' ? window.innerHeight - defaultSize.h - 16 : 100,
-  }
-
-  const { pos, onMouseDown } = useDrag(initPos)
-  const { size, onResizeStart } = useResize(defaultSize)
-
-  // Keyboard shortcut: Ctrl+Shift+D
-  useEffect(() => {
-    const handler = (e: KeyboardEvent) => {
-      if (e.ctrlKey && e.shiftKey && e.key === 'D') {
-        e.preventDefault()
-        setOpen(prev => !prev)
-      }
-    }
-    window.addEventListener('keydown', handler)
-    return () => window.removeEventListener('keydown', handler)
-  }, [])
-
-  const selectedComp = selectedId
-    ? dbg.components.find(c => c.componentId === selectedId) ?? null
-    : null
-
-  // Compute allowed event types from active groups
-  const allowedTypes = useMemo(() => {
-    const types = new Set<DebugEventType>()
-    for (const g of activeGroups) {
-      for (const t of EVENT_GROUPS[g].types) types.add(t)
-    }
-    return types
-  }, [activeGroups])
-
-  // Filter events
-  const visibleEvents = useMemo(() => {
-    return dbg.events.filter(e => {
-      if (!allowedTypes.has(e.type)) return false
-      if (selectedId && e.componentId !== selectedId) return false
-      if (search) {
-        const s = search.toLowerCase()
-        const inData = JSON.stringify(e.data).toLowerCase().includes(s)
-        const inName = e.componentName?.toLowerCase().includes(s)
-        const inType = e.type.toLowerCase().includes(s)
-        if (!inData && !inName && !inType) return false
-      }
-      return true
-    })
-  }, [dbg.events, allowedTypes, selectedId, search])
-
-  // Count events per group (unfiltered by group, but filtered by component)
-  const groupCounts = useMemo(() => {
-    const counts = {} as Record<EventGroup, number>
-    for (const g of ALL_GROUPS) counts[g] = 0
-    const baseEvents = selectedId
-      ? dbg.events.filter(e => e.componentId === selectedId)
-      : dbg.events
-    for (const e of baseEvents) {
-      for (const g of ALL_GROUPS) {
-        if (EVENT_GROUPS[g].types.includes(e.type)) {
-          counts[g]++
-          break
-        }
-      }
-    }
-    return counts
-  }, [dbg.events, selectedId])
-
-  // Build rooms map: roomId -> list of components in that room
-  const roomsMap = useMemo(() => {
-    const map = new Map<string, ComponentSnapshot[]>()
-    for (const comp of dbg.components) {
-      for (const roomId of comp.rooms) {
-        if (!map.has(roomId)) map.set(roomId, [])
-        map.get(roomId)!.push(comp)
-      }
-    }
-    return map
-  }, [dbg.components])
-
-  // Room events (filtered to room-related types)
-  const roomEvents = useMemo(() => {
-    return dbg.events.filter(e =>
-      e.type === 'ROOM_JOIN' || e.type === 'ROOM_LEAVE' ||
-      e.type === 'ROOM_EMIT' || e.type === 'ROOM_EVENT_RECEIVED'
-    ).slice(-50)
-  }, [dbg.events])
-
-  // Auto-scroll feed
-  useEffect(() => {
-    if (feedRef.current && autoScroll && !dbg.paused) {
-      feedRef.current.scrollTop = feedRef.current.scrollHeight
-    }
-  }, [visibleEvents.length, dbg.paused, autoScroll])
-
-  // Detect manual scroll to disable auto-scroll
-  const handleFeedScroll = useCallback(() => {
-    if (!feedRef.current) return
-    const { scrollTop, scrollHeight, clientHeight } = feedRef.current
-    const atBottom = scrollHeight - scrollTop - clientHeight < 30
-    setAutoScroll(atBottom)
-  }, [])
-
-  const toggleEvent = useCallback((id: string) => {
-    setExpandedEvents(prev => {
-      const next = new Set(prev)
-      if (next.has(id)) next.delete(id)
-      else next.add(id)
-      return next
-    })
-  }, [])
-
-  const toggleGroup = useCallback((g: EventGroup) => {
-    setActiveGroups(prev => {
-      const next = new Set(prev)
-      if (next.has(g)) next.delete(g)
-      else next.add(g)
-      return next
-    })
-  }, [])
-
-  // Server has debugging disabled — render nothing, no resources used
-  if (dbg.serverDisabled && !force) return null
-
-  // Badge (when closed) - small floating circle in bottom-right
-  if (!open) {
-    const hasErrors = dbg.events.some(e => e.type === 'ERROR' || e.type === 'ACTION_ERROR')
-    return (
-      <button
-        onClick={() => setOpen(true)}
-        title="Live Debugger (Ctrl+Shift+D)"
-        style={{
-          position: 'fixed',
-          bottom: 16,
-          right: 16,
-          zIndex: 99999,
-          width: 40,
-          height: 40,
-          borderRadius: '50%',
-          border: `2px solid ${dbg.connected ? '#22c55e50' : '#ef444450'}`,
-          background: '#020617e0',
-          color: dbg.connected ? '#22c55e' : '#ef4444',
-          cursor: 'pointer',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          fontSize: 16,
-          boxShadow: '0 2px 12px rgba(0,0,0,0.4)',
-          transition: 'all 0.2s',
-          fontFamily: 'monospace',
-          padding: 0,
-        }}
-      >
-        {hasErrors ? (
-          <span style={{ color: '#ef4444', fontSize: 14, fontWeight: 700 }}>!</span>
-        ) : (
-          <span style={{ fontSize: 14 }}>{dbg.componentCount}</span>
-        )}
-      </button>
-    )
-  }
-
-  // Floating window
-  return (
-    <div
-      style={{
-        position: 'fixed',
-        left: pos.x,
-        top: pos.y,
-        width: size.w,
-        height: size.h,
-        zIndex: 99999,
-        display: 'flex',
-        flexDirection: 'column',
-        background: '#020617',
-        border: '1px solid #1e293b',
-        borderRadius: 8,
-        boxShadow: '0 8px 32px rgba(0,0,0,0.6)',
-        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-        color: '#e2e8f0',
-        overflow: 'hidden',
-      }}
-    >
-      {/* Title bar - draggable */}
-      <div
-        onMouseDown={onMouseDown}
-        style={{
-          display: 'flex', alignItems: 'center', gap: 8,
-          padding: '5px 10px', borderBottom: '1px solid #1e293b',
-          flexShrink: 0, cursor: 'grab', userSelect: 'none',
-          background: '#0f172a',
-        }}
-      >
-        {/* Status dot */}
-        <span style={{
-          width: 7, height: 7, borderRadius: '50%', flexShrink: 0,
-          background: dbg.connected ? '#22c55e' : '#ef4444',
-        }} />
-
-        <span style={{
-          fontFamily: 'monospace', fontSize: 11, fontWeight: 700,
-          letterSpacing: 0.5, color: '#94a3b8',
-        }}>
-          LIVE DEBUGGER
-        </span>
-
-        {/* Tabs */}
-        <div style={{ display: 'flex', gap: 1, marginLeft: 4 }}>
-          {(['events', 'state', 'rooms', 'settings'] as const).map(t => (
-            <button
-              key={t}
-              onClick={() => setTab(t)}
-              style={{
-                padding: '2px 8px', borderRadius: 3, border: 'none', cursor: 'pointer',
-                fontFamily: 'monospace', fontSize: 10, textTransform: 'uppercase',
-                background: tab === t ? '#1e293b' : 'transparent',
-                color: tab === t
-                  ? (t === 'settings' ? '#f59e0b' : '#e2e8f0')
-                  : '#475569',
-              }}
-            >
-              {t === 'settings' ? '\u2699' : t}
-            </button>
-          ))}
-        </div>
-
-        <div style={{ flex: 1 }} />
-
-        {/* Controls */}
-        <button
-          onClick={dbg.togglePause}
-          title={dbg.paused ? 'Resume' : 'Pause'}
-          style={{
-            padding: '2px 6px', borderRadius: 3, border: 'none', cursor: 'pointer',
-            fontFamily: 'monospace', fontSize: 10,
-            background: dbg.paused ? '#7c2d12' : '#1e293b',
-            color: dbg.paused ? '#fdba74' : '#94a3b8',
-          }}
-        >
-          {dbg.paused ? '\u25B6' : '\u23F8'}
-        </button>
-        <button
-          onClick={dbg.clearEvents}
-          title="Clear events"
-          style={{
-            padding: '2px 6px', borderRadius: 3, border: 'none', cursor: 'pointer',
-            fontFamily: 'monospace', fontSize: 10,
-            background: '#1e293b', color: '#94a3b8',
-          }}
-        >
-          Clear
-        </button>
-        <span style={{ fontFamily: 'monospace', fontSize: 9, color: '#475569' }}>
-          {dbg.componentCount}C {visibleEvents.length}/{dbg.eventCount}E
-        </span>
-        <button
-          onClick={() => setOpen(false)}
-          title="Close (Ctrl+Shift+D)"
-          style={{
-            width: 18, height: 18, borderRadius: 3, border: 'none', cursor: 'pointer',
-            fontFamily: 'monospace', fontSize: 12, lineHeight: '18px',
-            background: 'transparent', color: '#64748b',
-            display: 'flex', alignItems: 'center', justifyContent: 'center',
-            padding: 0,
-          }}
-        >
-          &#x2715;
-        </button>
-      </div>
-
-      {/* Body */}
-      <div style={{ display: 'flex', flex: 1, overflow: 'hidden', minHeight: 0 }}>
-        {/* Component sidebar */}
-        <div style={{
-          width: 160, borderRight: '1px solid #1e293b',
-          overflow: 'auto', flexShrink: 0, padding: '3px',
-        }}>
-          <button
-            onClick={() => setSelectedId(null)}
-            style={{
-              width: '100%', textAlign: 'left', cursor: 'pointer',
-              padding: '5px 8px', borderRadius: 4, border: 'none',
-              background: selectedId === null ? '#1e293b' : 'transparent',
-              color: '#94a3b8', fontFamily: 'monospace', fontSize: 10,
-            }}
-          >
-            All ({dbg.componentCount})
-          </button>
-
-          {dbg.components.map(comp => (
-            <ComponentCard
-              key={comp.componentId}
-              comp={comp}
-              isSelected={selectedId === comp.componentId}
-              onSelect={() => {
-                setSelectedId(selectedId === comp.componentId ? null : comp.componentId)
-              }}
-            />
-          ))}
-
-          {dbg.components.length === 0 && (
-            <div style={{
-              padding: 10, textAlign: 'center', color: '#475569',
-              fontFamily: 'monospace', fontSize: 10,
-            }}>
-              No components
-            </div>
-          )}
-        </div>
-
-        {/* Main content */}
-        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', minWidth: 0 }}>
-          {/* === Events Tab === */}
-          {tab === 'events' && (
-            <>
-              <FilterBar
-                activeGroups={activeGroups}
-                toggleGroup={toggleGroup}
-                search={search}
-                setSearch={setSearch}
-                groupCounts={groupCounts}
-              />
-              <div
-                ref={feedRef}
-                onScroll={handleFeedScroll}
-                style={{ flex: 1, overflow: 'auto' }}
-              >
-                {visibleEvents.length === 0 ? (
-                  <div style={{
-                    display: 'flex', alignItems: 'center', justifyContent: 'center',
-                    height: '100%', color: '#475569', fontFamily: 'monospace', fontSize: 11,
-                  }}>
-                    {dbg.connected
-                      ? dbg.paused ? 'Paused' : 'Waiting for events...'
-                      : 'Connecting...'}
-                  </div>
-                ) : (
-                  visibleEvents.map(event => {
-                    const color = COLORS[event.type] || '#6b7280'
-                    const label = LABELS[event.type] || event.type
-                    const summary = eventSummary(event)
-                    const isExpanded = expandedEvents.has(event.id)
-                    const time = new Date(event.timestamp)
-                    const ts = `${time.toLocaleTimeString('en-US', { hour12: false })}.${String(time.getMilliseconds()).padStart(3, '0')}`
-                    const py = settings.compactMode ? 1 : 3
-
-                    return (
-                      <div
-                        key={event.id}
-                        style={{ borderBottom: '1px solid #0f172a', cursor: 'pointer' }}
-                        onClick={() => toggleEvent(event.id)}
-                      >
-                        <div style={{
-                          display: 'flex', alignItems: 'center', gap: 5,
-                          padding: `${py}px 8px`, fontSize: fs, fontFamily: 'monospace',
-                          background: isExpanded ? '#0f172a' : 'transparent',
-                        }}>
-                          {settings.showTimestamps && (
-                            <span style={{ color: '#4b5563', fontSize: fs - 1, flexShrink: 0 }}>{ts}</span>
-                          )}
-                          <span style={{
-                            display: 'inline-block', padding: '0 4px', borderRadius: 2,
-                            fontSize: Math.max(8, fs - 2), fontWeight: 700, color: '#fff',
-                            background: color, flexShrink: 0, lineHeight: `${fs + 4}px`,
-                          }}>
-                            {label}
-                          </span>
-                          {!selectedId && event.componentName && (() => {
-                            const comp = dbg.components.find(c => c.componentId === event.componentId)
-                            const name = comp?.debugLabel || event.componentName
-                            return (
-                              <span style={{ color: '#64748b', flexShrink: 0, fontSize: fs - 1 }}>
-                                {name}
-                              </span>
-                            )
-                          })()}
-                          <span style={{
-                            color: '#94a3b8', fontSize: fs - 1, overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            whiteSpace: settings.wordWrap ? 'normal' : 'nowrap',
-                            flex: 1,
-                          }}>
-                            {summary}
-                          </span>
-                        </div>
-                        {isExpanded && (
-                          <div
-                            onClick={e => e.stopPropagation()}
-                            style={{
-                              padding: '3px 8px 6px 42px', fontSize: fs - 1,
-                              fontFamily: 'monospace', color: '#cbd5e1',
-                              background: '#0f172a',
-                              wordBreak: settings.wordWrap ? 'break-all' : undefined,
-                            }}>
-                            <Json data={event.data} />
-                          </div>
-                        )}
-                      </div>
-                    )
-                  })
-                )}
-                {!autoScroll && visibleEvents.length > 0 && (
-                  <button
-                    onClick={() => {
-                      setAutoScroll(true)
-                      if (feedRef.current) feedRef.current.scrollTop = feedRef.current.scrollHeight
-                    }}
-                    style={{
-                      position: 'sticky', bottom: 4, left: '50%',
-                      transform: 'translateX(-50%)',
-                      padding: '3px 10px', borderRadius: 10,
-                      border: '1px solid #1e293b',
-                      background: '#0f172ae0', color: '#94a3b8',
-                      fontFamily: 'monospace', fontSize: 9, cursor: 'pointer',
-                    }}
-                  >
-                    &#8595; Scroll to bottom
-                  </button>
-                )}
-              </div>
-            </>
-          )}
-
-          {/* === State Tab === */}
-          {tab === 'state' && (
-            <div style={{ flex: 1, overflow: 'auto', padding: 10 }}>
-              {selectedComp ? (
-                <div>
-                  <div style={{
-                    fontFamily: 'monospace', fontSize: 12, fontWeight: 700,
-                    marginBottom: 2, color: '#f1f5f9',
-                  }}>
-                    {displayName(selectedComp)}
-                  </div>
-                  {selectedComp.debugLabel && (
-                    <div style={{
-                      fontFamily: 'monospace', fontSize: 9, color: '#64748b',
-                      marginBottom: 6,
-                    }}>
-                      {selectedComp.componentName}
-                    </div>
-                  )}
-
-                  <div style={{
-                    display: 'flex', gap: 4, marginBottom: 10, flexWrap: 'wrap',
-                    fontFamily: 'monospace', fontSize: 9,
-                  }}>
-                    {[
-                      { label: 'state', value: selectedComp.stateChangeCount, color: '#3b82f6' },
-                      { label: 'actions', value: selectedComp.actionCount, color: '#8b5cf6' },
-                      { label: 'errors', value: selectedComp.errorCount, color: selectedComp.errorCount > 0 ? '#ef4444' : '#22c55e' },
-                    ].map(s => (
-                      <span key={s.label} style={{
-                        padding: '2px 6px', borderRadius: 3, background: '#1e293b',
-                      }}>
-                        <span style={{ color: s.color }}>{s.value}</span>
-                        <span style={{ color: '#64748b' }}> {s.label}</span>
-                      </span>
-                    ))}
-                    {selectedComp.rooms.length > 0 && (
-                      <span style={{
-                        padding: '2px 6px', borderRadius: 3, background: '#1e293b', color: '#64748b',
-                      }}>
-                        rooms: {selectedComp.rooms.join(', ')}
-                      </span>
-                    )}
-                  </div>
-
-                  <div style={{
-                    fontFamily: 'monospace', fontSize: 9, color: '#475569', marginBottom: 8,
-                  }}>
-                    {selectedComp.componentId}
-                  </div>
-
-                  <div style={{
-                    fontFamily: 'monospace', fontSize: 9, color: '#64748b',
-                    textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 4,
-                  }}>
-                    Current State
-                  </div>
-                  <div style={{
-                    padding: 8, background: '#0f172a', borderRadius: 4,
-                    fontFamily: 'monospace', fontSize: fs, color: '#e2e8f0',
-                    overflow: 'auto',
-                    wordBreak: settings.wordWrap ? 'break-all' : undefined,
-                  }}>
-                    <Json data={selectedComp.state} />
-                  </div>
-                </div>
-              ) : (
-                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-                  {dbg.components.length === 0 ? (
-                    <div style={{
-                      textAlign: 'center', color: '#475569',
-                      fontFamily: 'monospace', fontSize: 11, padding: 20,
-                    }}>
-                      No active components
-                    </div>
-                  ) : (
-                    dbg.components.map(comp => (
-                      <div key={comp.componentId} style={{
-                        padding: 8, background: '#0f172a', borderRadius: 4,
-                      }}>
-                        <div style={{
-                          display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4,
-                        }}>
-                          <span style={{
-                            fontFamily: 'monospace', fontSize: 11, fontWeight: 700, color: '#f1f5f9',
-                          }}>
-                            {displayName(comp)}
-                          </span>
-                          <span style={{ fontFamily: 'monospace', fontSize: 9, color: '#475569' }}>
-                            S:{comp.stateChangeCount} A:{comp.actionCount}
-                            {comp.errorCount > 0 && <span style={{ color: '#f87171' }}> E:{comp.errorCount}</span>}
-                          </span>
-                        </div>
-                        <div style={{ fontFamily: 'monospace', fontSize: fs, color: '#e2e8f0' }}>
-                          <Json data={comp.state} />
-                        </div>
-                      </div>
-                    ))
-                  )}
-                </div>
-              )}
-            </div>
-          )}
-
-          {/* === Rooms Tab === */}
-          {tab === 'rooms' && (
-            <div style={{ flex: 1, overflow: 'auto', padding: 10, display: 'flex', flexDirection: 'column', gap: 8 }}>
-              {roomsMap.size === 0 ? (
-                <div style={{
-                  display: 'flex', alignItems: 'center', justifyContent: 'center',
-                  height: '100%', color: '#475569', fontFamily: 'monospace', fontSize: 11,
-                }}>
-                  No active rooms
-                </div>
-              ) : (
-                <>
-                  {/* Room cards */}
-                  {Array.from(roomsMap.entries()).map(([roomId, members]) => (
-                    <div key={roomId} style={{
-                      padding: 10, background: '#0f172a', borderRadius: 6,
-                      border: '1px solid #1e293b',
-                    }}>
-                      {/* Room header */}
-                      <div style={{
-                        display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8,
-                      }}>
-                        <span style={{
-                          width: 8, height: 8, borderRadius: '50%',
-                          background: '#10b981', flexShrink: 0,
-                        }} />
-                        <span style={{
-                          fontFamily: 'monospace', fontSize: 12, fontWeight: 700, color: '#f1f5f9',
-                        }}>
-                          {roomId}
-                        </span>
-                        <span style={{
-                          fontFamily: 'monospace', fontSize: 9, color: '#64748b',
-                          padding: '1px 6px', borderRadius: 3, background: '#1e293b',
-                        }}>
-                          {members.length} {members.length === 1 ? 'member' : 'members'}
-                        </span>
-                      </div>
-
-                      {/* Members list */}
-                      <div style={{
-                        display: 'flex', flexDirection: 'column', gap: 4,
-                        paddingLeft: 16,
-                      }}>
-                        {members.map(comp => (
-                          <div key={comp.componentId} style={{
-                            display: 'flex', alignItems: 'center', gap: 6,
-                            fontFamily: 'monospace', fontSize: 10,
-                          }}>
-                            <span style={{ color: '#22c55e', fontSize: 5 }}>&#9679;</span>
-                            <span style={{ color: '#e2e8f0' }}>{displayName(comp)}</span>
-                            {comp.debugLabel && (
-                              <span style={{ color: '#475569', fontSize: 9 }}>({comp.componentName})</span>
-                            )}
-                            <span style={{ color: '#475569', fontSize: 9 }}>
-                              S:{comp.stateChangeCount} A:{comp.actionCount}
-                            </span>
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-                  ))}
-
-                  {/* Recent room events */}
-                  {roomEvents.length > 0 && (
-                    <div style={{ marginTop: 4 }}>
-                      <div style={{
-                        fontFamily: 'monospace', fontSize: 9, color: '#64748b',
-                        textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 6,
-                      }}>
-                        Recent Room Activity
-                      </div>
-                      <div style={{
-                        background: '#0f172a', borderRadius: 4, border: '1px solid #1e293b',
-                        overflow: 'auto', maxHeight: 160,
-                      }}>
-                        {roomEvents.map(event => {
-                          const color = COLORS[event.type] || '#6b7280'
-                          const label = LABELS[event.type] || event.type
-                          const summary = eventSummary(event)
-                          const time = new Date(event.timestamp)
-                          const ts = `${time.toLocaleTimeString('en-US', { hour12: false })}.${String(time.getMilliseconds()).padStart(3, '0')}`
-                          const comp = dbg.components.find(c => c.componentId === event.componentId)
-                          const name = comp?.debugLabel || event.componentName
-
-                          return (
-                            <div key={event.id} style={{
-                              display: 'flex', alignItems: 'center', gap: 5,
-                              padding: '2px 8px', fontSize: 10, fontFamily: 'monospace',
-                              borderBottom: '1px solid #020617',
-                            }}>
-                              <span style={{ color: '#4b5563', fontSize: 9, flexShrink: 0 }}>{ts}</span>
-                              <span style={{
-                                display: 'inline-block', padding: '0 4px', borderRadius: 2,
-                                fontSize: 8, fontWeight: 700, color: '#fff',
-                                background: color, flexShrink: 0, lineHeight: '14px',
-                              }}>
-                                {label}
-                              </span>
-                              {name && <span style={{ color: '#64748b', fontSize: 9 }}>{name}</span>}
-                              <span style={{
-                                color: '#94a3b8', fontSize: 9, overflow: 'hidden',
-                                textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1,
-                              }}>
-                                {summary}
-                              </span>
-                            </div>
-                          )
-                        })}
-                      </div>
-                    </div>
-                  )}
-                </>
-              )}
-            </div>
-          )}
-
-          {/* === Settings Tab === */}
-          {tab === 'settings' && (
-            <SettingsPanel settings={settings} onChange={updateSettings} />
-          )}
-        </div>
-      </div>
-
-      {/* Resize handle - bottom-right corner */}
-      <div
-        onMouseDown={onResizeStart}
-        style={{
-          position: 'absolute', bottom: 0, right: 0,
-          width: 14, height: 14, cursor: 'nwse-resize',
-          display: 'flex', alignItems: 'center', justifyContent: 'center',
-        }}
-      >
-        <svg width="8" height="8" viewBox="0 0 8 8" style={{ opacity: 0.3 }}>
-          <line x1="7" y1="1" x2="1" y2="7" stroke="#94a3b8" strokeWidth="1" />
-          <line x1="7" y1="4" x2="4" y2="7" stroke="#94a3b8" strokeWidth="1" />
-        </svg>
-      </div>
-    </div>
-  )
-}