spine-framework 0.2.1 → 1.0.0

package/.framework/src/pages/admin/TypesPage.tsx

@@ -1,295 +0,0 @@
-/**
- * @module src/pages/admin/TypesPage
- * @audience installer
- * @layer frontend-page
- * @stability stable
- *
- * Admin list page for item/account/person types. Fetches all types via
- * `/api/types?action=list`, then applies client-side search, category
- * filter (`all` | `system` | `custom` | `active`), and sort. Renders
- * inside `AdminListPage` with four stat cards and a sortable table.
- * Row clicks navigate to `/spine-framework/admin/configs/types/:id`.
- *
- * @seeAlso src/components/admin/AdminListPage.tsx
- * @seeAlso src/pages/admin/TypeDetailPage.tsx
- */
-
-import React, { useState } from 'react'
-import { useApi } from '../../hooks/useApi'
-import { apiFetch } from '../../lib/api'
-import { 
-  Plus,
-  Box,
-  FileText,
-  Calendar,
-  Settings,
-  CheckCircle
-} from 'lucide-react'
-import { LoadingSpinner } from '../../components/ui/LoadingSpinner'
-import { Button } from '../../components/ui/button'
-import { AdminListPage } from '../../components/admin/AdminListPage'
-import { SortableTableHeader } from '../../components/admin/SortableTableHeader'
-import { formatDateTime } from '../../lib/utils'
-
-interface Type {
-  id: string
-  name: string
-  slug: string
-  kind: string
-  description?: string
-  icon?: string
-  color?: string
-  schema: {
-    fields: Record<string, {
-      type: string
-      label?: string
-      required?: boolean
-      options?: string[]
-    }>
-  }
-  ownership: string
-  is_active: boolean
-  created_at: string
-  updated_at: string
-  app_id?: string | null
-  app?: any
-}
-
-export function TypesPage() {
-  const [searchTerm, setSearchTerm] = useState('')
-  const [selectedCategory, setSelectedCategory] = useState('all')
-  const [sortKey, setSortKey] = useState('name')
-  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc')
-
-  // Fetch types from API
-  const { data: types, loading, error, refetch } = useApi<Type[]>(
-    async ({ signal }: { signal?: AbortSignal }) => {
-      const response = await apiFetch('/api/types?action=list', { signal })
-      if (!response.ok) throw new Error('Failed to fetch types')
-      const result = await response.json()
-      return result.data || []
-    },
-    { immediate: true }
-  )
-
-  const categories = [
-    { value: 'all', label: 'All Types' },
-    { value: 'system', label: 'System Types' },
-    { value: 'custom', label: 'Custom Types' },
-    { value: 'active', label: 'Active Only' },
-  ]
-
-  const filteredTypes = (types || []).filter(type => {
-    const matchesSearch = type.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                         (type.description && type.description.toLowerCase().includes(searchTerm.toLowerCase()))
-    
-    let matchesCategory = true
-    if (selectedCategory === 'system') {
-      matchesCategory = type.ownership === 'system'
-    } else if (selectedCategory === 'custom') {
-      matchesCategory = type.ownership !== 'system'
-    } else if (selectedCategory === 'active') {
-      matchesCategory = type.is_active
-    }
-    
-    return matchesSearch && matchesCategory
-  })
-
-  // Helper functions
-  const getCategoryBadgeColor = (type: Type) => {
-    if (type.ownership === 'system') {
-      return 'bg-purple-50 text-purple-700'
-    }
-    return 'bg-primary/10 text-primary'
-  }
-
-  const getStatusBadgeColor = (isActive: boolean) => {
-    return isActive 
-      ? 'bg-green-50 text-green-700'
-      : 'bg-muted text-muted-foreground'
-  }
-
-  const handleSort = (key: string) => {
-    if (sortKey === key) {
-      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc')
-    } else {
-      setSortKey(key)
-      setSortDirection('asc')
-    }
-  }
-
-  const handleRowClick = (type: Type) => {
-    window.location.href = `/spine-framework/admin/configs/types/${type.id}`
-  }
-
-  // Sort types
-  const sortedTypes = [...(filteredTypes || [])].sort((a, b) => {
-    let aValue: any = a[sortKey as keyof Type]
-    let bValue: any = b[sortKey as keyof Type]
-    
-    if (typeof aValue === 'string') {
-      return sortDirection === 'asc' 
-        ? aValue.localeCompare(bValue)
-        : bValue.localeCompare(aValue)
-    }
-    
-    if (typeof aValue === 'number') {
-      return sortDirection === 'asc' ? aValue - bValue : bValue - aValue
-    }
-    
-    return 0
-  })
-
-  const statsCards = [
-    {
-      title: 'Total Types',
-      value: (types || []).length,
-      icon: Settings,
-      iconColor: 'text-primary',
-    },
-    {
-      title: 'Custom Types',
-      value: (types || []).filter(t => t.ownership !== 'system').length,
-      icon: Box,
-      iconColor: 'text-green-600',
-    },
-    {
-      title: 'Active Types',
-      value: (types || []).filter(t => t.is_active).length,
-      icon: CheckCircle,
-      iconColor: 'text-orange-600',
-    },
-    {
-      title: 'Total Fields',
-      value: (types || []).reduce((sum, t) => sum + Object.keys(t.schema?.fields || {}).length, 0),
-      icon: FileText,
-      iconColor: 'text-purple-600',
-    }
-  ]
-
-  const filters = [
-    {
-      label: 'Category',
-      value: selectedCategory,
-      options: categories,
-      onChange: setSelectedCategory
-    }
-  ]
-
-  return (
-    <AdminListPage
-      title="Types"
-      description="Manage item types and their schemas"
-      newButtonText="New Type"
-      newButtonHref="/spine-framework/admin/configs/types/new"
-      statsCards={statsCards}
-      searchPlaceholder="Search types..."
-      searchValue={searchTerm}
-      onSearchChange={setSearchTerm}
-      filters={filters}
-      loading={loading}
-      error={error}
-      onRetry={refetch}
-      emptyMessage="No types found"
-      emptyIcon={Settings}
-    >
-      {sortedTypes.length === 0 ? (
-        <div className="p-8 text-center">
-          <Settings className="mx-auto h-12 w-12 text-muted-foreground" />
-          <h3 className="mt-2 text-sm font-medium text-foreground">No types found</h3>
-          <p className="mt-1 text-sm text-muted-foreground">
-            Try adjusting your search or filters
-          </p>
-        </div>
-      ) : (
-        <table className="min-w-full divide-y divide-border">
-          <thead className="bg-muted">
-            <tr>
-              <SortableTableHeader
-                title="Type"
-                sortKey="name"
-                currentSortKey={sortKey}
-                currentSortDirection={sortDirection}
-                onSort={handleSort}
-              />
-              <SortableTableHeader
-                title="Category"
-                sortKey="ownership"
-                currentSortKey={sortKey}
-                currentSortDirection={sortDirection}
-                onSort={handleSort}
-              />
-              <SortableTableHeader
-                title="Status"
-                sortKey="is_active"
-                currentSortKey={sortKey}
-                currentSortDirection={sortDirection}
-                onSort={handleSort}
-              />
-              <SortableTableHeader
-                title="Fields"
-                sortKey="schema"
-                currentSortKey={sortKey}
-                currentSortDirection={sortDirection}
-                onSort={handleSort}
-              />
-              <SortableTableHeader
-                title="Created"
-                sortKey="created_at"
-                currentSortKey={sortKey}
-                currentSortDirection={sortDirection}
-                onSort={handleSort}
-              />
-              <th className="relative px-6 py-3">
-                <span className="sr-only">Actions</span>
-              </th>
-            </tr>
-          </thead>
-          <tbody className="bg-background divide-y divide-border">
-            {sortedTypes.map((type) => (
-              <tr 
-                key={type.id} 
-                className="hover:bg-muted/50 cursor-pointer transition-colors"
-                onClick={() => handleRowClick(type)}
-              >
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <div>
-                    <div className="font-medium text-foreground">
-                      <span className="text-primary hover:text-primary/80">
-                        {type.name}
-                      </span>
-                    </div>
-                    <div className="text-sm text-muted-foreground">
-                      {type.description || type.slug}
-                      <span className="mx-1.5 text-muted-foreground">&middot;</span>
-                      {Object.keys(type.schema?.fields || {}).length} fields
-                    </div>
-                  </div>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <span className={`inline-flex px-2 py-0.5 text-xs font-medium rounded-md ${getCategoryBadgeColor(type)}`}>
-                    {type.ownership === 'system' ? 'System' : 'Custom'}
-                  </span>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <span className={`inline-flex px-2 py-0.5 text-xs font-medium rounded-md ${getStatusBadgeColor(type.is_active)}`}>
-                    {type.is_active ? 'Active' : 'Inactive'}
-                  </span>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
-                  {Object.keys(type.schema?.fields || {}).length}
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
-                  {formatDateTime(type.created_at)}
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap text-right">
-                  <span className="text-muted-foreground">→</span>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      )}
-    </AdminListPage>
-  )
-}

package/.framework/src/pages/auth/LoginPage.tsx

@@ -1,187 +0,0 @@
-/**
- * @module src/pages/auth/LoginPage
- * @audience installer
- * @layer frontend-page
- * @stability stable
- *
- * Unauthenticated login page. Renders a centred card with email/password
- * inputs. On submit, calls `AuthContext.login(email, password)` and
- * navigates to `/dashboard` on success. Displays inline error text on
- * failure. Shows a `LoadingSpinner` inside the submit button while the
- * auth request is in-flight.
- *
- * @seeAlso src/contexts/AuthContext.tsx (login implementation)
- */
-
-import React, { useState, useEffect } from 'react'
-import { Link, useNavigate } from 'react-router-dom'
-import { useAuth } from '../../contexts/AuthContext'
-import { useAppsRegistry } from '../../contexts/AppContext'
-import { LoadingSpinner } from '../../components/ui/LoadingSpinner'
-
-export function LoginPage() {
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
-  const [error, setError] = useState('')
-  const [isLoading, setIsLoading] = useState(false)
-  
-  const { user, login } = useAuth()
-  const navigate = useNavigate()
-  const { routableApps: apps, loading } = useAppsRegistry()
-
-  // Redirect logged-in users to their qualified app
-  useEffect(() => {
-    if (user && !loading) {
-      // System admin gets special handling
-      if (user.roles?.includes('system_admin')) {
-        navigate('/spine-framework/admin', { replace: true })
-        return
-      }
-
-      // Find app matching user's role, or fall back to first routable app
-      const userRole = user.roles?.[0]
-      const routableApps = apps.filter(a => a.route_prefix && a.renderer !== 'none')
-      const matchingApp = (userRole && routableApps.find(app => app.min_role === userRole))
-        || routableApps[0]
-      if (matchingApp?.route_prefix) {
-        navigate(matchingApp.route_prefix, { replace: true })
-        return
-      }
-
-      // No routable apps installed — stay on login
-    }
-  }, [user, loading, apps, navigate])
-
-  // Show loading while checking auth state (but allow redirect logic to run)
-  if (loading) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-slate-50">
-        <div className="text-center">
-          <LoadingSpinner className="w-8 h-8 mx-auto mb-4" />
-          <p className="text-slate-600">Checking authentication...</p>
-        </div>
-      </div>
-    )
-  }
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    setError('')
-    setIsLoading(true)
-
-    try {
-      console.log('Attempting login...')
-      await login(email, password)
-      // Redirect will be handled by useEffect above
-      console.log('Login successful, redirect will be handled by useEffect...')
-    } catch (err: any) {
-      console.error('Login error:', err)
-      setError(err.message || 'Login failed')
-    } finally {
-      console.log('Login process completed, setting loading to false')
-      setIsLoading(false)
-    }
-  }
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-slate-50 py-12 px-4 sm:px-6 lg:px-8">
-      <div className="max-w-md w-full space-y-8">
-        <div>
-          <div className="mx-auto h-12 w-12 flex items-center justify-center rounded-full bg-slate-900">
-            <span className="text-white font-bold text-xl">S</span>
-          </div>
-          <h2 className="mt-6 text-center text-3xl font-extrabold text-slate-900">
-            Sign in to Spine
-          </h2>
-          <p className="mt-2 text-center text-sm text-slate-600">
-            Or{' '}
-            <Link to="/register" className="font-medium text-accent-blue hover:text-accent-blue-light">
-              create a new account
-            </Link>
-          </p>
-        </div>
-        
-        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
-          {error && (
-            <div className="rounded-md bg-red-50 p-4">
-              <div className="text-sm text-red-800">{error}</div>
-            </div>
-          )}
-          
-          <div className="space-y-4">
-            <div>
-              <label htmlFor="email" className="block text-sm font-medium text-slate-700">
-                Email address
-              </label>
-              <input
-                id="email"
-                name="email"
-                type="email"
-                autoComplete="email"
-                required
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                className="mt-1 block w-full px-3 py-2 border border-slate-300 rounded-[5px] shadow-sm placeholder-slate-400 focus:outline-none focus:ring-accent-blue focus:border-accent-blue sm:text-sm"
-                placeholder="Enter your email"
-              />
-            </div>
-            
-            <div>
-              <label htmlFor="password" className="block text-sm font-medium text-slate-700">
-                Password
-              </label>
-              <input
-                id="password"
-                name="password"
-                type="password"
-                autoComplete="current-password"
-                required
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                className="mt-1 block w-full px-3 py-2 border border-slate-300 rounded-[5px] shadow-sm placeholder-slate-400 focus:outline-none focus:ring-accent-blue focus:border-accent-blue sm:text-sm"
-                placeholder="Enter your password"
-              />
-            </div>
-          </div>
-
-          <div className="flex items-center justify-between">
-            <div className="flex items-center">
-              <input
-                id="remember-me"
-                name="remember-me"
-                type="checkbox"
-                className="h-4 w-4 text-accent-blue focus:ring-accent-blue border-slate-300 rounded"
-              />
-              <label htmlFor="remember-me" className="ml-2 block text-sm text-slate-900">
-                Remember me
-              </label>
-            </div>
-
-            <div className="text-sm">
-              <Link to="/forgot-password" className="font-medium text-accent-blue hover:text-accent-blue-light">
-                Forgot your password?
-              </Link>
-            </div>
-          </div>
-
-          <div>
-            <button
-              type="submit"
-              disabled={isLoading}
-              className="group relative w-full flex justify-center py-2 px-4 border border-transparent rounded-[5px] shadow-sm text-sm font-medium text-white bg-slate-900 hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-blue disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              {isLoading ? (
-                <>
-                  <LoadingSpinner size="sm" />
-                  <span className="ml-2">Signing in...</span>
-                </>
-              ) : (
-                'Sign in'
-              )}
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  )
-}

