@cero-base/panel 0.0.1

package/src/components/panel.jsx

@@ -0,0 +1,1131 @@
+import { useState, useMemo, useEffect, useRef, Fragment } from 'react'
+import {
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getSortedRowModel,
+  useReactTable
+} from '@tanstack/react-table'
+import { useCollection } from '../hooks/use-collection'
+import { useSchema, useCollectionSchema } from '../hooks/use-schema'
+import { useIdentityData, useRoomData } from '../hooks/use-system'
+import * as b4a from 'b4a'
+import {
+  Database,
+  X,
+  ChevronRight,
+  ArrowUpDown,
+  User,
+  Users,
+  Key,
+  Home,
+  Smartphone,
+  Mail,
+  Settings,
+  Search,
+  Download,
+  ChevronDown,
+  ChevronUp,
+  ImageIcon,
+  Braces,
+  List,
+  Binary,
+  Copy,
+  Check
+} from 'lucide-react'
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from './ui/table'
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuCheckboxItem
+} from './ui/dropdown-menu'
+import { Tabs, TabsList, TabsTrigger } from './ui/tabs'
+import { Checkbox } from './ui/checkbox'
+import { Button, buttonVariants } from './ui/button'
+import { Input } from './ui/input'
+import { Badge } from './ui/badge'
+import { ScrollArea } from './ui/scroll-area'
+import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from './ui/resizable'
+import { cn } from '../lib/utils'
+
+function truncate(str, len = 120) {
+  if (!str || str.length <= len) return str
+  return str.slice(0, len) + '...'
+}
+
+function formatValue(val) {
+  if (val === null || val === undefined) return '-'
+  if (val instanceof Uint8Array || b4a.isBuffer(val)) {
+    return val.toString('hex')
+  }
+  if (typeof val === 'object') return JSON.stringify(val)
+  return String(val)
+}
+
+// Check if bytes represent an image by magic bytes
+function detectImageType(bytes) {
+  if (!bytes || bytes.length < 4) return null
+  // PNG: 89 50 4E 47
+  if (bytes[0] === 0x89 && bytes[1] === 0x50 && bytes[2] === 0x4e && bytes[3] === 0x47)
+    return 'image/png'
+  // JPEG: FF D8 FF
+  if (bytes[0] === 0xff && bytes[1] === 0xd8 && bytes[2] === 0xff) return 'image/jpeg'
+  // GIF: 47 49 46 38
+  if (bytes[0] === 0x47 && bytes[1] === 0x49 && bytes[2] === 0x46 && bytes[3] === 0x38)
+    return 'image/gif'
+  // WebP: 52 49 46 46 ... 57 45 42 50
+  if (
+    bytes[0] === 0x52 &&
+    bytes[1] === 0x49 &&
+    bytes[2] === 0x46 &&
+    bytes[3] === 0x46 &&
+    bytes.length > 11 &&
+    bytes[8] === 0x57 &&
+    bytes[9] === 0x45 &&
+    bytes[10] === 0x42 &&
+    bytes[11] === 0x50
+  )
+    return 'image/webp'
+  return null
+}
+
+// Binary data display component
+function BinaryCell({ value, field }) {
+  const [copied, setCopied] = useState(false)
+
+  if (!value) return <span className='text-muted-foreground'>null</span>
+
+  const bytes = value instanceof Uint8Array ? value : b4a.isBuffer(value) ? value : null
+
+  if (!bytes) return <span className='text-muted-foreground'>-</span>
+
+  // Check if it's an image
+  const imageType = detectImageType(bytes)
+  if (imageType) {
+    const base64 = btoa(String.fromCharCode(...bytes))
+    const src = `data:${imageType};base64,${base64}`
+    return (
+      <span className='relative group'>
+        <img
+          src={src}
+          alt={field}
+          className='w-6 h-6 rounded object-cover cursor-pointer'
+          onError={(e) => {
+            e.target.style.display = 'none'
+          }}
+        />
+        {/* Hover preview */}
+        <span className='absolute left-0 bottom-full mb-2 hidden group-hover:block z-50 p-1 bg-popover border border-border rounded-lg shadow-xl'>
+          <img src={src} alt={field} className='max-w-48 max-h-48 rounded object-contain' />
+        </span>
+      </span>
+    )
+  }
+
+  const hex = bytes.toString('hex')
+  const preview = hex.slice(0, 8)
+  const size = bytes.length
+
+  const copyHex = (e) => {
+    e.stopPropagation()
+    navigator.clipboard?.writeText(hex)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 1500)
+  }
+
+  return (
+    <span
+      className='inline-flex items-center gap-1.5 cursor-pointer group'
+      onClick={copyHex}
+      title={`${size} bytes - Click to copy hex`}
+    >
+      <Binary className='w-3 h-3 text-cyan-500' />
+      <span className='font-mono text-muted-foreground'>{preview}…</span>
+      <span className='text-[10px] text-muted-foreground/70'>{size}B</span>
+      {copied ? (
+        <Check className='w-3 h-3 text-green-500' />
+      ) : (
+        <Copy className='w-3 h-3 text-muted-foreground/50 opacity-0 group-hover:opacity-100 transition-opacity' />
+      )}
+    </span>
+  )
+}
+
+function formatTimestamp(ts) {
+  if (!ts) return '-'
+  return new Date(ts).toLocaleString()
+}
+
+// ============================================================================
+// Data Tab Components
+// ============================================================================
+
+function CollectionView({ db, collection, room, rooms, onRoomChange }) {
+  const schema = useCollectionSchema(db, collection.name)
+  const needsRoom = collection.scope === 'shared'
+  const [openedRoom, setOpenedRoom] = useState(null)
+  const { data, loading, put, del } = useCollection(
+    db,
+    collection.name,
+    needsRoom ? openedRoom : null
+  )
+  const [checked, setChecked] = useState(new Set())
+  const [editing, setEditing] = useState(null)
+  const [editValue, setEditValue] = useState('')
+  const [showAdd, setShowAdd] = useState(false)
+  const [newDoc, setNewDoc] = useState({})
+  const [sortField, setSortField] = useState(null)
+  const [sortDir, setSortDir] = useState('asc')
+
+  useEffect(() => {
+    if (!needsRoom || !room) {
+      setOpenedRoom(null)
+      return
+    }
+    let cancelled = false
+    db.rooms
+      .open(room.id)
+      .then((sub) => {
+        if (!cancelled) setOpenedRoom(sub)
+      })
+      .catch(() => {})
+    return () => {
+      cancelled = true
+    }
+  }, [db, room, needsRoom])
+
+  const fields = Object.keys(schema?.fields || {})
+  const isOpening = needsRoom && room && !openedRoom
+
+  const toggleSort = (field) => {
+    if (sortField === field) {
+      setSortDir(sortDir === 'asc' ? 'desc' : 'asc')
+    } else {
+      setSortField(field)
+      setSortDir('asc')
+    }
+  }
+
+  const sortedData = [...data].sort((a, b) => {
+    if (!sortField) return 0
+    const aVal = a[sortField]
+    const bVal = b[sortField]
+    if (aVal === bVal) return 0
+    if (aVal === null || aVal === undefined) return 1
+    if (bVal === null || bVal === undefined) return -1
+    const cmp = aVal < bVal ? -1 : 1
+    return sortDir === 'asc' ? cmp : -cmp
+  })
+
+  const toggleCheck = (doc, e) => {
+    e?.stopPropagation?.()
+    const key = JSON.stringify(doc)
+    const next = new Set(checked)
+    if (next.has(key)) next.delete(key)
+    else next.add(key)
+    setChecked(next)
+  }
+
+  const toggleAll = () => {
+    if (checked.size === data.length) {
+      setChecked(new Set())
+    } else {
+      setChecked(new Set(data.map((d) => JSON.stringify(d))))
+    }
+  }
+
+  const startEdit = (doc, field, e) => {
+    e.stopPropagation()
+    const isKey = schema?.key?.includes(field)
+    if (isKey) return
+    setEditing({ docKey: JSON.stringify(doc), field })
+    setEditValue(formatValue(doc[field]))
+  }
+
+  const commitEdit = (doc) => {
+    const field = editing.field
+    const query = schema.key.reduce((q, k) => ({ ...q, [k]: doc[k] }), {})
+    const newVal =
+      schema.fields[field]?.type === 'int' || schema.fields[field]?.type === 'uint'
+        ? parseInt(editValue, 10)
+        : schema.fields[field]?.type === 'float'
+          ? parseFloat(editValue)
+          : schema.fields[field]?.type === 'bool'
+            ? editValue === 'true'
+            : editValue
+    const updated = { ...doc, [field]: newVal }
+    if (fields.includes('updatedAt')) {
+      updated.updatedAt = Date.now()
+    }
+    update(query, updated)
+    setEditing(null)
+  }
+
+  const cancelEdit = () => {
+    setEditing(null)
+  }
+
+  return (
+    <div className='flex flex-1 overflow-hidden'>
+      <div className='flex-1 flex flex-col overflow-hidden'>
+        <div className='px-3 py-2 border-b border-border flex items-center gap-2 flex-wrap bg-muted/30'>
+          <span className='font-semibold text-sm'>{collection.name}</span>
+          <Badge variant='secondary'>{collection.scope}</Badge>
+          {needsRoom && (
+            <select
+              value={room?.id || ''}
+              onChange={(e) => onRoomChange(rooms.find((r) => r.id === e.target.value) || null)}
+              className='h-7 px-2 bg-input/20 border border-input rounded-md text-xs outline-none'
+            >
+              <option value=''>Select room...</option>
+              {rooms.map((r) => (
+                <option key={r.id} value={r.id}>
+                  {r.name || r.id?.slice(0, 8)}
+                </option>
+              ))}
+            </select>
+          )}
+          <span className='text-xs text-muted-foreground'>
+            {isOpening ? 'Opening...' : loading ? 'Loading...' : `${data.length} docs`}
+          </span>
+          {checked.size > 0 && (
+            <>
+              <span className='text-xs text-primary'>{checked.size} selected</span>
+              <Button
+                variant='destructive'
+                size='xs'
+                onClick={() => {
+                  if (confirm(`Delete ${checked.size} documents?`)) {
+                    for (const key of checked) {
+                      const doc = JSON.parse(key)
+                      const query = schema.key.reduce((q, k) => ({ ...q, [k]: doc[k] }), {})
+                      del(query)
+                    }
+                    setChecked(new Set())
+                  }
+                }}
+              >
+                Delete
+              </Button>
+            </>
+          )}
+          <div className='ml-auto'>
+            <Button
+              size='sm'
+              onClick={() => {
+                setNewDoc({})
+                setShowAdd(true)
+              }}
+            >
+              + Add
+            </Button>
+          </div>
+        </div>
+
+        <ScrollArea className='flex-1'>
+          {needsRoom && !room ? (
+            <div className='p-10 text-center text-amber-500 text-xs'>
+              Select a room to view data
+            </div>
+          ) : loading || isOpening ? (
+            <div className='p-10 text-center text-muted-foreground'>Loading...</div>
+          ) : data.length === 0 ? (
+            <div className='p-10 text-center text-muted-foreground'>No documents</div>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className='w-10'>
+                    <Checkbox
+                      checked={checked.size === sortedData.length && sortedData.length > 0}
+                      onCheckedChange={toggleAll}
+                    />
+                  </TableHead>
+                  {fields.map((f) => (
+                    <TableHead key={f}>
+                      <button
+                        type='button'
+                        onClick={() => toggleSort(f)}
+                        className='flex items-center gap-1 cursor-pointer select-none hover:text-foreground transition-colors'
+                      >
+                        {f}
+                        {sortField === f ? (
+                          sortDir === 'asc' ? (
+                            <ArrowUp className='w-3 h-3 text-primary' />
+                          ) : (
+                            <ArrowDown className='w-3 h-3 text-primary' />
+                          )
+                        ) : (
+                          <ArrowUpDown className='w-3 h-3 text-muted-foreground/50' />
+                        )}
+                      </button>
+                    </TableHead>
+                  ))}
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {sortedData.map((doc, i) => {
+                  const key = JSON.stringify(doc)
+                  const isChecked = checked.has(key)
+                  return (
+                    <TableRow key={i} className={cn(isChecked && 'bg-muted/50')}>
+                      <TableCell className='w-10'>
+                        <Checkbox
+                          checked={isChecked}
+                          onCheckedChange={() => toggleCheck(doc)}
+                          onClick={(e) => e.stopPropagation()}
+                        />
+                      </TableCell>
+                      {fields.map((f) => {
+                        const isKey = schema?.key?.includes(f)
+                        const isEditingThis = editing?.docKey === key && editing?.field === f
+                        return (
+                          <TableCell
+                            key={f}
+                            className='p-0'
+                            onDoubleClick={(e) => startEdit(doc, f, e)}
+                          >
+                            <div className='relative'>
+                              <div
+                                className={cn(
+                                  'px-3 py-2',
+                                  !isKey && 'cursor-text hover:bg-muted/50',
+                                  isEditingThis && 'invisible'
+                                )}
+                              >
+                                {formatValue(doc[f])}
+                              </div>
+                              {isEditingThis && (
+                                <Input
+                                  autoFocus
+                                  value={editValue}
+                                  onChange={(e) => setEditValue(e.target.value)}
+                                  onKeyDown={(e) => {
+                                    if (e.key === 'Enter') {
+                                      commitEdit(doc)
+                                    } else if (e.key === 'Escape') {
+                                      cancelEdit()
+                                    }
+                                  }}
+                                  onBlur={() => commitEdit(doc)}
+                                  onClick={(e) => e.stopPropagation()}
+                                  className='absolute inset-0 h-full w-full rounded-none border-0 border-b-2 border-primary bg-primary/10 font-mono text-xs px-3'
+                                />
+                              )}
+                            </div>
+                          </TableCell>
+                        )
+                      })}
+                    </TableRow>
+                  )
+                })}
+              </TableBody>
+            </Table>
+          )}
+        </ScrollArea>
+      </div>
+
+      {showAdd && (
+        <div className='w-80 border-l border-border flex flex-col bg-muted/30'>
+          <div className='p-3 border-b border-border flex items-center justify-between'>
+            <span className='font-semibold text-xs'>New Document</span>
+            <Button variant='ghost' size='icon-xs' onClick={() => setShowAdd(false)}>
+              <X className='w-3.5 h-3.5' />
+            </Button>
+          </div>
+          <ScrollArea className='flex-1 p-3'>
+            {fields.map((f) => (
+              <div key={f} className='mb-3'>
+                <div className='text-[10px] text-muted-foreground uppercase mb-1'>
+                  {f}
+                  {schema?.fields[f]?.required && <span className='text-destructive'> *</span>}
+                </div>
+                <Input
+                  value={newDoc[f] || ''}
+                  onChange={(e) => setNewDoc({ ...newDoc, [f]: e.target.value })}
+                  placeholder={schema?.fields[f]?.type || 'value'}
+                  className='font-mono'
+                />
+              </div>
+            ))}
+
+            <Button
+              className='w-full mt-2'
+              onClick={async () => {
+                const doc = {}
+                for (const f of fields) {
+                  const type = schema?.fields[f]?.type
+                  const val = newDoc[f]
+                  if (type === 'int' || type === 'uint') {
+                    doc[f] = parseInt(val, 10) || 0
+                  } else if (type === 'float') {
+                    doc[f] = parseFloat(val) || 0
+                  } else if (type === 'bool') {
+                    doc[f] = val === 'true'
+                  } else {
+                    doc[f] = val || ''
+                  }
+                }
+                const now = Date.now()
+                if (fields.includes('createdAt')) {
+                  doc.createdAt = now
+                }
+                if (fields.includes('updatedAt')) {
+                  doc.updatedAt = now
+                }
+                await put(doc)
+                setShowAdd(false)
+                setNewDoc({})
+              }}
+            >
+              Create Document
+            </Button>
+          </ScrollArea>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function DataSidebar({ collections, selected, onSelect }) {
+  const grouped = {
+    local: collections.filter((c) => c.scope === 'local'),
+    private: collections.filter((c) => c.scope === 'private'),
+    shared: collections.filter((c) => c.scope === 'shared')
+  }
+
+  return (
+    <ScrollArea className='h-full bg-muted/30'>
+      {Object.entries(grouped).map(
+        ([scope, cols]) =>
+          cols.length > 0 && (
+            <div key={scope} className='p-3'>
+              <div className='text-[10px] text-muted-foreground uppercase mb-2 font-medium'>
+                {scope} ({cols.length})
+              </div>
+              {cols.map((c) => {
+                const isActive = selected?.name === c.name
+                return (
+                  <Button
+                    key={c.name}
+                    variant={isActive ? 'default' : 'ghost'}
+                    size='sm'
+                    className={cn(
+                      'w-full justify-start mb-0.5',
+                      !isActive && 'text-muted-foreground'
+                    )}
+                    onClick={() => onSelect(c)}
+                  >
+                    {isActive && <ChevronRight className='w-3 h-3 mr-1' />}
+                    <span className={!isActive ? 'ml-4' : ''}>{c.name}</span>
+                  </Button>
+                )
+              })}
+            </div>
+          )
+      )}
+    </ScrollArea>
+  )
+}
+
+// ============================================================================
+// System Tab Components
+// ============================================================================
+
+const IDENTITY_ITEMS = [
+  { id: 'profile', label: 'Profile', icon: User },
+  { id: 'devices', label: 'Devices', icon: Smartphone },
+  { id: 'invites', label: 'Invites', icon: Mail },
+  { id: 'rooms', label: 'Rooms', icon: Home },
+  { id: 'settings', label: 'Settings', icon: Settings }
+]
+
+const ROOM_ITEMS = [
+  { id: 'profile', label: 'Profile', icon: Settings },
+  { id: 'members', label: 'Members', icon: Users },
+  { id: 'devices', label: 'Devices', icon: Smartphone },
+  { id: 'invites', label: 'Invites', icon: Key }
+]
+
+function SystemSidebar({ selected, onSelect, rooms, room, onRoomChange }) {
+  return (
+    <ScrollArea className='h-full bg-muted/30'>
+      <div className='p-3'>
+        <div className='text-[10px] text-muted-foreground uppercase mb-2 font-medium'>Identity</div>
+        {IDENTITY_ITEMS.map((item) => {
+          const isActive = selected?.scope === 'identity' && selected?.type === item.id
+          const Icon = item.icon
+          return (
+            <Button
+              key={item.id}
+              variant={isActive ? 'default' : 'ghost'}
+              size='sm'
+              className={cn('w-full justify-start mb-0.5', !isActive && 'text-muted-foreground')}
+              onClick={() => onSelect({ scope: 'identity', type: item.id })}
+            >
+              <Icon className='w-3.5 h-3.5 mr-2' />
+              {item.label}
+            </Button>
+          )
+        })}
+      </div>
+
+      <div className='p-3 pt-0'>
+        <div className='text-[10px] text-muted-foreground uppercase mb-2 font-medium'>Room</div>
+        <select
+          value={room?.id || ''}
+          onChange={(e) => onRoomChange(rooms.find((r) => r.id === e.target.value) || null)}
+          className='w-full h-7 px-2 mb-2 bg-input/20 border border-input rounded-md text-xs outline-none'
+        >
+          <option value=''>Select room...</option>
+          {rooms.map((r) => (
+            <option key={r.id} value={r.id}>
+              {r.name || r.id?.slice(0, 8)}
+            </option>
+          ))}
+        </select>
+        {ROOM_ITEMS.map((item) => {
+          const isActive = selected?.scope === 'room' && selected?.type === item.id
+          const Icon = item.icon
+          return (
+            <Button
+              key={item.id}
+              variant={isActive ? 'default' : 'ghost'}
+              size='sm'
+              className={cn(
+                'w-full justify-start mb-0.5',
+                !isActive && 'text-muted-foreground',
+                !room && 'opacity-50 pointer-events-none'
+              )}
+              onClick={() => onSelect({ scope: 'room', type: item.id })}
+            >
+              <Icon className='w-3.5 h-3.5 mr-2' />
+              {item.label}
+            </Button>
+          )
+        })}
+      </div>
+    </ScrollArea>
+  )
+}
+
+function formatCell(field, val) {
+  if (val === null || val === undefined) return <span className='text-muted-foreground'>null</span>
+  if (val instanceof Uint8Array || b4a.isBuffer(val))
+    return <BinaryCell value={val} field={field} />
+  if (field.endsWith('At') || field === 'expires') return formatTimestamp(val)
+  if (field === 'id' || field.endsWith('Id')) return String(val)
+  if (field === 'avatar' || field === 'image' || field === 'picture') {
+    const src =
+      typeof val === 'string'
+        ? val
+        : val?.url ||
+          val?.src ||
+          (val?.data ? `data:${val.type || 'image/png'};base64,${val.data}` : null)
+    if (src) {
+      return (
+        <span className='relative group'>
+          <img
+            src={src}
+            alt={field}
+            className='w-6 h-6 rounded-full object-cover'
+            onError={(e) => {
+              e.target.style.display = 'none'
+            }}
+          />
+          <span className='absolute left-0 bottom-full mb-2 hidden group-hover:block z-50 p-1 bg-popover border border-border rounded-lg shadow-xl'>
+            <img src={src} alt={field} className='max-w-48 max-h-48 rounded object-contain' />
+          </span>
+        </span>
+      )
+    }
+    return <ImageIcon className='w-4 h-4 text-muted-foreground' />
+  }
+  if (Array.isArray(val)) {
+    const isBinary = val.length > 0 && (val[0] instanceof Uint8Array || b4a.isBuffer(val[0]))
+    return (
+      <span className='inline-flex items-center gap-1 text-muted-foreground'>
+        {isBinary ? <Binary className='w-3 h-3 text-cyan-500' /> : <List className='w-3 h-3' />}
+        <span className='text-foreground'>[{val.length}]</span>
+      </span>
+    )
+  }
+  if (typeof val === 'object') {
+    return (
+      <span className='inline-flex items-center gap-1 text-muted-foreground'>
+        <Braces className='w-3 h-3' />
+        <span className='text-foreground'>{`{${Object.keys(val).length}}`}</span>
+      </span>
+    )
+  }
+  if (typeof val === 'boolean') {
+    return (
+      <span className={cn('font-medium', val ? 'text-green-500' : 'text-muted-foreground')}>
+        {String(val)}
+      </span>
+    )
+  }
+  return String(val)
+}
+
+function buildColumns(fields) {
+  return [
+    {
+      id: '_expand',
+      header: () => null,
+      cell: ({ row }) => (
+        <button type='button' onClick={() => row.toggleExpanded()} className='p-0'>
+          {row.getIsExpanded() ? (
+            <ChevronUp className='w-3.5 h-3.5 text-muted-foreground' />
+          ) : (
+            <ChevronDown className='w-3.5 h-3.5 text-muted-foreground' />
+          )}
+        </button>
+      ),
+      enableSorting: false,
+      enableHiding: false,
+      size: 32
+    },
+    ...fields.map((field) => ({
+      accessorKey: field,
+      header: ({ column }) => (
+        <Button
+          variant='ghost'
+          size='sm'
+          className='-ml-3 h-8'
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+        >
+          {field}
+          <ArrowUpDown className='ml-1 w-3 h-3' />
+        </Button>
+      ),
+      cell: ({ row }) => {
+        const val = row.getValue(field)
+        return <div className='font-mono text-xs'>{formatCell(field, val)}</div>
+      },
+      filterFn: (row, columnId, filterValue) => {
+        const val = row.getValue(columnId)
+        if (val === null || val === undefined) return false
+        return String(val).toLowerCase().includes(filterValue.toLowerCase())
+      }
+    }))
+  ]
+}
+
+function SystemTable({ data, loading, type, searchRef }) {
+  const [sorting, setSorting] = useState([])
+  const [columnVisibility, setColumnVisibility] = useState({})
+  const [globalFilter, setGlobalFilter] = useState('')
+  const [expanded, setExpanded] = useState({})
+  const inputRef = useRef(null)
+
+  useEffect(() => {
+    if (searchRef) searchRef.current = inputRef.current
+  }, [searchRef])
+
+  const items = Array.isArray(data) ? data : data ? [data] : []
+  const fieldsKey =
+    items.length > 0
+      ? Object.keys(items[0] || {})
+          .filter((f) => !f.startsWith('_'))
+          .join(',')
+      : ''
+  const fields = useMemo(() => (fieldsKey ? fieldsKey.split(',') : []), [fieldsKey])
+  const columns = useMemo(() => buildColumns(fields), [fieldsKey])
+
+  const table = useReactTable({
+    data: items,
+    columns,
+    state: { sorting, columnVisibility, globalFilter, expanded },
+    onSortingChange: setSorting,
+    onColumnVisibilityChange: setColumnVisibility,
+    onGlobalFilterChange: setGlobalFilter,
+    onExpandedChange: setExpanded,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    globalFilterFn: (row, columnId, filterValue) => {
+      const q = filterValue.toLowerCase()
+      return fields.some((f) => {
+        const val = row.getValue(f)
+        if (val === null || val === undefined) return false
+        return String(val).toLowerCase().includes(q)
+      })
+    }
+  })
+
+  const exportJson = () => {
+    const rows = table.getFilteredRowModel().rows.map((r) => r.original)
+    const blob = new Blob([JSON.stringify(rows, null, 2)], { type: 'application/json' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `${type || 'data'}.json`
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+
+  return (
+    <div className='flex flex-col h-full'>
+      {/* Toolbar */}
+      <div className='px-3 py-2 border-b border-border flex items-center gap-2 bg-muted/20'>
+        <div className='relative flex-1 max-w-64'>
+          <Search className='absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground' />
+          <Input
+            ref={inputRef}
+            value={globalFilter}
+            onChange={(e) => setGlobalFilter(e.target.value)}
+            placeholder='Search... (⌘K)'
+            className='pl-8 h-7 text-xs'
+          />
+        </div>
+        <span className='text-xs text-muted-foreground'>
+          {loading
+            ? 'Loading...'
+            : `${table.getFilteredRowModel().rows.length}${globalFilter ? ` / ${items.length}` : ''} rows`}
+        </span>
+        {fields.length > 0 && (
+          <div className='flex items-center gap-1 ml-auto'>
+            <Button
+              variant='ghost'
+              size='sm'
+              onClick={exportJson}
+              className='h-7 gap-1.5'
+              title='Export as JSON'
+            >
+              <Download className='w-3.5 h-3.5' />
+              Export
+            </Button>
+            <DropdownMenu modal={false}>
+              <DropdownMenuTrigger
+                className={cn(buttonVariants({ variant: 'outline', size: 'sm' }), 'h-7')}
+              >
+                Columns <ChevronDown className='ml-1 w-3.5 h-3.5' />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align='end'>
+                {table
+                  .getAllColumns()
+                  .filter((col) => col.getCanHide())
+                  .map((col) => (
+                    <DropdownMenuCheckboxItem
+                      key={col.id}
+                      checked={col.getIsVisible()}
+                      onCheckedChange={(value) => col.toggleVisibility(!!value)}
+                    >
+                      {col.id}
+                    </DropdownMenuCheckboxItem>
+                  ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        )}
+      </div>
+
+      {/* Table */}
+      <div className='flex-1 min-h-0 overflow-auto'>
+        {loading ? (
+          <div className='p-10 text-center text-muted-foreground'>Loading...</div>
+        ) : items.length === 0 ? (
+          <div className='p-10 text-center text-muted-foreground'>No data</div>
+        ) : (
+          <Table>
+            <TableHeader>
+              {table.getHeaderGroups().map((group) => (
+                <TableRow key={group.id}>
+                  {group.headers.map((header) => (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(header.column.columnDef.header, header.getContext())}
+                    </TableHead>
+                  ))}
+                </TableRow>
+              ))}
+            </TableHeader>
+            <TableBody>
+              {table.getRowModel().rows.length === 0 ? (
+                <TableRow>
+                  <TableCell
+                    colSpan={columns.length}
+                    className='h-24 text-center text-muted-foreground'
+                  >
+                    No results
+                  </TableCell>
+                </TableRow>
+              ) : (
+                table.getRowModel().rows.map((row) => (
+                  <Fragment key={row.id}>
+                    <TableRow
+                      className={cn('cursor-pointer', row.getIsExpanded() && 'bg-muted/30')}
+                      onClick={() => row.toggleExpanded()}
+                    >
+                      {row.getVisibleCells().map((cell) => (
+                        <TableCell key={cell.id}>
+                          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                    {row.getIsExpanded() && (
+                      <TableRow>
+                        <TableCell
+                          colSpan={row.getVisibleCells().length}
+                          className='p-0 bg-muted/10'
+                        >
+                          <div className='p-4 border-t border-border'>
+                            <div className='text-[10px] uppercase text-muted-foreground mb-2 font-medium'>
+                              Full Document
+                            </div>
+                            <pre className='text-xs font-mono bg-background/50 p-3 rounded border border-border overflow-auto max-h-64'>
+                              {JSON.stringify(
+                                row.original,
+                                (k, v) => {
+                                  if (v instanceof Uint8Array || b4a.isBuffer(v))
+                                    return v.toString('hex')
+                                  return v
+                                },
+                                2
+                              )}
+                            </pre>
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    )}
+                  </Fragment>
+                ))
+              )}
+            </TableBody>
+          </Table>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function SystemView({ cero, selected, room, openedRoom, searchRef }) {
+  const identityProfile = useIdentityData(cero, 'profile')
+  const identityDevices = useIdentityData(cero, 'devices')
+  const identityInvites = useIdentityData(cero, 'invites')
+  const identityRooms = useIdentityData(cero, 'rooms')
+  const identitySettings = useIdentityData(cero, 'settings')
+
+  const roomProfile = useRoomData(cero, openedRoom, 'profile')
+  const roomMembers = useRoomData(cero, openedRoom, 'members')
+  const roomDevices = useRoomData(cero, openedRoom, 'devices')
+  const roomInvites = useRoomData(cero, openedRoom, 'invites')
+
+  if (!selected) {
+    return (
+      <div className='flex-1 flex items-center justify-center text-muted-foreground'>
+        Select a system collection
+      </div>
+    )
+  }
+
+  const getData = () => {
+    if (selected.scope === 'identity') {
+      switch (selected.type) {
+        case 'profile':
+          return identityProfile
+        case 'devices':
+          return identityDevices
+        case 'invites':
+          return identityInvites
+        case 'rooms':
+          return identityRooms
+        case 'settings':
+          return identitySettings
+      }
+    } else if (selected.scope === 'room') {
+      if (!room) {
+        return { data: null, loading: false }
+      }
+      switch (selected.type) {
+        case 'profile':
+          return roomProfile
+        case 'members':
+          return roomMembers
+        case 'devices':
+          return roomDevices
+        case 'invites':
+          return roomInvites
+      }
+    }
+    return { data: null, loading: false }
+  }
+
+  const { data, loading } = getData()
+  const title =
+    selected.scope === 'identity' ? `Identity ${selected.type}` : `Room ${selected.type}`
+
+  return (
+    <div className='flex-1 flex flex-col min-w-0'>
+      {selected.scope === 'room' && !room ? (
+        <div className='p-10 text-center text-amber-500 text-xs'>Select a room to view data</div>
+      ) : (
+        <SystemTable
+          key={`${selected.scope}-${selected.type}`}
+          data={data}
+          loading={loading}
+          type={selected.type}
+          searchRef={searchRef}
+        />
+      )}
+    </div>
+  )
+}
+
+// ============================================================================
+// Main Panel
+// ============================================================================
+
+function PanelButton({ onClick }) {
+  return (
+    <Button
+      onClick={onClick}
+      title='Open Data Panel'
+      size='icon'
+      className='fixed bottom-4 left-4 z-99999 rounded-full shadow-lg'
+    >
+      <Database className='w-4 h-4' />
+    </Button>
+  )
+}
+
+export function CeroPanel({ db, defaultOpen = false }) {
+  const [open, setOpen] = useState(defaultOpen)
+  const [tab, setTab] = useState('data')
+  const [collection, setCollection] = useState(null)
+  const [systemSelected, setSystemSelected] = useState(null)
+  const [room, setRoom] = useState(null)
+  const [openedRoom, setOpenedRoom] = useState(null)
+  const [rooms, setRooms] = useState([])
+  const collections = useSchema(db)
+  const searchRef = useRef(null)
+
+  const cero = db?.cero || db
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    if (!open) return
+
+    const onKeyDown = (e) => {
+      // Esc to close
+      if (e.key === 'Escape') {
+        setOpen(false)
+        return
+      }
+      // Cmd+K to focus search
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault()
+        searchRef.current?.focus()
+      }
+    }
+
+    window.addEventListener('keydown', onKeyDown)
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [open])
+
+  useEffect(() => {
+    const target = db?.rooms || cero?.rooms
+    if (target?.list)
+      target
+        .list()
+        .then(setRooms)
+        .catch(() => {})
+  }, [db, cero])
+
+  // Open room for system tab
+  useEffect(() => {
+    if (!room) {
+      setOpenedRoom(null)
+      return
+    }
+    let cancelled = false
+    const target = db?.rooms || cero?.rooms
+    if (target?.open) {
+      target
+        .open(room.id)
+        .then((r) => {
+          if (!cancelled) setOpenedRoom(r)
+        })
+        .catch(() => {})
+    }
+    return () => {
+      cancelled = true
+    }
+  }, [db, cero, room])
+
+  if (!open) {
+    return <PanelButton onClick={() => setOpen(true)} />
+  }
+
+  return (
+    <div className='fixed inset-0 z-99998 flex flex-col bg-background text-foreground text-xs'>
+      {/* Header */}
+      <div className='flex items-center justify-between px-3 py-1.5 border-b border-border bg-muted/30 shrink-0'>
+        <div className='flex items-center gap-3'>
+          <div className='flex items-center gap-2'>
+            <Database className='w-4 h-4 text-primary' />
+            <span className='font-semibold'>Cero</span>
+          </div>
+          <Tabs value={tab} onValueChange={setTab}>
+            <TabsList>
+              <TabsTrigger value='data'>Data</TabsTrigger>
+              <TabsTrigger value='system'>System</TabsTrigger>
+            </TabsList>
+          </Tabs>
+        </div>
+        <div className='flex items-center gap-2'>
+          <span className='text-[10px] text-muted-foreground'>⌘K search · Esc close</span>
+          <Button variant='ghost' size='icon-xs' onClick={() => setOpen(false)}>
+            <X className='w-4 h-4' />
+          </Button>
+        </div>
+      </div>
+
+      {/* Content */}
+      <ResizablePanelGroup direction='horizontal' className='flex-1'>
+        <ResizablePanel defaultSize='15%' minSize='10%' maxSize='30%'>
+          {tab === 'data' ? (
+            <DataSidebar collections={collections} selected={collection} onSelect={setCollection} />
+          ) : (
+            <SystemSidebar
+              selected={systemSelected}
+              onSelect={setSystemSelected}
+              rooms={rooms}
+              room={room}
+              onRoomChange={setRoom}
+            />
+          )}
+        </ResizablePanel>
+        <ResizableHandle withHandle />
+        <ResizablePanel defaultSize='85%' className='overflow-hidden'>
+          {tab === 'data' ? (
+            collection ? (
+              <CollectionView
+                db={db}
+                collection={collection}
+                room={room}
+                rooms={rooms}
+                onRoomChange={setRoom}
+              />
+            ) : (
+              <div className='flex-1 h-full flex items-center justify-center text-muted-foreground'>
+                Select a collection
+              </div>
+            )
+          ) : (
+            <SystemView
+              cero={cero}
+              selected={systemSelected}
+              room={room}
+              openedRoom={openedRoom}
+              searchRef={searchRef}
+            />
+          )}
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </div>
+  )
+}