bunsane 0.1.4 → 0.2.0

package/studio/src/components/ui/input.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

package/studio/src/hooks/useDataTable.ts

@@ -0,0 +1,131 @@
+import { useEffect, useState } from 'react'
+import { useInView } from 'react-intersection-observer'
+import { type SortingState } from '@tanstack/react-table'
+import { toast } from 'sonner'
+import { pluralize } from '../lib/utils'
+
+interface UseDataTableOptions<T> {
+  /** Unique identifier for the data (e.g., table name, archetype name) */
+  key: string
+  /** Function to fetch data */
+  fetchData: (params: { offset: number; limit: number; search?: string }) => Promise<{
+    data: T[]
+    hasMore: boolean
+    total?: number
+  }>
+  /** Function to delete records by IDs */
+  deleteRecords: (ids: string[]) => Promise<void>
+  /** Optional: Custom error message for fetch failure */
+  fetchErrorMessage?: string
+  /** Optional: Custom error message for delete failure */
+  deleteErrorMessage?: string
+  /** Optional: Custom success message for delete (use {count} and {item} as placeholders) */
+  deleteSuccessMessage?: string
+  /** Optional: Singular form of the item type (e.g., "record", "entity") */
+  itemSingular?: string
+  /** Optional: Plural form of the item type (e.g., "records", "entities") */
+  itemPlural?: string
+}
+
+export function useDataTable<T>({
+  key,
+  fetchData,
+  deleteRecords,
+  fetchErrorMessage = 'Failed to load data',
+  deleteErrorMessage = 'Failed to delete records',
+  deleteSuccessMessage = 'Deleted {count} {item}',
+  itemSingular = 'record',
+  itemPlural = 'records',
+}: UseDataTableOptions<T>) {
+  const [data, setData] = useState<T[]>([])
+  const [loading, setLoading] = useState(false)
+  const [hasMore, setHasMore] = useState(true)
+  const [total, setTotal] = useState<number | null>(null)
+  const [search, setSearch] = useState('')
+  const [sorting, setSorting] = useState<SortingState>([])
+  const [selectedRecords, setSelectedRecords] = useState<Set<string>>(new Set())
+  const { ref, inView } = useInView()
+
+  const loadMore = async (reset = false) => {
+    if (loading || (!hasMore && !reset)) return
+
+    try {
+      setLoading(true)
+      const offset = reset ? 0 : data.length
+      const result = await fetchData({
+        offset,
+        limit: 50,
+        search: search || undefined,
+      })
+
+      if (reset) {
+        setData(result.data)
+      } else {
+        setData(prev => [...prev, ...result.data])
+      }
+
+      if (result.total !== undefined) {
+        setTotal(result.total)
+      }
+      setHasMore(result.hasMore)
+    } catch (error) {
+      toast.error(fetchErrorMessage)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  // Reset and load data when key or search changes
+  useEffect(() => {
+    if (key) {
+      setData([])
+      setHasMore(true)
+      setSelectedRecords(new Set())
+      loadMore(true)
+    }
+  }, [key, search])
+
+  // Infinite scroll: load more when scroll observer is in view
+  useEffect(() => {
+    if (inView && hasMore && !loading) {
+      loadMore()
+    }
+  }, [inView, hasMore, loading])
+
+  const handleDelete = async () => {
+    if (selectedRecords.size === 0) return
+
+    try {
+      await deleteRecords(Array.from(selectedRecords))
+      const itemText = pluralize(selectedRecords.size, itemSingular, itemPlural)
+      toast.success(deleteSuccessMessage.replace('{count}', selectedRecords.size.toString()).replace('{item}', itemText))
+      setSelectedRecords(new Set())
+      loadMore(true)
+    } catch (error) {
+      toast.error(deleteErrorMessage)
+    }
+  }
+
+  return {
+    // State
+    data,
+    loading,
+    hasMore,
+    total,
+    search,
+    sorting,
+    selectedRecords,
+    
+    // Setters
+    setSearch,
+    setSorting,
+    setSelectedRecords,
+    setData,
+    
+    // Handlers
+    handleDelete,
+    
+    // Refs
+    loadMoreRef: ref,
+  }
+}

package/studio/src/index.css

@@ -0,0 +1,36 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 24 95% 53%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 210 40% 96%;
+    --secondary-foreground: 222.2 84% 4.9%;
+    --muted: 210 40% 96%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96%;
+    --accent-foreground: 222.2 84% 4.9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 24 95% 53%;
+    --radius: 0.5rem;
+  }
+
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/studio/src/lib/api.ts

@@ -0,0 +1,186 @@
+const API_BASE = '/studio/api'
+
+export interface TableData {
+  data: Record<string, unknown>[]
+  hasMore: boolean
+  total?: number
+}
+
+export interface ArcheTypeData {
+  data: Record<string, unknown>[]
+  hasMore: boolean
+  total?: number
+}
+
+export interface TablesResponse {
+  tables: string[]
+}
+
+export async function fetchTables(): Promise<string[]> {
+  const response = await fetch(`${API_BASE}/tables`)
+  if (!response.ok) {
+    throw new Error('Failed to fetch tables')
+  }
+  const data: TablesResponse = await response.json()
+  return data.tables
+}
+
+export async function fetchTableData(
+  tableName: string,
+  params: { limit?: number; offset?: number; search?: string } = {}
+): Promise<TableData> {
+  const searchParams = new URLSearchParams()
+  if (params.limit) searchParams.set('limit', params.limit.toString())
+  if (params.offset) searchParams.set('offset', params.offset.toString())
+  if (params.search) searchParams.set('search', params.search)
+
+  const response = await fetch(`${API_BASE}/table/${tableName}?${searchParams}`)
+  if (!response.ok) {
+    throw new Error('Failed to fetch table data')
+  }
+  const result = await response.json()
+  return {
+    data: result.rows || [],
+    hasMore: result.rows && result.rows.length === (params.limit || 50),
+    total: result.total,
+  }
+}
+
+export async function fetchArcheTypeData(
+  archeTypeName: string,
+  params: { limit?: number; offset?: number; search?: string; include_deleted?: boolean } = {}
+): Promise<ArcheTypeData> {
+  const searchParams = new URLSearchParams()
+  if (params.limit) searchParams.set('limit', params.limit.toString())
+  if (params.offset) searchParams.set('offset', params.offset.toString())
+  if (params.search) searchParams.set('search', params.search)
+  if (params.include_deleted) searchParams.set('include_deleted', 'true')
+
+  const response = await fetch(`${API_BASE}/arche-type/${archeTypeName}?${searchParams}`)
+  if (!response.ok) {
+    throw new Error('Failed to fetch archetype data')
+  }
+  const result = await response.json()
+  // Transform entities to flat records with id and component fields
+  const data = result.entities?.map((entity: any) => ({
+    id: entity.entityId,
+    ...entity.components,
+    ...(entity.deleted_at !== undefined ? { _deleted_at: entity.deleted_at } : {}),
+  })) || []
+  return {
+    data,
+    hasMore: result.entities && result.entities.length === (params.limit || 50),
+    total: result.total,
+  }
+}
+
+export interface EntityComponent {
+  id: string
+  name: string
+  type_id: string
+  data: unknown
+  created_at: string
+  updated_at: string
+  deleted_at: string | null
+}
+
+export interface EntityInspectorData {
+  entity: {
+    id: string
+    created_at: string
+    updated_at: string
+    deleted_at: string | null
+  }
+  components: EntityComponent[]
+}
+
+export interface StudioStats {
+  entities: {
+    active: number
+    deleted: number
+    total: number
+  }
+  componentTypes: { name: string; count: number }[]
+  archetypes: { name: string; entityCount: number; componentCount: number }[]
+}
+
+export async function fetchStats(): Promise<StudioStats> {
+  const response = await fetch(`${API_BASE}/stats`)
+  if (!response.ok) {
+    throw new Error('Failed to fetch stats')
+  }
+  return response.json()
+}
+
+export interface ComponentTypeInfo {
+  name: string
+  entityCount: number
+  partitionTable: string
+  fields: string[]
+}
+
+export async function fetchComponents(): Promise<ComponentTypeInfo[]> {
+  const response = await fetch(`${API_BASE}/components`)
+  if (!response.ok) {
+    throw new Error('Failed to fetch components')
+  }
+  const data = await response.json()
+  return data.components
+}
+
+export async function fetchEntity(entityId: string): Promise<EntityInspectorData> {
+  const response = await fetch(`${API_BASE}/entity/${entityId}`)
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ error: 'Failed to fetch entity' }))
+    throw new Error(error.error || 'Failed to fetch entity')
+  }
+  return response.json()
+}
+
+export interface QueryResult {
+  columns: string[]
+  rows: Record<string, unknown>[]
+  rowCount: number
+  duration: number
+}
+
+export async function executeQuery(sql: string): Promise<QueryResult> {
+  const response = await fetch(`${API_BASE}/query`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ sql }),
+  })
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ error: 'Query failed' }))
+    throw new Error(error.error || 'Query failed')
+  }
+  return response.json()
+}
+
+export async function deleteTableRecords(tableName: string, ids: string[]): Promise<void> {
+  const response = await fetch(`${API_BASE}/table/${tableName}`, {
+    method: 'DELETE',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ ids }),
+  })
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ error: 'Failed to delete table records' }))
+    throw new Error(error.error || 'Failed to delete table records')
+  }
+}
+
+export async function deleteArcheTypeRecords(archeTypeName: string, entityIds: string[]): Promise<void> {
+  const response = await fetch(`${API_BASE}/arche-type/${archeTypeName}`, {
+    method: 'DELETE',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ entityIds }),
+  })
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ error: 'Failed to delete archetype records' }))
+    throw new Error(error.error || 'Failed to delete archetype records')
+  }
+}

