bunsane 0.1.4 → 0.2.0

package/studio/src/pages/Table.tsx

@@ -0,0 +1,94 @@
+import { useEffect, useState } from 'react'
+import { useParams } from 'react-router-dom'
+import { type ColumnDef } from '@tanstack/react-table'
+import { fetchTableData, deleteTableRecords } from '../lib/api'
+import { PageContainer } from "../components/PageContainer";
+import { PageHeader } from "../components/PageHeader";
+import { SearchBar } from "../components/SearchBar";
+import { DataTable } from '../components/DataTable'
+import { useDataTable } from '../hooks/useDataTable'
+import { createSelectColumn, createTextColumn } from '../utils/columnHelpers'
+
+interface TableRecord {
+  [key: string]: any
+}
+
+export function Table() {
+  const { name } = useParams<{ name: string }>()
+  const [columns, setColumns] = useState<ColumnDef<TableRecord>[]>([])
+
+  const {
+    data,
+    loading,
+    hasMore,
+    search,
+    sorting,
+    selectedRecords,
+    setSearch,
+    setSorting,
+    setSelectedRecords,
+    handleDelete,
+    loadMoreRef,
+  } = useDataTable<TableRecord>({
+    key: name || '',
+    fetchData: (params) => fetchTableData(name!, params),
+    deleteRecords: (ids) => deleteTableRecords(name!, ids),
+    fetchErrorMessage: 'Failed to load table data',
+    deleteErrorMessage: 'Failed to delete table records',
+  })
+
+  // Generate columns from the first data record
+  useEffect(() => {
+    const sampleRecord = data[0]
+    if (sampleRecord && columns.length === 0) {
+      const newColumns: ColumnDef<TableRecord>[] = [
+        createSelectColumn<TableRecord>(),
+        ...Object.keys(sampleRecord).map(key =>
+          createTextColumn<TableRecord>(key, key)
+        ),
+      ]
+      setColumns(newColumns)
+    }
+  }, [data, columns.length])
+
+  // Reset columns when table name changes
+  useEffect(() => {
+    setColumns([])
+  }, [name])
+
+  if (!name) {
+    return <div className="p-8">Table name not found</div>
+  }
+
+  return (
+      <PageContainer>
+          <PageHeader
+              title={`${name} Table`}
+              description={`Browse and manage records in the ${name} table`}
+          />
+          <SearchBar
+              search={search}
+              onSearchChange={setSearch}
+              placeholder="Search records..."
+              selectedCount={selectedRecords.size}
+              onDelete={handleDelete}
+              itemSingular="record"
+              itemPlural="records"
+          />
+          <DataTable
+              data={data}
+              columns={columns}
+              loading={loading}
+              hasMore={hasMore}
+              sorting={sorting}
+              onSortingChange={setSorting}
+              selectedRecords={selectedRecords}
+              onSelectionChange={setSelectedRecords}
+              getRecordId={(record) => String(record.id)}
+              loadMoreRef={loadMoreRef}
+              emptyMessage="No records found"
+              loadingMessage="Loading more records..."
+          />
+      </PageContainer>
+  );
+}

package/studio/src/pages/Welcome.tsx

