spine-framework 0.2.1 → 1.0.0

package/.framework/src/components/AppWrapper.tsx

@@ -1,56 +0,0 @@
-import React from 'react'
-import { Navigate } from 'react-router-dom'
-import { useAuth } from '../contexts/AuthContext'
-import { AppProvider } from '../contexts/AppContext'
-import { AppRecord } from '../hooks/useApps'
-
-interface AppWrapperProps {
-  app: AppRecord
-  children: React.ReactNode
-}
-
-/**
- * Shared wrapper for all apps. Provides:
- * - Auth gate: redirects to /login if unauthenticated
- * - Role gate: shows 403 if user lacks app's min_role
- * - App context: makes app record available via useCurrentApp()
- */
-export function AppWrapper({ app, children }: AppWrapperProps) {
-  const { user } = useAuth()
-
-  // Auth gate
-  if (!user) {
-    return <Navigate to="/login" replace />
-  }
-
-  // Role gate
-  if (app.min_role) {
-    const hasRole = user.roles?.includes('system_admin') || user.roles?.includes(app.min_role)
-    if (!hasRole) {
-      return (
-        <div className="min-h-screen flex items-center justify-center bg-slate-50">
-          <div className="text-center p-8">
-            <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
-              <svg className="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
-              </svg>
-            </div>
-            <h1 className="text-2xl font-bold text-slate-900 mb-2">Access Denied</h1>
-            <p className="text-slate-600 mb-6">You don't have permission to access {app.name}.</p>
-            <div className="bg-slate-100 rounded-lg p-4 text-left">
-              <p className="text-sm text-slate-600 mb-2"><strong>Your roles:</strong> {user.roles?.join(', ') || 'None'}</p>
-              <p className="text-sm text-slate-600"><strong>Required:</strong> {app.min_role}</p>
-            </div>
-          </div>
-        </div>
-      )
-    }
-  }
-
-  // App context
-  return (
-    <AppProvider app={app}>
-      {children}
-    </AppProvider>
-  )
-}

package/.framework/src/components/CustomAppLoader.tsx