package/.framework/src/pages/auth/RegisterPage.tsx

@@ -1,163 +0,0 @@
-/**
- * @module src/pages/auth/RegisterPage
- * @audience installer
- * @layer frontend-page
- * @stability stable
- *
- * Self-registration page. Renders a centred card with email/password/name
- * inputs. On submit, calls Supabase signUp and navigates to /login with
- * a confirmation message.
- */
-
-import React, { useState } from 'react'
-import { Link, useNavigate } from 'react-router-dom'
-import { useAuth } from '../../contexts/AuthContext'
-import { LoadingSpinner } from '../../components/ui/LoadingSpinner'
-import { supabase } from '../../lib/supabase'
-
-export function RegisterPage() {
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
-  const [fullName, setFullName] = useState('')
-  const [error, setError] = useState('')
-  const [success, setSuccess] = useState('')
-  const [isLoading, setIsLoading] = useState(false)
-
-  const navigate = useNavigate()
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    setError('')
-    setSuccess('')
-    setIsLoading(true)
-
-    try {
-      const { error: signUpError } = await supabase.auth.signUp({
-        email,
-        password,
-        options: {
-          data: {
-            full_name: fullName,
-          },
-        },
-      })
-
-      if (signUpError) {
-        setError(signUpError.message)
-        return
-      }
-
-      setSuccess('Account created! Check your email for a confirmation link.')
-      setTimeout(() => navigate('/login'), 3000)
-    } catch (err: any) {
-      setError(err.message || 'Registration failed')
-    } finally {
-      setIsLoading(false)
-    }
-  }
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-slate-50 py-12 px-4 sm:px-6 lg:px-8">
-      <div className="max-w-md w-full space-y-8">
-        <div>
-          <div className="mx-auto h-12 w-12 flex items-center justify-center rounded-full bg-slate-900">
-            <span className="text-white font-bold text-xl">S</span>
-          </div>
-          <h2 className="mt-6 text-center text-3xl font-extrabold text-slate-900">
-            Create your account
-          </h2>
-          <p className="mt-2 text-center text-sm text-slate-600">
-            Already have an account?{' '}
-            <Link to="/login" className="font-medium text-accent-blue hover:text-accent-blue-light">
-              Sign in
-            </Link>
-          </p>
-        </div>
-
-        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
-          {error && (
-            <div className="rounded-md bg-red-50 p-4">
-              <div className="text-sm text-red-800">{error}</div>
-            </div>
-          )}
-
-          {success && (
-            <div className="rounded-md bg-green-50 p-4">
-              <div className="text-sm text-green-800">{success}</div>
-            </div>
-          )}
-
-          <div className="space-y-4">
-            <div>
-              <label htmlFor="fullName" className="block text-sm font-medium text-slate-700">
-                Full name
-              </label>
-              <input
-                id="fullName"
-                name="fullName"
-                type="text"
-                required
-                value={fullName}
-                onChange={(e) => setFullName(e.target.value)}
-                className="mt-1 block w-full px-3 py-2 border border-slate-300 rounded-[5px] shadow-sm placeholder-slate-400 focus:outline-none focus:ring-accent-blue focus:border-accent-blue sm:text-sm"
-                placeholder="Enter your full name"
-              />
-            </div>
-
-            <div>
-              <label htmlFor="email" className="block text-sm font-medium text-slate-700">
-                Email address
-              </label>
-              <input
-                id="email"
-                name="email"
-                type="email"
-                autoComplete="email"
-                required
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                className="mt-1 block w-full px-3 py-2 border border-slate-300 rounded-[5px] shadow-sm placeholder-slate-400 focus:outline-none focus:ring-accent-blue focus:border-accent-blue sm:text-sm"
-                placeholder="Enter your email"
-              />
-            </div>
-
-            <div>
-              <label htmlFor="password" className="block text-sm font-medium text-slate-700">
-                Password
-              </label>
-              <input
-                id="password"
-                name="password"
-                type="password"
-                autoComplete="new-password"
-                required
-                minLength={6}
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                className="mt-1 block w-full px-3 py-2 border border-slate-300 rounded-[5px] shadow-sm placeholder-slate-400 focus:outline-none focus:ring-accent-blue focus:border-accent-blue sm:text-sm"
-                placeholder="Choose a password (min 6 characters)"
-              />
-            </div>
-          </div>
-
-          <div>
-            <button
-              type="submit"
-              disabled={isLoading}
-              className="group relative w-full flex justify-center py-2 px-4 border border-transparent rounded-[5px] shadow-sm text-sm font-medium text-white bg-slate-900 hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-blue disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              {isLoading ? (
-                <>
-                  <LoadingSpinner size="sm" />
-                  <span className="ml-2">Creating account...</span>
-                </>
-              ) : (
-                'Create account'
-              )}
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  )
-}