package/studio/src/lib/utils.ts

@@ -0,0 +1,13 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function pluralize(count: number, singular: string, plural?: string): string {
+  if (count === 1) {
+    return singular
+  }
+  return plural || `${singular}s`
+}

package/studio/src/main.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { createBrowserRouter, RouterProvider } from 'react-router-dom'
+import { routes } from './routes.tsx'
+import './index.css'
+import { Toaster } from 'sonner'
+
+const router = createBrowserRouter(routes, {
+  basename: '/studio',
+})
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <RouterProvider router={router} />
+    <Toaster position="top-right" />
+  </React.StrictMode>,
+)

package/studio/src/pages/ArcheType.tsx

@@ -0,0 +1,239 @@
+import { useParams } from "react-router-dom";
+import { type ColumnDef } from "@tanstack/react-table";
+import { useStudioStore } from "../store/studio";
+import { useArcheTypeSettings } from "../store/archeTypeSettings";
+import { fetchArcheTypeData, deleteArcheTypeRecords } from "../lib/api";
+import { PageContainer } from "../components/PageContainer";
+import { SearchBar } from "../components/SearchBar";
+import { DataTable } from "../components/DataTable";
+import { Checkbox } from "../components/ui/checkbox";
+import { useDataTable } from "../hooks/useDataTable";
+import {
+    createSelectColumn,
+    createIdColumn,
+    createTextColumn,
+} from "../utils/columnHelpers";
+import { useMemo } from "react";
+import { cn } from "../lib/utils";
+
+interface ArcheTypeRecord {
+    id: string;
+    _deleted_at?: string | null;
+    [key: string]: any;
+}
+
+function findIndicatorName(
+    archeTypeName: string,
+    fields: { componentName: string }[]
+): string | null {
+    if (fields.length === 0) return null;
+    const names = fields.map((f) => f.componentName);
+    const lower = archeTypeName.toLowerCase();
+
+    return (
+        names.find((n) => n.toLowerCase() === `${lower}tag`) ??
+        names.find((n) => n.toLowerCase() === `${lower}id`) ??
+        names.find((n) => n.toLowerCase().startsWith(lower)) ??
+        names.find((n) => n.toLowerCase().includes(lower)) ??
+        names[0] ??
+        null
+    );
+}
+
+export function ArcheType() {
+    const { name } = useParams<{ name: string }>();
+    const { metadata } = useStudioStore();
+    const {
+        useRealDbFieldName,
+        autoExpandRow,
+        showDeleted,
+        setUseRealDbFieldName,
+        setAutoExpandRow,
+        setShowDeleted,
+    } = useArcheTypeSettings();
+
+    const fetchKey = `${name || ""}:${showDeleted}`;
+
+    const {
+        data,
+        loading,
+        hasMore,
+        total,
+        search,
+        sorting,
+        selectedRecords,
+        setSearch,
+        setSorting,
+        setSelectedRecords,
+        handleDelete,
+        loadMoreRef,
+    } = useDataTable<ArcheTypeRecord>({
+        key: fetchKey,
+        fetchData: (params) =>
+            fetchArcheTypeData(name!, {
+                ...params,
+                include_deleted: showDeleted,
+            }) as Promise<{
+                data: ArcheTypeRecord[];
+                hasMore: boolean;
+                total?: number;
+            }>,
+        deleteRecords: (ids) => deleteArcheTypeRecords(name!, ids),
+        fetchErrorMessage: "Failed to load archetype entities",
+        deleteErrorMessage: "Failed to delete archetype entities",
+        deleteSuccessMessage: "Deleted {count} {item}",
+        itemSingular: "entity",
+        itemPlural: "entities",
+    });
+
+    const archeTypeFields = metadata?.archeTypes[name || ""] || [];
+    const indicatorName = useMemo(
+        () => (name ? findIndicatorName(name, archeTypeFields) : null),
+        [name, archeTypeFields]
+    );
+
+    // Preprocess data: transform Tag component values to "true" when useRealDbFieldName is enabled
+    const preprocessedData = useMemo(() => {
+        if (useRealDbFieldName) return data;
+
+        return data.map((record) => {
+            const newRecord = { ...record };
+            archeTypeFields.forEach((field) => {
+                if (field.componentName.endsWith("Tag")) {
+                    newRecord[field.componentName] = "true";
+                }
+            });
+            return newRecord;
+        });
+    }, [data, useRealDbFieldName, archeTypeFields]);
+
+    const columns: ColumnDef<ArcheTypeRecord>[] = useMemo(
+        () => [
+            createSelectColumn<ArcheTypeRecord>(),
+            createIdColumn<ArcheTypeRecord>({ linkToEntity: true }),
+            ...archeTypeFields.map((field) => {
+                const isTagComponent = field.componentName.endsWith("Tag");
+                const shouldExtractValue = !(
+                    useRealDbFieldName && isTagComponent
+                );
+
+                return createTextColumn<ArcheTypeRecord>(
+                    field.componentName,
+                    useRealDbFieldName
+                        ? field.componentName
+                        : field.fieldLabel || field.fieldName,
+                    { extractValue: shouldExtractValue, autoExpandRow }
+                );
+            }),
+        ],
+        [archeTypeFields, useRealDbFieldName, autoExpandRow]
+    );
+
+    const getRowClassName = (record: ArcheTypeRecord) =>
+        record._deleted_at ? "opacity-50 bg-destructive/5" : "";
+
+    if (!name) {
+        return <div className="p-8">Archetype name not found</div>;
+    }
+
+    return (
+        <PageContainer>
+            {/* Header with total count */}
+            <div className="mb-6">
+                <div className="flex items-baseline gap-3 mb-1">
+                    <h1 className="text-3xl font-bold text-primary">{name}</h1>
+                    {total !== null && (
+                        <span className="text-lg text-muted-foreground font-mono tabular-nums">
+                            {total.toLocaleString()} {total === 1 ? "entity" : "entities"}
+                        </span>
+                    )}
+                </div>
+                <p className="text-muted-foreground mb-4">
+                    Browse and manage entities for the {name} archetype
+                </p>
+
+                {/* Component composition */}
+                {archeTypeFields.length > 0 && (
+                    <div className="flex flex-wrap gap-1.5">
+                        {archeTypeFields.map((field) => {
+                            const isIndicator =
+                                field.componentName === indicatorName;
+                            const isOptional = !!field.nullable;
+
+                            return (
+                                <span
+                                    key={field.componentName}
+                                    className={cn(
+                                        "inline-flex items-center gap-1 px-2.5 py-1 rounded-md text-xs font-medium border",
+                                        isIndicator
+                                            ? "bg-primary/15 text-primary border-primary/30"
+                                            : isOptional
+                                              ? "bg-muted/50 text-muted-foreground border-border border-dashed"
+                                              : "bg-muted text-foreground border-border"
+                                    )}
+                                    title={
+                                        isIndicator
+                                            ? "Indicator component"
+                                            : isOptional
+                                              ? "Optional component"
+                                              : "Required component"
+                                    }
+                                >
+                                    {field.componentName}
+                                    {isOptional && (
+                                        <span className="text-muted-foreground">?</span>
+                                    )}
+                                </span>
+                            );
+                        })}
+                    </div>
+                )}
+            </div>
+
+            <SearchBar
+                search={search}
+                onSearchChange={setSearch}
+                placeholder="Search entities..."
+                selectedCount={selectedRecords.size}
+                onDelete={handleDelete}
+                itemSingular="entity"
+                itemPlural="entities"
+            />
+            <div className="flex items-center gap-6 mb-4">
+                <Checkbox
+                    id="show-db-field-name"
+                    label="Show real DB field name"
+                    checked={useRealDbFieldName}
+                    onChange={(e) => setUseRealDbFieldName(e.target.checked)}
+                />
+                <Checkbox
+                    id="auto-expand-row"
+                    label="Auto expand row"
+                    checked={autoExpandRow}
+                    onChange={(e) => setAutoExpandRow(e.target.checked)}
+                />
+                <Checkbox
+                    id="show-deleted"
+                    label="Show deleted"
+                    checked={showDeleted}
+                    onChange={(e) => setShowDeleted(e.target.checked)}
+                />
+            </div>
+            <DataTable
+                data={preprocessedData}
+                columns={columns}
+                loading={loading}
+                hasMore={hasMore}
+                sorting={sorting}
+                onSortingChange={setSorting}
+                selectedRecords={selectedRecords}
+                onSelectionChange={setSelectedRecords}
+                getRecordId={(record) => record.id}
+                loadMoreRef={loadMoreRef}
+                emptyMessage="No entities found"
+                loadingMessage="Loading more entities..."
+                getRowClassName={getRowClassName}
+            />
+        </PageContainer>
+    );
+}