spine-framework 0.2.1 → 1.0.0

package/.framework/src/components/layout/Sidebar.tsx

@@ -1,329 +0,0 @@
-import { useState } from 'react'
-import { Link, useLocation } from 'react-router-dom'
-import { useAuth } from '../../contexts/AuthContext'
-import { Popover, PopoverTrigger, PopoverContent } from '../ui/popover'
-import { 
-  Home, 
-  Box, 
-  Users, 
-  Settings, 
-  FileText, 
-  Sparkles, 
-  LogOut, 
-  Building2, 
-  RefreshCw, 
-  Zap, 
-  Clock, 
-  ChevronDown, 
-  ChevronRight, 
-  X, 
-  Link as LinkIcon, 
-  User, 
-  MoreVertical, 
-  ShieldCheck, 
-  Key, 
-  FlaskConical, 
-  BarChart3, 
-  Bell
-} from 'lucide-react'
-
-interface SidebarProps {
-  open: boolean
-  onClose: () => void
-}
-
-const navigation = [
-  { name: 'Dashboard', href: '/spine-framework/admin/configs/types', icon: Home },
-]
-
-const configsNavigation = [
-  { name: 'Item Types', href: '/spine-framework/admin/configs/types', icon: Box },
-  { divider: true },
-  { name: 'Apps', href: '/spine-framework/admin/configs/apps', icon: Settings },
-  { name: 'Roles', href: '/spine-framework/admin/configs/roles', icon: ShieldCheck },
-  { divider: true },
-  { name: 'AI Agents', href: '/spine-framework/admin/configs/ai-agents', icon: Sparkles },
-  { name: 'Prompt Configs', href: '/spine-framework/admin/configs/prompts', icon: FileText },
-  { name: 'Embeddings', href: '/spine-framework/admin/configs/embeddings', icon: FileText },
-  { divider: true },
-  { name: 'Pipelines', href: '/spine-framework/admin/configs/pipelines', icon: RefreshCw },
-  { name: 'Triggers', href: '/spine-framework/admin/configs/triggers', icon: Zap },
-  { name: 'Timers', href: '/spine-framework/admin/configs/timers', icon: Clock },
-  { divider: true },
-  { name: 'Integrations', href: '/spine-framework/admin/configs/integrations', icon: LinkIcon },
-  { name: 'API Keys', href: '/spine-framework/admin/configs/api-keys', icon: Key },
-] as const
-
-const observabilityNavigation = [
-  { name: 'Dashboard', href: '/spine-framework/admin/observability', icon: BarChart3 },
-  { name: 'Alerts', href: '/spine-framework/admin/observability/alerts', icon: Bell },
-  { name: 'Executions', href: '/spine-framework/admin/observability/executions', icon: FlaskConical },
-  { name: 'Logs', href: '/spine-framework/admin/observability/logs', icon: FileText },
-]
-
-// Database entities that should be shown in runtime navigation
-const runtimeEntities = [
-  { name: 'Items', href: '/spine-framework/admin/runtime/items', icon: Box },
-  { name: 'Accounts', href: '/spine-framework/admin/runtime/accounts', icon: Building2 },
-  { name: 'People', href: '/spine-framework/admin/runtime/people', icon: User },
-  { name: 'Person Types', href: '/spine-framework/admin/runtime/person-types', icon: Users },
-]
-
-function classNames(...classes: (string | false | undefined)[]) {
-  return classes.filter(Boolean).join(' ')
-}
-
-export function Sidebar({ open, onClose }: SidebarProps) {
-  return (
-    <>
-      {/* Mobile sidebar */}
-      <div className={classNames(open && 'fixed inset-0 z-40 flex')}> 
-        {open && (
-          <div className="fixed inset-0 z-40 flex">
-            <div 
-              className="fixed inset-0 bg-black/50 transition-opacity" 
-              onClick={onClose}
-            />
-            <div className="relative flex w-full max-w-xs flex-1 flex-col bg-sidebar pb-4">
-              <div className="absolute right-0 top-0 -mr-12 pt-2">
-                <button
-                  type="button"
-                  className="ml-1 flex h-10 w-10 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
-                  onClick={onClose}
-                >
-                  <span className="sr-only">Close sidebar</span>
-                  <X className="h-6 w-6 text-white" aria-hidden="true" />
-                </button>
-              </div>
-              <div className="h-0 flex-1 overflow-y-auto pt-5">
-                <div className="flex flex-shrink-0 items-center px-4">
-                  <span className="text-xl font-bold text-sidebar-foreground">Spine</span>
-                </div>
-                <SidebarContent onNavClick={onClose} />
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-    </>
-  )
-}
-
-interface SidebarContentProps {
-  onNavClick?: () => void
-}
-
-export function SidebarContent({ onNavClick }: SidebarContentProps) {
-  const location = useLocation()
-  const { user, logout } = useAuth()
-  const isSystemAdmin = user?.roles?.includes('system_admin')
-
-  // Collapsible sections state
-  const [configsOpen, setConfigsOpen] = useState(() => 
-    location.pathname.includes('/admin/configs')
-  )
-  const [runtimeOpen, setRuntimeOpen] = useState(() => 
-    location.pathname.includes('/admin/runtime')
-  )
-  const [observabilityOpen, setObservabilityOpen] = useState(() =>
-    location.pathname.includes('/admin/observability')
-  )
-
-  const isActive = (href: string) => {
-    return location.pathname === href || location.pathname.startsWith(href + '/')
-  }
-
-  return (
-    <nav className="mt-5 flex flex-1 flex-col px-2">
-      {/* Main nav */}
-      <div className="space-y-1">
-        {navigation.map((item) => (
-          <Link
-            key={item.name}
-            to={item.href}
-            onClick={onNavClick}
-            className={classNames(
-              isActive(item.href)
-                ? 'bg-sidebar-accent text-sidebar-accent-foreground'
-                : 'text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
-              'group flex items-center rounded-md px-2 py-2 text-sm font-medium'
-            )}
-          >
-            <item.icon
-              className={classNames(
-                isActive(item.href) ? 'text-sidebar-accent-foreground' : 'text-sidebar-foreground',
-                'mr-3 h-5 w-5 flex-shrink-0'
-              )}
-              aria-hidden="true"
-            />
-            {item.name}
-          </Link>
-        ))}
-      </div>
-
-      {/* Configs Section */}
-      {isSystemAdmin && (
-        <>
-          <div className="mt-6">
-            <button
-              onClick={() => setConfigsOpen(!configsOpen)}
-              className="flex w-full items-center justify-between px-2 py-2 text-sm font-medium text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground rounded-md"
-            >
-              <span>Configuration</span>
-              {configsOpen ? (
-                <ChevronDown className="h-4 w-4" />
-              ) : (
-                <ChevronRight className="h-4 w-4" />
-              )}
-            </button>
-            
-            {configsOpen && (
-              <div className="mt-1 space-y-1">
-                {configsNavigation.map((item, index) => (
-                  'divider' in item ? (
-                    <div key={`divider-${index}`} className="my-2 border-t border-sidebar-border" />
-                  ) : (
-                    <Link
-                      key={item.name}
-                      to={item.href}
-                      onClick={onNavClick}
-                      className={classNames(
-                        isActive(item.href)
-                          ? 'bg-sidebar-accent text-sidebar-accent-foreground'
-                          : 'text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
-                        'group flex items-center rounded-md px-2 py-2 text-sm font-medium pl-4'
-                      )}
-                    >
-                      <item.icon
-                        className={classNames(
-                          isActive(item.href) ? 'text-sidebar-accent-foreground' : 'text-sidebar-foreground',
-                          'mr-3 h-4 w-4 flex-shrink-0'
-                        )}
-                        aria-hidden="true"
-                      />
-                      {item.name}
-                    </Link>
-                  )
-                ))}
-              </div>
-            )}
-          </div>
-
-          {/* Runtime Section */}
-          <div className="mt-4">
-            <button
-              onClick={() => setRuntimeOpen(!runtimeOpen)}
-              className="flex w-full items-center justify-between px-2 py-2 text-sm font-medium text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground rounded-md"
-            >
-              <span>Data</span>
-              {runtimeOpen ? (
-                <ChevronDown className="h-4 w-4" />
-              ) : (
-                <ChevronRight className="h-4 w-4" />
-              )}
-            </button>
-            
-            {runtimeOpen && (
-              <div className="mt-1 space-y-1">
-                {runtimeEntities.map((item) => (
-                  <Link
-                    key={item.name}
-                    to={item.href}
-                    onClick={onNavClick}
-                    className={classNames(
-                      isActive(item.href)
-                        ? 'bg-sidebar-accent text-sidebar-accent-foreground'
-                        : 'text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
-                      'group flex items-center rounded-md px-2 py-2 text-sm font-medium pl-4'
-                    )}
-                  >
-                    <item.icon
-                      className={classNames(
-                        isActive(item.href) ? 'text-sidebar-accent-foreground' : 'text-sidebar-foreground',
-                        'mr-3 h-4 w-4 flex-shrink-0'
-                      )}
-                      aria-hidden="true"
-                    />
-                    {item.name}
-                  </Link>
-                ))}
-              </div>
-            )}
-          </div>
-
-          {/* Observability Section */}
-          <div className="mt-4">
-            <button
-              onClick={() => setObservabilityOpen(!observabilityOpen)}
-              className="flex w-full items-center justify-between px-2 py-2 text-sm font-medium text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground rounded-md"
-            >
-              <span>Observability</span>
-              {observabilityOpen ? (
-                <ChevronDown className="h-4 w-4" />
-              ) : (
-                <ChevronRight className="h-4 w-4" />
-              )}
-            </button>
-            
-            {observabilityOpen && (
-              <div className="mt-1 space-y-1">
-                {observabilityNavigation.map((item) => (
-                  <Link
-                    key={item.name}
-                    to={item.href}
-                    onClick={onNavClick}
-                    className={classNames(
-                      isActive(item.href)
-                        ? 'bg-sidebar-accent text-sidebar-accent-foreground'
-                        : 'text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
-                      'group flex items-center rounded-md px-2 py-2 text-sm font-medium pl-4'
-                    )}
-                  >
-                    <item.icon
-                      className={classNames(
-                        isActive(item.href) ? 'text-sidebar-accent-foreground' : 'text-sidebar-foreground',
-                        'mr-3 h-4 w-4 flex-shrink-0'
-                      )}
-                      aria-hidden="true"
-                    />
-                    {item.name}
-                  </Link>
-                ))}
-              </div>
-            )}
-          </div>
-        </>
-      )}
-
-      {/* User section */}
-      <div className="mt-auto border-t border-sidebar-border pt-4">
-        <Popover>
-          <PopoverTrigger asChild>
-            <button className="flex w-full items-center gap-3 rounded-md px-2 py-2 text-sm font-medium text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
-              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-sidebar-primary text-sidebar-primary-foreground">
-                <User className="h-4 w-4" />
-              </div>
-              <div className="flex-1 text-left">
-                <p className="truncate text-sm font-medium">{user?.email || 'User'}</p>
-              </div>
-              <MoreVertical className="h-4 w-4" />
-            </button>
-          </PopoverTrigger>
-          <PopoverContent align="end" className="w-56">
-            <div className="space-y-1">
-              <button
-                onClick={() => {
-                  logout()
-                }}
-                className="flex w-full items-center rounded-md px-2 py-2 text-sm font-medium text-destructive hover:bg-destructive/10"
-              >
-                <LogOut className="mr-2 h-4 w-4" />
-                Sign out
-              </button>
-            </div>
-          </PopoverContent>
-        </Popover>
-      </div>
-    </nav>
-  )
-}

package/.framework/src/components/runtime/DataDetailHeader.tsx

@@ -1,77 +0,0 @@
-import React from 'react'
-import { Button } from '../ui/button'
-import * as Icons from 'lucide-react'
-
-interface DataDetailHeaderProps {
-  entity: string
-  icon: string
-  title: string
-  isEditing: boolean
-  isCreating: boolean
-  onEdit: () => void
-  onSave: () => void
-  onCancel: () => void
-  onDelete?: () => void
-  saving?: boolean
-  deleting?: boolean
-}
-
-export function DataDetailHeader({
-  entity,
-  icon,
-  title,
-  isEditing,
-  isCreating,
-  onEdit,
-  onSave,
-  onCancel,
-  onDelete,
-  saving,
-  deleting
-}: DataDetailHeaderProps) {
-  const IconComponent = (Icons as Record<string, React.ComponentType<{ className?: string }>>)[icon] || Icons.Box
-  
-  return (
-    <div className="flex justify-between items-start">
-      <div className="flex items-center gap-3">
-        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
-          <IconComponent className="h-6 w-6 text-primary" />
-        </div>
-        <div>
-          <h1 className="text-xl font-semibold text-foreground">
-            {title}
-          </h1>
-          <p className="mt-0.5 text-sm text-muted-foreground capitalize">
-            {isCreating ? `Create new ${entity.slice(0, -1)}` : entity}
-          </p>
-        </div>
-      </div>
-      
-      <div className="flex items-center gap-2">
-        {isEditing ? (
-          <>
-            <Button variant="secondary" onClick={onCancel}>
-              Cancel
-            </Button>
-            <Button onClick={onSave} disabled={saving}>
-              {saving ? 'Saving...' : isCreating ? 'Create' : 'Save'}
-            </Button>
-          </>
-        ) : (
-          <>
-            <Button variant="secondary" onClick={onEdit}>
-              <Icons.Pencil className="h-4 w-4 mr-1" />
-              Edit
-            </Button>
-            {onDelete && (
-              <Button variant="destructive" onClick={onDelete} disabled={deleting}>
-                <Icons.Trash2 className="h-4 w-4 mr-1" />
-                Delete
-              </Button>
-            )}
-          </>
-        )}
-      </div>
-    </div>
-  )
-}

package/.framework/src/components/runtime/DataDetailPage.tsx

@@ -1,171 +0,0 @@
-import { useState, useEffect } from 'react'
-import { useParams, useSearchParams } from 'react-router-dom'
-import { useEntityRecord } from '../../hooks/useEntityRecord'
-import { DataDetailHeader } from './DataDetailHeader'
-import { SchemaDetailForm } from './SchemaDetailForm'
-import { Button } from '../ui/button'
-import { Card, CardContent } from '../ui/card'
-import { Skeleton } from '../ui/skeleton'
-
-export function DataDetailPage() {
-  const { entity, id, typeSlug } = useParams<{ entity: string; id: string; typeSlug?: string }>()
-  const [searchParams, setSearchParams] = useSearchParams()
-  
-  const isCreating = !id
-  const isEditing = searchParams.get('edit') === 'true' || isCreating
-  
-  const config = {
-    entity: entity || '',
-    typeSlug: typeSlug || undefined,
-    icon: 'database',
-    displayField: 'display_name',
-    api: {
-      endpoint: 'admin-data',
-      getAction: 'get',
-      createAction: 'create',
-      updateAction: 'update'
-    }
-  }
-  
-  const { 
-    record, 
-    fieldPermissions,
-    loading, 
-    error, 
-    refetch,
-    save,
-    delete: deleteRecord,
-    saving,
-    deleting
-  } = useEntityRecord(entity!, id, config)
-  
-  const schema = record?.design_schema || null
-  const view = schema?.views?.default_detail || null
-
-  const displayField = schema?.display_field || config.displayField
-  const FALLBACK_FIELDS = ['full_name', 'display_name', 'name', 'title', 'slug', 'email']
-  const recordTitle = record?.[displayField]
-    ?? FALLBACK_FIELDS.map(f => record?.[f]).find(v => v != null)
-    ?? 'Untitled'
-
-  const [formData, setFormData] = useState<Record<string, any>>({})
-
-  useEffect(() => {
-    if (record && view) {
-      const initialData: Record<string, any> = {}
-      view.sections?.forEach((section: any) => {
-        const fieldNames = Array.isArray(section.fields) ? section.fields : Object.keys(section.fields || {})
-        fieldNames.forEach((fieldName: string) => {
-          const fieldDef = schema?.fields?.[fieldName]
-          if (fieldDef?.system) {
-            initialData[fieldName] = record[fieldName]
-          } else {
-            initialData[fieldName] = record.data?.[fieldName]
-          }
-        })
-      })
-      setFormData(initialData)
-    } else if (isCreating) {
-      setFormData({})
-    }
-  }, [record, isCreating, view, schema])
-  
-  const handleFieldChange = (key: string, value: any) => {
-    setFormData((prev) => ({ ...prev, [key]: value }))
-  }
-  
-  const handleEdit = () => {
-    setSearchParams({ edit: 'true' })
-  }
-  
-  const handleCancel = () => {
-    if (isCreating) {
-      window.location.href = `/spine-framework/admin/runtime/${entity}`
-    } else {
-      setSearchParams({})
-      if (record && view) {
-        const initialData: Record<string, any> = {}
-        view.sections?.forEach((section: any) => {
-          const fieldNames = Array.isArray(section.fields) ? section.fields : Object.keys(section.fields || {})
-          fieldNames.forEach((fieldName: string) => {
-            const fieldDef = schema?.fields?.[fieldName]
-            if (fieldDef?.system) {
-              initialData[fieldName] = record[fieldName]
-            } else {
-              initialData[fieldName] = record.data?.[fieldName]
-            }
-          })
-        })
-        setFormData(initialData)
-      }
-    }
-  }
-  
-  const handleSave = async () => {
-    await save(formData)
-    if (!isCreating) {
-      setSearchParams({})
-    } else {
-      window.location.href = `/spine-framework/admin/runtime/${entity}`
-    }
-  }
-  
-  const handleDelete = async () => {
-    if (confirm(`Are you sure you want to delete this ${config?.entity?.slice(0, -1) || 'record'}?`)) {
-      await deleteRecord()
-      window.location.href = `/spine-framework/admin/runtime/${entity}`
-    }
-  }
-  
-  if (loading) {
-    return (
-      <Card>
-        <CardContent className="p-8 space-y-4">
-          <Skeleton className="h-8 w-48" />
-          <Skeleton className="h-32 w-full" />
-          <Skeleton className="h-32 w-full" />
-        </CardContent>
-      </Card>
-    )
-  }
-  
-  if (error || !schema || !view) {
-    return (
-      <Card>
-        <CardContent className="p-8 text-center">
-          <p className="text-destructive">Error: {error || 'Failed to load record or schema'}</p>
-          <Button onClick={refetch} variant="outline" className="mt-4">Retry</Button>
-        </CardContent>
-      </Card>
-    )
-  }
-  
-  return (
-    <div className="space-y-6">
-      <DataDetailHeader
-        entity={config.entity}
-        icon={config.icon}
-        title={isCreating ? `New ${config.entity.slice(0, -1)}` : recordTitle}
-        isEditing={isEditing}
-        isCreating={isCreating}
-        onEdit={handleEdit}
-        onSave={handleSave}
-        onCancel={handleCancel}
-        onDelete={!isCreating ? handleDelete : undefined}
-        saving={saving}
-        deleting={deleting}
-      />
-      
-      <SchemaDetailForm
-        schema={schema}
-        view={view}
-        record={record}
-        isEditing={isEditing}
-        isCreating={isCreating}
-        permissions={fieldPermissions}
-        formData={formData}
-        onFieldChange={handleFieldChange}
-      />
-    </div>
-  )
-}

package/.framework/src/components/runtime/DataFilters.tsx

@@ -1,91 +0,0 @@
-import { EntityFilter } from '../../types/types'
-import { Card, CardContent } from '../ui/card'
-import { Input } from '../ui/input'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
-import { Button } from '../ui/button'
-import { Label } from '../ui/label'
-
-interface DataFiltersProps {
-  filters: EntityFilter[]
-  values: Record<string, any>
-  onChange: (values: Record<string, any>) => void
-  onClear: () => void
-}
-
-export function DataFilters({ filters, values, onChange, onClear }: DataFiltersProps) {
-  const handleFilterChange = (key: string, value: any) => {
-    onChange({ ...values, [key]: value })
-  }
-  
-  const hasActiveFilters = Object.values(values).some(v => v !== undefined && v !== '' && v !== 'all')
-  
-  return (
-    <Card>
-      <CardContent className="p-4">
-        <div className="flex flex-col sm:flex-row gap-4">
-          {filters.map((filter) => (
-            <div key={filter.key} className="sm:w-48">
-              <Label className="text-xs font-medium text-muted-foreground mb-2 block">
-                {filter.label}
-              </Label>
-              
-              {filter.type === 'search' && (
-                <Input
-                  type="text"
-                  value={values[filter.key] || ''}
-                  onChange={(e) => handleFilterChange(filter.key, e.target.value)}
-                  placeholder={`Search ${filter.label.toLowerCase()}...`}
-                />
-              )}
-              
-              {filter.type === 'enum' && (
-                <Select 
-                  value={values[filter.key] || 'all'} 
-                  onValueChange={(value) => handleFilterChange(filter.key, value === 'all' ? undefined : value)}
-                >
-                  <SelectTrigger>
-                    <SelectValue placeholder={`All ${filter.label}`} />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="all">All {filter.label}</SelectItem>
-                    {filter.options?.map((option) => (
-                      <SelectItem key={option} value={option}>
-                        {option.charAt(0).toUpperCase() + option.slice(1)}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              )}
-              
-              {filter.type === 'boolean' && (
-                <Select 
-                  value={values[filter.key]?.toString() || 'all'}
-                  onValueChange={(value) => {
-                    handleFilterChange(filter.key, value === 'all' ? undefined : value === 'true')
-                  }}
-                >
-                  <SelectTrigger>
-                    <SelectValue placeholder="All" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="all">All</SelectItem>
-                    <SelectItem value="true">Yes</SelectItem>
-                    <SelectItem value="false">No</SelectItem>
-                  </SelectContent>
-                </Select>
-              )}
-            </div>
-          ))}
-          
-          {hasActiveFilters && (
-            <div className="flex items-end">
-              <Button variant="ghost" size="sm" onClick={onClear}>
-                Clear filters
-              </Button>
-            </div>
-          )}
-        </div>
-      </CardContent>
-    </Card>
-  )
-}