@@ -0,0 +1,241 @@
+import { useState, useEffect } from 'react'
+import { useNavigate, Link } from 'react-router-dom'
+import {
+  Search,
+  Loader2,
+  AlertCircle,
+  Box,
+  Layers,
+  FlameIcon,
+  RefreshCw,
+  Trash2,
+} from 'lucide-react'
+import { PageContainer } from '../components/PageContainer'
+import { Input } from '../components/ui/input'
+import { Button } from '../components/ui/button'
+import { fetchStats, type StudioStats } from '../lib/api'
+import { toast } from 'sonner'
+
+export function Welcome() {
+  const navigate = useNavigate()
+  const [stats, setStats] = useState<StudioStats | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [entitySearch, setEntitySearch] = useState('')
+
+  const loadStats = async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const data = await fetchStats()
+      setStats(data)
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to fetch stats'
+      setError(message)
+      toast.error(message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    loadStats()
+  }, [])
+
+  const handleEntityLookup = (e: React.FormEvent) => {
+    e.preventDefault()
+    const trimmed = entitySearch.trim()
+    if (!trimmed) return
+    navigate(`/entity/${trimmed}`)
+  }
+
+  return (
+    <PageContainer>
+      <div className="max-w-5xl">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-8">
+          <div>
+            <h1 className="text-3xl font-bold text-primary">Dashboard</h1>
+            <p className="text-muted-foreground mt-1">
+              Overview of your ECS database
+            </p>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={loadStats}
+            disabled={loading}
+          >
+            {loading ? (
+              <Loader2 className="h-4 w-4 animate-spin mr-2" />
+            ) : (
+              <RefreshCw className="h-4 w-4 mr-2" />
+            )}
+            Refresh
+          </Button>
+        </div>
+
+        {/* Quick entity lookup */}
+        <form onSubmit={handleEntityLookup} className="flex gap-2 mb-8 max-w-lg">
+          <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={entitySearch}
+              onChange={(e) => setEntitySearch(e.target.value)}
+              placeholder="Quick entity lookup — paste UUID..."
+              className="pl-9 font-mono text-sm"
+            />
+          </div>
+          <Button type="submit" disabled={!entitySearch.trim()}>
+            Inspect
+          </Button>
+        </form>
+
+        {/* Error */}
+        {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 skeleton */}
+        {loading && !stats && (
+          <div className="flex items-center gap-2 text-muted-foreground py-12 justify-center">
+            <Loader2 className="h-5 w-5 animate-spin" />
+            <span>Loading stats...</span>
+          </div>
+        )}
+
+        {/* Stats content */}
+        {stats && (
+          <>
+            {/* Summary cards */}
+            <div className="grid gap-4 md:grid-cols-3 mb-8">
+              <SummaryCard
+                icon={Box}
+                label="Entities"
+                value={stats.entities.active}
+                sub={
+                  stats.entities.deleted > 0
+                    ? `${stats.entities.deleted} deleted`
+                    : undefined
+                }
+              />
+              <SummaryCard
+                icon={Layers}
+                label="Component Types"
+                value={stats.componentTypes.length}
+              />
+              <SummaryCard
+                icon={FlameIcon}
+                label="Archetypes"
+                value={stats.archetypes.length}
+              />
+            </div>
+
+            {/* Two-column layout */}
+            <div className="grid gap-6 lg:grid-cols-2">
+              {/* Archetypes */}
+              <div className="border border-border rounded-lg bg-card">
+                <div className="px-5 py-4 border-b border-border">
+                  <h2 className="font-semibold">Archetypes</h2>
+                </div>
+                {stats.archetypes.length === 0 ? (
+                  <p className="p-5 text-sm text-muted-foreground">
+                    No archetypes registered.
+                  </p>
+                ) : (
+                  <div className="divide-y divide-border">
+                    {stats.archetypes.map((a) => (
+                      <Link
+                        key={a.name}
+                        to={`/archetype/${a.name}`}
+                        className="flex items-center justify-between px-5 py-3 hover:bg-accent/50 transition-colors"
+                      >
+                        <div>
+                          <span className="text-sm font-medium">{a.name}</span>
+                          <span className="text-xs text-muted-foreground ml-2">
+                            {a.componentCount} component{a.componentCount !== 1 ? 's' : ''}
+                          </span>
+                        </div>
+                        <span className="text-sm font-mono tabular-nums">
+                          {a.entityCount.toLocaleString()}
+                        </span>
+                      </Link>
+                    ))}
+                  </div>
+                )}
+              </div>
+
+              {/* Component types */}
+              <div className="border border-border rounded-lg bg-card">
+                <div className="px-5 py-4 border-b border-border">
+                  <h2 className="font-semibold">Component Types</h2>
+                </div>
+                {stats.componentTypes.length === 0 ? (
+                  <p className="p-5 text-sm text-muted-foreground">
+                    No components found.
+                  </p>
+                ) : (
+                  <div className="divide-y divide-border max-h-96 overflow-auto">
+                    {stats.componentTypes.map((ct) => (
+                      <div
+                        key={ct.name}
+                        className="flex items-center justify-between px-5 py-3"
+                      >
+                        <span className="text-sm">{ct.name}</span>
+                        <span className="text-sm font-mono tabular-nums text-muted-foreground">
+                          {ct.count.toLocaleString()}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Deleted entities note */}
+            {stats.entities.deleted > 0 && (
+              <div className="mt-6 flex items-center gap-2 text-sm text-muted-foreground bg-muted/50 rounded-md px-4 py-3">
+                <Trash2 className="h-4 w-4 shrink-0" />
+                <span>
+                  {stats.entities.deleted.toLocaleString()} soft-deleted{' '}
+                  {stats.entities.deleted === 1 ? 'entity' : 'entities'} in the
+                  database ({stats.entities.total.toLocaleString()} total)
+                </span>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </PageContainer>
+  )
+}
+
+function SummaryCard({
+  icon: Icon,
+  label,
+  value,
+  sub,
+}: {
+  icon: typeof Box
+  label: string
+  value: number
+  sub?: string
+}) {
+  return (
+    <div className="border border-border rounded-lg p-5 bg-card">
+      <div className="flex items-center gap-3 mb-3">
+        <div className="p-2 rounded-md bg-primary/10">
+          <Icon className="h-5 w-5 text-primary" />
+        </div>
+        <span className="text-sm text-muted-foreground">{label}</span>
+      </div>
+      <p className="text-3xl font-bold tabular-nums">{value.toLocaleString()}</p>
+      {sub && (
+        <p className="text-xs text-muted-foreground mt-1">{sub}</p>
+      )}
+    </div>
+  )
+}

package/studio/src/routes.tsx

@@ -0,0 +1,45 @@
+import { type RouteObject } from 'react-router-dom'
+import { Layout } from './components/Layout'
+import { Welcome } from './pages/Welcome'
+import { ArcheType } from './pages/ArcheType'
+import { Table } from './pages/Table'
+import { EntityInspector } from './pages/EntityInspector'
+import { Components } from './pages/Components'
+import { QueryRunner } from './pages/QueryRunner'
+
+export const routes: RouteObject[] = [
+  {
+    path: '/',
+    element: <Layout />,
+    children: [
+      {
+        index: true,
+        element: <Welcome />,
+      },
+      {
+        path: 'archetype/:name',
+        element: <ArcheType />,
+      },
+      {
+        path: 'table/:name',
+        element: <Table />,
+      },
+      {
+        path: 'entity/:id',
+        element: <EntityInspector />,
+      },
+      {
+        path: 'entity',
+        element: <EntityInspector />,
+      },
+      {
+        path: 'components',
+        element: <Components />,
+      },
+      {
+        path: 'query',
+        element: <QueryRunner />,
+      },
+    ],
+  },
+]

package/studio/src/store/archeTypeSettings.ts

@@ -0,0 +1,30 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+
+interface ArcheTypeSettingsState {
+  useRealDbFieldName: boolean
+  autoExpandRow: boolean
+  showDeleted: boolean
+
+  // Actions
+  setUseRealDbFieldName: (value: boolean) => void
+  setAutoExpandRow: (value: boolean) => void
+  setShowDeleted: (value: boolean) => void
+}
+
+export const useArcheTypeSettings = create<ArcheTypeSettingsState>()(
+  persist(
+    (set) => ({
+      useRealDbFieldName: false,
+      autoExpandRow: true,
+      showDeleted: false,
+
+      setUseRealDbFieldName: (value) => set({ useRealDbFieldName: value }),
+      setAutoExpandRow: (value) => set({ autoExpandRow: value }),
+      setShowDeleted: (value) => set({ showDeleted: value }),
+    }),
+    {
+      name: 'bunsane-archetype-settings',
+    }
+  )
+)

package/studio/src/store/studio.ts

@@ -0,0 +1,65 @@
+import { create } from 'zustand'
+import { persist } from "zustand/middleware";
+
+export interface Metadata {
+  archeTypes: Record<string, {
+    fieldName: string
+    componentName: string
+    fieldLabel: string
+    nullable?: boolean
+  }[]>
+}
+
+interface StudioState {
+    metadata: Metadata | null;
+    tables: string[];
+    isLoading: boolean;
+    error: string | null;
+    isSidebarCollapsed: boolean;
+    expandedSections: Record<string, boolean>;
+
+    // Actions
+    setMetadata: (metadata: Metadata) => void;
+    setTables: (tables: string[]) => void;
+    setLoading: (loading: boolean) => void;
+    setError: (error: string | null) => void;
+    setSidebarCollapsed: (collapsed: boolean) => void;
+    toggleSection: (section: string) => void;
+}
+
+export const useStudioStore = create<StudioState>()(
+    persist(
+        (set) => ({
+            metadata: null,
+            tables: [],
+            isLoading: false,
+            error: null,
+            isSidebarCollapsed: false,
+            expandedSections: {
+                archeTypes: true,
+                tables: true,
+            },
+
+            setMetadata: (metadata) => set({ metadata }),
+            setTables: (tables) => set({ tables }),
+            setLoading: (loading) => set({ isLoading: loading }),
+            setError: (error) => set({ error }),
+            setSidebarCollapsed: (collapsed) =>
+                set({ isSidebarCollapsed: collapsed }),
+            toggleSection: (section) =>
+                set((state) => ({
+                    expandedSections: {
+                        ...state.expandedSections,
+                        [section]: !state.expandedSections[section],
+                    },
+                })),
+        }),
+        {
+            name: "bunsane-studio-storage",
+            partialize: (state) => ({
+                isSidebarCollapsed: state.isSidebarCollapsed,
+                expandedSections: state.expandedSections,
+            }),
+        }
+    )
+);

package/studio/src/utils/columnHelpers.tsx

@@ -0,0 +1,114 @@
+import { type ColumnDef } from '@tanstack/react-table'
+import { Link } from 'react-router-dom'
+import ReactJson from 'react-json-view'
+
+/**
+ * Creates the select checkbox column for data tables
+ */
+export function createSelectColumn<T>(): ColumnDef<T> {
+  return {
+    id: 'select',
+    header: ({ table }) => (
+      <input
+        type="checkbox"
+        checked={table.getIsAllRowsSelected()}
+        onChange={table.getToggleAllRowsSelectedHandler()}
+        className="rounded border-border"
+      />
+    ),
+    cell: ({ row }) => (
+      <input
+        type="checkbox"
+        checked={row.getIsSelected()}
+        onChange={row.getToggleSelectedHandler()}
+        className="rounded border-border"
+      />
+    ),
+  }
+}
+
+/**
+ * Renders a cell value, displaying objects as ReactJson and primitives as text
+ */
+export function renderCellValue(
+    value: any,
+    extractValue = false,
+    autoExpandRow = false
+): JSX.Element {
+    // If extractValue is true and value has a .value property, extract it
+    let actualValue =
+        extractValue && value?.value !== undefined ? value.value : value;
+
+    actualValue = actualValue ?? "-";
+
+    if (typeof actualValue === "object" && actualValue !== null) {
+        return (
+            <div className="max-w-xs">
+                <ReactJson
+                    src={actualValue}
+                    collapsed={autoExpandRow ? 2 : 1}
+                    enableClipboard
+                    displayDataTypes={false}
+                    displayObjectSize={false}
+                    name={null}
+                />
+            </div>
+        );
+    }
+
+    return (
+        <span className="truncate max-w-xs block">{String(actualValue)}</span>
+    );
+}
+
+/**
+ * Creates a standard text column with proper rendering
+ */
+export function createTextColumn<T>(
+    key: string,
+    header: string,
+    options: {
+        extractValue?: boolean;
+        className?: string;
+        autoExpandRow?: boolean;
+    } = {}
+): ColumnDef<T> {
+    return {
+        accessorKey: key,
+        header,
+        cell: ({ getValue }) => {
+            const value = getValue();
+            return renderCellValue(
+                value,
+                options.extractValue,
+                options.autoExpandRow
+            );
+        },
+    };
+}
+
+/**
+ * Creates an ID column with monospace font styling and link to Entity Inspector
+ */
+export function createIdColumn<T>(options?: { linkToEntity?: boolean }): ColumnDef<T> {
+  const linkToEntity = options?.linkToEntity ?? false
+  return {
+    accessorKey: 'id',
+    header: 'ID',
+    cell: ({ getValue }) => {
+      const value = getValue() as string
+      if (linkToEntity) {
+        return (
+          <Link
+            to={`/entity/${value}`}
+            className="font-mono text-xs text-primary hover:underline"
+            title="Inspect entity"
+          >
+            {value}
+          </Link>
+        )
+      }
+      return <span className="font-mono text-xs">{value}</span>
+    },
+  }
+}

package/studio/studio-instructions.md

@@ -0,0 +1,81 @@
+---
+applyTo: '**'
+---
+
+# Bunsane studio
+
+## About the project
+
+the project is to create PostgreSQL database management
+with support for ECS (Entity Component System) model
+
+there are some tables that we need to pay attention, i.e:
+- components (ECS table)
+- entities (ECS table)
+- entity_components (ECS table)
+- spatial_ref_sys (postgis table)
+
+the tables displays will be devided by 3 part, i.e general table, ECS table, invisible table
+
+### General table
+
+user can do normal CRUD management to the table, just like normal database table.
+
+### ECS table
+
+user can do CRUD, but not directly to the table. because the ECS table means to be used to work with ECS thing, it will contain multiple entities.
+Those entities is what user going to CRUD to.
+therefore lets use word table for general table, and entity for ECS table.
+
+ECS system design explanation:
+- Entity can be anything e.g user, payment, item, .etc (it can be called as table in traditional design system) it also can be called ArcheType
+- fields that usually used in normal system e.g email, phone (for user) or price (for item) .etc in ECS is a Component
+- there is 3 table dedicated for ECS i.e entities, components, and entity_components (intermediate table for entities and components)
+- entities table contain all entities that exist in the system. the table contain id, created_at, updated_at, and deleted_at
+- components table contain the all useful data that user consume, the table contain id, entity_id, type_id, name, data, created_at, updated_at, and deleted_at (data is jsonb that contain the actual useful data)
+- entity_components is intermediate table. the table contain, entity_id, type_id, component_id, created_at, updated_at, and deleted_at
+
+## Feature
+- for now I only need Read feature, but in the future all CRUD should be supported so we can show the edit/delete ui but can disable it for now
+- General table and ECS table should be easily distinguished
+- user can create connection to initialize the database connection but there is default value that point to local postgres with default db
+- the connection detail is stored in localstorage after created
+- user can see the list of tables and entities in the sidebar
+- user can click the table or entity to see the data in the main content area
+- user can see the table column info (name, type, is_nullable, default value) for General table
+- the entity displayed as table, with the columns are id and component types (name from components table), the value for id is from entities.id, and the value for component types is from components.data (jsonb) field
+- the default 50 records can be displayed, then there will be load more button to load 50 more records
+- user can see the total row count of the table
+
+## Tech stack
+- Bun for runtime and package manager
+- Vite + React router + @react-router/fs-routes + Tailwind + Shadcn
+- tanstack table
+- zustand for state management
+- sonner for snack/notification
+- lucide-react for icon
+- zod for schema validation
+- react-json-view for json data display
+
+## File structure
+- use @react-router/fs-routes see https://reactrouter.com/how-to/file-route-conventions#basic-routes
+- components for ui components
+- store for zustand store
+- ensure its easy to manage and understand
+
+## Api endpoint
+- can use /studio/api/tables to get all tables
+
+## Code style
+- ensure typesafety with typescript and drizzle orm
+- ensure code is clean and easy to understand
+- ensure proper error handling
+- ensure proper separation of concerns
+
+## App UI style
+- for now, only support light theme
+- use shadcn available components/template if available
+- the theme is orange-ish colour like fire in the sky
+- ensure the ui is clean and easy to use
+- ensure hover, and focus styles are properly implemented
+- only support desktop view for now (min width 1024px)