spine-framework 0.1.0

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

@@ -0,0 +1,295 @@
+/**
+ * @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

@@ -0,0 +1,188 @@
+/**
+ * @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
+      const userRole = user.roles?.[0] // Single role per person
+      if (userRole) {
+        const matchingApp = apps.find(app => app.min_role === userRole)
+        if (matchingApp?.route_prefix) {
+          navigate(matchingApp.route_prefix, { replace: true })
+          return
+        }
+      }
+
+      // No matching app - show 404
+      // The 404 will be handled by the catch-all route in App.tsx
+    }
+  }, [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

@@ -0,0 +1,163 @@
+/**
+ * @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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,25 @@
+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>
+  )
+}