bunsane 0.3.1 → 0.4.0

package/studio/src/pages/Components.tsx

@@ -1,124 +0,0 @@
-import { useState, useEffect } from 'react'
-import { Loader2, AlertCircle, Layers, Database, ChevronDown, ChevronRight } from 'lucide-react'
-import { PageContainer } from '../components/PageContainer'
-import { PageHeader } from '../components/PageHeader'
-import { fetchComponents, type ComponentTypeInfo } from '../lib/api'
-import { toast } from 'sonner'
-
-export function Components() {
-  const [components, setComponents] = useState<ComponentTypeInfo[]>([])
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-
-  useEffect(() => {
-    const load = async () => {
-      setLoading(true)
-      setError(null)
-      try {
-        const data = await fetchComponents()
-        setComponents(data)
-      } catch (err) {
-        const message =
-          err instanceof Error ? err.message : 'Failed to fetch components'
-        setError(message)
-        toast.error(message)
-      } finally {
-        setLoading(false)
-      }
-    }
-    load()
-  }, [])
-
-  return (
-    <PageContainer>
-      <PageHeader
-        title="Component Types"
-        description="All distinct component types in your ECS database with field shapes and entity counts."
-      />
-
-      {loading && (
-        <div className="flex items-center gap-2 text-muted-foreground py-12 justify-center">
-          <Loader2 className="h-5 w-5 animate-spin" />
-          <span>Loading components...</span>
-        </div>
-      )}
-
-      {error && !loading && (
-        <div className="flex items-center gap-2 text-destructive bg-destructive/10 border border-destructive/20 rounded-md p-4 mb-6">
-          <AlertCircle className="h-5 w-5 shrink-0" />
-          <span>{error}</span>
-        </div>
-      )}
-
-      {!loading && !error && components.length === 0 && (
-        <div className="text-center py-16 text-muted-foreground">
-          <Layers className="h-12 w-12 mx-auto mb-4 opacity-50" />
-          <p className="text-lg">No component types found</p>
-        </div>
-      )}
-
-      {!loading && components.length > 0 && (
-        <div className="space-y-3">
-          {components.map((comp) => (
-            <ComponentRow key={comp.name} component={comp} />
-          ))}
-        </div>
-      )}
-    </PageContainer>
-  )
-}
-
-function ComponentRow({ component }: { component: ComponentTypeInfo }) {
-  const [expanded, setExpanded] = useState(false)
-
-  return (
-    <div className="border border-border rounded-lg bg-card overflow-hidden">
-      <button
-        onClick={() => setExpanded(!expanded)}
-        className="w-full flex items-center justify-between px-5 py-4 text-left hover:bg-accent/50 transition-colors"
-      >
-        <div className="flex items-center gap-3">
-          {expanded ? (
-            <ChevronDown className="h-4 w-4 text-muted-foreground" />
-          ) : (
-            <ChevronRight className="h-4 w-4 text-muted-foreground" />
-          )}
-          <span className="font-semibold text-sm">{component.name}</span>
-          <span className="text-xs text-muted-foreground">
-            {component.entityCount.toLocaleString()} {component.entityCount === 1 ? 'entity' : 'entities'}
-          </span>
-        </div>
-        <div className="flex items-center gap-2 text-xs text-muted-foreground">
-          <Database className="h-3 w-3" />
-          <span className="font-mono">{component.partitionTable}</span>
-        </div>
-      </button>
-
-      {expanded && (
-        <div className="border-t border-border px-5 py-4">
-          {component.fields.length > 0 ? (
-            <div>
-              <p className="text-xs text-muted-foreground mb-2 font-medium">
-                JSONB Fields ({component.fields.length})
-              </p>
-              <div className="flex flex-wrap gap-2">
-                {component.fields.map((field) => (
-                  <span
-                    key={field}
-                    className="inline-block px-2.5 py-1 rounded-md bg-muted text-sm font-mono"
-                  >
-                    {field}
-                  </span>
-                ))}
-              </div>
-            </div>
-          ) : (
-            <p className="text-sm text-muted-foreground">
-              No field data available (component data may be empty or non-object).
-            </p>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}

package/studio/src/pages/EntityInspector.tsx

@@ -1,302 +0,0 @@
-import { useState, useEffect } from 'react'
-import { useParams, useNavigate, Link } from 'react-router-dom'
-import { Search, Loader2, AlertCircle, Clock, Hash, Trash2 } from 'lucide-react'
-import ReactJson from 'react-json-view'
-import { PageContainer } from '../components/PageContainer'
-import { PageHeader } from '../components/PageHeader'
-import { Input } from '../components/ui/input'
-import { Button } from '../components/ui/button'
-import { fetchEntity, type EntityInspectorData } from '../lib/api'
-import { useStudioStore, type Metadata } from '../store/studio'
-import { cn } from '../lib/utils'
-import { toast } from 'sonner'
-
-function formatDate(dateStr: string | null): string {
-  if (!dateStr) return '-'
-  return new Date(dateStr).toLocaleString()
-}
-
-function deriveArchetypes(
-  componentNames: string[],
-  metadata: Metadata | null
-): { name: string; path: string }[] {
-  if (!metadata?.archeTypes) return []
-
-  const activeNames = new Set(componentNames)
-  const matches: { name: string; path: string }[] = []
-
-  for (const [name, fields] of Object.entries(metadata.archeTypes)) {
-    const required = fields
-      .filter((f) => !f.nullable)
-      .map((f) => f.componentName)
-    if (required.length > 0 && required.every((c) => activeNames.has(c))) {
-      matches.push({ name, path: `/archetype/${name}` })
-    }
-  }
-
-  return matches
-}
-
-export function EntityInspector() {
-  const { id } = useParams<{ id: string }>()
-  const navigate = useNavigate()
-  const { metadata } = useStudioStore()
-
-  const [searchInput, setSearchInput] = useState(id ?? '')
-  const [data, setData] = useState<EntityInspectorData | null>(null)
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-
-  const loadEntity = async (entityId: string) => {
-    setLoading(true)
-    setError(null)
-    setData(null)
-    try {
-      const result = await fetchEntity(entityId)
-      setData(result)
-    } catch (err) {
-      const message = err instanceof Error ? err.message : 'Failed to fetch entity'
-      setError(message)
-      toast.error(message)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  useEffect(() => {
-    if (id) {
-      setSearchInput(id)
-      loadEntity(id)
-    }
-  }, [id])
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    const trimmed = searchInput.trim()
-    if (!trimmed) return
-    navigate(`/entity/${trimmed}`)
-  }
-
-  const activeComponents = data
-    ? data.components.filter((c) => !c.deleted_at)
-    : []
-  const deletedComponents = data
-    ? data.components.filter((c) => c.deleted_at)
-    : []
-
-  const archetypes = data
-    ? deriveArchetypes(
-        activeComponents.map((c) => c.name),
-        metadata
-      )
-    : []
-
-  return (
-    <PageContainer>
-      <PageHeader
-        title="Entity Inspector"
-        description="Look up an entity by ID to see all its components and metadata."
-      />
-
-      {/* Search bar */}
-      <form onSubmit={handleSubmit} className="flex gap-2 mb-8 max-w-2xl">
-        <div className="relative flex-1">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-          <Input
-            value={searchInput}
-            onChange={(e) => setSearchInput(e.target.value)}
-            placeholder="Paste entity UUID..."
-            className="pl-9 font-mono"
-          />
-        </div>
-        <Button type="submit" disabled={loading || !searchInput.trim()}>
-          {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Inspect'}
-        </Button>
-      </form>
-
-      {/* Loading */}
-      {loading && (
-        <div className="flex items-center gap-2 text-muted-foreground">
-          <Loader2 className="h-5 w-5 animate-spin" />
-          <span>Loading entity...</span>
-        </div>
-      )}
-
-      {/* Error */}
-      {error && !loading && (
-        <div className="flex items-center gap-2 text-destructive bg-destructive/10 border border-destructive/20 rounded-md p-4">
-          <AlertCircle className="h-5 w-5 shrink-0" />
-          <span>{error}</span>
-        </div>
-      )}
-
-      {/* Results */}
-      {data && !loading && (
-        <div className="space-y-6">
-          {/* Entity metadata card */}
-          <div className="border border-border rounded-lg p-6 bg-card">
-            <h2 className="text-lg font-semibold mb-4">Entity</h2>
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-              <div>
-                <p className="text-xs text-muted-foreground mb-1">ID</p>
-                <p className="font-mono text-sm break-all">{data.entity.id}</p>
-              </div>
-              <div>
-                <p className="text-xs text-muted-foreground mb-1 flex items-center gap-1">
-                  <Clock className="h-3 w-3" /> Created
-                </p>
-                <p className="text-sm">{formatDate(data.entity.created_at)}</p>
-              </div>
-              <div>
-                <p className="text-xs text-muted-foreground mb-1 flex items-center gap-1">
-                  <Clock className="h-3 w-3" /> Updated
-                </p>
-                <p className="text-sm">{formatDate(data.entity.updated_at)}</p>
-              </div>
-              <div>
-                <p className="text-xs text-muted-foreground mb-1 flex items-center gap-1">
-                  <Trash2 className="h-3 w-3" /> Deleted
-                </p>
-                {data.entity.deleted_at ? (
-                  <span className="inline-flex items-center gap-1 text-sm text-destructive font-medium">
-                    {formatDate(data.entity.deleted_at)}
-                  </span>
-                ) : (
-                  <span className="text-sm text-muted-foreground">-</span>
-                )}
-              </div>
-            </div>
-          </div>
-
-          {/* Archetype membership */}
-          {archetypes.length > 0 && (
-            <div className="border border-border rounded-lg p-6 bg-card">
-              <h2 className="text-lg font-semibold mb-3">Archetype Membership</h2>
-              <div className="flex flex-wrap gap-2">
-                {archetypes.map((a) => (
-                  <Link
-                    key={a.name}
-                    to={a.path}
-                    className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-primary/10 text-primary hover:bg-primary/20 transition-colors"
-                  >
-                    {a.name}
-                  </Link>
-                ))}
-              </div>
-            </div>
-          )}
-
-          {/* Active components */}
-          <div>
-            <h2 className="text-lg font-semibold mb-3">
-              Components ({activeComponents.length})
-            </h2>
-            {activeComponents.length === 0 ? (
-              <p className="text-muted-foreground text-sm">No active components.</p>
-            ) : (
-              <div className="space-y-3">
-                {activeComponents.map((comp) => (
-                  <ComponentCard key={comp.id} component={comp} />
-                ))}
-              </div>
-            )}
-          </div>
-
-          {/* Deleted components */}
-          {deletedComponents.length > 0 && (
-            <div>
-              <h2 className="text-lg font-semibold mb-3 text-destructive">
-                Deleted Components ({deletedComponents.length})
-              </h2>
-              <div className="space-y-3">
-                {deletedComponents.map((comp) => (
-                  <ComponentCard key={comp.id} component={comp} deleted />
-                ))}
-              </div>
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* Empty state */}
-      {!data && !loading && !error && !id && (
-        <div className="text-center py-16 text-muted-foreground">
-          <Search className="h-12 w-12 mx-auto mb-4 opacity-50" />
-          <p className="text-lg">Enter an entity UUID above to inspect it</p>
-        </div>
-      )}
-    </PageContainer>
-  )
-}
-
-function ComponentCard({
-  component,
-  deleted = false,
-}: {
-  component: EntityInspectorData['components'][number]
-  deleted?: boolean
-}) {
-  const [expanded, setExpanded] = useState(true)
-
-  return (
-    <div
-      className={cn(
-        'border rounded-lg overflow-hidden',
-        deleted
-          ? 'border-destructive/30 bg-destructive/5 opacity-75'
-          : 'border-border bg-card'
-      )}
-    >
-      <button
-        onClick={() => setExpanded(!expanded)}
-        className="w-full flex items-center justify-between px-4 py-3 text-left hover:bg-accent/50 transition-colors"
-      >
-        <div className="flex items-center gap-3">
-          <span className="font-semibold text-sm">{component.name}</span>
-          {deleted && (
-            <span className="text-xs bg-destructive text-destructive-foreground px-2 py-0.5 rounded-full">
-              Deleted
-            </span>
-          )}
-        </div>
-        <div className="flex items-center gap-3 text-xs text-muted-foreground">
-          <span className="flex items-center gap-1" title="type_id">
-            <Hash className="h-3 w-3" />
-            {component.type_id.slice(0, 8)}...
-          </span>
-          <span>{expanded ? '−' : '+'}</span>
-        </div>
-      </button>
-      {expanded && (
-        <div className="border-t border-border px-4 py-3 space-y-3">
-          {/* Timestamps */}
-          <div className="flex gap-6 text-xs text-muted-foreground">
-            <span>Created: {formatDate(component.created_at)}</span>
-            <span>Updated: {formatDate(component.updated_at)}</span>
-            {component.deleted_at && (
-              <span className="text-destructive">
-                Deleted: {formatDate(component.deleted_at)}
-              </span>
-            )}
-          </div>
-          {/* Data */}
-          {component.data && typeof component.data === 'object' ? (
-            <ReactJson
-              src={component.data as object}
-              name={null}
-              collapsed={false}
-              displayDataTypes={false}
-              enableClipboard
-              theme="rjv-default"
-              style={{ fontSize: '13px' }}
-            />
-          ) : (
-            <pre className="text-sm font-mono bg-muted p-3 rounded-md overflow-auto">
-              {JSON.stringify(component.data, null, 2)}
-            </pre>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}

package/studio/src/pages/QueryRunner.tsx

@@ -1,246 +0,0 @@
-import { useState } from 'react'
-import { Link } from 'react-router-dom'
-import { Loader2, AlertCircle, Play, Clock, ChevronDown } from 'lucide-react'
-import { PageContainer } from '../components/PageContainer'
-import { PageHeader } from '../components/PageHeader'
-import { Button } from '../components/ui/button'
-import { executeQuery, type QueryResult } from '../lib/api'
-import { toast } from 'sonner'
-
-const UUID_REGEX = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i
-
-const TEMPLATES = [
-  {
-    label: 'Entities with component',
-    sql: `SELECT e.id, e.created_at, c.name as component, c.data
-FROM entities e
-JOIN components c ON c.entity_id = e.id
-WHERE c.name = 'MyComponent'
-AND c.deleted_at IS NULL
-ORDER BY e.created_at DESC
-LIMIT 50`,
-  },
-  {
-    label: 'Orphaned components',
-    sql: `SELECT c.id, c.entity_id, c.name, c.created_at
-FROM components c
-LEFT JOIN entities e ON e.id = c.entity_id
-WHERE e.id IS NULL
-LIMIT 50`,
-  },
-  {
-    label: 'Recently deleted entities',
-    sql: `SELECT id, created_at, deleted_at
-FROM entities
-WHERE deleted_at IS NOT NULL
-ORDER BY deleted_at DESC
-LIMIT 50`,
-  },
-  {
-    label: 'Component data for entity',
-    sql: `SELECT c.name, c.type_id, c.data, c.created_at, c.updated_at, c.deleted_at
-FROM components c
-WHERE c.entity_id = '00000000-0000-0000-0000-000000000000'
-ORDER BY c.name`,
-  },
-  {
-    label: 'Component type counts',
-    sql: `SELECT name, COUNT(*) as count
-FROM components
-WHERE deleted_at IS NULL
-GROUP BY name
-ORDER BY count DESC`,
-  },
-  {
-    label: 'Table sizes',
-    sql: `SELECT relname AS table_name,
-  pg_size_pretty(pg_total_relation_size(relid)) AS total_size,
-  pg_size_pretty(pg_relation_size(relid)) AS data_size,
-  n_live_tup AS row_estimate
-FROM pg_stat_user_tables
-ORDER BY pg_total_relation_size(relid) DESC`,
-  },
-]
-
-export function QueryRunner() {
-  const [sql, setSql] = useState('')
-  const [result, setResult] = useState<QueryResult | null>(null)
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const [showTemplates, setShowTemplates] = useState(false)
-
-  const handleRun = async () => {
-    const trimmed = sql.trim()
-    if (!trimmed) return
-
-    setLoading(true)
-    setError(null)
-    setResult(null)
-    try {
-      const data = await executeQuery(trimmed)
-      setResult(data)
-    } catch (err) {
-      const message = err instanceof Error ? err.message : 'Query failed'
-      setError(message)
-      toast.error(message)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
-      e.preventDefault()
-      handleRun()
-    }
-  }
-
-  return (
-    <PageContainer>
-      <PageHeader
-        title="SQL Query Runner"
-        description="Execute read-only SQL queries against the database. Dev mode only."
-      />
-
-      {/* SQL editor */}
-      <div className="space-y-3 mb-6">
-        <div className="flex items-center gap-2">
-          <div className="relative">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => setShowTemplates(!showTemplates)}
-            >
-              Templates
-              <ChevronDown className="h-3 w-3 ml-1" />
-            </Button>
-            {showTemplates && (
-              <div className="absolute top-full left-0 mt-1 z-10 bg-card border border-border rounded-md shadow-lg min-w-[220px]">
-                {TEMPLATES.map((t) => (
-                  <button
-                    key={t.label}
-                    className="w-full text-left px-4 py-2 text-sm hover:bg-accent transition-colors first:rounded-t-md last:rounded-b-md"
-                    onClick={() => {
-                      setSql(t.sql)
-                      setShowTemplates(false)
-                    }}
-                  >
-                    {t.label}
-                  </button>
-                ))}
-              </div>
-            )}
-          </div>
-          <span className="text-xs text-muted-foreground">
-            Ctrl+Enter to run
-          </span>
-        </div>
-
-        <textarea
-          value={sql}
-          onChange={(e) => setSql(e.target.value)}
-          onKeyDown={handleKeyDown}
-          placeholder="SELECT * FROM entities LIMIT 10"
-          className="w-full h-40 font-mono text-sm bg-background border border-input rounded-md px-4 py-3 resize-y focus:outline-none focus:ring-2 focus:ring-ring"
-          spellCheck={false}
-        />
-
-        <div className="flex items-center gap-3">
-          <Button onClick={handleRun} disabled={loading || !sql.trim()}>
-            {loading ? (
-              <Loader2 className="h-4 w-4 animate-spin mr-2" />
-            ) : (
-              <Play className="h-4 w-4 mr-2" />
-            )}
-            Run Query
-          </Button>
-
-          {result && (
-            <span className="flex items-center gap-1.5 text-sm text-muted-foreground">
-              <Clock className="h-3.5 w-3.5" />
-              {result.rowCount} row{result.rowCount !== 1 ? 's' : ''} in{' '}
-              {result.duration}ms
-            </span>
-          )}
-        </div>
-      </div>
-
-      {/* Error */}
-      {error && !loading && (
-        <div className="flex items-start gap-2 text-destructive bg-destructive/10 border border-destructive/20 rounded-md p-4 mb-6">
-          <AlertCircle className="h-5 w-5 shrink-0 mt-0.5" />
-          <pre className="text-sm whitespace-pre-wrap font-mono">{error}</pre>
-        </div>
-      )}
-
-      {/* Results table */}
-      {result && result.columns.length > 0 && (
-        <div className="bg-card rounded-lg border border-border overflow-hidden">
-          <div className="overflow-x-auto">
-            <table className="w-full">
-              <thead className="bg-muted/50">
-                <tr>
-                  {result.columns.map((col) => (
-                    <th
-                      key={col}
-                      className="px-4 py-3 text-left text-sm font-medium text-muted-foreground border-b border-border whitespace-nowrap"
-                    >
-                      {col}
-                    </th>
-                  ))}
-                </tr>
-              </thead>
-              <tbody>
-                {result.rows.map((row, i) => (
-                  <tr
-                    key={i}
-                    className="border-b border-border hover:bg-muted/50"
-                  >
-                    {result.columns.map((col) => (
-                      <td
-                        key={col}
-                        className="px-4 py-3 text-sm font-mono whitespace-nowrap max-w-xs truncate"
-                        title={formatValue(row[col])}
-                      >
-                        <CellValue value={row[col]} />
-                      </td>
-                    ))}
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </div>
-      )}
-
-      {/* Empty result */}
-      {result && result.columns.length === 0 && (
-        <p className="text-sm text-muted-foreground">
-          Query executed successfully but returned no columns.
-        </p>
-      )}
-    </PageContainer>
-  )
-}
-
-function formatValue(value: unknown): string {
-  if (value === null || value === undefined) return 'NULL'
-  if (typeof value === 'object') return JSON.stringify(value)
-  return String(value)
-}
-
-function CellValue({ value }: { value: unknown }) {
-  const str = formatValue(value)
-  if (typeof value === 'string' && UUID_REGEX.test(value)) {
-    return (
-      <Link
-        to={`/entity/${value}`}
-        className="text-primary hover:underline"
-        title="Inspect entity"
-      >
-        {str}
-      </Link>
-    )
-  }
-  return <>{str}</>
-}