[V0_FILE]css:file="app/globals.css" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); /* StructureOS Dark Theme - Knowledge Graph Intelligence */ :root { /* Dark mode by default for data-driven aesthetic */ --background: oklch(0.09 0 0); --foreground: oklch(0.95 0 0); --card: oklch(0.12 0 0); --card-foreground: oklch(0.95 0 0); --popover: oklch(0.12 0 0); --popover-foreground: oklch(0.95 0 0); --primary: oklch(0.95 0 0); --primary-foreground: oklch(0.09 0 0); --secondary: oklch(0.18 0 0); --secondary-foreground: oklch(0.95 0 0); --muted: oklch(0.18 0 0); --muted-foreground: oklch(0.6 0 0); --accent: oklch(0.7 0.15 145); --accent-foreground: oklch(0.09 0 0); --destructive: oklch(0.55 0.22 25); --destructive-foreground: oklch(0.95 0 0); --border: oklch(0.22 0 0); --input: oklch(0.18 0 0); --ring: oklch(0.7 0.15 145); /* Graph visualization colors */ --chart-1: oklch(0.7 0.15 145); --chart-2: oklch(0.65 0.18 250); --chart-3: oklch(0.75 0.15 50); --chart-4: oklch(0.6 0.2 320); --chart-5: oklch(0.7 0.12 200); /* Entity type colors */ --entity-person: oklch(0.7 0.18 250); --entity-organization: oklch(0.7 0.15 145); --entity-product: oklch(0.75 0.15 50); --entity-technology: oklch(0.65 0.2 320); --entity-event: oklch(0.7 0.18 30); --entity-location: oklch(0.7 0.12 200); --entity-concept: oklch(0.65 0.15 280); --radius: 0.5rem; --sidebar: oklch(0.11 0 0); --sidebar-foreground: oklch(0.95 0 0); --sidebar-primary: oklch(0.7 0.15 145); --sidebar-primary-foreground: oklch(0.09 0 0); --sidebar-accent: oklch(0.18 0 0); --sidebar-accent-foreground: oklch(0.95 0 0); --sidebar-border: oklch(0.22 0 0); --sidebar-ring: oklch(0.7 0.15 145); } .dark { /* Same as root - we're dark by default */ --background: oklch(0.09 0 0); --foreground: oklch(0.95 0 0); --card: oklch(0.12 0 0); --card-foreground: oklch(0.95 0 0); --popover: oklch(0.12 0 0); --popover-foreground: oklch(0.95 0 0); --primary: oklch(0.95 0 0); --primary-foreground: oklch(0.09 0 0); --secondary: oklch(0.18 0 0); --secondary-foreground: oklch(0.95 0 0); --muted: oklch(0.18 0 0); --muted-foreground: oklch(0.6 0 0); --accent: oklch(0.7 0.15 145); --accent-foreground: oklch(0.09 0 0); --destructive: oklch(0.55 0.22 25); --destructive-foreground: oklch(0.95 0 0); --border: oklch(0.22 0 0); --input: oklch(0.18 0 0); --ring: oklch(0.7 0.15 145); --chart-1: oklch(0.7 0.15 145); --chart-2: oklch(0.65 0.18 250); --chart-3: oklch(0.75 0.15 50); --chart-4: oklch(0.6 0.2 320); --chart-5: oklch(0.7 0.12 200); --sidebar: oklch(0.11 0 0); --sidebar-foreground: oklch(0.95 0 0); --sidebar-primary: oklch(0.7 0.15 145); --sidebar-primary-foreground: oklch(0.09 0 0); --sidebar-accent: oklch(0.18 0 0); --sidebar-accent-foreground: oklch(0.95 0 0); --sidebar-border: oklch(0.22 0 0); --sidebar-ring: oklch(0.7 0.15 145); } @theme inline { --font-sans: 'Geist', 'Geist Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); /* Entity type colors */ --color-entity-person: var(--entity-person); --color-entity-organization: var(--entity-organization); --color-entity-product: var(--entity-product); --color-entity-technology: var(--entity-technology); --color-entity-event: var(--entity-event); --color-entity-location: var(--entity-location); --color-entity-concept: var(--entity-concept); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "@sanity/client": "7.14.0" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/entity-badge.tsx" isMerged="true" import { cn } from "@/lib/utils" import { User, Building2, Package, MapPin, Sparkles, Hash, Lightbulb, } from "lucide-react" type EntityType = 'person' | 'organization' | 'product' | 'place' | 'concept' | 'topic' const entityConfig: Record = { person: { icon: User, label: "Person", className: "bg-[oklch(0.7_0.18_250/0.15)] text-[oklch(0.7_0.18_250)] border-[oklch(0.7_0.18_250/0.3)]", }, organization: { icon: Building2, label: "Organization", className: "bg-[oklch(0.7_0.15_145/0.15)] text-[oklch(0.7_0.15_145)] border-[oklch(0.7_0.15_145/0.3)]", }, product: { icon: Package, label: "Product", className: "bg-[oklch(0.75_0.15_50/0.15)] text-[oklch(0.75_0.15_50)] border-[oklch(0.75_0.15_50/0.3)]", }, place: { icon: MapPin, label: "Place", className: "bg-[oklch(0.7_0.12_200/0.15)] text-[oklch(0.7_0.12_200)] border-[oklch(0.7_0.12_200/0.3)]", }, concept: { icon: Lightbulb, label: "Concept", className: "bg-[oklch(0.65_0.15_280/0.15)] text-[oklch(0.65_0.15_280)] border-[oklch(0.65_0.15_280/0.3)]", }, topic: { icon: Hash, label: "Topic", className: "bg-[oklch(0.65_0.2_320/0.15)] text-[oklch(0.65_0.2_320)] border-[oklch(0.65_0.2_320/0.3)]", }, } interface EntityBadgeProps { type: EntityType showLabel?: boolean className?: string size?: "sm" | "md" | "lg" } export function EntityBadge({ type, showLabel = true, className, size = "md" }: EntityBadgeProps) { const config = entityConfig[type] || entityConfig.concept const Icon = config.icon const sizeClasses = { sm: "px-1.5 py-0.5 text-xs gap-1", md: "px-2 py-1 text-xs gap-1.5", lg: "px-3 py-1.5 text-sm gap-2", } const iconSizes = { sm: "h-3 w-3", md: "h-3.5 w-3.5", lg: "h-4 w-4", } return ( {showLabel && {config.label}} ) } export function getEntityColor(type: EntityType): string { const colors: Record = { person: "oklch(0.7 0.18 250)", organization: "oklch(0.7 0.15 145)", product: "oklch(0.75 0.15 50)", place: "oklch(0.7 0.12 200)", concept: "oklch(0.65 0.15 280)", topic: "oklch(0.65 0.2 320)", } return colors[type] || colors.concept } [V0_FILE]typescriptreact:file="components/stat-card.tsx" isMerged="true" import { cn } from "@/lib/utils" import type { LucideIcon } from "lucide-react" interface StatCardProps { title: string value: string | number description?: string icon?: LucideIcon trend?: { value: number isPositive: boolean } className?: string } export function StatCard({ title, value, description, icon: Icon, trend, className, }: StatCardProps) { return (

{title}

{value}

{description && (

{description}

)} {trend && (

{trend.isPositive ? "+" : ""}{trend.value}% from last period

)}

{Icon && (

)}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import React from "react" import type { Metadata, Viewport } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import { Navigation } from "@/components/navigation" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "StructureOS - Content Intelligence Layer", description: "A knowledge graph-powered content intelligence platform built on Sanity. Explore entities, relationships, and AI-generated insights.", generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export const viewport: Viewport = { themeColor: "#171717", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return (

{children}

) } [V0_FILE]typescriptreact:file="app/graph/[slug]/page.tsx" isMerged="true" import { notFound } from "next/navigation" import Link from "next/link" import { ArrowLeft, ExternalLink, Calendar, MapPin, Building } from "lucide-react" import { Button } from "@/components/ui/button" import { EntityBadge, getEntityColor } from "@/components/entity-badge" import { fetchEntityBySlug, fetchEntityRelationships, fetchEntities, fetchAllRelationships, } from "@/lib/sanity" import { GraphVisualization } from "@/components/graph-visualization" export const revalidate = 60 export async function generateStaticParams() { const entities = await fetchEntities() return entities.map((entity: any) => ({ slug: entity.slug?.current, })) } export default async function EntityPage({ params, }: { params: Promise<{ slug: string }> }) { const { slug } = await params const entity = await fetchEntityBySlug(slug) if (!entity) { notFound() } const [relationships, allEntities, allRelationships] = await Promise.all([ fetchEntityRelationships(entity._id), fetchEntities(), fetchAllRelationships(), ]) // Get related entity IDs from relationships const relatedEntityIds = new Set() relationships.forEach((rel: any) => { if (rel.source?._id) relatedEntityIds.add(rel.source._id) if (rel.target?._id) relatedEntityIds.add(rel.target._id) }) // Filter to show only the entity and its immediate connections const graphEntities = allEntities.filter( (e: any) => e._id === entity._id || relatedEntityIds.has(e._id) || e._id.includes(entity._id.replace("drafts.", "")) ) const graphRelationships = allRelationships.filter( (r: any) => r.source?._id?.includes(entity._id.replace("drafts.", "")) || r.target?._id?.includes(entity._id.replace("drafts.", "")) ) return (

{/* Back Button */}

{/* Main Content */}

{/* Entity Header */}

{entity.name.charAt(0)}

{entity.name}

{entity.description && (

{entity.description}

)}

{/* Metadata */} {entity.metadata && (

{entity.metadata.foundedDate && (

Founded: {new Date(entity.metadata.foundedDate).toLocaleDateString()}

)} {entity.metadata.headquarters && (

HQ: {entity.metadata.headquarters}

)} {entity.metadata.industry && (

Industry: {entity.metadata.industry}

)} {entity.metadata.website && ( {entity.metadata.website.replace(/^https?:\/\//, "")} )}

)} {/* Tags */} {entity.tags && entity.tags.length > 0 && (

{entity.tags.map((tag: string) => ( {tag} ))}

)} {/* Aliases */} {entity.aliases && entity.aliases.length > 0 && (

Also known as:{" "} {entity.aliases.join(", ")}

)}

{/* Graph Visualization */}

Relationship Graph

{/* Sidebar */}

{/* Stats */}

Statistics

Importance Score {entity.importance || "N/A"}

Connections {relationships.length}

{/* Relationships */}

Relationships

{relationships.length === 0 ? (

No relationships found

) : (

{relationships.map((rel: any) => { const isSource = rel.source?._id?.includes( entity._id.replace("drafts.", "") ) const relatedEntity = isSource ? rel.target : rel.source const direction = isSource ? "outgoing" : "incoming" return (

{relatedEntity && ( )} {relatedEntity?.name || "Unknown"}

{direction} {rel.relationshipType.replace(/([A-Z])/g, " $1").trim()} {rel.strength && ( {rel.strength}% )}

) })}

)}

) } [V0_FILE]typescriptreact:file="components/graph-visualization.tsx" isMerged="true" "use client" import React from "react" import { useEffect, useRef, useState } from "react" import Link from "next/link" import type { Entity, Relationship } from "@/lib/sanity" import { getEntityColor } from "@/components/entity-badge" interface GraphVisualizationProps { entities: Entity[] relationships: Relationship[] focusEntityId?: string } interface Node { id: string name: string type: Entity["entityType"] importance: number x: number y: number vx: number vy: number slug?: string } interface Edge { source: string target: string type: string strength: number } export function GraphVisualization({ entities, relationships, focusEntityId, }: GraphVisualizationProps) { const canvasRef = useRef(null) const containerRef = useRef(null) const [hoveredNode, setHoveredNode] = useState(null) const [dimensions, setDimensions] = useState({ width: 800, height: 500 }) const nodesRef = useRef([]) const edgesRef = useRef([]) const animationRef = useRef() // Initialize nodes and edges useEffect(() => { // Create nodes from entities nodesRef.current = entities.map((entity, i) => ({ id: entity._id, name: entity.name, type: entity.entityType, importance: entity.importance || 50, slug: entity.slug?.current, x: dimensions.width / 2 + (Math.random() - 0.5) * 400, y: dimensions.height / 2 + (Math.random() - 0.5) * 300, vx: 0, vy: 0, })) // Create edges from relationships edgesRef.current = relationships .filter((rel) => { const sourceExists = nodesRef.current.some( (n) => n.id === rel.source?._id || n.id.includes(rel.source?._id || "") ) const targetExists = nodesRef.current.some( (n) => n.id === rel.target?._id || n.id.includes(rel.target?._id || "") ) return sourceExists && targetExists }) .map((rel) => ({ source: rel.source?._id || "", target: rel.target?._id || "", type: rel.relationshipType, strength: rel.strength || 50, })) }, [entities, relationships, dimensions]) // Handle resize useEffect(() => { const updateDimensions = () => { if (containerRef.current) { const rect = containerRef.current.getBoundingClientRect() setDimensions({ width: rect.width, height: 500 }) } } updateDimensions() window.addEventListener("resize", updateDimensions) return () => window.removeEventListener("resize", updateDimensions) }, []) // Animation loop useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return // Set canvas DPI for crisp rendering const dpr = window.devicePixelRatio || 1 canvas.width = dimensions.width * dpr canvas.height = dimensions.height * dpr ctx.scale(dpr, dpr) const animate = () => { const nodes = nodesRef.current const edges = edgesRef.current // Apply forces // Repulsion between nodes for (let i = 0; i < nodes.length; i++) { for (let j = i + 1; j < nodes.length; j++) { const dx = nodes[j].x - nodes[i].x const dy = nodes[j].y - nodes[i].y const dist = Math.sqrt(dx * dx + dy * dy) || 1 const force = 2000 / (dist * dist) nodes[i].vx -= (dx / dist) * force nodes[i].vy -= (dy / dist) * force nodes[j].vx += (dx / dist) * force nodes[j].vy += (dy / dist) * force } } // Attraction along edges for (const edge of edges) { const source = nodes.find((n) => n.id.includes(edge.source)) const target = nodes.find((n) => n.id.includes(edge.target)) if (!source || !target) continue const dx = target.x - source.x const dy = target.y - source.y const dist = Math.sqrt(dx * dx + dy * dy) || 1 const force = (dist - 150) * 0.01 source.vx += (dx / dist) * force source.vy += (dy / dist) * force target.vx -= (dx / dist) * force target.vy -= (dy / dist) * force } // Center gravity for (const node of nodes) { const dx = dimensions.width / 2 - node.x const dy = dimensions.height / 2 - node.y node.vx += dx * 0.001 node.vy += dy * 0.001 } // Apply velocity with damping for (const node of nodes) { node.vx *= 0.9 node.vy *= 0.9 node.x += node.vx node.y += node.vy // Keep within bounds node.x = Math.max(50, Math.min(dimensions.width - 50, node.x)) node.y = Math.max(50, Math.min(dimensions.height - 50, node.y)) } // Clear canvas ctx.fillStyle = "oklch(0.12 0 0)" ctx.fillRect(0, 0, dimensions.width, dimensions.height) // Draw edges ctx.strokeStyle = "oklch(0.3 0 0)" ctx.lineWidth = 1 for (const edge of edges) { const source = nodes.find((n) => n.id.includes(edge.source)) const target = nodes.find((n) => n.id.includes(edge.target)) if (!source || !target) continue ctx.beginPath() ctx.moveTo(source.x, source.y) ctx.lineTo(target.x, target.y) ctx.stroke() } // Draw nodes for (const node of nodes) { const radius = 8 + (node.importance / 100) * 12 const color = getEntityColor(node.type) const isHovered = hoveredNode?.id === node.id const isFocused = focusEntityId && node.id.includes(focusEntityId) // Glow effect for hovered/focused nodes if (isHovered || isFocused) { ctx.shadowBlur = 20 ctx.shadowColor = color } ctx.beginPath() ctx.arc(node.x, node.y, radius, 0, Math.PI * 2) ctx.fillStyle = color ctx.fill() ctx.shadowBlur = 0 // Node border ctx.strokeStyle = isHovered || isFocused ? "white" : "oklch(0.3 0 0)" ctx.lineWidth = isHovered || isFocused ? 2 : 1 ctx.stroke() // Label ctx.fillStyle = "oklch(0.85 0 0)" ctx.font = "12px Geist, sans-serif" ctx.textAlign = "center" ctx.fillText(node.name, node.x, node.y + radius + 16) } animationRef.current = requestAnimationFrame(animate) } animate() return () => { if (animationRef.current) { cancelAnimationFrame(animationRef.current) } } }, [dimensions, hoveredNode, focusEntityId]) // Handle mouse interaction const handleMouseMove = (e: React.MouseEvent) => { const canvas = canvasRef.current if (!canvas) return const rect = canvas.getBoundingClientRect() const x = e.clientX - rect.left const y = e.clientY - rect.top const nodes = nodesRef.current let found: Node | null = null for (const node of nodes) { const radius = 8 + (node.importance / 100) * 12 const dx = node.x - x const dy = node.y - y if (dx * dx + dy * dy < radius * radius) { found = node break } } setHoveredNode(found) canvas.style.cursor = found ? "pointer" : "default" } const handleClick = (e: React.MouseEvent) => { if (hoveredNode?.slug) { window.location.href = `/graph/${hoveredNode.slug}` } } return (

) } [V0_FILE]typescriptreact:file="app/insights/[slug]/page.tsx" isMerged="true" import { notFound } from "next/navigation" import Link from "next/link" import { ArrowLeft, TrendingUp, Zap, AlertTriangle, LineChart, Sparkles, Calendar, Clock, } from "lucide-react" import { Button } from "@/components/ui/button" import { EntityBadge } from "@/components/entity-badge" import { fetchInsightBySlug, fetchAllInsights } from "@/lib/sanity" export const revalidate = 60 const insightTypeConfig: Record< string, { icon: typeof TrendingUp; color: string } > = { trend: { icon: TrendingUp, color: "bg-[oklch(0.7_0.15_145/0.2)] text-[oklch(0.7_0.15_145)]", }, pattern: { icon: LineChart, color: "bg-[oklch(0.65_0.18_250/0.2)] text-[oklch(0.65_0.18_250)]", }, anomaly: { icon: AlertTriangle, color: "bg-[oklch(0.7_0.18_30/0.2)] text-[oklch(0.7_0.18_30)]", }, prediction: { icon: Zap, color: "bg-[oklch(0.65_0.2_320/0.2)] text-[oklch(0.65_0.2_320)]", }, recommendation: { icon: Sparkles, color: "bg-[oklch(0.75_0.15_50/0.2)] text-[oklch(0.75_0.15_50)]", }, } const impactColors: Record = { critical: "bg-destructive/20 text-destructive", high: "bg-[oklch(0.7_0.18_30/0.2)] text-[oklch(0.7_0.18_30)]", medium: "bg-[oklch(0.75_0.15_50/0.2)] text-[oklch(0.75_0.15_50)]", low: "bg-secondary text-muted-foreground", } export async function generateStaticParams() { const insights = await fetchAllInsights() return insights.map((insight: any) => ({ slug: insight.slug?.current, })) } export default async function InsightPage({ params, }: { params: Promise<{ slug: string }> }) { const { slug } = await params const insight = await fetchInsightBySlug(slug) if (!insight) { notFound() } const config = insightTypeConfig[insight.insightType] || insightTypeConfig.trend const Icon = config.icon return (

{/* Back Button */} {/* Header */}

{insight.insightType}

{insight.impact && ( {insight.impact} impact )}

{insight.title}

{insight.summary}

{/* Metadata */}

{insight.generatedAt && (

Generated: {new Date(insight.generatedAt).toLocaleDateString()}

)} {insight.validUntil && (

Valid until: {new Date(insight.validUntil).toLocaleDateString()}

)}

{/* Confidence */} {insight.confidence && (

Confidence Score {insight.confidence}%

)}

{/* Data Points Chart */} {insight.dataPoints && insight.dataPoints.length > 0 && (

Data Trend

{insight.dataPoints.map((dp: any, i: number) => { const maxValue = Math.max(...insight.dataPoints.map((d: any) => d.value)) const height = (dp.value / maxValue) * 100 return (

{dp.label} {dp.value}

) })}

)}

{/* Related Entities */} {insight.relatedEntities && insight.relatedEntities.length > 0 && (

Related Entities

{insight.relatedEntities.map((entity: any) => ( {entity.name} ))}

)} {/* Related Content */} {insight.relatedContent && insight.relatedContent.length > 0 && (

{content.title}

{/* Excerpt */} {content.excerpt && (

{content.excerpt}

)} {/* Metadata */}

{content.author && (

{content.author}

)} {content.publishedAt && (

{new Date(content.publishedAt).toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric", })}

)} {content.readingTime && (

{content.readingTime} min read

)} {content.sourceUrl && ( Source )}

{/* Tags */} {content.tags && content.tags.length > 0 && (

{content.tags.map((tag: string) => ( {tag} ))}

)}

{/* Body Content Placeholder */}

This is a placeholder for the full article content. In a complete implementation, the Portable Text body would be rendered here using @portabletext/react.

{/* Related Entities */} {content.relatedEntities && content.relatedEntities.length > 0 && (

Related Entities

{content.relatedEntities.map((entity: any) => (

{entity.name}

{entity.entityType}

))}

)}

) } [V0_FILE]typescriptreact:file="app/insights/page.tsx" isMerged="true" import Link from "next/link" import { TrendingUp, Zap, AlertTriangle, LineChart, Sparkles } from "lucide-react" import { EntityBadge } from "@/components/entity-badge" import { fetchAllInsights } from "@/lib/sanity" export const revalidate = 60 const insightTypeConfig: Record< string, { icon: typeof TrendingUp; color: string; label: string } > = { trend: { icon: TrendingUp, color: "bg-[oklch(0.7_0.15_145/0.2)] text-[oklch(0.7_0.15_145)]", label: "Trend", }, pattern: { icon: LineChart, color: "bg-[oklch(0.65_0.18_250/0.2)] text-[oklch(0.65_0.18_250)]", label: "Pattern", }, anomaly: { icon: AlertTriangle, color: "bg-[oklch(0.7_0.18_30/0.2)] text-[oklch(0.7_0.18_30)]", label: "Anomaly", }, prediction: { icon: Zap, color: "bg-[oklch(0.65_0.2_320/0.2)] text-[oklch(0.65_0.2_320)]", label: "Prediction", }, recommendation: { icon: Sparkles, color: "bg-[oklch(0.75_0.15_50/0.2)] text-[oklch(0.75_0.15_50)]", label: "Recommendation", }, } const impactColors: Record = { critical: "bg-destructive/20 text-destructive border-destructive/30", high: "bg-[oklch(0.7_0.18_30/0.2)] text-[oklch(0.7_0.18_30)] border-[oklch(0.7_0.18_30/0.3)]", medium: "bg-[oklch(0.75_0.15_50/0.2)] text-[oklch(0.75_0.15_50)] border-[oklch(0.75_0.15_50/0.3)]", low: "bg-secondary text-muted-foreground border-border", } export default async function InsightsPage() { const insights = await fetchAllInsights() // Group by impact level const criticalInsights = insights.filter((i: any) => i.impact === "critical") const highInsights = insights.filter((i: any) => i.impact === "high") const otherInsights = insights.filter( (i: any) => !["critical", "high"].includes(i.impact) ) return (

AI Insights

Trends, patterns, and predictions generated from your knowledge graph

{/* Stats */}

{Object.entries(insightTypeConfig).map(([type, config]) => { const count = insights.filter((i: any) => i.insightType === type).length const Icon = config.icon return (

{config.label} {count}

) })}

{/* Critical & High Impact Section */} {(criticalInsights.length > 0 || highInsights.length > 0) && (

High Priority

{[...criticalInsights, ...highInsights].map((insight: any) => { const config = insightTypeConfig[insight.insightType] || insightTypeConfig.trend const Icon = config.icon return (

{insight.insightType}

{insight.impact}

{insight.title}

{insight.summary}

{/* Confidence Bar */} {insight.confidence && (

{insight.confidence}% confidence

)} {/* Related Entities */} {insight.relatedEntities && insight.relatedEntities.length > 0 && (

{insight.relatedEntities.slice(0, 3).map((entity: any) => ( ))}

)} ) })}

)} {/* All Insights */}

All Insights

{otherInsights.map((insight: any) => { const config = insightTypeConfig[insight.insightType] || insightTypeConfig.trend const Icon = config.icon return (

{config.label}

{insight.impact && ( {insight.impact} )}

{insight.title}

{insight.summary}

{/* Confidence */} {insight.confidence && (

{insight.confidence}%

)} {/* Data Points Preview */} {insight.dataPoints && insight.dataPoints.length > 0 && (

{insight.dataPoints.slice(0, 6).map((dp: any, i: number) => (

))}

)} ) })}

{insights.length === 0 && (

No insights generated yet

)}

) } [V0_FILE]typescriptreact:file="app/content/page.tsx" isMerged="true" import Link from "next/link" import { Calendar, Clock, User, Tag } from "lucide-react" import { EntityBadge } from "@/components/entity-badge" import { fetchAllContent } from "@/lib/sanity" export const revalidate = 60 const contentTypeColors: Record = { article: "bg-[oklch(0.65_0.18_250/0.2)] text-[oklch(0.65_0.18_250)]", news: "bg-[oklch(0.7_0.18_30/0.2)] text-[oklch(0.7_0.18_30)]", research: "bg-[oklch(0.65_0.2_320/0.2)] text-[oklch(0.65_0.2_320)]", caseStudy: "bg-[oklch(0.7_0.15_145/0.2)] text-[oklch(0.7_0.15_145)]", tutorial: "bg-[oklch(0.75_0.15_50/0.2)] text-[oklch(0.75_0.15_50)]", opinion: "bg-[oklch(0.7_0.12_200/0.2)] text-[oklch(0.7_0.12_200)]", } export default async function ContentPage() { const content = await fetchAllContent() // Group content by type const contentByType = content.reduce((acc: Record, item: any) => { const type = item.contentType || "article" if (!acc[type]) acc[type] = [] acc[type].push(item) return acc }, {}) return (

Content Library

Browse articles, research, and documents connected to your knowledge graph

{/* Content Type Filters */}

All ({content.length}) {Object.entries(contentByType).map(([type, items]) => ( {type.replace(/([A-Z])/g, " $1").trim()} ({(items as any[]).length}) ))}

{/* Content Grid */}

{content.map((item: any) => (

{/* Type Badge */}

{item.contentType?.replace(/([A-Z])/g, " $1").trim() || "Article"} {item.sentiment !== undefined && ( 0.3 ? "bg-[oklch(0.7_0.15_145/0.2)] text-[oklch(0.7_0.15_145)]" : item.sentiment < -0.3 ? "bg-destructive/20 text-destructive" : "bg-secondary text-muted-foreground" }`} > {item.sentiment > 0.3 ? "Positive" : item.sentiment < -0.3 ? "Negative" : "Neutral"} )}

{/* Title */}

{item.title}

{/* Excerpt */} {item.excerpt && (

{item.excerpt}

)} {/* Related Entities */} {item.relatedEntities && item.relatedEntities.length > 0 && (

{item.relatedEntities.slice(0, 3).map((entity: any) => ( ))} {item.relatedEntities.length > 3 && ( +{item.relatedEntities.length - 3} )}

)} {/* Tags */} {item.tags && item.tags.length > 0 && (

{item.tags.slice(0, 3).map((tag: string) => ( {tag} ))}

)}

{/* Footer */}

{item.author && ( {item.author} )} {item.publishedAt && ( {new Date(item.publishedAt).toLocaleDateString()} )}

{item.readingTime && ( {item.readingTime} min )}

))}

{content.length === 0 && (

No content found

)}

) } [V0_FILE]typescriptreact:file="app/playground/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Play, Copy, Check, Code2, Database, Sparkles } from "lucide-react" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" const exampleQueries = [ { name: "All Entities", description: "Fetch all entities ordered by importance", query: `*[_type == "entity"] | order(importance desc) { _id, name, entityType, importance, description }`, }, { name: "Entity Relationships", description: "Get relationships with expanded source and target", query: `*[_type == "relationship"] { _id, relationshipType, strength, "source": source->{name, entityType}, "target": target->{name, entityType} }`, }, { name: "High Impact Insights", description: "Find critical and high impact insights", query: `*[_type == "insight" && impact in ["critical", "high"]] { _id, title, insightType, impact, confidence, summary } | order(confidence desc)`, }, { name: "Content with Entities", description: "Get content with related entity references", query: `*[_type == "content"] { _id, title, contentType, publishedAt, "entities": relatedEntities[]->{name, entityType} } | order(publishedAt desc)`, }, { name: "Dashboard Stats", description: "Get aggregate counts for dashboard", query: `{ "entities": count(*[_type == "entity"]), "relationships": count(*[_type == "relationship"]), "content": count(*[_type == "content"]), "insights": count(*[_type == "insight"]) }`, }, ] export default function PlaygroundPage() { const [query, setQuery] = useState(exampleQueries[0].query) const [result, setResult] = useState(null) const [loading, setLoading] = useState(false) const [copied, setCopied] = useState(false) const [error, setError] = useState(null) const runQuery = async () => { setLoading(true) setError(null) try { const response = await fetch("/api/groq", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query }), }) if (!response.ok) { throw new Error("Query failed") } const data = await response.json() setResult(JSON.stringify(data, null, 2)) } catch (err) { setError(err instanceof Error ? err.message : "An error occurred") setResult(null) } finally { setLoading(false) } } const copyResult = () => { if (result) { navigator.clipboard.writeText(result) setCopied(true) setTimeout(() => setCopied(false), 2000) } } return (

GROQ Playground

Experiment with GROQ queries against your Sanity knowledge graph

{/* Query Editor */}

GROQ Query

setQuery(e.target.value)}
              className="min-h-[200px] resize-none rounded-none border-0 font-mono text-sm focus-visible:ring-0"
              placeholder="Enter your GROQ query..."
            />
          </div>

{/* Results */}
          <div className="rounded-lg border border-border bg-card">
            <div className="flex items-center justify-between border-b border-border px-4 py-3">
              <div className="flex items-center gap-2">
                <Database className="h-4 w-4 text-muted-foreground" />
                <span className="text-sm font-medium">Results</span>
              </div>
              {result && (
                <Button variant="ghost" size="sm" onClick={copyResult}>
                  {copied ? (
                    <Check className="mr-2 h-4 w-4 text-accent" />
                  ) : (
                    <Copy className="mr-2 h-4 w-4" />
                  )}
                  {copied ? "Copied!" : "Copy"}
                </Button>
              )}
            </div>
            <div className="max-h-[400px] overflow-auto p-4">
              {error ? (
                <p className="text-sm text-destructive">{error}</p>
              ) : result ? (
                <pre className="text-sm text-muted-foreground">
                  <code>{result}</code>
                </pre>
              ) : (
                <p className="text-sm text-muted-foreground">
                  Run a query to see results
                </p>
              )}
            </div>
          </div>
        </div>

{/* Example Queries */}
        <div className="space-y-4">
          <div className="rounded-lg border border-border bg-card p-4">
            <div className="mb-4 flex items-center gap-2">
              <Sparkles className="h-4 w-4 text-accent" />
              <span className="font-medium">Example Queries</span>
            </div>
            <div className="space-y-2">
              {exampleQueries.map((example) => (
                <button
                  key={example.name}
                  onClick={() => setQuery(example.query)}
                  className="w-full rounded-lg border border-border bg-secondary/30 p-3 text-left transition-colors hover:border-accent/50 hover:bg-secondary/50"
                >
                  <p className="font-medium">{example.name}</p>
                  <p className="text-xs text-muted-foreground">
                    {example.description}
                  </p>
                </button>
              ))}
            </div>
          </div>

{/* GROQ Tips */}
          <div className="rounded-lg border border-border bg-card p-4">
            <h3 className="mb-3 font-medium">GROQ Tips</h3>
            <ul className="space-y-2 text-sm text-muted-foreground">
              <li>
                <code className="rounded bg-secondary px-1">*[_type == ""]</code> - Query by document type
              </li>
              <li>
                <code className="rounded bg-secondary px-1">-{">"}</code> - Dereference a reference
              </li>
              <li>
                <code className="rounded bg-secondary px-1">| order()</code> - Sort results
              </li>
              <li>
                <code className="rounded bg-secondary px-1">[0...10]</code> - Slice results
              </li>
              <li>
                <code className="rounded bg-secondary px-1">count()</code> - Count documents
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="app/api/groq/route.ts" isMerged="true"
import { NextRequest, NextResponse } from "next/server"
import { sanityClient } from "@/lib/sanity"

export async function POST(request: NextRequest) {
  try {
    const { query } = await request.json()

if (!query || typeof query !== "string") {
      return NextResponse.json(
        { error: "Invalid query" },
        { status: 400 }
      )
    }

// Basic GROQ validation - check for potentially dangerous operations
    const lowerQuery = query.toLowerCase()
    if (
      lowerQuery.includes("delete") ||
      lowerQuery.includes("patch") ||
      lowerQuery.includes("create")
    ) {
      return NextResponse.json(
        { error: "Only read operations are allowed" },
        { status: 403 }
      )
    }

const result = await sanityClient.fetch(query)

return NextResponse.json(result)
  } catch (error) {
    console.error("GROQ query error:", error)
    return NextResponse.json(
      { error: error instanceof Error ? error.message : "Query failed" },
      { status: 500 }
    )
  }
}
[V0_FILE]typescriptreact:file="app/about/page.tsx" isMerged="true"
import Link from "next/link"
import {
  Network,
  Database,
  Cpu,
  Lightbulb,
  Code2,
  Layers,
  ArrowRight,
  ExternalLink,
} from "lucide-react"
import { Button } from "@/components/ui/button"

const features = [
  {
    icon: Network,
    title: "Knowledge Graph",
    description:
      "Model entities and their relationships in a flexible graph structure. Support for multiple entity types and relationship categories.",
  },
  {
    icon: Database,
    title: "Sanity-Powered",
    description:
      "Built on Sanity's composable content platform. Leverage GROQ queries, real-time updates, and structured content modeling.",
  },
  {
    icon: Lightbulb,
    title: "AI Insights",
    description:
      "Generate trends, patterns, and predictions from your knowledge graph data. Track confidence levels and impact assessments.",
  },
  {
    icon: Layers,
    title: "Content Clustering",
    description:
      "Organize content into thematic clusters. Connect articles, entities, and insights around key topics.",
  },
  {
    icon: Code2,
    title: "GROQ Playground",
    description:
      "Experiment with queries directly against your knowledge graph. Test and refine data access patterns.",
  },
  {
    icon: Cpu,
    title: "Extensible Schema",
    description:
      "Flexible schema design supports custom entity types, metadata fields, and relationship categories.",
  },
]

const techStack = [
  { name: "Next.js 15", url: "https://nextjs.org" },
  { name: "Sanity", url: "https://sanity.io" },
  { name: "Tailwind CSS", url: "https://tailwindcss.com" },
  { name: "shadcn/ui", url: "https://ui.shadcn.com" },
  { name: "TypeScript", url: "https://typescriptlang.org" },
  { name: "Vercel", url: "https://vercel.com" },
]

export default function AboutPage() {
  return (
    <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
      {/* Hero */}
      <section className="mb-16 text-center">
        <div className="mx-auto inline-flex items-center justify-center rounded-xl bg-accent/20 p-4">
          <Network className="h-10 w-10 text-accent" />
        </div>
        <h1 className="mt-6 text-4xl font-bold tracking-tight sm:text-5xl">
          About StructureOS
        </h1>
        <p className="mx-auto mt-6 max-w-2xl text-lg text-muted-foreground">
          StructureOS is a content intelligence layer built on Sanity. It provides
          a knowledge graph foundation for modeling entities, relationships, and
          AI-generated insights.
        </p>
        <div className="mt-8 flex justify-center gap-4">
          <Button asChild size="lg">
            <Link href="/graph">
              <Network className="mr-2 h-4 w-4" />
              Explore Graph
            </Link>
          </Button>
          <Button asChild variant="outline" size="lg">
            <Link href="/playground">
              Try Playground
              <ArrowRight className="ml-2 h-4 w-4" />
            </Link>
          </Button>
        </div>
      </section>

{/* Features */}
      <section className="mb-16">
        <h2 className="mb-8 text-center text-2xl font-bold">Key Features</h2>
        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {features.map((feature) => (
            <div
              key={feature.title}
              className="rounded-lg border border-border bg-card p-6"
            >
              <div className="mb-4 inline-flex rounded-lg bg-secondary p-3">
                <feature.icon className="h-6 w-6 text-accent" />
              </div>
              <h3 className="mb-2 text-lg font-semibold">{feature.title}</h3>
              <p className="text-sm text-muted-foreground">
                {feature.description}
              </p>
            </div>
          ))}
        </div>
      </section>

{/* Schema Overview */}
      <section className="mb-16">
        <div className="rounded-lg border border-border bg-card p-8">
          <h2 className="mb-6 text-2xl font-bold">Schema Architecture</h2>
          <div className="grid gap-8 md:grid-cols-2">
            <div>
              <h3 className="mb-4 text-lg font-semibold text-accent">
                Core Document Types
              </h3>
              <ul className="space-y-3">
                <li className="flex items-start gap-3">
                  <span className="rounded bg-secondary px-2 py-1 font-mono text-sm">
                    entity
                  </span>
                  <span className="text-sm text-muted-foreground">
                    Nodes in the knowledge graph (people, organizations, products, etc.)
                  </span>
                </li>
                <li className="flex items-start gap-3">
                  <span className="rounded bg-secondary px-2 py-1 font-mono text-sm">
                    relationship
                  </span>
                  <span className="text-sm text-muted-foreground">
                    Edges connecting entities with typed connections
                  </span>
                </li>
                <li className="flex items-start gap-3">
                  <span className="rounded bg-secondary px-2 py-1 font-mono text-sm">
                    content
                  </span>
                  <span className="text-sm text-muted-foreground">
                    Articles, research, and documents linked to entities
                  </span>
                </li>
                <li className="flex items-start gap-3">
                  <span className="rounded bg-secondary px-2 py-1 font-mono text-sm">
                    insight
                  </span>
                  <span className="text-sm text-muted-foreground">
                    AI-generated analysis with confidence scoring
                  </span>
                </li>
                <li className="flex items-start gap-3">
                  <span className="rounded bg-secondary px-2 py-1 font-mono text-sm">
                    contentCluster
                  </span>
                  <span className="text-sm text-muted-foreground">
                    Thematic groupings of related content and entities
                  </span>
                </li>
              </ul>
            </div>
            <div>
              <h3 className="mb-4 text-lg font-semibold text-accent">
                Entity Types
              </h3>
              <div className="grid grid-cols-2 gap-2">
                {[
                  "person",
                  "organization",
                  "product",
                  "technology",
                  "event",
                  "location",
                  "concept",
                ].map((type) => (
                  <div
                    key={type}
                    className="rounded-lg border border-border bg-secondary/30 px-3 py-2 text-sm capitalize"
                  >
                    {type}
                  </div>
                ))}
              </div>
              <h3 className="mb-4 mt-6 text-lg font-semibold text-accent">
                Relationship Types
              </h3>
              <div className="flex flex-wrap gap-2">
                {[
                  "worksAt",
                  "founded",
                  "investedIn",
                  "acquired",
                  "partnersWith",
                  "competesWith",
                  "uses",
                  "created",
                  "locatedIn",
                  "relatedTo",
                ].map((type) => (
                  <span
                    key={type}
                    className="rounded bg-secondary px-2 py-1 text-xs"
                  >
                    {type}
                  </span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Tech Stack */}
      <section className="mb-16">
        <h2 className="mb-8 text-center text-2xl font-bold">Built With</h2>
        <div className="flex flex-wrap justify-center gap-4">
          {techStack.map((tech) => (
            <a
              key={tech.name}
              href={tech.url}
              target="_blank"
              rel="noopener noreferrer"
              className="group flex items-center gap-2 rounded-lg border border-border bg-card px-4 py-3 transition-colors hover:border-accent/50"
            >
              <span className="font-medium">{tech.name}</span>
              <ExternalLink className="h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100" />
            </a>
          ))}
        </div>
      </section>

{/* CTA */}
      <section className="text-center">
        <div className="rounded-lg border border-border bg-gradient-to-b from-card to-secondary/30 p-12">
          <h2 className="mb-4 text-2xl font-bold">Ready to explore?</h2>
          <p className="mx-auto mb-8 max-w-md text-muted-foreground">
            Dive into the knowledge graph and discover connections between entities,
            content, and insights.
          </p>
          <div className="flex justify-center gap-4">
            <Button asChild size="lg">
              <Link href="/">
                Go to Dashboard
                <ArrowRight className="ml-2 h-4 w-4" />
              </Link>
            </Button>
          </div>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/graph/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescript:file="lib/sanity.ts" isMerged="true"
import { createClient } from '@sanity/client'

export const sanityClient = createClient({
  projectId: 'as3zvfs5',
  dataset: 'production',
  apiVersion: '2024-01-01',
  useCdn: false, // Disable CDN to get fresh data immediately after publishing
})

// Type definitions for our knowledge graph
export interface Entity {
  _id: string
  _type: 'entity'
  name: string
  slug: { current: string }
  entityType: 'person' | 'organization' | 'product' | 'place' | 'concept' | 'topic'
  description?: string
  image?: {
    asset: {
      _ref: string
      url?: string
    }
  }
  metadata?: {
    foundedDate?: string
    website?: string
    industry?: string
    headquarters?: string
  }
  aliases?: string[]
  tags?: string[]
  attributes?: { _ref: string }[]
  importance?: number
}

export interface Relationship {
  _id: string
  _type: 'relationship'
  source: { _ref: string } & Partial<Entity>
  target: { _ref: string } & Partial<Entity>
  relationshipType: 'relatedTo' | 'partOf' | 'hasAttribute' | 'worksAt' | 'founded' | 'investedIn' | 'acquired' | 'partnersWith' | 'competesWith' | 'uses' | 'created' | 'locatedIn' | 'influences' | 'dependsOn'
  description?: string
  strength?: number
  startDate?: string
  endDate?: string
  isActive?: boolean
}

export interface Content {
  _id: string
  _type: 'content'
  title: string
  slug: { current: string }
  contentType: 'article' | 'news' | 'research' | 'caseStudy' | 'tutorial' | 'opinion'
  excerpt?: string
  body?: any[]
  author?: string
  publishedAt?: string
  sourceUrl?: string
  relatedEntities?: ({ _ref: string } & Partial<Entity>)[]
  tags?: string[]
  sentiment?: number
  readingTime?: number
}

export interface Insight {
  _id: string
  _type: 'insight'
  title: string
  slug: { current: string }
  insightType: 'trend' | 'pattern' | 'anomaly' | 'prediction' | 'recommendation'
  summary: string
  details?: any[]
  confidence?: number
  impact?: 'low' | 'medium' | 'high' | 'critical'
  relatedEntities?: ({ _ref: string } & Partial<Entity>)[]
  relatedContent?: ({ _ref: string } & Partial<Content>)[]
  generatedAt?: string
  validUntil?: string
  dataPoints?: {
    label: string
    value: number
    date?: string
  }[]
}

export interface ContentCluster {
  _id: string
  _type: 'contentCluster'
  name: string
  slug: { current: string }
  description?: string
  theme?: string
  entities?: ({ _ref: string } & Partial<Entity>)[]
  content?: ({ _ref: string } & Partial<Content>)[]
  insights?: ({ _ref: string } & Partial<Insight>)[]
  color?: string
  priority?: number
}

// GROQ Queries
export const queries = {
  // Get all entities with optional type filter
  entities: (type?: string) => `
    *[_type == "entity"${type ? ` && entityType == "${type}"` : ''}] | order(importance desc) {
      _id,
      name,
      slug,
      entityType,
      description,
      image,
      metadata,
      aliases,
      tags,
      importance
    }
  `,

// Get single entity by slug
  entityBySlug: (slug: string) => `
    *[_type == "entity" && slug.current == "${slug}"][0] {
      _id,
      name,
      slug,
      entityType,
      description,
      image,
      metadata,
      aliases,
      tags,
      importance
    }
  `,

// Get relationships for an entity
  entityRelationships: (entityId: string) => `
    *[_type == "relationship" && (source._ref == "${entityId}" || target._ref == "${entityId}")] {
      _id,
      relationshipType,
      description,
      strength,
      startDate,
      endDate,
      isActive,
      "source": source->{_id, name, slug, entityType, importance},
      "target": target->{_id, name, slug, entityType, importance}
    }
  `,

// Get all relationships with expanded references
  allRelationships: `
    *[_type == "relationship"] {
      _id,
      relationshipType,
      description,
      strength,
      isActive,
      "source": source->{_id, name, slug, entityType, importance},
      "target": target->{_id, name, slug, entityType, importance}
    }
  `,

// Get all content (supports both 'content' and 'contentNode' types)
  allContent: `
    *[_type in ["content", "contentNode"]] | order(publishedAt desc) {
      _id,
      title,
      slug,
      contentType,
      excerpt,
      author,
      publishedAt,
      tags,
      sentiment,
      readingTime,
      "relatedEntities": relatedEntities[]->{_id, name, slug, entityType}
    }
  `,

// Get content by slug
  contentBySlug: (slug: string) => `
    *[_type in ["content", "contentNode"] && slug.current == "${slug}"][0] {
      _id,
      title,
      slug,
      contentType,
      excerpt,
      body,
      author,
      publishedAt,
      sourceUrl,
      tags,
      sentiment,
      readingTime,
      "relatedEntities": relatedEntities[]->{_id, name, slug, entityType}
    }
  `,

// Get all insights
  allInsights: `
    *[_type == "insight"] | order(generatedAt desc) {
      _id,
      title,
      slug,
      insightType,
      summary,
      confidence,
      impact,
      generatedAt,
      validUntil,
      dataPoints,
      "relatedEntities": relatedEntities[]->{_id, name, slug, entityType}
    }
  `,

// Get insight by slug
  insightBySlug: (slug: string) => `
    *[_type == "insight" && slug.current == "${slug}"][0] {
      _id,
      title,
      slug,
      insightType,
      summary,
      details,
      confidence,
      impact,
      generatedAt,
      validUntil,
      dataPoints,
      "relatedEntities": relatedEntities[]->{_id, name, slug, entityType},
      "relatedContent": relatedContent[]->{_id, title, slug, contentType}
    }
  `,

// Dashboard stats
  dashboardStats: `
    {
      "entityCount": count(*[_type == "entity"]),
      "relationshipCount": count(*[_type == "relationship"]),
      "contentCount": count(*[_type in ["content", "contentNode"]]),
      "insightCount": count(*[_type == "insight"]),
      "entityTypes": *[_type == "entity"] {entityType} | unique,
      "recentContent": *[_type in ["content", "contentNode"]] | order(publishedAt desc)[0...3] {
        _id, title, slug, contentType, publishedAt
      },
      "topInsights": *[_type == "insight" && impact in ["high", "critical"]] | order(confidence desc)[0...3] {
        _id, title, slug, insightType, impact, confidence
      }
    }
  `,
}

// Direct count helpers for dashboard
export async function getRelationshipCount(): Promise<number> {
  try {
    const result = await sanityClient.fetch(`count(*[_type == "relationship"])`)
    console.log('[v0] Direct relationship count:', result)
    return result || 0
  } catch (error) {
    console.error('[v0] Error counting relationships:', error)
    return 0
  }
}

export async function getContentCount(): Promise<number> {
  try {
    const result = await sanityClient.fetch(`count(*[_type == "contentNode"])`)
    console.log('[v0] Direct content count:', result)
    return result || 0
  } catch (error) {
    console.error('[v0] Error counting content:', error)
    return 0
  }
}

// Helper functions with error handling
export async function fetchEntities(type?: string): Promise<Entity[]> {
  try {
    const result = await sanityClient.fetch(queries.entities(type))
    return result || []
  } catch (error) {
    console.error('[v0] Error fetching entities:', error)
    return []
  }
}

export async function fetchEntityBySlug(slug: string): Promise<Entity | null> {
  try {
    return await sanityClient.fetch(queries.entityBySlug(slug))
  } catch (error) {
    console.error('[v0] Error fetching entity by slug:', error)
    return null
  }
}

export async function fetchEntityRelationships(entityId: string): Promise<Relationship[]> {
  try {
    const result = await sanityClient.fetch(queries.entityRelationships(entityId))
    return result || []
  } catch (error) {
    console.error('[v0] Error fetching entity relationships:', error)
    return []
  }
}

export async function fetchAllRelationships(): Promise<Relationship[]> {
  try {
    const result = await sanityClient.fetch(queries.allRelationships)
    return result || []
  } catch (error) {
    console.error('[v0] Error fetching all relationships:', error)
    return []
  }
}

export async function fetchAllContent(): Promise<Content[]> {
  try {
    const result = await sanityClient.fetch(queries.allContent)
    return result || []
  } catch (error) {
    console.error('[v0] Error fetching all content:', error)
    return []
  }
}

export async function fetchContentBySlug(slug: string): Promise<Content | null> {
  try {
    return await sanityClient.fetch(queries.contentBySlug(slug))
  } catch (error) {
    console.error('[v0] Error fetching content by slug:', error)
    return null
  }
}

export async function fetchAllInsights(): Promise<Insight[]> {
  try {
    const result = await sanityClient.fetch(queries.allInsights)
    return result || []
  } catch (error) {
    console.error('[v0] Error fetching all insights:', error)
    return []
  }
}

export async function fetchInsightBySlug(slug: string): Promise<Insight | null> {
  try {
    return await sanityClient.fetch(queries.insightBySlug(slug))
  } catch (error) {
    console.error('[v0] Error fetching insight by slug:', error)
    return null
  }
}

export async function fetchDashboardStats() {
  try {
    const result = await sanityClient.fetch(queries.dashboardStats)
    console.log('[v0] Dashboard stats result:', JSON.stringify(result, null, 2))
    return result
  } catch (error) {
    console.error('[v0] Error fetching dashboard stats:', error)
    return {
      entityCount: 0,
      relationshipCount: 0,
      contentCount: 0,
      insightCount: 0,
      entityTypes: [],
      recentContent: [],
      topInsights: [],
    }
  }
}

const token = process.env.SANITY_TOKEN; // Declare the token variable
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
import Link from "next/link"
import {
  Network,
  FileText,
  Lightbulb,
  ArrowRight,
  Users,
  Building2,
  Package,
  TrendingUp,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { StatCard } from "@/components/stat-card"
import { EntityBadge } from "@/components/entity-badge"
import { fetchDashboardStats, fetchEntities, fetchAllInsights, fetchAllRelationships, fetchAllContent, getRelationshipCount, getContentCount } from "@/lib/sanity"

export const revalidate = 60

export default async function DashboardPage() {
  const [stats, entities, insights, relationships, content, relCount, contentCount] = await Promise.all([
    fetchDashboardStats(),
    fetchEntities(),
    fetchAllInsights(),
    fetchAllRelationships(),
    fetchAllContent(),
    getRelationshipCount(),
    getContentCount(),
  ])

// Group entities by type
  const entityCounts = entities.reduce(
    (acc: Record<string, number>, entity: { entityType: string }) => {
      acc[entity.entityType] = (acc[entity.entityType] || 0) + 1
      return acc
    },
    {}
  )

return (
    <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
      {/* Hero Section */}
      <section className="mb-12">
        <div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
          <div className="max-w-2xl">
            <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">
              Content Intelligence Layer
            </h1>
            <p className="mt-4 text-lg text-muted-foreground">
              Explore your knowledge graph powered by Sanity. Discover entities,
              relationships, and AI-generated insights across your content ecosystem.
            </p>
          </div>
          <div className="flex flex-wrap gap-3">
            <Button asChild size="lg">
              <Link href="/graph">
                <Network className="mr-2 h-4 w-4" />
                Explore Graph
              </Link>
            </Button>
            <Button asChild variant="outline" size="lg">
              <Link href="/playground">
                Try Playground
                <ArrowRight className="ml-2 h-4 w-4" />
              </Link>
            </Button>
          </div>
        </div>
      </section>

{/* Stats Grid */}
      <section className="mb-12">
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          <StatCard
            title="Entities"
            value={stats?.entityCount || entities.length}
            description="Nodes in your knowledge graph"
            icon={Users}
          />
          <StatCard
            title="Relationships"
            value={stats?.relationshipCount || relCount || relationships.length}
            description="Connections between entities"
            icon={Network}
          />
          <StatCard
            title="Content"
            value={stats?.contentCount || contentCount || content.length}
            description="Articles and documents"
            icon={FileText}
          />
          <StatCard
            title="Insights"
            value={stats?.insightCount || insights.length}
            description="AI-generated analysis"
            icon={Lightbulb}
          />
        </div>
      </section>

{/* Entity Distribution */}
      <section className="mb-12">
        <div className="rounded-lg border border-border bg-card p-6">
          <h2 className="mb-6 text-xl font-semibold">Entity Distribution</h2>
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            {Object.entries(entityCounts).map(([type, count]) => (
              <Link
                key={type}
                href={`/graph?type=${type}`}
                className="group flex items-center justify-between rounded-lg border border-border bg-secondary/30 p-4 transition-colors hover:border-accent/50 hover:bg-secondary/50"
              >
                <div className="flex items-center gap-3">
                  <EntityBadge
                    type={type as any}
                    showLabel={false}
                    size="lg"
                  />
                  <span className="font-medium capitalize">{type}s</span>
                </div>
                <span className="text-2xl font-semibold text-muted-foreground group-hover:text-foreground">
                  {count as number}
                </span>
              </Link>
            ))}
          </div>
        </div>
      </section>

{/* Two Column Layout */}
      <div className="grid gap-6 lg:grid-cols-2">
        {/* Top Entities */}
        <section>
          <div className="rounded-lg border border-border bg-card p-6">
            <div className="mb-4 flex items-center justify-between">
              <h2 className="text-xl font-semibold">Top Entities</h2>
              <Button asChild variant="ghost" size="sm">
                <Link href="/graph">
                  View all
                  <ArrowRight className="ml-1 h-3 w-3" />
                </Link>
              </Button>
            </div>
            <div className="space-y-3">
              {entities.slice(0, 5).map((entity: any) => (
                <Link
                  key={entity._id}
                  href={`/graph/${entity.slug?.current}`}
                  className="flex items-center justify-between rounded-lg border border-border bg-secondary/30 p-4 transition-colors hover:border-accent/50 hover:bg-secondary/50"
                >
                  <div className="flex items-center gap-3">
                    <EntityBadge
                      type={entity.entityType}
                      showLabel={false}
                      size="sm"
                    />
                    <div>
                      <p className="font-medium">{entity.name}</p>
                      <p className="text-sm text-muted-foreground line-clamp-1">
                        {entity.description?.slice(0, 60)}...
                      </p>
                    </div>
                  </div>
                  {entity.importance && (
                    <div className="flex items-center gap-1 text-sm text-muted-foreground">
                      <TrendingUp className="h-3 w-3" />
                      {entity.importance}
                    </div>
                  )}
                </Link>
              ))}
            </div>
          </div>
        </section>

{/* Recent Insights */}
        <section>
          <div className="rounded-lg border border-border bg-card p-6">
            <div className="mb-4 flex items-center justify-between">
              <h2 className="text-xl font-semibold">Latest Insights</h2>
              <Button asChild variant="ghost" size="sm">
                <Link href="/insights">
                  View all
                  <ArrowRight className="ml-1 h-3 w-3" />
                </Link>
              </Button>
            </div>
            <div className="space-y-3">
              {insights.slice(0, 5).map((insight: any) => (
                <Link
                  key={insight._id}
                  href={`/insights/${insight.slug?.current}`}
                  className="block rounded-lg border border-border bg-secondary/30 p-4 transition-colors hover:border-accent/50 hover:bg-secondary/50"
                >
                  <div className="mb-2 flex items-center gap-2">
                    <span
                      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
                        insight.impact === "critical"
                          ? "bg-destructive/20 text-destructive"
                          : insight.impact === "high"
                            ? "bg-[oklch(0.75_0.15_50/0.2)] text-[oklch(0.75_0.15_50)]"
                            : "bg-secondary text-muted-foreground"
                      }`}
                    >
                      {insight.impact || "medium"}
                    </span>
                    <span className="text-xs text-muted-foreground capitalize">
                      {insight.insightType}
                    </span>
                  </div>
                  <p className="font-medium">{insight.title}</p>
                  <p className="mt-1 text-sm text-muted-foreground line-clamp-2">
                    {insight.summary}
                  </p>
                  {insight.confidence && (
                    <div className="mt-2 flex items-center gap-2">
                      <div className="h-1.5 flex-1 rounded-full bg-secondary">
                        <div
                          className="h-full rounded-full bg-accent"
                          style={{ width: `${insight.confidence}%` }}
                        />
                      </div>
                      <span className="text-xs text-muted-foreground">
                        {insight.confidence}%
                      </span>
                    </div>
                  )}
                </Link>
              ))}
            </div>
          </div>
        </section>
      </div>

{/* Feature Cards */}
      <section className="mt-12">
        <h2 className="mb-6 text-xl font-semibold">Explore StructureOS</h2>
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          <Link
            href="/graph"
            className="group rounded-lg border border-border bg-card p-6 transition-colors hover:border-accent/50"
          >
            <div className="mb-4 inline-flex rounded-lg bg-secondary p-3">
              <Network className="h-6 w-6 text-accent" />
            </div>
            <h3 className="mb-2 text-lg font-semibold">Graph Explorer</h3>
            <p className="text-sm text-muted-foreground">
              Visualize your knowledge graph with interactive node-link diagrams.
              Explore relationships and connections between entities.
            </p>
          </Link>

<Link
            href="/content"
            className="group rounded-lg border border-border bg-card p-6 transition-colors hover:border-accent/50"
          >
            <div className="mb-4 inline-flex rounded-lg bg-secondary p-3">
              <FileText className="h-6 w-6 text-accent" />
            </div>
            <h3 className="mb-2 text-lg font-semibold">Content Library</h3>
            <p className="text-sm text-muted-foreground">
              Browse articles, research, and documents. See how content connects
              to entities in your knowledge graph.
            </p>
          </Link>

<Link
            href="/insights"
            className="group rounded-lg border border-border bg-card p-6 transition-colors hover:border-accent/50"
          >
            <div className="mb-4 inline-flex rounded-lg bg-secondary p-3">
              <Lightbulb className="h-6 w-6 text-accent" />
            </div>
            <h3 className="mb-2 text-lg font-semibold">AI Insights</h3>
            <p className="text-sm text-muted-foreground">
              Discover trends, patterns, and predictions generated from your
              knowledge graph data.
            </p>
          </Link>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/navigation.tsx" isMerged="true"
"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { cn } from "@/lib/utils"
import {
  Network,
  FileText,
  Lightbulb,
  Play,
  Info,
  LayoutDashboard,
  Menu,
  X,
} from "lucide-react"
import { useState } from "react"
import { Button } from "@/components/ui/button"

const navItems = [
  { href: "/", label: "Dashboard", icon: LayoutDashboard },
  { href: "/graph", label: "Graph Explorer", icon: Network },
  { href: "/content", label: "Content", icon: FileText },
  { href: "/insights", label: "Insights", icon: Lightbulb },
  { href: "/playground", label: "Playground", icon: Play },
  { href: "/about", label: "About", icon: Info },
]

export function Navigation() {
  const pathname = usePathname()
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

return (
    <header className="sticky top-0 z-50 w-full border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="mx-auto flex h-14 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
        {/* Logo */}
        <div className="flex items-center gap-1">
          <Link href="/" className="flex items-center gap-2">
            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-accent">
              <Network className="h-4 w-4 text-accent-foreground" />
            </div>
            <span className="text-lg font-semibold tracking-tight">StructureOS</span>
          </Link>
          <span className="text-xs text-muted-foreground">by</span>
          <a
            href="https://www.3200.PRO"
            target="_blank"
            rel="noopener noreferrer"
            className="text-sm font-semibold text-accent hover:underline"
          >
            3200.PRO
          </a>
        </div>

{/* Desktop Navigation */}
        <nav className="hidden items-center gap-1 md:flex">
          {navItems.map((item) => {
            const isActive = pathname === item.href || 
              (item.href !== "/" && pathname.startsWith(item.href))
            return (
              <Link
                key={item.href}
                href={item.href}
                className={cn(
                  "flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors",
                  isActive
                    ? "bg-secondary text-foreground"
                    : "text-muted-foreground hover:bg-secondary/50 hover:text-foreground"
                )}
              >
                <item.icon className="h-4 w-4" />
                {item.label}
              </Link>
            )
          })}
        </nav>

{/* Mobile Menu Button */}
        <Button
          variant="ghost"
          size="icon"
          className="md:hidden"
          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
        >
          {mobileMenuOpen ? (
            <X className="h-5 w-5" />
          ) : (
            <Menu className="h-5 w-5" />
          )}
          <span className="sr-only">Toggle menu</span>
        </Button>
      </div>

{/* Mobile Navigation */}
      {mobileMenuOpen && (
        <nav className="border-t border-border bg-background px-4 py-4 md:hidden">
          <div className="flex flex-col gap-2">
            {navItems.map((item) => {
              const isActive = pathname === item.href || 
                (item.href !== "/" && pathname.startsWith(item.href))
              return (
                <Link
                  key={item.href}
                  href={item.href}
                  onClick={() => setMobileMenuOpen(false)}
                  className={cn(
                    "flex items-center gap-3 rounded-md px-3 py-2.5 text-sm font-medium transition-colors",
                    isActive
                      ? "bg-secondary text-foreground"
                      : "text-muted-foreground hover:bg-secondary/50 hover:text-foreground"
                  )}
                >
                  <item.icon className="h-4 w-4" />
                  {item.label}
                </Link>
              )
            })}
          </div>
        </nav>
      )}
    </header>
  )
}
[V0_FILE]typescriptreact:file="app/graph/page.tsx"
import { Suspense } from "react"
import Link from "next/link"
import { Search, Check } from "lucide-react"
import { Input } from "@/components/ui/input"
import { EntityBadge, getEntityColor } from "@/components/entity-badge"
import { fetchEntities, fetchAllRelationships } from "@/lib/sanity"
import { GraphVisualization } from "@/components/graph-visualization"

export const revalidate = 60

interface GraphPageProps {
  searchParams: Promise<{ types?: string; q?: string }>
}

export default async function GraphPage({ searchParams }: GraphPageProps) {
  const params = await searchParams
  const typesParam = params.types
  const q = params.q

// Parse comma-separated types into array
  const selectedTypes = typesParam ? typesParam.split(",").filter(Boolean) : []

// Fetch all entities (we'll filter client-side for multi-select)
  const [allEntities, relationships] = await Promise.all([
    fetchEntities(),
    fetchAllRelationships(),
  ])

// Filter entities by selected types (if any)
  let entities = selectedTypes.length > 0
    ? allEntities.filter((e) => selectedTypes.includes(e.entityType))
    : allEntities

// Filter entities by search query if provided
  const filteredEntities = q
    ? entities.filter(
        (e) =>
          e.name.toLowerCase().includes(q.toLowerCase()) ||
          e.description?.toLowerCase().includes(q.toLowerCase())
      )
    : entities

const entityTypes = [
    "person",
    "organization",
    "product",
    "place",
    "concept",
    "topic",
  ] as const

// Color mapping for entity types
  const entityColors: Record<string, string> = {
    person: "oklch(0.7 0.18 250)",
    organization: "oklch(0.7 0.15 145)",
    product: "oklch(0.75 0.15 50)",
    place: "oklch(0.7 0.12 200)",
    concept: "oklch(0.65 0.15 280)",
    topic: "oklch(0.65 0.2 320)",
  }

// Helper to generate URL with toggled type
  function getTypeToggleUrl(typeItem: string): string {
    const newTypes = selectedTypes.includes(typeItem)
      ? selectedTypes.filter((t) => t !== typeItem)
      : [...selectedTypes, typeItem]
    
    const params = new URLSearchParams()
    if (newTypes.length > 0) {
      params.set("types", newTypes.join(","))
    }
    if (q) {
      params.set("q", q)
    }
    const queryString = params.toString()
    return `/graph${queryString ? `?${queryString}` : ""}`
  }

return (
    <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
      <div className="mb-8">
        <h1 className="text-3xl font-bold tracking-tight">Graph Explorer</h1>
        <p className="mt-2 text-muted-foreground">
          Explore entities and their relationships in your knowledge graph
        </p>
      </div>

{/* Filters */}
      <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div className="flex flex-wrap gap-2">
          <Link
            href={q ? `/graph?q=${q}` : "/graph"}
            className={`rounded-md px-3 py-1.5 text-sm font-medium transition-colors ${
              selectedTypes.length === 0
                ? "bg-accent text-accent-foreground"
                : "bg-secondary text-muted-foreground hover:text-foreground"
            }`}
          >
            All
          </Link>
          {entityTypes.map((typeItem) => {
            const isSelected = selectedTypes.includes(typeItem)
            const color = entityColors[typeItem]
            return (
              <Link
                key={typeItem}
                href={getTypeToggleUrl(typeItem)}
                className={`flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium capitalize transition-colors ${
                  isSelected
                    ? "text-white border-2"
                    : "bg-secondary text-muted-foreground hover:text-foreground"
                }`}
                style={{
                  backgroundColor: isSelected ? `color-mix(in oklch, ${color} 20%)` : undefined,
                  borderColor: isSelected ? color : undefined,
                  color: isSelected ? color : undefined,
                }}
              >
                {isSelected && <Check className="h-3.5 w-3.5" />}
                {typeItem}s
              </Link>
            )
          })}
        </div>
        <form className="relative w-full sm:w-64">
          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
          <Input
            name="q"
            placeholder="Search entities..."
            defaultValue={q}
            className="pl-9"
          />
          {selectedTypes.length > 0 && (
            <input type="hidden" name="types" value={selectedTypes.join(",")} />
          )}
        </form>
      </div>

{/* Graph Visualization */}
      <div className="mb-8">
        <Suspense
          fallback={
            <div className="flex h-[500px] items-center justify-center rounded-lg border border-border bg-card">
              <p className="text-muted-foreground">Loading graph...</p>
            </div>
          }
        >
          <GraphVisualization
            entities={filteredEntities}
            relationships={relationships}
          />
        </Suspense>
      </div>

{/* Entity List */}
      <div className="rounded-lg border border-border bg-card p-6">
        <h2 className="mb-4 text-xl font-semibold">
          Entities ({filteredEntities.length})
        </h2>
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {filteredEntities.map((entity: any) => (
            <Link
              key={entity._id}
              href={`/graph/${entity.slug?.current}`}
              className="group rounded-lg border border-border bg-secondary/30 p-4 transition-colors hover:border-accent/50 hover:bg-secondary/50"
            >
              <div className="mb-2 flex items-center justify-between">
                <EntityBadge type={entity.entityType} size="sm" />
                {entity.importance && (
                  <span className="text-sm text-muted-foreground">
                    {entity.importance}
                  </span>
                )}
              </div>
              <h3 className="font-medium group-hover:text-accent">
                {entity.name}
              </h3>
              {entity.description && (
                <p className="mt-1 text-sm text-muted-foreground line-clamp-2">
                  {entity.description}
                </p>
              )}
              {entity.tags && entity.tags.length > 0 && (
                <div className="mt-2 flex flex-wrap gap-1">
                  {entity.tags.slice(0, 3).map((tag: string) => (
                    <span
                      key={tag}
                      className="rounded bg-secondary px-1.5 py-0.5 text-xs text-muted-foreground"
                    >
                      {tag}
                    </span>
                  ))}
                </div>
              )}
            </Link>
          ))}
        </div>
      </div>
    </div>
  )
}</article></body></html>