@@ -1,116 +0,0 @@
-import React, { lazy, Suspense, Component } from 'react'
-import type { ReactNode } from 'react'
-import { LoadingSpinner } from './ui/LoadingSpinner'
-
-// ─── ERROR BOUNDARY ───────────────────────────────────────────────────────────
-
-interface ErrorBoundaryProps {
-  slug: string
-  children: ReactNode
-}
-
-interface ErrorBoundaryState {
-  error: Error | null
-}
-
-class AppErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
-  constructor(props: ErrorBoundaryProps) {
-    super(props)
-    this.state = { error: null }
-  }
-
-  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
-    return { error }
-  }
-
-  render() {
-    if (this.state.error) {
-      return (
-        <div className="min-h-screen flex items-center justify-center bg-slate-50">
-          <div className="text-center p-8 max-w-lg">
-            <div className="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-4">
-              <svg className="w-8 h-8 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
-              </svg>
-            </div>
-            <h1 className="text-2xl font-bold text-slate-900 mb-2">App Load Error</h1>
-            <p className="text-slate-600 mb-4">
-              Failed to load the <strong>{this.props.slug}</strong> app.
-            </p>
-            <pre className="bg-slate-100 rounded-lg p-4 text-left text-sm text-red-600 overflow-auto mb-4">
-              {this.state.error.message}
-            </pre>
-            <p className="text-sm text-slate-500">
-              Check that <code>apps/{this.props.slug}/index.tsx</code> exists and exports a default component.
-            </p>
-          </div>
-        </div>
-      )
-    }
-
-    return this.props.children
-  }
-}
-
-// ─── LOADER ───────────────────────────────────────────────────────────────────
-
-// Static glob maps — Vite analyzes these at build time and builds a complete
-// module map. Runtime lookup is just a map key lookup, no dynamic string eval.
-// Custom apps take precedence over core apps with the same slug.
-const customAppModules = import.meta.glob('../../custom/apps/*/index.tsx')
-const coreAppModules   = import.meta.glob('../apps/*/index.tsx')
-
-// Module-level cache for lazy components to avoid re-creating on each render
-const appModuleCache = new Map<string, React.LazyExoticComponent<React.ComponentType>>()
-
-// Resolve the glob key for a given slug from the custom or core map.
-function resolveAppLoader(slug: string): (() => Promise<{ default: React.ComponentType }>) | null {
-  // Check custom first (custom/apps/{slug}/index.tsx)
-  const customKey = `../../custom/apps/${slug}/index.tsx`
-  if (customAppModules[customKey]) {
-    return customAppModules[customKey] as () => Promise<{ default: React.ComponentType }>
-  }
-  // Fall back to core (../apps/{slug}/index.tsx relative to this file)
-  const coreKey = `../apps/${slug}/index.tsx`
-  if (coreAppModules[coreKey]) {
-    return coreAppModules[coreKey] as () => Promise<{ default: React.ComponentType }>
-  }
-  return null
-}
-
-function getAppComponent(slug: string): React.LazyExoticComponent<React.ComponentType> {
-  if (!appModuleCache.has(slug)) {
-    const loader = resolveAppLoader(slug)
-    const LazyComponent = lazy(
-      loader
-        ? loader
-        : () => Promise.reject(new Error(`App "${slug}" not found. Expected apps/${slug}/index.tsx in custom/apps or .framework/src/apps.`))
-    )
-    appModuleCache.set(slug, LazyComponent)
-  }
-  return appModuleCache.get(slug)!
-}
-
-interface CustomAppLoaderProps {
-  slug: string
-}
-
-/**
- * Lazy-loads a custom app component from apps/{slug}/index.tsx.
- * Wraps in an error boundary so a broken app doesn't crash the entire site.
- */
-export function CustomAppLoader({ slug }: CustomAppLoaderProps) {
-  const AppComponent = getAppComponent(slug)
-
-  return (
-    <AppErrorBoundary slug={slug}>
-      <Suspense fallback={
-        <div className="min-h-screen flex items-center justify-center">
-          <LoadingSpinner />
-        </div>
-      }>
-        <AppComponent />
-      </Suspense>
-    </AppErrorBoundary>
-  )
-}

package/.framework/src/components/admin/AdminListPage.tsx

