spine-framework-portal 0.1.1

package/pages/IntegrityPage.tsx

@@ -0,0 +1,289 @@
+import { useState } from 'react'
+import { usePortalItems, useCreatePortalItem } from '../hooks/usePortalData'
+import { UnifiedItemCard } from '../components/UnifiedItemCard'
+
+// Simple UI components to avoid import issues
+function Button({ children, variant = 'primary', onClick, disabled, loading, size = 'md' }: { 
+  children: React.ReactNode; 
+  variant?: 'primary' | 'outline' | 'ghost'; 
+  onClick?: () => void; 
+  disabled?: boolean; 
+  loading?: boolean; 
+  size?: 'sm' | 'md' | 'lg';
+}) {
+  const baseClasses = "px-4 py-2 rounded-md font-medium transition-colors"
+  const sizeClasses = {
+    sm: "px-3 py-1 text-sm",
+    md: "px-4 py-2",
+    lg: "px-6 py-3 text-lg"
+  }
+  const variantClasses = {
+    primary: "bg-blue-600 text-white hover:bg-blue-700 disabled:bg-blue-400",
+    outline: "border border-gray-300 bg-white text-gray-700 hover:bg-gray-50",
+    ghost: "text-gray-600 hover:text-gray-900 hover:bg-gray-100"
+  }
+  
+  return (
+    <button 
+      className={`${baseClasses} ${sizeClasses[size]} ${variantClasses[variant]}`}
+      onClick={onClick}
+      disabled={disabled || loading}
+    >
+      {loading ? 'Loading...' : children}
+    </button>
+  )
+}
+
+function Card({ children, className = '' }: { children: React.ReactNode; className?: string }) {
+  return (
+    <div className={`bg-white rounded-lg shadow border border-gray-200 ${className}`}>
+      {children}
+    </div>
+  )
+}
+
+Card.Header = function({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="px-6 py-4 border-b border-gray-200">
+      {children}
+    </div>
+  )
+}
+
+Card.Content = function({ children, className = '' }: { children: React.ReactNode; className?: string }) {
+  return (
+    <div className={`px-6 py-4 ${className}`}>
+      {children}
+    </div>
+  )
+}
+
+function Badge({ children, variant = 'default' }: { children: React.ReactNode; variant?: string }) {
+  const variantClasses = {
+    default: "bg-gray-100 text-gray-800",
+    success: "bg-green-100 text-green-800",
+    error: "bg-red-100 text-red-800",
+    warning: "bg-yellow-100 text-yellow-800",
+    info: "bg-blue-100 text-blue-800"
+  }
+  
+  return (
+    <span className={`px-2 py-1 rounded-full text-xs font-medium ${variantClasses[variant as keyof typeof variantClasses] || variantClasses.default}`}>
+      {children}
+    </span>
+  )
+}
+
+function LoadingSpinner() {
+  return (
+    <div className="flex justify-center items-center py-8">
+      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+    </div>
+  )
+}
+
+/**
+ * Integrity Page - Placeholder for Spine install integrity checking
+ * 
+ * This is a placeholder UI for the integrity checking functionality.
+ * The actual integrity checking will be implemented as a separate project.
+ */
+export function IntegrityPage() {
+  const [isChecking, setIsChecking] = useState(false)
+  const [lastCheck, setLastCheck] = useState<{
+    status: 'pass' | 'fail' | 'warning'
+    timestamp: string
+    issues: string[]
+  } | null>(null)
+
+  const handleIntegrityCheck = async () => {
+    setIsChecking(true)
+    
+    // Simulate integrity checking process
+    setTimeout(() => {
+      setLastCheck({
+        status: Math.random() > 0.3 ? 'pass' : Math.random() > 0.5 ? 'warning' : 'fail',
+        timestamp: new Date().toISOString(),
+        issues: [
+          'Custom migration detected in local database',
+          'Modified core files found',
+          'Missing security patches'
+        ].slice(0, Math.floor(Math.random() * 3) + 1)
+      })
+      setIsChecking(false)
+    }, 3000)
+  }
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'pass': return 'success'
+      case 'warning': return 'warning'
+      case 'fail': return 'error'
+      default: return 'default'
+    }
+  }
+
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case 'pass': return '✅'
+      case 'warning': return '⚠️'
+      case 'fail': return '❌'
+      default: return '❓'
+    }
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto space-y-6">
+      {/* Header */}
+      <div>
+        <h1 className="text-2xl font-bold text-slate-900">Integrity Checker</h1>
+        <p className="text-slate-600">
+          Verify your Spine installation integrity and compliance
+        </p>
+      </div>
+
+      {/* Main Check Card */}
+      <Card>
+        <Card.Header>
+          <div className="flex items-center justify-between">
+            <h3 className="font-medium">System Integrity</h3>
+            {lastCheck && (
+              <Badge variant={getStatusColor(lastCheck.status) as any}>
+                {getStatusIcon(lastCheck.status)} {lastCheck.status.toUpperCase()}
+              </Badge>
+            )}
+          </div>
+        </Card.Header>
+        
+        <Card.Content className="space-y-4">
+          <div className="text-center py-8">
+            <div className="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
+              <span className="text-2xl">🛡️</span>
+            </div>
+            
+            <h3 className="text-lg font-medium text-slate-900 mb-2">
+              Integrity Validation
+            </h3>
+            
+            <p className="text-slate-600 mb-6 max-w-md mx-auto">
+              Run a comprehensive check to validate your Spine installation against 
+              security standards and best practices.
+            </p>
+
+            <Button
+              onClick={handleIntegrityCheck}
+              disabled={isChecking}
+              loading={isChecking}
+              size="lg"
+            >
+              {isChecking ? 'Checking Integrity...' : 'Run Integrity Check'}
+            </Button>
+
+            {lastCheck && (
+              <div className="mt-4 text-sm text-slate-500">
+                Last check: {new Date(lastCheck.timestamp).toLocaleString()}
+              </div>
+            )}
+          </div>
+
+          {/* Results */}
+          {lastCheck && (
+            <div className="border-t pt-6">
+              <h4 className="font-medium mb-4">Check Results</h4>
+              
+              {lastCheck.issues.length > 0 ? (
+                <div className="space-y-2">
+                  {lastCheck.issues.map((issue, index) => (
+                    <div
+                      key={index}
+                      className="flex items-center gap-3 p-3 bg-slate-50 rounded-lg"
+                    >
+                      <span className="text-lg">
+                        {lastCheck.status === 'fail' ? '❌' : '⚠️'}
+                      </span>
+                      <span className="text-sm text-slate-700">{issue}</span>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className="flex items-center gap-3 p-3 bg-green-50 rounded-lg">
+                  <span className="text-lg">✅</span>
+                  <span className="text-sm text-green-700">
+                    No integrity issues found. Your installation is compliant.
+                  </span>
+                </div>
+              )}
+            </div>
+          )}
+        </Card.Content>
+      </Card>
+
+      {/* Information Cards */}
+      <div className="grid md:grid-cols-2 gap-6">
+        <Card>
+          <Card.Header>
+            <h3 className="font-medium">What We Check</h3>
+          </Card.Header>
+          <Card.Content>
+            <ul className="space-y-2 text-sm text-slate-600">
+              <li>• Core file integrity and modifications</li>
+              <li>• Security patch compliance</li>
+              <li>• Database schema consistency</li>
+              <li>• Configuration security</li>
+              <li>• Custom migration safety</li>
+              <li>• API endpoint compliance</li>
+            </ul>
+          </Card.Content>
+        </Card>
+
+        <Card>
+          <Card.Header>
+            <h3 className="font-medium">Future Enhancements</h3>
+          </Card.Header>
+          <Card.Content>
+            <div className="space-y-3">
+              <p className="text-sm text-slate-600">
+                This integrity checker is a placeholder for a comprehensive 
+                validation system that will include:
+              </p>
+              <div className="space-y-2 text-sm text-slate-600">
+                <div className="flex items-center gap-2">
+                  <span className="text-green-500">🔄</span>
+                  <span>Automated continuous monitoring</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="text-blue-500">📊</span>
+                  <span>Compliance reporting and analytics</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="text-purple-500">🔧</span>
+                  <span>Automated fix suggestions</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="text-orange-500">🚨</span>
+                  <span>Real-time threat detection</span>
+                </div>
+              </div>
+            </div>
+          </Card.Content>
+        </Card>
+      </div>
+
+      {/* Call to Action */}
+      <Card className="bg-blue-50 border-blue-200">
+        <Card.Content className="text-center py-6">
+          <h3 className="font-medium text-blue-900 mb-2">
+            Enterprise Integrity Monitoring
+          </h3>
+          <p className="text-blue-700 mb-4 text-sm">
+            Contact us for advanced integrity monitoring with automated remediation, 
+            compliance reporting, and 24/7 security monitoring.
+          </p>
+          <Button variant="outline">
+            Contact Sales
+          </Button>
+        </Card.Content>
+      </Card>
+    </div>
+  )
+}

package/pages/KnowledgePage.tsx

@@ -0,0 +1,124 @@
+import { useState } from 'react'
+import { BookOpen } from 'lucide-react'
+import { useKBArticles, useKBArticle } from '../hooks/useKBArticles'
+import { usePortalSignal } from '../hooks/usePortalSignal'
+import { SearchFilterBar } from '../components/SearchFilterBar'
+import { Skeleton } from '@core/components/ui/skeleton'
+import { ScrollArea } from '@core/components/ui/scroll-area'
+
+export function KnowledgePage() {
+  const [search, setSearch] = useState('')
+  const [debouncedSearch, setDebouncedSearch] = useState('')
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
+  const { articles, loading: listLoading, error } = useKBArticles(debouncedSearch)
+  const { article, loading: detailLoading } = useKBArticle(selectedId)
+  const { sendSignal } = usePortalSignal()
+
+  const handleSelectArticle = (id: string) => {
+    setSelectedId(id)
+    sendSignal('kb_article_read', 'Read KB article')
+  }
+
+  const handleSearchChange = (val: string) => {
+    setSearch(val)
+    clearTimeout((handleSearchChange as any)._t)
+    ;(handleSearchChange as any)._t = setTimeout(() => {
+      setDebouncedSearch(val)
+      if (val.trim().length > 1) sendSignal('kb_search', `Searched KB: ${val.trim()}`)
+    }, 300)
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex items-center gap-3 px-4 py-3 border-b border-border bg-background shrink-0">
+        <SearchFilterBar placeholder="Search articles…" value={search} onChange={handleSearchChange} />
+      </div>
+
+      {error && <div className="px-4 py-2 text-sm text-destructive border-b border-border shrink-0">{error}</div>}
+
+      <div className="flex flex-1 min-h-0">
+        {/* Col 1 — article list */}
+        <div className="w-64 shrink-0 border-r border-border flex flex-col min-h-0">
+          <div className="flex-1 overflow-y-auto">
+            {listLoading ? (
+              <div className="p-4 space-y-2">{Array.from({ length: 6 }).map((_, i) => <Skeleton key={i} className="h-12 w-full" />)}</div>
+            ) : articles.length === 0 ? (
+              <div className="p-6 text-sm text-muted-foreground text-center">No articles found.</div>
+            ) : (
+              articles.map((a) => (
+                <button key={a.id} onClick={() => handleSelectArticle(a.id)}
+                  className={`w-full text-left px-4 py-3 border-b border-border hover:bg-accent/50 transition-colors ${
+                    selectedId === a.id ? 'bg-accent border-l-2 border-l-primary' : ''
+                  }`}
+                >
+                  <p className={`text-sm font-medium truncate ${selectedId === a.id ? 'text-primary' : ''}`}>{a.title}</p>
+                  {a.data?.kb_type && (
+                    <span className="text-xs bg-muted text-muted-foreground px-1.5 py-0.5 rounded mt-0.5 inline-block">
+                      {a.data.kb_type.replace(/_/g, ' ')}
+                    </span>
+                  )}
+                </button>
+              ))
+            )}
+          </div>
+        </div>
+
+        {/* Col 2 — article content */}
+        <div className="flex-1 min-h-0 flex flex-col">
+          {!selectedId ? (
+            <div className="flex-1 flex flex-col items-center justify-center gap-3 text-muted-foreground">
+              <BookOpen size={32} className="opacity-30" />
+              <p className="text-sm">Select an article to read</p>
+            </div>
+          ) : detailLoading ? (
+            <div className="p-6 space-y-4 max-w-2xl">
+              <Skeleton className="h-7 w-2/3" /><Skeleton className="h-4 w-full" /><Skeleton className="h-4 w-5/6" />
+            </div>
+          ) : !article ? (
+            <div className="p-6 text-sm text-muted-foreground">Article not found.</div>
+          ) : (
+            <>
+              <div className="px-6 py-3 border-b border-border shrink-0">
+                <h1 className="text-base font-semibold">{article.title}</h1>
+              </div>
+              <ScrollArea className="flex-1">
+                <div className="px-6 py-5 max-w-2xl">
+                  {article.description ? (
+                    <div
+                      className="prose prose-sm dark:prose-invert max-w-none text-sm leading-relaxed prose-pre:bg-muted prose-pre:border prose-pre:border-border prose-pre:rounded prose-pre:text-xs prose-code:bg-muted prose-code:px-1 prose-code:rounded prose-code:text-xs prose-code:font-mono"
+                      dangerouslySetInnerHTML={{ __html: article.description }}
+                    />
+                  ) : (
+                    <p className="text-sm text-muted-foreground italic">No content available.</p>
+                  )}
+                </div>
+              </ScrollArea>
+            </>
+          )}
+        </div>
+
+        {/* Col 3 — related articles */}
+        {selectedId && article && (
+          <div className="w-72 shrink-0 border-l border-border flex flex-col min-h-0">
+            <div className="flex items-center px-4 py-2 h-9 border-b border-border shrink-0">
+              <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Related</p>
+            </div>
+            <div className="flex-1 overflow-y-auto">
+              {articles.filter((a) => a.id !== selectedId).slice(0, 6).map((a) => (
+                <button key={a.id} onClick={() => handleSelectArticle(a.id)}
+                  className="w-full text-left px-4 py-3 border-b border-border hover:bg-accent/50 transition-colors">
+                  <p className="text-sm font-medium truncate">{a.title}</p>
+                  {a.description && <p className="text-xs text-muted-foreground mt-0.5 line-clamp-2">{a.description}</p>}
+                </button>
+              ))}
+              {articles.filter((a) => a.id !== selectedId).length === 0 && (
+                <p className="text-sm text-muted-foreground text-center py-6">No other articles.</p>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/pages/MarketplacePage.tsx

@@ -0,0 +1,250 @@
+import { useState } from 'react'
+import { Search, Zap, BarChart3, Plug, Brain, MessageSquare, FileText, X } from 'lucide-react'
+import { Input } from '@core/components/ui/input'
+import { Badge } from '@core/components/ui/badge'
+import { Button } from '@core/components/ui/button'
+import { Card, CardContent, CardHeader } from '@core/components/ui/card'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@core/components/ui/dialog'
+import { Separator } from '@core/components/ui/separator'
+
+interface Plugin {
+  id: string
+  name: string
+  tagline: string
+  description: string
+  category: string
+  version: string
+  author: string
+  icon: React.ElementType
+  tags: string[]
+}
+
+const MOCK_PLUGINS: Plugin[] = [
+  {
+    id: '1',
+    name: 'AI Answer Engine',
+    tagline: 'Automatically answer tickets with AI',
+    description: 'Uses your knowledge base to draft answers for incoming tickets, reducing first-response time by up to 70%. Integrates directly with the Tickets module.',
+    category: 'AI',
+    version: '2.1.0',
+    author: 'Spine Labs',
+    icon: Brain,
+    tags: ['tickets', 'automation', 'ai'],
+  },
+  {
+    id: '2',
+    name: 'Analytics Dashboard',
+    tagline: 'Insights into support and engagement',
+    description: 'Track ticket volume, resolution times, community activity, and course completion rates in a single dashboard with exportable reports.',
+    category: 'Analytics',
+    version: '1.4.2',
+    author: 'Spine Labs',
+    icon: BarChart3,
+    tags: ['analytics', 'reporting'],
+  },
+  {
+    id: '3',
+    name: 'Slack Integration',
+    tagline: 'Get ticket and community alerts in Slack',
+    description: 'Receive real-time notifications for new tickets, replies, and community posts directly in your Slack workspace. Supports custom channel routing.',
+    category: 'Integrations',
+    version: '3.0.1',
+    author: 'Community',
+    icon: MessageSquare,
+    tags: ['slack', 'notifications', 'integrations'],
+  },
+  {
+    id: '4',
+    name: 'Smart KB Generator',
+    tagline: 'Turn resolved tickets into KB articles',
+    description: 'Automatically drafts knowledge base articles from resolved support tickets using AI. Review, edit, and publish with one click.',
+    category: 'AI',
+    version: '1.2.0',
+    author: 'Spine Labs',
+    icon: FileText,
+    tags: ['kb', 'ai', 'automation'],
+  },
+  {
+    id: '5',
+    name: 'Zapier Connector',
+    tagline: 'Connect to 5000+ apps via Zapier',
+    description: 'Trigger Zaps from ticket events, community posts, and course completions. Send data to CRMs, project management tools, and more.',
+    category: 'Integrations',
+    version: '2.0.0',
+    author: 'Community',
+    icon: Zap,
+    tags: ['zapier', 'integrations', 'automation'],
+  },
+  {
+    id: '6',
+    name: 'Custom Webhooks',
+    tagline: 'Push events to any endpoint',
+    description: 'Configure webhooks for any portal event — new tickets, status changes, new community posts, course completions — and push to any HTTP endpoint.',
+    category: 'Productivity',
+    version: '1.0.3',
+    author: 'Spine Labs',
+    icon: Plug,
+    tags: ['webhooks', 'integrations', 'developer'],
+  },
+]
+
+const CATEGORIES = ['All', 'AI', 'Analytics', 'Integrations', 'Productivity']
+
+const CATEGORY_VARIANT: Record<string, 'default' | 'secondary' | 'outline'> = {
+  AI: 'default',
+  Analytics: 'secondary',
+  Integrations: 'outline',
+  Productivity: 'outline',
+}
+
+export function MarketplacePage() {
+  const [search, setSearch] = useState('')
+  const [activeCategory, setActiveCategory] = useState('All')
+  const [selected, setSelected] = useState<Plugin | null>(null)
+
+  const filtered = MOCK_PLUGINS.filter((p) => {
+    const matchSearch = p.name.toLowerCase().includes(search.toLowerCase()) ||
+      p.tagline.toLowerCase().includes(search.toLowerCase()) ||
+      p.tags.some((t) => t.includes(search.toLowerCase()))
+    const matchCategory = activeCategory === 'All' || p.category === activeCategory
+    return matchSearch && matchCategory
+  })
+
+  return (
+    <div className="flex flex-col min-h-full">
+      <div className="max-w-4xl mx-auto w-full px-6 py-8 space-y-6">
+        {/* Header */}
+        <div>
+          <h1 className="text-xl font-semibold tracking-tight">Marketplace</h1>
+          <p className="text-sm text-muted-foreground mt-1">
+            Browse plugins and integrations to extend your portal experience.
+          </p>
+        </div>
+
+        {/* Search + filters */}
+        <div className="flex flex-col sm:flex-row gap-3">
+          <div className="relative flex-1">
+            <Search size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              placeholder="Search plugins…"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="pl-9"
+            />
+          </div>
+          <div className="flex items-center gap-1.5 flex-wrap">
+            {CATEGORIES.map((cat) => (
+              <Button
+                key={cat}
+                variant={activeCategory === cat ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => setActiveCategory(cat)}
+                className="h-8"
+              >
+                {cat}
+              </Button>
+            ))}
+          </div>
+        </div>
+
+        {/* Results count */}
+        <p className="text-xs text-muted-foreground">{filtered.length} plugin{filtered.length !== 1 ? 's' : ''}</p>
+
+        {/* Plugin grid */}
+        {filtered.length === 0 ? (
+          <div className="text-center py-16 text-muted-foreground">
+            <Search size={32} className="mx-auto mb-3 opacity-30" />
+            <p className="text-sm">No plugins match your search.</p>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+            {filtered.map((plugin) => {
+              const Icon = plugin.icon
+              return (
+                <Card
+                  key={plugin.id}
+                  className="cursor-pointer hover:border-primary/40 hover:shadow-sm transition-all group"
+                  onClick={() => setSelected(plugin)}
+                >
+                  <CardHeader className="pb-2">
+                    <div className="flex items-start gap-3">
+                      <div className="p-2 rounded-md bg-primary/10 text-primary shrink-0">
+                        <Icon size={18} />
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <p className="font-semibold text-sm truncate">{plugin.name}</p>
+                        <Badge
+                          variant={CATEGORY_VARIANT[plugin.category] ?? 'secondary'}
+                          className="text-xs mt-0.5"
+                        >
+                          {plugin.category}
+                        </Badge>
+                      </div>
+                    </div>
+                  </CardHeader>
+                  <CardContent>
+                    <p className="text-sm text-muted-foreground line-clamp-2">{plugin.tagline}</p>
+                  </CardContent>
+                </Card>
+              )
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* Plugin detail Dialog */}
+      <Dialog open={!!selected} onOpenChange={(v) => !v && setSelected(null)}>
+        <DialogContent className="sm:max-w-lg">
+          {selected && (
+            <>
+              <DialogHeader>
+                <div className="flex items-center gap-3">
+                  <div className="p-2.5 rounded-md bg-primary/10 text-primary shrink-0">
+                    <selected.icon size={22} />
+                  </div>
+                  <div>
+                    <DialogTitle className="text-lg">{selected.name}</DialogTitle>
+                    <Badge
+                      variant={CATEGORY_VARIANT[selected.category] ?? 'secondary'}
+                      className="text-xs mt-1"
+                    >
+                      {selected.category}
+                    </Badge>
+                  </div>
+                </div>
+              </DialogHeader>
+
+              <div className="space-y-4 py-2">
+                <p className="text-sm leading-relaxed">{selected.description}</p>
+
+                <Separator />
+
+                <div className="grid grid-cols-2 gap-3 text-sm">
+                  <div>
+                    <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-0.5">Version</p>
+                    <p className="font-mono">{selected.version}</p>
+                  </div>
+                  <div>
+                    <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-0.5">Author</p>
+                    <p>{selected.author}</p>
+                  </div>
+                </div>
+
+                <div className="flex flex-wrap gap-1.5">
+                  {selected.tags.map((tag) => (
+                    <Badge key={tag} variant="outline" className="text-xs">{tag}</Badge>
+                  ))}
+                </div>
+              </div>
+
+              <DialogFooter className="gap-2">
+                <Button variant="outline" onClick={() => setSelected(null)}>Close</Button>
+                <Button>Install Plugin</Button>
+              </DialogFooter>
+            </>
+          )}
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}