bunsane 0.1.4 → 0.2.0

package/studio/src/pages/Components.tsx

@@ -0,0 +1,124 @@
+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

@@ -0,0 +1,302 @@
+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

@@ -0,0 +1,246 @@
+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}</>
+}