@@ -1,151 +0,0 @@
-import React, { ReactNode } from 'react'
-import { Button } from '../ui/button'
-import { Card, CardContent } from '../ui/card'
-import { Input } from '../ui/input'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
-import { Skeleton } from '../ui/skeleton'
-import { Search } from 'lucide-react'
-import { LucideIcon } from 'lucide-react'
-import { AdminStatsCard } from './AdminStatsCard'
-import { cn } from '../../lib/utils'
-
-interface AdminListPageProps {
-  title: string
-  description: string
-  newButtonText?: string
-  newButtonHref?: string
-  onNewClick?: () => void
-  statsCards: Array<{
-    title: string
-    value: string | number
-    icon: LucideIcon
-    iconColor?: string
-  }>
-  searchPlaceholder?: string
-  searchValue?: string
-  onSearchChange?: (value: string) => void
-  filters?: Array<{
-    label: string
-    value: string
-    options: Array<{ value: string; label: string }>
-    onChange: (value: string) => void
-  }>
-  children: ReactNode
-  loading?: boolean
-  error?: string | null
-  onRetry?: () => void
-  emptyMessage?: string
-  emptyIcon?: LucideIcon
-}
-
-export function AdminListPage({
-  title,
-  description,
-  newButtonText,
-  newButtonHref = '#',
-  onNewClick,
-  statsCards,
-  searchPlaceholder = "Search...",
-  searchValue = "",
-  onSearchChange,
-  filters = [],
-  children,
-  loading = false,
-  error = null,
-  onRetry,
-}: AdminListPageProps) {
-  return (
-    <div className="space-y-6">
-      {/* Header */}
-      <div className="flex justify-between items-center">
-        <div>
-          <h1 className="text-xl font-semibold">{title}</h1>
-          <p className="mt-1 text-sm text-muted-foreground">{description}</p>
-        </div>
-        
-        {newButtonText && (
-          <Button onClick={() => onNewClick ? onNewClick() : (window.location.href = newButtonHref!)}>
-            {newButtonText}
-          </Button>
-        )}
-      </div>
-
-      {/* Stats Cards */}
-      <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
-        {statsCards.map((stat, index) => (
-          <AdminStatsCard
-            key={index}
-            title={stat.title}
-            value={stat.value}
-            icon={stat.icon}
-            iconColor={stat.iconColor}
-          />
-        ))}
-      </div>
-
-      {/* Search and Filters */}
-      <Card>
-        <CardContent className="p-4">
-          <div className="flex flex-col sm:flex-row gap-4">
-            {/* Search */}
-            {onSearchChange && (
-              <div className="flex-1">
-                <div className="relative">
-                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                  <Input
-                    placeholder={searchPlaceholder}
-                    value={searchValue}
-                    onChange={(e) => onSearchChange(e.target.value)}
-                    className="pl-9"
-                  />
-                </div>
-              </div>
-            )}
-
-            {/* Filters */}
-            {filters.map((filter, index) => (
-              <div key={index} className="sm:w-48">
-                <Select value={filter.value} onValueChange={filter.onChange}>
-                  <SelectTrigger>
-                    <SelectValue placeholder={filter.label} />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {filter.options.map(option => (
-                      <SelectItem key={option.value} value={option.value}>
-                        {option.label}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-            ))}
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Content */}
-      <Card>
-        {loading ? (
-          <div className="p-8 space-y-4">
-            <Skeleton className="h-8 w-full" />
-            <Skeleton className="h-8 w-full" />
-            <Skeleton className="h-8 w-3/4" />
-          </div>
-        ) : error ? (
-          <div className="p-8 text-center">
-            <p className="text-destructive">Error: {error}</p>
-            {onRetry && (
-              <Button onClick={onRetry} className="mt-4">
-                Retry
-              </Button>
-            )}
-          </div>
-        ) : (
-          <CardContent className="p-0">
-            {children}
-          </CardContent>
-        )}
-      </Card>
-    </div>
-  )
-}

package/.framework/src/components/admin/AdminSidebar.tsx

@@ -1,166 +0,0 @@
-/**
- * @module src/components/admin/AdminSidebar
- * @audience installer
- * @layer frontend-component
- * @stability stable
- *
- * Admin sidebar with proper sections, React Router navigation, and active link highlighting.
- */
-
-import * as React from "react"
-import { Link, useLocation } from "react-router-dom"
-import { 
-  PlusIcon, 
-  Database, 
-  Settings, 
-  Type, 
-  Users, 
-  Layout, 
-  FileText,
-  BarChart3,
-  AlertTriangle,
-  Activity,
-  FileSearch,
-  FlaskConical,
-  Brain,
-  Cpu,
-  Timer,
-  Puzzle,
-  Shield,
-  MessageSquare,
-  Key,
-  TestTube
-} from "lucide-react"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarRail,
-} from "../ui/sidebar"
-import { Button } from "../ui/button"
-
-// Navigation sections with correct admin URLs
-const navigationSections = [
-  {
-    title: "Configs",
-    items: [
-      { title: "Types", url: "/spine-framework/admin/configs/types", icon: Type },
-      { title: "Apps", url: "/spine-framework/admin/configs/apps", icon: Layout },
-      { title: "Pipelines", url: "/spine-framework/admin/configs/pipelines", icon: Activity },
-      { title: "Triggers", url: "/spine-framework/admin/configs/triggers", icon: AlertTriangle },
-      { title: "AI Agents", url: "/spine-framework/admin/configs/ai-agents", icon: Brain },
-      { title: "Embeddings", url: "/spine-framework/admin/configs/embeddings", icon: Cpu },
-      { title: "Timers", url: "/spine-framework/admin/configs/timers", icon: Timer },
-      { title: "Integrations", url: "/spine-framework/admin/configs/integrations", icon: Puzzle },
-      { title: "Roles", url: "/spine-framework/admin/configs/roles", icon: Shield },
-      { title: "Prompts", url: "/spine-framework/admin/configs/prompts", icon: MessageSquare },
-      { title: "API Keys", url: "/spine-framework/admin/configs/api-keys", icon: Key },
-    ]
-  },
-  {
-    title: "Runtime",
-    items: [
-      { title: "Items", url: "/spine-framework/admin/runtime/items", icon: Database },
-      { title: "Accounts", url: "/spine-framework/admin/runtime/accounts", icon: Users },
-      { title: "People", url: "/spine-framework/admin/runtime/people", icon: Users },
-      { title: "Threads", url: "/spine-framework/admin/runtime/threads", icon: MessageSquare },
-      { title: "Messages", url: "/spine-framework/admin/runtime/messages", icon: FileText },
-      { title: "Attachments", url: "/spine-framework/admin/runtime/attachments", icon: FileSearch },
-      { title: "Watchers", url: "/spine-framework/admin/runtime/watchers", icon: Activity },
-      { title: "Links", url: "/spine-framework/admin/runtime/links", icon: Puzzle },
-      { title: "Progress", url: "/spine-framework/admin/runtime/item_progress", icon: BarChart3 },
-    ]
-  },
-  {
-    title: "Observability",
-    items: [
-      { title: "Dashboard", url: "/spine-framework/admin/observability", icon: BarChart3 },
-      { title: "Alerts", url: "/spine-framework/admin/observability/alerts", icon: AlertTriangle },
-      { title: "Executions", url: "/spine-framework/admin/observability/executions", icon: Activity },
-      { title: "Logs", url: "/spine-framework/admin/observability/logs", icon: FileSearch },
-    ]
-  },
-  {
-    title: "Testing",
-    items: [
-      { title: "Test Runs", url: "/spine-framework/admin/testing", icon: TestTube },
-    ]
-  }
-]
-
-export function AdminSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-  const location = useLocation()
-
-  // Check if a URL is active (exact match or starts with path)
-  const isActive = (url: string) => {
-    return location.pathname === url || location.pathname.startsWith(url + '/')
-  }
-
-  return (
-    <Sidebar {...props}>
-      <SidebarHeader>
-        {/* Brand Header */}
-        <SidebarMenu>
-          <SidebarMenuItem>
-            <SidebarMenuButton size="lg" asChild>
-              <Link to="/spine-framework/admin/configs/types">
-                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
-                  <span className="text-sm font-bold">S</span>
-                </div>
-                <div className="flex flex-col gap-0.5 leading-none">
-                  <span className="font-semibold">Spine</span>
-                  <span className="text-xs text-muted-foreground">Framework</span>
-                </div>
-              </Link>
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-        </SidebarMenu>
-
-        {/* Quick Create Button */}
-        <SidebarGroup className="py-2">
-          <Button className="w-full" size="sm">
-            <PlusIcon className="mr-2 h-4 w-4" />
-            Quick Create
-          </Button>
-        </SidebarGroup>
-      </SidebarHeader>
-
-      <SidebarContent>
-        {navigationSections.map((section) => (
-          <SidebarGroup key={section.title}>
-            <SidebarGroupLabel>{section.title}</SidebarGroupLabel>
-            <SidebarGroupContent>
-              <SidebarMenu>
-                {section.items.map((item) => (
-                  <SidebarMenuItem key={item.title}>
-                    <SidebarMenuButton asChild isActive={isActive(item.url)}>
-                      <Link to={item.url}>
-                        <item.icon className="h-4 w-4" />
-                        <span>{item.title}</span>
-                      </Link>
-                    </SidebarMenuButton>
-                  </SidebarMenuItem>
-                ))}
-              </SidebarMenu>
-            </SidebarGroupContent>
-          </SidebarGroup>
-        ))}
-      </SidebarContent>
-
-      <SidebarFooter className="p-4">
-        <div className="text-xs text-muted-foreground">
-          Spine v2.0
-        </div>
-      </SidebarFooter>
-
-      <SidebarRail />
-    </Sidebar>
-  )
-}