package/.framework/src/pages/spine-framework/APIPage.tsx

@@ -1,17 +0,0 @@
-import { Layout } from '../../components/layout/Layout'
-
-export function APIPage() {
-  return (
-    <Layout>
-      <div className="p-8 max-w-3xl">
-        <h1 className="text-2xl font-bold text-slate-900 mb-2">Framework API</h1>
-        <p className="text-slate-500 mb-6">
-          Core API endpoints available to all authenticated users and custom applications.
-        </p>
-        <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 text-sm text-amber-800">
-          API reference documentation coming soon.
-        </div>
-      </div>
-    </Layout>
-  )
-}

package/.framework/src/pages/spine-framework/CLIPage.tsx

@@ -1,25 +0,0 @@
-import { Layout } from '../../components/layout/Layout'
-
-export function CLIPage() {
-  return (
-    <Layout>
-      <div className="p-8 max-w-3xl">
-        <h1 className="text-2xl font-bold text-slate-900 mb-2">Framework CLI</h1>
-        <p className="text-slate-500 mb-6">
-          The <code className="bg-slate-100 px-1.5 py-0.5 rounded text-slate-800">spine-framework</code> CLI runs locally in your terminal or agentic IDE.
-        </p>
-        <div className="bg-slate-50 border border-slate-200 rounded-lg p-4 font-mono text-sm text-slate-700 space-y-1 mb-4">
-          <div><span className="text-slate-400">$</span> npx spine-framework --help</div>
-          <div><span className="text-slate-400">$</span> npx spine-framework auth whoami</div>
-          <div><span className="text-slate-400">$</span> npx spine-framework migrations list</div>
-          <div><span className="text-slate-400">$</span> npx spine-framework pipelines run &lt;id&gt;</div>
-          <div><span className="text-slate-400">$</span> npx spine-framework items list --type support_ticket</div>
-          <div><span className="text-slate-400">$</span> npx spine-framework doctor</div>
-        </div>
-        <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 text-sm text-amber-800">
-          Full CLI reference documentation coming soon.
-        </div>
-      </div>
-    </Layout>
-  )
-}