package/.framework/src/components/admin/AdminStatsCard.tsx

@@ -1,62 +0,0 @@
-/**
- * @module src/components/admin/AdminStatsCard
- * @audience installer
- * @layer frontend-component
- * @stability stable
- *
- * Single stat card used in admin list page headers. Renders an icon,
- * a title, and a numeric or string value inside a white rounded panel.
- * Icon colour defaults to `'text-blue-500'` but can be overridden per card.
- *
- * @seeAlso src/components/admin/AdminListPage.tsx (mounts this component)
- */
-
-import React from 'react'
-import { LucideIcon } from 'lucide-react'
-import { Card, CardContent } from '../ui/card'
-
-/**
- * Props for `AdminStatsCard`.
- *
- * @prop title - Stat label
- * @prop value - Numeric or formatted string value to display
- * @prop icon - Lucide icon component
- * @prop iconColor - Tailwind text-colour class (default: `'text-blue-500'`)
- */
-interface AdminStatsCardProps {
-  title: string
-  value: string | number
-  icon: LucideIcon
-  iconColor?: string
-}
-
-/**
- * Single stat card.
- *
- * @param props - `AdminStatsCardProps`
- * @returns White rounded card with icon and stat value
- * @sideEffects none (pure rendering)
- */
-export function AdminStatsCard({ title, value, icon: Icon, iconColor = "text-primary" }: AdminStatsCardProps) {
-  return (
-    <Card>
-      <CardContent className="p-5">
-        <div className="flex items-center">
-          <div className="flex-shrink-0">
-            <Icon className={`h-6 w-6 ${iconColor}`} />
-          </div>
-          <div className="ml-5 w-0 flex-1">
-            <dl>
-              <dt className="text-sm font-medium text-muted-foreground truncate">
-                {title}
-              </dt>
-              <dd className="text-lg font-semibold text-foreground">
-                {value}
-              </dd>
-            </dl>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}

package/.framework/src/components/admin/SortableTableHeader.tsx

@@ -1,42 +0,0 @@
-import React from 'react'
-import { ChevronUp, ChevronDown } from 'lucide-react'
-import { TableHead } from '../ui/table'
-
-interface SortableTableHeaderProps {
-  title: string
-  sortKey: string
-  currentSortKey?: string
-  currentSortDirection?: 'asc' | 'desc'
-  onSort: (key: string) => void
-}
-
-export function SortableTableHeader({
-  title,
-  sortKey,
-  currentSortKey,
-  currentSortDirection,
-  onSort,
-}: SortableTableHeaderProps) {
-  const isSorted = currentSortKey === sortKey
-  const isAscending = currentSortDirection === 'asc'
-  
-  return (
-    <TableHead
-      className="cursor-pointer"
-      onClick={() => onSort(sortKey)}
-    >
-      <div className="flex items-center gap-1">
-        <span>{title}</span>
-        {isSorted && (
-          <span className="inline-flex">
-            {isAscending ? (
-              <ChevronUp className="h-4 w-4 text-foreground" />
-            ) : (
-              <ChevronDown className="h-4 w-4 text-foreground" />
-            )}
-          </span>
-        )}
-      </div>
-    </TableHead>
-  )
-}